@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Egresos Múltiples')

@section('content_header')
    <h1><i class="fas fa-layer-group"></i> Egresos Múltiples</h1>
@stop

@section('content')
    {{-- Información de la Caja Activa --}}
    @if($cajaActiva)
        <div class="card card-outline card-info mb-3">
            <div class="card-header bg-info text-white">
                <h3 class="card-title"><i class="fas fa-cash-register"></i> Información de la Caja Activa</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <strong>ID de Caja:</strong>
                        <p class="mb-0">{{ $cajaActiva->id }}</p>
                    </div>
                    <div class="col-md-4">
                        <strong>Fecha de Apertura:</strong>
                        <p class="mb-0">{{ $cajaActiva->fecha_apertura->format('d/m/Y H:i:s') }}</p>
                    </div>
                    <div class="col-md-3">
                        <strong>Monto de Apertura:</strong>
                        <p class="mb-0">S/ {{ number_format($cajaActiva->monto_apertura, 2) }}</p>
                    </div>
                    <div class="col-md-2">
                        <strong>Usuario:</strong>
                        <p class="mb-0">{{ $cajaActiva->usuario->name ?? 'N/A' }}</p>
                    </div>
                </div>
                <div class="alert alert-info mt-2 mb-0">
                    <i class="fas fa-info-circle"></i> <strong>Información:</strong> Los egresos registrados aquí se asociarán a esta caja (ID: {{ $cajaActiva->id }}). Por defecto se usará la fecha de apertura de la caja: <strong>{{ $cajaActiva->fecha_apertura->format('d/m/Y') }}</strong>, pero puedes cambiarla si es necesario.
                </div>
            </div>
        </div>
    @else
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle"></i> <strong>Advertencia:</strong> No hay una caja abierta. Debe abrir una caja antes de registrar egresos.
        </div>
    @endif

    <div class="card">
        <div class="card-header bg-primary text-white">
            <h3 class="card-title"><i class="fas fa-list"></i> Egresos a Registrar</h3>
        </div>
        <div class="card-body">
            <form id="egresosMultipleForm" method="POST" action="{{ route('egresos.store-egresos-multiple') }}">
                @csrf

                <div class="card card-outline card-success mt-2">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="card-title"><i class="fas fa-list"></i> Egresos</h3>
                        <button type="button" class="btn btn-success btn-sm" id="btnAgregarEgreso">
                            <i class="fas fa-plus"></i> Agregar Egreso
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover" id="tablaEgresos">
                                <thead class="bg-light">
                                    <tr>
                                        <th width="5%">#</th>
                                        <th width="15%">Monto <span class="text-danger">*</span></th>
                                        <th width="20%">Fecha <span class="text-danger">*</span></th>
                                        <th width="50%">Descripción <span class="text-danger">*</span></th>
                                        <th width="10%">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="tbodyEgresos">
                                    <!-- Las filas se agregarán dinámicamente -->
                                </tbody>
                                <tfoot>
                                    <tr class="bg-light">
                                        <td colspan="1" class="text-right"><strong>Total:</strong></td>
                                        <td colspan="4">
                                            <strong id="totalEgresos">S/ 0.00</strong>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="form-group mt-3 text-right">
                    <a href="{{ route('egresos.index') }}" class="btn btn-danger mr-2">
                        <i class="fas fa-times"></i> Cancelar
                    </a>
                    <button type="submit" class="btn btn-success" id="btnRegistrarEgresos">
                        <i class="fas fa-save"></i> Registrar Egresos
                    </button>
                </div>
            </form>
        </div>
    </div>
@stop

