@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Editar Programación de Descansos')
@section('plugins.Select2', true)
@section('plugins.Sweetalert2', true)
@section('content_header')
    <h1>Editar Programación de Descansos</h1>
@stop

@section('content')
    <div class="card">
        <div class="card-header bg-warning text-white">
            <h2 class="card-title">
                <i class="fas fa-edit"></i> Editar Programación
            </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.update', $programacion->id) }}">
                @csrf
                @method('PUT')

                <!-- 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 == $programacion->mes ? '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', $programacion->anio) }}" 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', $programacion->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 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">
                        <i class="fas fa-save"></i> Actualizar 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/Editar 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> <span id="modal-titulo">Agregar Colaborador</span>
                    </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-warning" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary" id="btn-modal-submit">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 = [];
        let indiceEditando = null;

        // Cargar descansos existentes
        @foreach($programacion->descansos->where('estado', 1) as $descanso)
            descansosTemporales.push({
                id: {{ $descanso->id }},
                empleado_id: {{ $descanso->empleado_id }},
                empleado_nombre: '{{ $descanso->empleado->nombre }} {{ $descanso->empleado->apellido }}',
                fecha_descanso_1: '{{ $descanso->fecha_descanso_1 ? $descanso->fecha_descanso_1->format('Y-m-d') : '' }}',
                fecha_descanso_2: '{{ $descanso->fecha_descanso_2 ? $descanso->fecha_descanso_2->format('Y-m-d') : '' }}',
                observacion: '{{ $descanso->observacion ?? '' }}'
            });
        @endforeach

        $(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() {
                // Solo inicializar fechas si estamos agregando (no editando)
                if (indiceEditando === null) {
                    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);
                }
            });

            // Cargar tabla inicial
            actualizarTabla();

            // 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();
                    }
                });
            });

            // Agregar/Editar 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 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;
                }

                if (indiceEditando !== null) {
                    // Editar existente
                    const descansoOriginal = descansosTemporales[indiceEditando];

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

                    descansosTemporales[indiceEditando] = {
                        id: descansoOriginal.id,
                        empleado_id: empleadoId,
                        empleado_nombre: empleadoNombre,
                        fecha_descanso_1: fecha1,
                        fecha_descanso_2: fecha2,
                        observacion: observacion || ''
                    };
                } else {
                    // Agregar nuevo
                    if (descansosTemporales.some(d => d.empleado_id == empleadoId)) {
                        Swal.fire('Error', 'Este colaborador ya está en la lista', 'error');
                        return;
                    }

                    descansosTemporales.push({
                        id: null,
                        empleado_id: empleadoId,
                        empleado_nombre: empleadoNombre,
                        fecha_descanso_1: fecha1,
                        fecha_descanso_2: fecha2,
                        observacion: observacion || ''
                    });
                }

                actualizarTabla();
                limpiarModal();
                $('#modalAgregarColaborador').modal('hide');
            });

            // 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);

            // 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 de fechas y observación
            $('.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();
            });

            agregarInputsHidden();
            actualizarContador();
        }

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

            descansosTemporales.forEach((descanso, index) => {
                const html = `
                    <input type="hidden" name="descansos[${index}][id]" value="${descanso.id || ''}">
                    <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}">
                `;
                $('#form-programacion').append(html);
            });
        }

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

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

        function limpiarModal() {
            $('#form-agregar-colaborador')[0].reset();
            $('#modal_empleado_id').val(null).trigger('change');
            indiceEditando = null;
            $('#modal-titulo').text('Agregar Colaborador');
            $('#btn-modal-submit').text('Agregar');
        }

        // 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();
                }
            });
        });

        // Limpiar modal al cerrar
        $('#modalAgregarColaborador').on('hidden.bs.modal', function() {
            limpiarModal();
        });
    </script>
@stop