@extends('adminlte::page')

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

@section('content')
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h2 class="card-title">
                <i class="fas fa-umbrella-beach"></i> Nueva Programación de Vacaciones
            </h2>
        </div>
        <div class="card-body">
            @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"><span>&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"><span>&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('vacaciones.store') }}">
                @csrf

                <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-6">
                                <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"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="observacion">Observación General</label>
                                    <input type="text" name="observacion" id="observacion" class="form-control"
                                           value="{{ old('observacion') }}" placeholder="Ej: Vacaciones año 2026">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <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 Vacaciones</h3>
                        <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 class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover" id="tabla-vacaciones">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Colaborador</th>
                                        <th>Fecha Inicio <span class="text-danger">*</span></th>
                                        <th>Fecha Fin <span class="text-danger">*</span></th>
                                        <th>Observación</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-vacaciones"></tbody>
                            </table>
                        </div>
                        <div class="alert alert-info mt-3">
                            <i class="fas fa-info-circle"></i>
                            <strong>Total de registros:</strong> <span id="contador-colaboradores">0</span>
                        </div>
                    </div>
                </div>

                <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('vacaciones.index') }}" class="btn btn-warning">
                        <i class="fas fa-times"></i> Cancelar
                    </a>
                </div>
            </form>
        </div>
    </div>

    <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_inicio">Fecha Inicio <span class="text-danger">*</span></label>
                            <input type="date" name="fecha_inicio" id="modal_fecha_inicio" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="modal_fecha_fin">Fecha Fin <span class="text-danger">*</span></label>
                            <input type="date" name="fecha_fin" id="modal_fecha_fin" 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">
                        </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-inicio, .fecha-fin, .observacion-colaborador { min-width: 140px; }
        #tabla-vacaciones td { vertical-align: middle; }
    </style>
@stop

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

        $(document).ready(function() {
            $('#modal_empleado_id').select2({
                placeholder: 'Buscar colaborador...',
                dropdownParent: $('#modalAgregarColaborador'),
                allowClear: true,
                width: '100%'
            });

            $('#modalAgregarColaborador').on('show.bs.modal', function() {
                const anio = parseInt($('#anio').val()) || new Date().getFullYear();
                $('#modal_fecha_inicio').val(anio + '-01-01');
                $('#modal_fecha_fin').val(anio + '-01-15');
            });

            $('#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 fechaInicio = $('#modal_fecha_inicio').val();
                const fechaFin = $('#modal_fecha_fin').val();
                const observacion = $('#modal_observacion').val();

                if (!fechaInicio || !fechaFin) {
                    Swal.fire('Error', 'Debe seleccionar fecha inicio y fecha fin', 'error');
                    return;
                }
                if (new Date(fechaFin) < new Date(fechaInicio)) {
                    Swal.fire('Error', 'La fecha fin debe ser mayor o igual a la fecha inicio', 'error');
                    return;
                }

                vacacionesTemporales.push({
                    id: null,
                    empleado_id: empleadoId,
                    empleado_nombre: empleadoNombre,
                    fecha_inicio: fechaInicio,
                    fecha_fin: fechaFin,
                    observacion: observacion || ''
                });
                actualizarTabla();
                $('#form-agregar-colaborador')[0].reset();
                $('#modal_empleado_id').val(null).trigger('change');
                $('#modalAgregarColaborador').modal('hide');
            });

            $('#form-programacion').on('submit', function(e) {
                if (vacacionesTemporales.length === 0) {
                    e.preventDefault();
                    Swal.fire('Error', 'Debe agregar al menos un colaborador con vacaciones', 'error');
                    return false;
                }
                const sinFechas = vacacionesTemporales.filter(v => !v.fecha_inicio || !v.fecha_fin);
                if (sinFechas.length > 0) {
                    e.preventDefault();
                    Swal.fire('Error', 'Todos los registros deben tener fecha inicio y fecha fin', 'error');
                    return false;
                }
            });
        });

        function actualizarTabla() {
            const tbody = $('#tbody-vacaciones');
            tbody.empty();
            vacacionesTemporales.forEach((vac, index) => {
                const fila = `
                    <tr data-index="${index}">
                        <td>${index + 1}</td>
                        <td>${vac.empleado_nombre}</td>
                        <td><input type="date" class="form-control form-control-sm fecha-inicio" data-index="${index}" value="${vac.fecha_inicio || ''}" required></td>
                        <td><input type="date" class="form-control form-control-sm fecha-fin" data-index="${index}" value="${vac.fecha_fin || ''}" required></td>
                        <td><input type="text" class="form-control form-control-sm observacion-colaborador" data-index="${index}" value="${vac.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);
            });

            $('.fecha-inicio, .fecha-fin, .observacion-colaborador').off('change').on('change', function() {
                const index = $(this).data('index');
                const campo = $(this).hasClass('fecha-inicio') ? 'fecha_inicio' : $(this).hasClass('fecha-fin') ? 'fecha_fin' : 'observacion';
                vacacionesTemporales[index][campo] = $(this).val();
                agregarInputsHidden();
            });

            agregarInputsHidden();
            $('#contador-colaboradores').text(vacacionesTemporales.length);
            $('#btnGuardar').prop('disabled', vacacionesTemporales.length === 0);
        }

        function agregarInputsHidden() {
            $('input[name^="vacaciones["]').remove();
            vacacionesTemporales.forEach((vac, index) => {
                $('#form-programacion').append(`
                    <input type="hidden" name="vacaciones[${index}][empleado_id]" value="${vac.empleado_id}">
                    <input type="hidden" name="vacaciones[${index}][fecha_inicio]" value="${vac.fecha_inicio}">
                    <input type="hidden" name="vacaciones[${index}][fecha_fin]" value="${vac.fecha_fin}">
                    <input type="hidden" name="vacaciones[${index}][observacion]" value="${vac.observacion}">
                `);
            });
        }

        $(document).on('click', '.btn-eliminar', function() {
            const index = $(this).data('index');
            Swal.fire({
                title: '¿Estás seguro?',
                text: "Se eliminará este registro de la lista",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    vacacionesTemporales.splice(index, 1);
                    actualizarTabla();
                }
            });
        });
    </script>
@stop