@extends('layouts.kaiadmin.master')

@section('title', 'Itinerario')

@section('content')
<br>
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg">
            <div class="card shadow-sm">
                <div class="card-header bg-light text-dark d-flex justify-content-between align-items-center">
                    <h5 id="card_title" class="mb-0">{{ __('Gestión de Itinerarios') }}</h5>
                </div>

                <div class="d-flex justify-content-end m-3">
                    <a href="{{ route('itinerarios.create') }}" class="btn btn-primary btn-md text-white">
                        <i class="fas fa-plus"></i> {{ __('Crear Nuevo') }}
                    </a>
                </div>

                @if (session('success'))
                    <div class="alert alert-success mt-3 cont">
                        <p>{{ session('success') }}</p>
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger mt-3 cont">
                        <p>{{ session('error') }}</p>
                    </div>
                @endif

                <div class="card-body">
                    <div class="table-responsive">
                        <table id="itinerariosTable" class="table table-hover table-bordered">
                            <thead class="thead-dark">
                                <tr>
                                    <th class="text-center">Ruta</th>
                                    <th class="text-center">Itinerario</th>
                                    <th class="text-center">Itinerario Global</th>
                                    <th class="text-center">Inicio</th>
                                    <th class="text-center">Final</th>
                                    <th class="text-center">Orden Lectura</th>
                                    <th class="text-center">Fecha Lectura</th>
                                    <th class="text-center">Estado Itinerario</th>
                                    <th class="text-center">Lector</th>
                                    <th class="text-center">Digitador</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Los datos se cargarán dinámicamente mediante DataTables -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if(session('success'))
<script>
    document.addEventListener('DOMContentLoaded', function() {
        Swal.fire({
            icon: 'success',
            title: '¡Éxito!',
            text: '{{ session('success') }}',
            showConfirmButton: true,
            confirmButtonColor: '#28a745',
            timer: 5000
        });
    });
</script>
@endif

@if(session('error'))
<script>
    document.addEventListener('DOMContentLoaded', function() {
        Swal.fire({
            icon: 'error',
            title: '¡Error!',
            text: '{{ session('error') }}',
            showConfirmButton: true,
            confirmButtonColor: '#dc3545'
        });
    });
</script>
@endif
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>

<script>
$(document).ready(function () {
    // Configuración de AJAX para incluir el token CSRF
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    var table = $('#itinerariosTable').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('itinerarios.index') }}",
            type: 'GET',
            dataType: 'json',
            dataSrc: 'data'
        },
        columns: [
            { data: 'ruta', className: 'text-center' },
            { data: 'itinerario', className: 'text-center' },
            { data: 'itinerarioglobal', className: 'text-center' },
            { data: 'inicio', className: 'text-center' },
            { data: 'final', className: 'text-center' },
            { data: 'ordenlectura', className: 'text-center' },
            { 
                data: 'usrcarfechalectura', 
                className: 'text-center',
                render: function(data) {
                    return data ? new Date(data).toLocaleDateString('es-ES') : '';
                }
            },
            { data: 'estadoitinerario', className: 'text-center' },
            { data: 'nombrelector', className: 'text-center' },
            { data: 'name', className: 'text-center' },
            {
                data: null,
                className: 'text-center',
                render: function (data, type, row) {
                    // Botón Ingresar
                    const ingresarBtn = `
                        <form action="{{ route('usrcargohistorico.create') }}" method="GET" class="d-inline">
                            @csrf
                            <input type="hidden" name="inicio" value="${row.inicio}">
                            <input type="hidden" name="final" value="${row.final}">
                            <input type="hidden" name="lectores_id" value="${row.lectores_id}">
                            <input type="hidden" name="usrcarfechalectura" value="${row.usrcarfechalectura}">
                            <button type="submit" class="btn btn-sm btn-primary" 
                                ${['Pendiente de revisión', 'Revisado', 'Calculado'].includes(row.estadoitinerario) ? 'disabled' : ''}>
                                Ingresar
                            </button>
                        </form>
                    `;

                    // Botón Revisar
                    const revisarBtn = row.estadoitinerario == 'Pendiente de revisión' ? 
                        `<a href="{{ route('lecturas.index') }}?id=${row.id}&inicio=${row.inicio}&final=${row.final}&usrcarfechalectura=${row.usrcarfechalectura}" class="btn btn-sm btn-info">Revisar</a>` :
                        `<button class="btn btn-sm btn-secondary" disabled>Revisar</button>`;

                    // Botón Calcular
                    const calcularBtn = `
                        <button class="btn btn-sm btn-success calcular-btn" 
                            ${['Creado', 'Pendiente de revisión', 'Calculado'].includes(row.estadoitinerario) ? 'disabled' : ''}
                            data-id="${row.id}">
                            Calcular
                        </button>
                    `;

                    return `
                        <div class="d-flex justify-content-center gap-2">
                            ${ingresarBtn}
                            ${revisarBtn}
                            ${calcularBtn}
                        </div>
                    `;
                }
            }
        ],
        language: {
            "sProcessing": "Procesando...",
            "sLengthMenu": "Mostrar _MENU_ registros",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sSearch": "Buscar:",
            "oPaginate": {
                "sFirst": "Primero",
                "sLast": "Último",
                "sNext": "Siguiente",
                "sPrevious": "Anterior"
            },
        }
    });

    // Manejar el clic en el botón Calcular
    $(document).on('click', '.calcular-btn', function() {
        const button = $(this);
        const id = button.data('id');
        
        Swal.fire({
            title: '¿Confirmar cálculo?',
            text: `¿Está seguro de calcular los cargos para este itinerario?`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, calcular',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Calculando...',
                    text: 'Por favor espere mientras se procesan los cálculos',
                    icon: 'info',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => { Swal.showLoading(); }
                });

                $.ajax({
                    url: "{{ route('cargoslecturas.store') }}",
                    type: 'POST',
                    data: { id: id },
                    success: function(response) {
                        Swal.close();
                        Swal.fire({
                            icon: 'success',
                            title: '¡Éxito!',
                            text: response.message || 'Cálculo completado correctamente',
                            showConfirmButton: true
                        }).then(() => {
                            table.ajax.reload();
                        });
                    },
                    error: function(xhr) {
                        Swal.close();
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: xhr.responseJSON?.message || 'Ocurrió un error durante el cálculo',
                            showConfirmButton: true
                        });
                    }
                });
            }
        });
    });

    // Ocultar alertas automáticamente
    setTimeout(function() {
        $(".cont").fadeOut(1500);
    }, 6000);
});
</script>
@stop