@extends('layouts.kaiadmin.master')

@section('title', 'Itinerarios por Lector')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="m-0 text-dark"><i class="fas fa-route mr-2"></i>Filtrar Itinerarios por Lector</h1>
    </div>
@stop

@section('content')
<div class="card card-primary card-outline">
    <div class="card-header bg-gradient-primary">
        <h3 class="card-title text-white">
            <i class="fas fa-filter mr-1"></i>Filtros de Búsqueda
        </h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool text-white" data-card-widget="collapse">
                <i class="fas fa-minus"></i>
            </button>
        </div>
    </div>

    <div class="card-body">
        <div class="row">
            <div class="col-md-8">
                <div class="form-group">
                    <label for="lectorSelect" class="font-weight-bold">
                        <i class="fas fa-user-tie mr-1"></i>Seleccionar Lector
                    </label>
                    <select id="lectorSelect" class="form-control select2" style="width: 100%;">
                        <option value="">-- Selecciona un lector --</option>
                        @foreach ($lectores as $lector)
                            <option value="{{ $lector->id }}">{{ $lector->nombrelector }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <button id="btnAsignar" class="btn btn-success btn-block elevation-2">
                    <i class="fas fa-calendar-check mr-2"></i>Asignar Fechas
                </button>
            </div>
        </div>
    </div>
</div>

<div class="card card-primary card-outline">
    <div class="card-header">
        <h3 class="card-title">
            <i class="fas fa-table mr-1"></i>Resultados de Itinerarios
        </h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="maximize">
                <i class="fas fa-expand"></i>
            </button>
        </div>
    </div>

    <div class="card-body">
        <div id="loading" class="text-center py-5" style="display: none;">
            <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Cargando...</span>
            </div>
            <p class="mt-2 text-muted">Buscando itinerarios...</p>
        </div>
        
        <div class="table-responsive" id="resultsContainer" style="display: none;">
            <table class="table table-hover table-striped table-bordered" id="tablaItinerarios">
                <thead class="thead-light">
                    <tr>
                        <th class="bg-primary text-white">ID</th>
                        <th class="bg-primary text-white">Itinerario</th>
                        <th class="bg-primary text-white">Inicio</th>
                        <th class="bg-primary text-white">Fin</th>
                        <th class="bg-primary text-white">Orden Lectura</th>
                        <th class="bg-primary text-white">Ruta</th>
                        <th class="bg-primary text-white">Fecha Asignación</th>
                    </tr>
                </thead>
                <tbody>
                    {{-- Dinámico con JS --}}
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="card-footer text-muted">
        <small class="float-right">
            <i class="fas fa-info-circle mr-1"></i>Total de itinerarios: <span id="totalItinerarios">0</span>
        </small>
    </div>
</div>
@stop

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <style>
        .select2-container--default .select2-selection--single {
            border-radius: 0.25rem;
            height: calc(2.25rem + 2px);
            padding: 0.375rem 0.75rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 2.25rem;
        }
        .card-primary.card-outline {
            border-top: 3px solid #007bff;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
        }
        .table-hover tbody tr:hover {
            background-color: rgba(0, 123, 255, 0.05);
        }
        .fila-duplicada {
            background-color: #f8d7da !important;
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0% { background-color: #f8d7da; }
            50% { background-color: #f5b5c1; }
            100% { background-color: #f8d7da; }
        }
        .bg-gradient-primary {
            background: linear-gradient(87deg, #007bff 0, #0062cc 100%) !important;
        }
    </style>
@stop

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        let tabla;

        $(document).ready(function () {
            // Inicializar Select2 con búsqueda
            $('#lectorSelect').select2({
                placeholder: "Buscar lector...",
                allowClear: true
            });

            // Inicializar DataTable con configuración mejorada
            tabla = $('#tablaItinerarios').DataTable({
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json'
                },
                dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>' +
                     '<"row"<"col-sm-12"tr>>' +
                     '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
                pageLength: 10,
                responsive: true,
                order: [[1, 'asc']],
                columns: [
                    { data: 'id', className: 'text-center' },
                    { data: 'itinerario', className: 'font-weight-bold' },
                    { data: 'inicio' },
                    { data: 'fin' },
                    { data: 'ordenlectura', className: 'text-center' },
                    { data: 'itinerariosRutas_id', className: 'text-center' },
                    {
                        data: null,
                        render: function (data, type, row, meta) {
                            return `<div class="input-group">
                                <input type="date" class="form-control fechaIndividual" data-id="${row.id}" />
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                </div>
                            </div>`;
                        },
                        className: 'text-center'
                    }
                ],
                initComplete: function() {
                    $('.dataTables_filter input').addClass('form-control-sm');
                    $('.dataTables_length select').addClass('form-control-sm');
                }
            });

            // Evento para cambiar de lector
            $('#lectorSelect').on('change', function () {
                const lectorId = $(this).val();
                const $loading = $('#loading');
                const $results = $('#resultsContainer');

                $results.hide();
                tabla.clear().draw();
                $('#totalItinerarios').text('0');

                if (lectorId) {
                    $loading.show();

                    $.ajax({
                        url: `/itinerariosbases/por-lector/${lectorId}`,
                        method: 'GET',
                        dataType: 'json',
                        success: function (data) {
                            if (data.length > 0) {
                                tabla.clear().rows.add(data).draw();
                                $('#totalItinerarios').text(data.length);
                                $results.fadeIn();
                            } else {
                                Swal.fire({
                                    icon: 'info',
                                    title: 'Sin resultados',
                                    text: 'No se encontraron itinerarios para este lector.',
                                    showConfirmButton: false,
                                    timer: 2000
                                });
                            }
                        },
                        error: function () {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Ocurrió un error al obtener los itinerarios.',
                                confirmButtonColor: '#007bff'
                            });
                        },
                        complete: function () {
                            $loading.hide();
                        }
                    });
                }
            });

            // Evento para asignar fechas
            $('#btnAsignar').on('click', function () {
                const lectorId = $('#lectorSelect').val();
                const datosTabla = tabla.rows().data().toArray();

                if (!lectorId) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Lector no seleccionado',
                        text: 'Por favor selecciona un lector antes de continuar.',
                        confirmButtonColor: '#007bff'
                    });
                    return;
                }

                if (datosTabla.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Sin datos',
                        text: 'No hay itinerarios para asignar.',
                        confirmButtonColor: '#007bff'
                    });
                    return;
                }

                let datosAEnviar = [];
                let fechasFaltantes = 0;

                $('#tablaItinerarios tbody tr').each(function () {
                    const fecha = $(this).find('.fechaIndividual').val();
                    const rowData = tabla.row(this).data();

                    if (fecha) {
                        datosAEnviar.push({
                            lector_id: lectorId,
                            fecha: fecha,
                            base: rowData
                        });
                    } else {
                        fechasFaltantes++;
                    }
                });

                if (datosAEnviar.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Fechas requeridas',
                        text: 'Debes ingresar al menos una fecha válida para continuar.',
                        confirmButtonColor: '#007bff'
                    });
                    return;
                }

                if (fechasFaltantes > 0) {
                    Swal.fire({
                        icon: 'question',
                        title: 'Fechas faltantes',
                        html: `Hay ${fechasFaltantes} itinerarios sin fecha asignada. ¿Deseas continuar solo con los que tienen fecha?`,
                        showCancelButton: true,
                        confirmButtonText: 'Sí, continuar',
                        cancelButtonText: 'No, completar',
                        confirmButtonColor: '#28a745',
                        cancelButtonColor: '#6c757d'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            enviarDatosAsignacion(datosAEnviar);
                        }
                    });
                } else {
                    enviarDatosAsignacion(datosAEnviar);
                }
            });

            // Función para enviar datos de asignación
            function enviarDatosAsignacion(datosAEnviar) {
                Swal.fire({
                    title: 'Procesando asignación',
                    html: `<div class="progress mb-3">
                              <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
                           </div>
                           <p class="text-muted">Asignando ${datosAEnviar.length} itinerarios...</p>`,
                    allowOutsideClick: false,
                    showConfirmButton: false
                });

                $.ajax({
                    url: '{{ route("itinerariosbases.asignar") }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    contentType: 'application/json',
                    data: JSON.stringify({
                        items: datosAEnviar
                    }),
                    success: function (res) {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Asignación exitosa!',
                            html: `<p>${res.message}</p>
                                   <div class="alert alert-success mt-3">
                                       <i class="fas fa-check-circle mr-2"></i>
                                       ${datosAEnviar.length} itinerarios asignados correctamente.
                                   </div>`,
                            confirmButtonColor: '#28a745',
                            timer: 5000
                        });

                        // Resetear el formulario
                        $('#lectorSelect').val('').trigger('change');
                        tabla.clear().draw();
                        $('#totalItinerarios').text('0');
                        $('#resultsContainer').hide();
                    },
                    error: function (err) {
                        let mensaje = 'Hubo un problema al asignar los itinerarios.';
                        let index = null;

                        if (err.responseJSON && err.responseJSON.error) {
                            try {
                                const errorData = JSON.parse(err.responseJSON.error);
                                mensaje = errorData.message || mensaje;
                                index = errorData.index;
                            } catch (e) {
                                mensaje = err.responseJSON.error;
                            }
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Error en la asignación',
                            html: `<p>${mensaje}</p>
                                   ${index !== null ? '<p class="text-danger"><i class="fas fa-exclamation-triangle mr-2"></i>Revise los datos en la fila marcada.</p>' : ''}`,
                            confirmButtonColor: '#dc3545'
                        });

                        // Resaltar fila duplicada si se detectó el índice
                        if (index !== null) {
                            const rowNode = tabla.row(index).node();
                            $(rowNode).addClass('fila-duplicada');

                            // Hacer scroll a esa fila
                            $('html, body').animate({
                                scrollTop: $(rowNode).offset().top - 100
                            }, 500);
                        }
                    }
                });
            }

            // Evento para quitar el resaltado de fila duplicada al cambiar la fecha
            $('#tablaItinerarios tbody').on('change', '.fechaIndividual', function () {
                const fila = $(this).closest('tr');
                if (fila.hasClass('fila-duplicada')) {
                    fila.removeClass('fila-duplicada');
                }
            });
        });
    </script>
@stop