@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Programar Descansos')
@section('plugins.Select2', true)
@section('plugins.Sweetalert2', true)
@section('content_header')
    <h1>Programar Descansos Mensuales</h1>
@stop

@section('content')
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h2 class="card-title">
                <i class="fas fa-calendar-plus"></i> Nueva Programación de Descansos
            </h2>
        </div>
        <div class="card-body">
            <!-- Mensajes de éxito/error -->
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle"></i> {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5><i class="icon fas fa-ban"></i> <strong>Error de validación</strong></h5>
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form id="form-programacion" method="POST" action="{{ route('descansos.store') }}">
                @csrf

                <!-- Información de la Programación -->
                <div class="card card-outline card-primary mb-4">
                    <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-info-circle"></i> Información General</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="mes">Mes <span class="text-danger">*</span></label>
                                    <select name="mes" id="mes" class="form-control @error('mes') is-invalid @enderror" required>
                                        @for($m = 1; $m <= 12; $m++)
                                            <option value="{{ $m }}" {{ $m == (int)date('m') ? 'selected' : '' }}>
                                                {{ \Carbon\Carbon::create(null, $m, 1)->locale('es')->monthName }}
                                            </option>
                                        @endfor
                                    </select>
                                    @error('mes')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="anio">Año <span class="text-danger">*</span></label>
                                    <input type="number" name="anio" id="anio" class="form-control @error('anio') is-invalid @enderror"
                                           value="{{ old('anio', date('Y')) }}" min="2020" max="2100" required>
                                    @error('anio')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="observacion">Observación General</label>
                                    <input type="text" name="observacion" id="observacion" class="form-control @error('observacion') is-invalid @enderror"
                                           value="{{ old('observacion') }}"
                                           placeholder="Ej: Programación mensual de descansos">
                                    @error('observacion')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tabla Temporal de Colaboradores -->
                <div class="card card-outline card-success mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="card-title"><i class="fas fa-users"></i> Colaboradores con Descansos</h3>
                        <div>
                            <button type="button" class="btn btn-success btn-sm mr-2" id="btnColaboradorAutomatico">
                                <i class="fas fa-magic"></i> Colaborador Automático
                            </button>
                            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalAgregarColaborador">
                                <i class="fas fa-plus"></i> Agregar Colaborador
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover" id="tabla-descansos">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Colaborador</th>
                                        <th>Fecha Descanso 1 <span class="text-danger">*</span></th>
                                        <th>Fecha Descanso 2 <span class="text-danger">*</span></th>
                                        <th>Observación</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-descansos">
                                    <!-- Se llenará dinámicamente -->
                                </tbody>
                            </table>
                        </div>
                        <div class="alert alert-info mt-3">
                            <i class="fas fa-info-circle"></i>
                            <strong>Total de colaboradores:</strong> <span id="contador-colaboradores">0</span>
                        </div>
                    </div>
                </div>

                <!-- Botones -->
                <div class="form-group">
                    <button type="submit" class="btn btn-primary mr-2" id="btnGuardar" disabled>
                        <i class="fas fa-save"></i> Guardar Programación
                    </button>
                    <a href="{{ route('descansos.index') }}" class="btn btn-warning">
                        <i class="fas fa-times"></i> Cancelar
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal Agregar Colaborador -->
    <div class="modal fade" id="modalAgregarColaborador" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">
                        <i class="fas fa-user-plus"></i> Agregar Colaborador
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <form id="form-agregar-colaborador">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="modal_empleado_id">Colaborador <span class="text-danger">*</span></label>
                            <select name="empleado_id" id="modal_empleado_id" class="form-control" required>
                                <option value="">Seleccione un colaborador</option>
                                @foreach($empleados as $empleado)
                                    <option value="{{ $empleado->id }}"
                                            data-nombre="{{ $empleado->nombre }} {{ $empleado->apellido }}">
                                        {{ $empleado->nombre }} {{ $empleado->apellido }} - {{ $empleado->cargo }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="modal_fecha_descanso_1">Fecha Descanso 1 <span class="text-danger">*</span></label>
                            <input type="date" name="fecha_descanso_1" id="modal_fecha_descanso_1" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="modal_fecha_descanso_2">Fecha Descanso 2 <span class="text-danger">*</span></label>
                            <input type="date" name="fecha_descanso_2" id="modal_fecha_descanso_2" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="modal_observacion">Observación</label>
                            <input type="text" name="observacion" id="modal_observacion" class="form-control"
                                   placeholder="Observación específica para este colaborador">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Agregar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@section('css')
    <style>
        .fecha-descanso-1, .fecha-descanso-2, .observacion-colaborador {
            min-width: 150px;
        }
        #tabla-descansos td {
            vertical-align: middle;
        }

        .select2-container--default .select2-selection--single {
            background-color: #fff;
            border: 1px solid #aaa;
            border-radius: 4px;
            height: 35px !important;
        }

    </style>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        let contadorFila = 0;
        let descansosTemporales = [];

        $(document).ready(function() {
            // Inicializar Select2 mejorado
            $('#modal_empleado_id').select2({
                placeholder: 'Buscar y seleccionar un colaborador...',
                dropdownParent: $('#modalAgregarColaborador'),
                allowClear: true,
                width: '100%',
                language: {
                    noResults: function() {
                        return "No se encontraron colaboradores";
                    },
                    searching: function() {
                        return "Buscando...";
                    }
                }
            });

            // Inicializar fechas con día y mes actual cuando se abre el modal
            $('#modalAgregarColaborador').on('show.bs.modal', function() {
                const mes = parseInt($('#mes').val());
                const anio = parseInt($('#anio').val());
                const diaActual = new Date().getDate();

                // Obtener el último día del mes seleccionado para validar
                const ultimoDiaMes = new Date(anio, mes, 0).getDate();
                const diaAUsar = Math.min(diaActual, ultimoDiaMes);

                // Formatear fecha como YYYY-MM-DD
                const fechaFormateada = `${anio}-${String(mes).padStart(2, '0')}-${String(diaAUsar).padStart(2, '0')}`;

                // Establecer ambas fechas con el día y mes actual
                $('#modal_fecha_descanso_1').val(fechaFormateada);
                $('#modal_fecha_descanso_2').val(fechaFormateada);
            });

            // Agregar colaborador desde modal
            $('#form-agregar-colaborador').on('submit', function(e) {
                e.preventDefault();

                const empleadoId = $('#modal_empleado_id').val();
                const empleadoNombre = $('#modal_empleado_id option:selected').data('nombre') ||
                                      $('#modal_empleado_id option:selected').text();
                const fecha1 = $('#modal_fecha_descanso_1').val();
                const fecha2 = $('#modal_fecha_descanso_2').val();
                const observacion = $('#modal_observacion').val();

                // Validar que no está duplicado
                if (descansosTemporales.some(d => d.empleado_id == empleadoId)) {
                    Swal.fire('Error', 'Este colaborador ya está en la lista', 'error');
                    return;
                }

                // Validar fechas
                if (!fecha1 || !fecha2) {
                    Swal.fire('Error', 'Debe seleccionar ambas fechas', 'error');
                    return;
                }

                if (fecha1 === fecha2) {
                    Swal.fire('Error', 'Las fechas deben ser diferentes', 'error');
                    return;
                }

                // Agregar a la lista temporal
                const descanso = {
                    id: null,
                    empleado_id: empleadoId,
                    empleado_nombre: empleadoNombre,
                    fecha_descanso_1: fecha1,
                    fecha_descanso_2: fecha2,
                    observacion: observacion || ''
                };

                descansosTemporales.push(descanso);
                actualizarTabla();

                // Limpiar modal
                $('#form-agregar-colaborador')[0].reset();
                $('#modal_empleado_id').val(null).trigger('change');
                $('#modalAgregarColaborador').modal('hide');
            });

            // Botón Colaborador Automático
            $('#btnColaboradorAutomatico').on('click', function() {
                Swal.fire({
                    title: '¿Cargar todos los colaboradores?',
                    text: 'Se agregarán automáticamente todos los colaboradores de Operaciones',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, cargar todos',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        cargarColaboradoresAutomaticos();
                    }
                });
            });

            // Validar formulario antes de enviar
            $('#form-programacion').on('submit', function(e) {
                if (descansosTemporales.length === 0) {
                    e.preventDefault();
                    Swal.fire('Error', 'Debe agregar al menos un colaborador', 'error');
                    return false;
                }

                // Validar que todos tengan fechas
                const sinFechas = descansosTemporales.filter(d => !d.fecha_descanso_1 || !d.fecha_descanso_2);
                if (sinFechas.length > 0) {
                    e.preventDefault();
                    Swal.fire('Error', 'Todos los colaboradores deben tener ambas fechas de descanso', 'error');
                    return false;
                }
            });
        });

        function cargarColaboradoresAutomaticos() {
            const empleados = @json($empleados);
            const mes = parseInt($('#mes').val());
            const anio = parseInt($('#anio').val());

            // Obtener colaboradores que aún no están en la lista
            const empleadosIdsExistentes = descansosTemporales.map(d => parseInt(d.empleado_id));
            const empleadosNuevos = empleados.filter(emp => !empleadosIdsExistentes.includes(emp.id));

            if (empleadosNuevos.length === 0) {
                Swal.fire('Info', 'Todos los colaboradores ya están en la lista', 'info');
                return;
            }

            // Agregar todos los colaboradores sin fechas (el usuario las seleccionará en la tabla)
            empleadosNuevos.forEach(empleado => {
                descansosTemporales.push({
                    id: null,
                    empleado_id: empleado.id,
                    empleado_nombre: empleado.nombre + ' ' + empleado.apellido,
                    fecha_descanso_1: '',
                    fecha_descanso_2: '',
                    observacion: ''
                });
            });

            actualizarTabla();
            Swal.fire('Éxito', `Se agregaron ${empleadosNuevos.length} colaborador(es)`, 'success');
        }

        function actualizarTabla() {
            const tbody = $('#tbody-descansos');
            tbody.empty();

            descansosTemporales.forEach((descanso, index) => {
                const fila = `
                    <tr data-index="${index}">
                        <td>${index + 1}</td>
                        <td>${descanso.empleado_nombre}</td>
                        <td>
                            <input type="date"
                                   class="form-control form-control-sm fecha-descanso-1"
                                   data-index="${index}"
                                   value="${descanso.fecha_descanso_1 || ''}"
                                   required>
                        </td>
                        <td>
                            <input type="date"
                                   class="form-control form-control-sm fecha-descanso-2"
                                   data-index="${index}"
                                   value="${descanso.fecha_descanso_2 || ''}"
                                   required>
                        </td>
                        <td>
                            <input type="text"
                                   class="form-control form-control-sm observacion-colaborador"
                                   data-index="${index}"
                                   value="${descanso.observacion || ''}"
                                   placeholder="Observación">
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm btn-eliminar" data-index="${index}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                `;
                tbody.append(fila);
            });

            // Eventos para edición inline
            $('.fecha-descanso-1, .fecha-descanso-2, .observacion-colaborador').off('change').on('change', function() {
                const index = $(this).data('index');
                const campo = $(this).hasClass('fecha-descanso-1') ? 'fecha_descanso_1' :
                            $(this).hasClass('fecha-descanso-2') ? 'fecha_descanso_2' : 'observacion';
                descansosTemporales[index][campo] = $(this).val();
                agregarInputsHidden();
            });

            // Agregar inputs hidden al formulario
            agregarInputsHidden();
            actualizarContador();
            habilitarBotonGuardar();
        }

        function agregarInputsHidden() {
            // Eliminar inputs anteriores
            $('input[name^="descansos["]').remove();

            // Agregar nuevos inputs
            descansosTemporales.forEach((descanso, index) => {
                $('#form-programacion').append(`
                    <input type="hidden" name="descansos[${index}][empleado_id]" value="${descanso.empleado_id}">
                    <input type="hidden" name="descansos[${index}][fecha_descanso_1]" value="${descanso.fecha_descanso_1}">
                    <input type="hidden" name="descansos[${index}][fecha_descanso_2]" value="${descanso.fecha_descanso_2}">
                    <input type="hidden" name="descansos[${index}][observacion]" value="${descanso.observacion}">
                `);
            });
        }

        function actualizarContador() {
            $('#contador-colaboradores').text(descansosTemporales.length);
        }

        function habilitarBotonGuardar() {
            if (descansosTemporales.length > 0) {
                $('#btnGuardar').prop('disabled', false);
            } else {
                $('#btnGuardar').prop('disabled', true);
            }
        }

        function formatearFecha(fecha) {
            if (!fecha) return '-';
            const date = new Date(fecha + 'T00:00:00');
            return date.toLocaleDateString('es-ES');
        }

        // Las fechas ahora se editan directamente en la tabla (inputs inline)

        // Eliminar descanso
        $(document).on('click', '.btn-eliminar', function() {
            const index = $(this).data('index');

            Swal.fire({
                title: '¿Estás seguro?',
                text: "Se eliminará este colaborador de la lista",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    descansosTemporales.splice(index, 1);
                    actualizarTabla();
                }
            });
        });

        function restaurarComportamientoModal() {
            $('#form-agregar-colaborador').off('submit').on('submit', function(e) {
                e.preventDefault();

                const empleadoId = $('#modal_empleado_id').val();
                const empleadoNombre = $('#modal_empleado_id option:selected').data('nombre') ||
                                      $('#modal_empleado_id option:selected').text();
                const fecha1 = $('#modal_fecha_descanso_1').val();
                const fecha2 = $('#modal_fecha_descanso_2').val();
                const observacion = $('#modal_observacion').val();

                if (descansosTemporales.some(d => d.empleado_id == empleadoId)) {
                    Swal.fire('Error', 'Este colaborador ya está en la lista', 'error');
                    return;
                }

                const descanso = {
                    id: null,
                    empleado_id: empleadoId,
                    empleado_nombre: empleadoNombre,
                    fecha_descanso_1: fecha1,
                    fecha_descanso_2: fecha2,
                    observacion: observacion || ''
                };

                descansosTemporales.push(descanso);
                actualizarTabla();

                $('#form-agregar-colaborador')[0].reset();
                $('#modal_empleado_id').val(null).trigger('change');
                $('#modalAgregarColaborador').modal('hide');
            });
        }

        // Restaurar comportamiento cuando se cierra el modal
        $('#modalAgregarColaborador').on('hidden.bs.modal', function() {
            restaurarComportamientoModal();
        });
    </script>
@stop