@extends('layouts.kaiadmin.master')

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Usuarios para Asignación de Servicios</h3>
        </div>
        <div class="card-body">
            <table id="usuarios-table" class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Correo Electrónico</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($usuarios as $usuario)
                        <tr>
                            <td>{{ $usuario->name }}</td>
                            <td>{{ $usuario->email }}</td>
                            <td>
                                <button class="btn btn-sm btn-primary asignar-btn" data-user-id="{{ $usuario->id }}">
                                    <i class="fas fa-tasks"></i> Asignar Servicios
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script>
$(document).ready(function () {
    $('#usuarios-table').DataTable({
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json'
        }
    });

    // Usar delegación de eventos para manejar botones dinámicos
    $(document).on('click', '.asignar-btn', function () {
        const userId = $(this).data('user-id');
        
        // Mostrar loader mientras se carga
        Swal.fire({
            title: 'Cargando...',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        fetch(`/usuarios/${userId}/servicios`, {
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                if (response.status === 404) {
                    return response.json().then(data => Promise.reject(data));
                }
                throw new Error('Error en la respuesta del servidor');
            }
            return response.json();
        })
        .then(data => {
            Swal.close();
            
            // Caso cuando no hay UsrUsuario asociado
            if (data.error && data.no_services) {
                Swal.fire({
                    title: 'Usuario no encontrado',
                    text: data.details || 'No existe información de servicios para este usuario.',
                    icon: 'error',
                    confirmButtonText: 'Entendido'
                });
                return;
            }
            
            // Caso cuando no hay servicios disponibles
            if (data.no_services) {
                Swal.fire({
                    title: 'Sin servicios disponibles',
                    text: data.message || 'Este usuario no tiene servicios asociados.',
                    icon: 'info',
                    confirmButtonText: 'Entendido'
                });
                return;
            }
            
            // Caso cuando sí hay servicios
            let html = data.map(servicio => `
                <div class="mb-3 text-start border-bottom pb-2">
                    <strong>${servicio.UsrSerNombreUsuario || 'Servicio sin nombre'}</strong><br>
                    <strong>${servicio.UsrSerCodigo}</strong><br>
                    <small><b>DPI:</b> ${servicio.UsrDpi}</small><br>
                    <button class="btn btn-success btn-sm mt-2 asignar-servicio-btn"
                            data-id="${servicio.UsrSerCodigo}" data-user-id="${userId}">
                        Asignar
                    </button>
                </div>
            `).join('');

            Swal.fire({
                title: 'Asignar Servicios',
                html: html,
                width: '600px',
                showConfirmButton: false,
                didOpen: () => {
                    document.querySelectorAll('.asignar-servicio-btn').forEach(btn => {
                        btn.addEventListener('click', function () {
                            const servicioId = this.dataset.id;
                            const userId = this.dataset.userId;

                            // Mostrar loader durante la asignación
                            Swal.fire({
                                title: 'Asignando...',
                                allowOutsideClick: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });

                            fetch("{{ route('servicio.asignar') }}", {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json'
                                },
                                body: JSON.stringify({
                                    UsrSerCodigo: servicioId,
                                    user_id: userId
                                })
                            })
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('Error en la respuesta');
                                }
                                return response.json();
                            })
                            .then(data => {
                                Swal.close();
                                if (data.success) {
                                    Swal.fire({
                                        title: 'Asignado',
                                        text: 'Servicio asignado correctamente.',
                                        icon: 'success',
                                        confirmButtonText: 'Entendido'
                                    });
                                } else {
                                    Swal.fire({
                                        title: 'Error',
                                        text: data.error || 'Ocurrió un error.',
                                        icon: 'error',
                                        confirmButtonText: 'Entendido'
                                    });
                                }
                            })
                            .catch(error => {
                                Swal.close();
                                Swal.fire({
                                    title: 'Error',
                                    text: 'No se pudo completar la asignación: ' + error.message,
                                    icon: 'error',
                                    confirmButtonText: 'Entendido'
                                });
                            });
                        });
                    });
                }
            });
        })
        .catch(error => {
            Swal.close();
            if (error.no_services) {
                Swal.fire({
                    title: 'Sin servicios',
                    text: error.message || 'No hay servicios disponibles para este usuario.',
                    icon: 'info',
                    confirmButtonText: 'Entendido'
                });
            } else {
                Swal.fire({
                    title: 'Error',
                    text: 'No se pudieron cargar los servicios: ' + (error.message || 'Error desconocido'),
                    icon: 'error',
                    confirmButtonText: 'Entendido'
                });
            }
            console.error('Error:', error);
        });
    });
});
</script>
@endpush