@extends('layouts.kaiadmin.master')

@section('template_title')
    Crear Itinerario
@endsection

@section('content')

<section class="content container-fluid">
    <div class="container register">
        <div class="row">
            <div class="col-md-12">
                <br>
                @includeif('partials.errors')

                <div class="card card-default">
                    <div class="card-header">
                        <span class="card-title">Crear Itinerario</span>
                    </div>
                    <div class="card-body">
                        <div style="max-height: 600px; overflow-y: auto;"></div>
                            <form method="POST" action="{{ route('lecturacampobase.store') }}" id="dynamicForm" role="form" enctype="multipart/form-data">
                                @csrf

                                <div class="container">
                                    <div class="box box-info padding-3" style="max-width: 700px; margin: 0 auto">
                                        <div class="box-body">
                                            <div class="box box-info">
                                                <div class="row mb-3">
                                                    <div class="col">
                                                        <label for="ruta" class="form-label">Ruta:</label>
                                                        <select class="form-select" name="ruta" id="ruta">
                                                            <option value="" disabled selected>Seleccionar ruta</option>
                                                            @foreach($rutasFormateadas as $ruta)
                                                                <option value="{{ $ruta['id'] }}">{{ $ruta['display'] }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col">
                                                        <label for="itinerario" class="form-label">Itinerario:</label>
                                                        <select class="form-select" name="itinerario" id="itinerario">
                                                            <option value="" disabled selected>Selecciona una ruta primero</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="box-footer mt-2">
                                                    <button type="button" class="btn btn-primary btn-lg mt-2" id="buscarBtn">Buscar</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal fade" id="loadingModal" tabindex="-1" aria-labelledby="loadingModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-body text-center">
                                                    <p><i class="fa fa-spinner fa-spin"></i> Buscando datos...</p>
                                                    <img src="/images/loading.gif" alt="Icono" style="width: 50px; height: 50px;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card mt-4 w-50 mx-auto" style="display: none" id="resultCard">
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="rutaData" class="form-label">Ruta:</label>
                                                <input type="text" class="form-control" id="rutaData" readonly>
                                            </div>

                                            <div class="mb-3">
                                                <label for="itinerarioData" class="form-label">Itinerario:</label>
                                                <input type="text" class="form-control" id="itinerarioData" readonly>
                                            </div>

                                            <div class="mb-3">
                                                <label for="itinerarioGlobalData" class="form-label">Itinerario Global:</label>
                                                <input type="text" class="form-control" id="itinerarioGlobalData" readonly>
                                            </div>

                                            <div class="mb-3">
                                                <label for="inicioData" class="form-label">Inicio:</label>
                                                <input type="text" class="form-control" id="inicioData" readonly>
                                            </div>

                                            <div class="mb-3">
                                                <label for="finData" class="form-label">Final:</label>
                                                <input type="text" class="form-control" id="finData" readonly>
                                            </div>

                                            <div class="mb-3">
                                                <label for="ordenLecturaData" class="form-label">Orden de Lectura:</label>
                                                <input type="text" class="form-control" id="ordenLecturaData" readonly>
                                            </div>

                                            <div class="mb-3">
                                                <label for="lector" class="form-label">Lector:</label>
                                                <select class="form-select" name="lectores_id" id="lector">
                                                    <option value="" disabled selected>Selecciona un lector</option>
                                                    @foreach($lectores as $id => $nombre)
                                                        <option value="{{ $id }}">{{ $nombre }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="mb-3">
                                                <label for="usrcarfechalectura" class="form-label">Fecha:</label>
                                                <input type="date" class="form-control" name="usrcarfechalectura" id="usrcarfechalectura">
                                            </div>

                                            <div class="mt-3">
                                                <button type="button" class="btn btn-primary float-end btn-lg mt-2" onclick="confirmarGuardar(event)">Guardar</button>
                                            </div>

                                        </div>
                                    </div>

                                </div>

                            </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
      @if ($errors->any())
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: '{{ $errors->first("message") }}',
        });
      @elseif (session('success'))
        Swal.fire({
          icon: 'success',
          title: 'Exito',
          text: '{{ session("success") }}',
        });
        sessionStorage.setItem('recargar_itinerarios', '1');
        setTimeout(function() {
            window.location.href = "{{ route('itinerarios.index') }}";
        }, 2000);
      @endif
    });
</script>

