@extends('layouts.page')

@section('title', 'Usuarios')

@section('content_header')

    <div class="col-sm-6 d-flex align-items-center">
        <h1 class="m-0  px-3">Usuarios</h1>
        <button class="border border-success rounded-circle bg-success" id="abrirModal" data-toggle="modal" data-target="#createuser"><i class="fa-solid fa-plus"></i></button>
    </div>

@endsection
@section('content')
{{-- @include('layouts.components.flash-message') --}}
<div id="estadoalerta" style="display: none; width: 100%">
    <div class="alert alert-success rounded-pill d-flex items-center justify-content-center" role="alert">
        <div class="d-flex text-white align-items-center">
            <i class="fa-solid fa-face-smile me-4 px-3"></i>
            <div>
                <span class="text-white">Estado actualizado correctamente!</span>
            </div>
        </div>
    </div>
</div>
<livewire:users-table />
@include('users.crear')
<div id="editmodal"></div>

<!-- Modal eliminar -->
<div class="modal fade" id="deletedModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
          <div class="d-flex justify-content-center">
            <img src="img/alerta.png" alt="alerta" width="80 px">
          </div>
          <div class="d-flex items-center" style="text-align: center; font-weight: bold;">
            <h2>¿Desea eliminar este registro permanentemente?</h2>
          </div>
          <div class="d-flex justify-content-center mt-3">
            <h5>¡No podras revertir esto!</h5>
          </div>
      </div>
      <form id="fmrEliminar" method="POST">
        @csrf @method('DELETE')
      <div class="d-flex justify-content-center my-4">
        <button type="button" class="btn btn-secondary mx-3" data-dismiss="modal">Cancelar</button>
        <button type="submit" class="btn btn-primary">Si, Borrarlo!</button>
      </div>
      </form>
    </div>
  </div>
</div>

@endsection

@section('css')

@endsection
@section('js')

    @if ($errors->any())
         document.querySelector('#abrirModal').click();
    @endif

    function editUser(id){
        var url = "{{ route('user.index') }}";
        url = url+'/'+id+'/edit';

        $.get(url, function(user){
            $('#editmodal').html(user);
            $('#edituser').modal('toggle');
        });
    }
    function deletedUser(id){
        var url = "{{ route('user.index') }}";
        url = url+'/'+id;
        $("#fmrEliminar").attr("action",url);
        $('#deletedModal').modal('toggle');
    }

    function estadoUser(id){
        var url = "{{ route('user.index') }}";
        url = url+'/'+'estado/'+id;

        $.get(url, function(user){
            console.log(user);
            $('#estadoalerta').css("display", "inline-block");
            setTimeout(function(){
                $('#estadoalerta').css("display", "none");
            }, 3000);
        });
    }

    $('.modal').on('hidden.bs.modal', function(){
        $(this).find('form')[0].reset();
    });

@endsection