@extends('layouts.app')

@section('title', 'Observaciones Curso')

@section('css')
    <style>
        @media (max-width: 768px) {
            .form-select {
                font-size: 14px !important;
                max-width: 100% !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Forzar que el dropdown no se desborde */
            .form-select option {
                max-width: 100%;
                word-wrap: break-word;
                font-size: 13px;
                padding: 8px 10px;
            }

            /* Contenedor del select */
            .form-group {
                overflow: hidden;
            }

            /* Para navegadores webkit (Chrome, Safari) */
            select {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
    </style>
@endsection

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

    <p>Bienvenido a esta vista para registrar observaciones de Despachadores en sus cursos</p>
    <div class="card">
        <div class="card-body">
            <form method="POST" id="form-observacion">
                @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-12 col-md-3 mb-3">
                        <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-12 col-md-3 mb-3">
                        <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-12 col-md-3 mb-3">
                        <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-12 col-md-3 mb-3">
                        <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-12 col-md-3 mb-3">
                        <div class="form-group">
                            <label for="curso_registro_id">Curso</label>
                            <select name="curso_registro_id" id="curso_registro_id" class="form-select">
                                <option value="">Seleccione un Curso</option>
                                @foreach($cursosAsignados as $cursoRegistro)
                                    <option value="{{ $cursoRegistro->id }}"
                                        data-fecha-realizado="{{ $cursoRegistro->fecha_realizado }}"
                                        data-fecha-vencimiento="{{ $cursoRegistro->fecha_vencimiento }}">
                                        {{ $cursoRegistro->curso->name }} -
                                        Realizado: {{ \Carbon\Carbon::parse($cursoRegistro->fecha_realizado)->format('d/m/Y') }} -
                                        Vence: {{ \Carbon\Carbon::parse($cursoRegistro->fecha_vencimiento)->format('d/m/Y') }}
                                        {{ $cursoRegistro->prorroga_usada ? ' (Ya modificado)' : '' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div id="detalles-curso" style="display: none;" class="mb-4">
                        <div class="alert alert-info">
                            <p><strong>Fecha original:</strong> <span id="fecha-original"></span></p>
                            <p><strong>Fecha vencimiento:</strong> <span id="fecha-vencimiento"></span></p>
                            <p class="text-warning">La modificación de fecha no afectará la fecha de vencimiento original.</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <label>Tipo de modificación:</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="tipo_modificacion" id="tipo_prorroga" value="prorroga" checked>
                            <label class="form-check-label" for="tipo_prorroga">
                                Prórroga (Extensión de la fecha)
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="tipo_modificacion" id="tipo_adelanto" value="adelanto">
                            <label class="form-check-label" for="tipo_adelanto">
                                Adelanto (Anticipación de la fecha)
                            </label>
                        </div>
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <label for="nueva_fecha">Nueva fecha de realización:</label>
                        <input type="date" name="nueva_fecha" id="nueva_fecha" class="form-control" required>
                    </div>
                    <div class="col-12 col-md-4 mb-3">
                        <label for="observacion_prorroga">Observación/Motivo:</label>
                        <input name="observacion_prorroga" id="observacion_prorroga" class="form-control" rows="3" required></input>
                    </div>
                    <div class="mt-2 d-flex flex-column flex-md-row">
                        <button type="submit" class="btn btn-primary mb-2 mb-md-0 me-md-2">Registrar</button>
                        <a href="{{ route('despachador.index') }}" class="btn btn-warning">Cancelar</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const cursoSelect      = document.getElementById('curso_registro_id');
            const detallesCurso    = document.getElementById('detalles-curso');
            const fechaOriginal    = document.getElementById('fecha-original');
            const fechaVencimiento = document.getElementById('fecha-vencimiento');

            cursoSelect.addEventListener('change', function() {
                if (this.value) {
                    const option = this.options[this.selectedIndex];
                    const fechaRealizadoRaw = option.getAttribute('data-fecha-realizado');
                    const fechaVencimientoRaw = option.getAttribute('data-fecha-vencimiento');

                    // Formatear fechas para mostrar
                    const fechaRealizadoFormat = new Date(fechaRealizadoRaw).toLocaleDateString('es-ES');
                    const fechaVencimientoFormat = new Date(fechaVencimientoRaw).toLocaleDateString('es-ES');

                    fechaOriginal.textContent = fechaRealizadoFormat;
                    fechaVencimiento.textContent = fechaVencimientoFormat;
                    detallesCurso.style.display = 'block';
                } else {
                    detallesCurso.style.display = 'none';
                }
            });

            // Manejar el envío del formulario con AJAX y SweetAlert2
            const form = document.getElementById('form-observacion');
            form.addEventListener('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(this);
                const cursoId = cursoSelect.value;
                const tipoModificacion = document.querySelector('input[name="tipo_modificacion"]:checked').value;
                const colaboradorId = '{{ $colaborador->id }}';

                // Enviar petición AJAX
                fetch(`${URLs}/cursos_registro/${colaboradorId}/registrar-prorroga`, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Éxito!',
                            text: data.message,
                            confirmButtonText: 'Aceptar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = URLs+'/cursos_registro';
                            }
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: data.message,
                            confirmButtonText: 'Aceptar'
                        });
                    }
                })
                .catch(error => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Ocurrió un error al procesar la solicitud.',
                        confirmButtonText: 'Aceptar'
                    });
                    console.error('Error:', error);
                });
            });
        });
    </script>
@endsection