@extends('layouts.app')

@section('title', 'Registrar Permisos')

@section('content')
    @if(session('info'))
        <div class="alert alert-success">
            <strong>{{session('info')}}</strong>
        </div>
    @endif

    <p>Bienvenido a esta vista para registrar permisos o vacaciones de Tripulantes de Cabina</p>
    <div class="card">
        <div class="card-body">
            <form action="{{ route('permisoT.store') }}" method="POST" id="crear_registro">
                @csrf
                <div class="row" >
                        <input type="hidden" class="form-control" value="{{ old('nombre', $colaborador->id ?? '') }}" style="background-color: rgba(220, 214, 239, 0.719);" name="colaborador_id">
                    <div class="col">
                        <label for="nombre">Nombres:</label>
                        <input class="form-control" type="text" value="{{ old('nombre', $colaborador->nombre ?? '') }}" style="background-color: rgba(220, 214, 239, 0.719);" id="nombre" readonly>
                    </div>
                    <div class="col">
                        <label for="ap_paterno">Apellido Paterno:</label>
                        <input class="form-control" type="text"  value="{{ old('paterno', $colaborador->ap_paterno ?? '') }}" style="background-color: rgba(220, 214, 239, 0.719);" id="ap_paterno" readonly>
                    </div>
                    <div class="col">
                        <label for="ap_materno">Apellido Materno:</label>
                        <input class="form-control" type="text"  value="{{ old('materno', $colaborador->ap_materno ?? '') }}" style="background-color: rgba(220, 214, 239, 0.719);" id="ap_materno" readonly>
                    </div>
                    <div class="col">
                        <label for="numero_dgac">N° DGAC</label>
                        <input class="form-control" type="text" value="{{ old('numero_dgac', $colaborador->numero_dgac ?? '') }}" style="background-color: rgba(220, 214, 239, 0.719);" id="numero_dgac" readonly>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-2">
                        <label for="fecha_solicitado">Fecha Solicitado:</label>
                        <input type="date" name="fecha_solicitado" class="form-control" id="fecha_solicitado" required>
                    </div>
                    <div class="col-md-3">
                        <label for="tipo-observacion">Observación:</label>
                        <select class="form-select" aria-label="Default select example" name="ocurrencia_id" id="tipo-observacion">
                            <option selected>Seleccione:</option>
                            @foreach($ocurrencias as $ocurrencia)
                                <option value="{{ $ocurrencia->id }}">{{ $ocurrencia->tipo }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="dias_solicitados">Días Solicitados:</label>
                        <input type="text" name="dias_solicitados" class="form-control" id="dias_solicitados" readonly>
                    </div>
                    <div class="col-md-2">
                        <label for="fecha_inicio">Fecha de Inicio:</label>
                        <input type="text" name="fecha_inicio" class="form-control" id="fecha_inicio" readonly>
                    </div>
                    <div class="col-md-2">
                        <label for="fecha_fin">Fecha Final:</label>
                        <input type="text" name="fecha_fin" class="form-control" id="fecha_fin" readonly>
                    </div>
                    <div class="col-md-6 mt-2">
                        <label for="detalle">Detalles:</label>
                        <textarea class="form-control" id="detalle" name="detalle" rows="2"></textarea>
                    </div>
                    <div class="col-md-6 mt-2">
                        <label for="nota">Notas:</label>
                        <textarea class="form-control" id="nota" name="nota" rows="2"></textarea>
                    </div>
                    <div class="col mt-2 d-flex justify-content-end">
                        <div>
                            <button type="submit" class="btn btn-primary mt-2">Registrar</button>
                            <a href="{{ route('tripulantes.index', ['opcion' => 'asignarPermisos']) }}" class="btn btn-warning mt-2">Cancelar</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script>
        //Codigo para funcionamiento del datepicker
        $(document).ready(function() {
            $.datepicker.regional['es'] = {
                closeText: 'Cerrar',
                prevText: '< Ant',
                nextText: 'Sig >',
                currentText: 'Hoy',
                monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
                dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
                dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
                weekHeader: 'Sm',
                dateFormat: 'dd/mm/yy',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: ''
            };
            $.datepicker.setDefaults($.datepicker.regional['es']);

            var selectedDates = [];
            var maxDates = 2;
            var isRangeSelection = false;
            var rangeStart, rangeEnd;

            function updateDatePicker() {
                var observationId = $("#tipo-observacion").val();
                var observationType = $("#tipo-observacion option:selected").text();
                isRangeSelection = (observationType === 'Vacaciones' || observationType === 'Vacaciones_rap');
                selectedDates = [];
                rangeStart = null;
                rangeEnd = null;
                $("#dias_solicitados").val("");
                $("#fecha_inicio").val("");
                $("#fecha_fin").val("");
                initializeDatePicker();
            }

            function initializeDatePicker() {
                $("#dias_solicitados").datepicker("destroy").datepicker({
                    dateFormat: "dd/mm/yy",
                    numberOfMonths: 1,
                    beforeShowDay: function(date) {
                        var dateString = $.datepicker.formatDate('dd/mm/yy', date);
                        if (isRangeSelection) {
                            var classes = "";
                            if (rangeStart && rangeEnd) {
                                var current = $.datepicker.parseDate('dd/mm/yy', dateString);
                                var start = $.datepicker.parseDate('dd/mm/yy', rangeStart);
                                var end = $.datepicker.parseDate('dd/mm/yy', rangeEnd);
                                if (current >= start && current <= end) {
                                    classes = "ui-state-highlight";
                                }
                            } else if (rangeStart && dateString === rangeStart) {
                                classes = "ui-state-highlight";
                            }
                            return [true, classes];
                        } else {
                            var isSelected = $.inArray(dateString, selectedDates) !== -1;
                            var isSelectable = selectedDates.length < maxDates || isSelected;
                            return [isSelectable, isSelected ? "ui-state-highlight" : ""];
                        }
                    },
                    onSelect: function(dateText, inst) {
                        if (isRangeSelection) {
                            if (!rangeStart) {
                                rangeStart = dateText;
                                rangeEnd = null;
                            } else if (dateText === rangeStart) {
                                // Si se selecciona el mismo día de inicio, se borra la selección
                                rangeStart = null;
                                rangeEnd = null;
                            } else if (!rangeEnd) {
                                rangeEnd = dateText;
                                var start = $.datepicker.parseDate('dd/mm/yy', rangeStart);
                                var end = $.datepicker.parseDate('dd/mm/yy', rangeEnd);
                                if (end < start) {
                                    var temp = rangeStart;
                                    rangeStart = rangeEnd;
                                    rangeEnd = temp;
                                }
                            } else {
                                // Si ya hay un rango seleccionado, se reinicia con la nueva fecha
                                rangeStart = dateText;
                                rangeEnd = null;
                            }
                            updateInputValue();
                        } else {
                            var index = $.inArray(dateText, selectedDates);
                            if (index > -1) {
                                selectedDates.splice(index, 1);
                            } else if (selectedDates.length < maxDates) {
                                selectedDates.push(dateText);
                            } else {
                                selectedDates.shift();
                                selectedDates.push(dateText);
                            }
                            updateInputValue();
                        }
                        console.log("Fechas seleccionadas: " + $(this).val());
                    }
                });
            }

            function updateInputValue() {
                if (isRangeSelection) {
                    if (rangeStart && rangeEnd) {
                        $("#fecha_inicio").val(rangeStart);
                        $("#fecha_fin").val(rangeEnd);
                        $("#dias_solicitados").val(rangeStart + ' al ' + rangeEnd);
                    } else if (rangeStart) {
                        $("#fecha_inicio").val(rangeStart);
                        $("#fecha_fin").val('');
                        $("#dias_solicitados").val(rangeStart);
                    } else {
                        $("#fecha_inicio").val('');
                        $("#fecha_fin").val('');
                        $("#dias_solicitados").val('');
                    }
                } else  {
                    if (selectedDates.length > 0) {
                        $("#fecha_inicio").val(selectedDates[0]);
                        $("#fecha_fin").val(selectedDates[1]);
                        $("#dias_solicitados").val(selectedDates.join(", "));
                    } else {
                        $("#fecha_inicio").val('');
                        $("#fecha_fin").val('');
                        $("#dias_solicitados").val('');
                    }
                }
            }

            $("#tipo-observacion").change(updateDatePicker);
            initializeDatePicker();
        });
    </script>

    <script>
        //Codigo para la creacion de registros
        document.getElementById('crear_registro').addEventListener('submit', function(event) {
            event.preventDefault(); // Evita que el formulario se envíe normalmente

            // Realiza una solicitud AJAX para guardar el registro
            fetch(this.action, {
                method: 'POST',
                body: new FormData(this),
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                // Muestra la alerta de SweetAlert
                Swal.fire({
                    title: 'Éxito',
                    text: data.success,
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Redirige al usuario a la vista index
                        window.location.href = URLs+'/permisos';
                    }
                });
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error',
                    text: 'Hubo un problema al procesar tu solicitud. Por favor, inténtalo de nuevo.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        });
    </script>
@endsection