@section('css')
    <style>
        .table th {
            font-size: 0.85rem;
        }
        .table td {
            padding: 0.5rem;
            vertical-align: middle;
        }
        /* Estilos para validación en tiempo real */
        .monto-egreso.is-invalid {
            border-color: #dc3545;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6.4.4.4-.4m0 4.8-.4-.4-.4.4'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right calc(0.375em + 0.1875rem) center;
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        }
        .monto-egreso.is-valid {
            border-color: #28a745;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.98-.98-.98-.98-.98.98.98.98zm-.98-1.98l.98-.98.98.98-.98.98-.98-.98z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right calc(0.375em + 0.1875rem) center;
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        }
        .descripcion-egreso.is-invalid {
            border-color: #dc3545;
        }
        .descripcion-egreso.is-valid {
            border-color: #28a745;
        }
        .monto-error,
        .descripcion-error {
            display: block;
            font-size: 0.75rem;
            margin-top: 0.25rem;
        }
        .btn-remove-egreso {
            padding: 0.25rem 0.5rem;
        }
        #tablaEgresos tbody tr:hover {
            background-color: #f8f9fa;
        }
    </style>
@stop

@section('plugins.Sweetalert2', true)

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            // Fecha de la caja activa (formato YYYY-MM-DD para input date)
            @if($cajaActiva)
            const fechaCajaActiva = '{{ $cajaActiva->fecha_apertura->format('Y-m-d') }}';
            @else
            const fechaCajaActiva = new Date().toISOString().split('T')[0]; // Fallback a fecha actual
            @endif

            let contadorEgresos = 0;

            // Agregar nueva fila de egreso
            $('#btnAgregarEgreso').on('click', function() {
                contadorEgresos++;
                const fila = crearFilaEgreso(contadorEgresos);
                $('#tbodyEgresos').append(fila);
                actualizarTotal();
            });

            // Crear fila de egreso
            function crearFilaEgreso(index) {
                const fila = $(`
                    <tr data-index="${index}">
                        <td>${index}</td>
                        <td>
                            <input type="number" name="egresos[${index}][monto]" class="form-control form-control-sm monto-egreso"
                                   step="0.01" min="0.01" required placeholder="0.00">
                            <small class="text-danger monto-error" style="display: none;"></small>
                        </td>
                        <td>
                            <input type="date" name="egresos[${index}][fecha_registro]"
                                   class="form-control form-control-sm fecha-egreso" value="${fechaCajaActiva}" required>
                        </td>
                        <td>
                            <input type="text" name="egresos[${index}][descripcion]"
                                   class="form-control form-control-sm descripcion-egreso" 
                                   placeholder="Ej: Pago de servicios, compra de materiales..." required maxlength="255">
                            <small class="text-danger descripcion-error" style="display: none;"></small>
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm btn-remove-egreso" title="Eliminar">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                `);

                // Eventos para la fila
                fila.find('.monto-egreso').on('input', function() {
                    validarMonto(fila);
                    actualizarTotal();
                });

                fila.find('.descripcion-egreso').on('input', function() {
                    validarDescripcion(fila);
                });

                fila.find('.btn-remove-egreso').on('click', function() {
                    fila.remove();
                    actualizarTotal();
                    renumerarFilas();
                });

                return fila;
            }

            // Renumerar filas
            function renumerarFilas() {
                $('#tbodyEgresos tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                });
            }

            // Validar monto
            function validarMonto(fila) {
                const montoInput = fila.find('.monto-egreso');
                const monto = parseFloat(montoInput.val()) || 0;
                const errorMsg = fila.find('.monto-error');

                montoInput.removeClass('is-invalid is-valid');
                errorMsg.hide().text('');

                if (!montoInput.val() || montoInput.val().trim() === '') {
                    montoInput.addClass('is-invalid');
                    errorMsg.text('El monto es requerido').show();
                    return false;
                }

                if (monto <= 0) {
                    montoInput.addClass('is-invalid');
                    errorMsg.text('El monto debe ser mayor a 0').show();
                    return false;
                }

                montoInput.addClass('is-valid');
                return true;
            }

            // Validar descripción
            function validarDescripcion(fila) {
                const descripcionInput = fila.find('.descripcion-egreso');
                const descripcion = descripcionInput.val().trim();
                const errorMsg = fila.find('.descripcion-error');

                descripcionInput.removeClass('is-invalid is-valid');
                errorMsg.hide().text('');

                if (!descripcion || descripcion === '') {
                    descripcionInput.addClass('is-invalid');
                    errorMsg.text('La descripción es requerida').show();
                    return false;
                }

                if (descripcion.length > 255) {
                    descripcionInput.addClass('is-invalid');
                    errorMsg.text('La descripción no puede exceder 255 caracteres').show();
                    return false;
                }

                descripcionInput.addClass('is-valid');
                return true;
            }

            // Actualizar total de egresos
            function actualizarTotal() {
                let total = 0;
                $('.monto-egreso').each(function() {
                    const monto = parseFloat($(this).val()) || 0;
                    total += monto;
                });
                $('#totalEgresos').text('S/ ' + total.toFixed(2));
            }

            // Validar formulario antes de enviar
            $('#egresosMultipleForm').on('submit', function(e) {
                e.preventDefault();

                const filasEgresos = $('#tbodyEgresos tr').length;
                if (filasEgresos === 0) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Debe agregar al menos un egreso.'
                    });
                    return false;
                }

                // Validar que todos los campos requeridos estén llenos
                let hayErrores = false;
                let mensajeError = '';
                let totalEgresos = 0;

                $('#tbodyEgresos tr').each(function(index) {
                    const fila = $(this);
                    const monto = fila.find('.monto-egreso').val();
                    const descripcion = fila.find('.descripcion-egreso').val().trim();
                    const fecha = fila.find('.fecha-egreso').val();

                    // Validar monto
                    if (!monto || parseFloat(monto) <= 0) {
                        hayErrores = true;
                        mensajeError += `Egreso #${index + 1}: El monto es requerido y debe ser mayor a 0.\n`;
                    } else {
                        totalEgresos += parseFloat(monto);
                    }

                    // Validar descripción
                    if (!descripcion || descripcion === '') {
                        hayErrores = true;
                        mensajeError += `Egreso #${index + 1}: La descripción es requerida.\n`;
                    }

                    if (descripcion && descripcion.length > 255) {
                        hayErrores = true;
                        mensajeError += `Egreso #${index + 1}: La descripción no puede exceder 255 caracteres.\n`;
                    }

                    // Validar fecha
                    if (!fecha) {
                        hayErrores = true;
                        mensajeError += `Egreso #${index + 1}: La fecha es requerida.\n`;
                    }
                });

                if (hayErrores) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error de validación',
                        text: mensajeError,
                        width: '600px'
                    });
                    return false;
                }

                // Preparar datos de egresos
                const egresosData = [];
                $('#tbodyEgresos tr').each(function() {
                    const fila = $(this);
                    egresosData.push({
                        monto: fila.find('.monto-egreso').val(),
                        descripcion: fila.find('.descripcion-egreso').val().trim(),
                        fecha_registro: fila.find('.fecha-egreso').val(),
                    });
                });

                // Mostrar resumen antes de confirmar
                Swal.fire({
                    title: '¿Confirmar registro?',
                    html: `
                        <div class="text-left">
                            <p><strong>Total de egresos:</strong> ${filasEgresos}</p>
                            <p><strong>Monto total:</strong> S/ ${totalEgresos.toFixed(2)}</p>
                            <p class="text-muted"><small>Se registrarán ${filasEgresos} egreso(s) en la caja activa.</small></p>
                        </div>
                    `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, registrar',
                    cancelButtonText: 'Cancelar',
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#dc3545'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Enviar datos
                        $.ajax({
                            url: $('#egresosMultipleForm').attr('action'),
                            method: 'POST',
                            data: {
                                _token: $('input[name="_token"]').val(),
                                egresos: egresosData
                            },
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: '¡Éxito!',
                                        text: response.message,
                                        confirmButtonText: 'OK'
                                    }).then(() => {
                                        window.location.href = '{{ route("egresos.index") }}';
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: response.message || 'Error al registrar los egresos.'
                                    });
                                }
                            },
                            error: function(xhr) {
                                let mensaje = 'Error al registrar los egresos.';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    mensaje = xhr.responseJSON.message;
                                } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                                    let errors = '';
                                    for (let field in xhr.responseJSON.errors) {
                                        errors += xhr.responseJSON.errors[field].join(', ') + '\n';
                                    }
                                    mensaje = 'Error de validación:\n' + errors;
                                }
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: mensaje
                                });
                            }
                        });
                    }
                });

                return false;
            });
        });
    </script>
@stop