@extends('adminlte::page')

@section('title', 'USUARIOS')

@section('content_header')
<style>
    .btn-container {
        display: flex;
        gap: 10px; /* Espacio entre los botones */
    }
    .btn-container form {
        margin: 0; /* Elimina el margen del formulario */
    }
</style>
@stop

@section('content')
<x-adminlte-card title="REGISTRO DE USUARIOS" class="m-2" theme="dark" icon="fas fa-id-card">
    <div class="col-12">
        <div class="row">
            <div class="col-12">
                <div class="card-body">
                    <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
                        <div class="col-sm-12">
                            <table id="tabla_usuarios" class="table table-hover align-middle dataTable dtr-inline collapsed" aria-describedby="example1_info">
                                <thead class="text-center px-2 py-2 text-nowrap bg-gray">
                                    <tr>
                                        <th>N°</th>
                                        <th>NOMBRE</th>
                                        <th>USERNAME</th>
                                        <th>DNI</th>
                                        <th>ESTADO</th>
                                        <th>ROL</th>
                                        <th>EMAIL</th>
                                        <th>ACCIONES</th>
                                    </tr>
                                </thead>
                                @empty($usuarios)
                                    <tr>
                                        <td colspan="10" class="text-center">No hay usuarios registrados</td>
                                    </tr>
                                @else
                                <tbody>
                                    @php
                                        $contador = 1;
                                    @endphp
                                    @foreach ($usuarios as $usuario)
                                        <tr>
                                            <td>{{ $contador }}</td>
                                            <td>{{ $usuario->name }}</td>
                                            <td>{{ $usuario->username }}</td>
                                            <td>{{ $usuario->dni }}</td>
                                            <td class="text-center">
                                                @if($usuario->estado == '1')
                                                    <i class="far fa-check-circle" style="color:green;"></i>
                                                @else
                                                    <i class="far fa-times-circle" style="color:red;"></i>
                                                @endif
                                            </td>
                                            <td>
                                                @if($usuario->rol == 'admin')
                                                    <span class="badge bg-warning">ADMINISTRADOR</span>
                                                @elseif($usuario->rol == 'user')
                                                    <span class="badge bg-secondary">USUARIO</span>
                                                @else
                                                    <span class="badge bg-info">ROOT</span>
                                                @endif
                                            </td>
                                            <td>{{ $usuario->email }}</td>
                                            <td class="btn-container">
                                                <button class="btn btn-warning btnEdit" title="EDITAR" name="btnEdit" id="btnEdit" data-id="{{ $usuario->id }}" data-toggle="modal" data-target="#usuarioEdit">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                            
                                                <!-- <form action="{{ url('usuarios/destroy',$usuario->id) }}" method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" title="ELIMINAR" class="btn btn-danger">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form> -->
                                                <form action="{{ url('usuarios/destroy',$usuario->id) }}" id="delete-form-{{ $usuario->id }}" method="POST" style="display: none;">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                                <button class="btn btn-danger" type="button" title="ELIMINAR" onclick="confirmDelete({{ $usuario->id }})">
                                                    <i class="fas fa-trash"></i>
                                                </button>

                                                <form action="{{ url('resetpass',$usuario->id) }}" method="POST">
                                                    @csrf
                                                    @method('POST')
                                                    <button type="submit" title="RESTABLECER" class="btn btn-info">
                                                        <i class="fas fa-key"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>

                                        @php
                                            $contador++;
                                        @endphp
                                    @endforeach
                                </tbody>
                                @endempty
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-adminlte-card>
@include('administracion.usuarios.modalEdit')
@include('administracion.usuarios.modalCreate')

@stop

@section('css')
@stop

@section('js')

<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->

<script>

    $(document).ready(function() {
        $(document).on('click','.btnEdit',function(){
            var idUser = $(this).data('id');
            var url = 'usuarios/update/'+idUser ;

            // Hacer una solicitud AJAX para obtener los datos del vehículo
            $.ajax({
                url: 'usuarios/edit/'+idUser,
                method: 'GET',
                success: function(response) {
                    // Actualizar el formulario del modal con los datos recibidos
                    $('#formEdit').attr('action', url);
                    $('#formEdit').find('input[name="_method"]').val('POST'); // Asegúrate de que el método sea PUT

                    $('#nameEdit').val(response['name']);
                    $('#usernameEdit').val(response['username']);
                    $('#dniEdit').val(response['dni']);
                    $('#rolEdit').val(response['rol']);

                    // Asegúrate de que el valor exista en las opciones del select
                    if ($('#rolEdit option[value="' + response['rol'] + '"]').length > 0) {
                        $('#rolEdit').val(response['rol']);
                    } else {
                        // Si no existe, selecciona la primera opción
                        $('#rolEdit').val($('#rolEdit option:second').val());
                    }
                    $('#emailEdit').val(response['email']);
                    // Actualiza otros campos según los datos recibidos
                    
                }
            });
        });
    });

    function confirmDelete(id) {
        Swal.fire({
            title: '¿Estás seguro?',
            text: "No podrás revertir esta acción",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí, eliminarlo',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        })
    }

</script>

@if(session('store') == 'ok')
    <script>
        Swal.fire(
        'Exito!',
        'El usuario se registro correctamente',
        'success'
        );
    </script>
@endif

@if(session('store') == 'fail')
    <script>
        Swal.fire(
        'Error!',
        'El usuario no se pudo registrar',
        'error'
        );
    </script>
@endif

@if(session('update') == 'ok')
    <script>
        Swal.fire(
        'Exito!',
        'El usuario se actualizo correctamente',
        'success'
        );
    </script>
@endif

@if(session('update') == 'fail')
    <script>
        Swal.fire(
        'Error!',
        'El usuario no se pudo actualizar',
        'error'
        );
    </script>
@endif

@if(session('delete') == 'ok')
    <script>
        Swal.fire(
        'Exito!',
        'El usuario se elimino correctamente',
        'success'
        );
    </script>
@endif

@if(session('delete') == 'fail')
    <script>
        Swal.fire(
        'Error!',
        'El usuario no se pudo eliminar',
        'error'
        );
    </script>
@endif

@if(session('user') == 'reset')
    <script>
        Swal.fire(
        'Exito!',
        'La contraseña se restablecio correctamente',
        'success'
        );
    </script>
@endif

@if(session('user') == 'error')
    <script>
        Swal.fire(
        'Error!',
        'La contraseña no se pudo restablecer',
        'error'
        );
    </script>
@endif

@stop