<script>
    var lectores = {!! json_encode($lectores) !!};

    // Itinerarios pre-cargados desde PHP, agrupados por ruta (filtrado instantaneo, sin AJAX)
    var itinerariosPorRuta = @json(
        $rangoitinerarios->groupBy('itinerariosRutas_id')->map(function($items) {
            $vistos = [];
            return $items->filter(function($item) use (&$vistos) {
                if (in_array($item->itinerario, $vistos)) return false;
                $vistos[] = $item->itinerario;
                return true;
            })->map(function($item) {
                return ['id' => $item->id, 'itinerario' => $item->itinerario];
            })->values();
        })
    );

    // Al cambiar la ruta, llenar itinerarios instantaneamente
    $('#ruta').on('change', function() {
        var rutaId = $(this).val();
        var select = $('#itinerario');
        select.html('');
        $('#resultCard').hide();

        var items = itinerariosPorRuta[rutaId] || [];

        if (items.length === 0) {
            select.html('<option value="" disabled selected>No hay itinerarios disponibles</option>');
            return;
        }

        // Placeholder
        select.append($('<option>', { value: '', disabled: true, selected: true, text: 'Seleccione el itinerario' }));

        // Ordenar ascendente por número de itinerario
        items.sort(function(a, b) { return a.itinerario - b.itinerario; });

        items.forEach(function(item) {
            select.append($('<option>', {
                value: item.id,
                'data-itinerario': item.itinerario,
                text: item.itinerario
            }));
        });
    });

    // Boton Buscar
    document.getElementById('buscarBtn').addEventListener('click', function () {
        var rutaId = $('#ruta').val();
        if (!rutaId) {
            Swal.fire({ icon: 'warning', title: 'Atencion', text: 'Por favor, selecciona una ruta.' });
            return;
        }

        var itinerarioSeleccionado = $('#itinerario option:selected');
        if (!itinerarioSeleccionado.val()) {
            Swal.fire({ icon: 'warning', title: 'Atencion', text: 'Por favor, selecciona un itinerario valido.' });
            return;
        }

        var rutaNombre = $('#ruta option:selected').text();
        var itinerarioId = itinerarioSeleccionado.attr('data-itinerario');

        $('#loadingModal').modal('show');

        $.ajax({
            url: "{{ route('ruta.itinerario') }}",
            method: 'GET',
            data: { rutaId: rutaId, itinerarioId: itinerarioId },
            success: function(response) {
                $('#rutaData').val(rutaNombre);
                $('#itinerarioData').val(response.itinerario);
                $('#itinerarioGlobalData').val(response.itinerarioglobal);
                $('#inicioData').val(response.inicio);
                $('#finData').val(response.fin);
                $('#ordenLecturaData').val(response.ordenlectura);
                $('#lector').val(response.lector_id);
                $('#resultCard').show();
                $('#loadingModal').modal('hide');
            },
            error: function() {
                $('#loadingModal').modal('hide');
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'No se encontraron datos para la combinacion seleccionada.',
                });
            }
        });
    });

    function capturarInputs() {
        return {
            ruta: $('#ruta').val(),
            itinerario: $('#itinerario option:selected').attr('data-itinerario'),
            itinerario_base_id: $('#itinerario').val(),
            itinerarioglobal: $('#itinerarioGlobalData').val(),
            inicio: $('#inicioData').val(),
            fin: $('#finData').val(),
            ordenlectura: $('#ordenLecturaData').val(),
            lectores_id: $('#lector').val(),
            usrcarfechalectura: $('#usrcarfechalectura').val()
        };
    }

    function confirmarGuardar() {
        event.preventDefault();
        var fecha = $('#usrcarfechalectura').val();
        if (!fecha) {
            Swal.fire({ icon: 'warning', title: 'Atencion', text: 'Por favor, selecciona una fecha.' });
            return;
        }
        Swal.fire({
            title: 'Confirmar Guardar',
            text: 'Esta seguro de que desea guardar los datos?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Guardar'
        }).then((result) => {
            if (result.isConfirmed) submitForm();
        });
    }

    function submitForm() {
        var formData = capturarInputs();
        var form = document.getElementById('dynamicForm');

        form.querySelectorAll('input.dynamic-field').forEach(function(el) { el.remove(); });

        for (const key in formData) {
            if (Object.hasOwnProperty.call(formData, key)) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = key;
                input.value = formData[key];
                input.classList.add('dynamic-field');
                form.appendChild(input);
            }
        }

        form.submit();
    }
</script>

@endsection