<?php 
// Configuración de moneda desde el archivo de configuración global
$moneda = $config['moneda'] ?? 'S/';
?>

<div class="container-fluid p-4">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center bg-white p-3 rounded shadow-sm">
            <div>
                <h4 class="fw-bold m-0 text-danger"><i class="fas fa-wallet me-2"></i>Gestión de Egresos</h4>
                <p class="text-muted small m-0">Registra salidas de dinero, pagos a proveedores o gastos menores.</p>
            </div>
            <div class="text-end">
                <span class="badge bg-danger p-2 fs-6">Gastos de Hoy: <span id="total-gastos-hoy">0.00</span></span>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-danger text-white fw-bold">
                    Nuevo Movimiento de Salida
                </div>
                <div class="card-body">
                    <form id="formEgreso" onsubmit="guardarEgreso(event)">
                        <div class="mb-3">
                            <label class="small fw-bold">Categoría de Gasto</label>
                            <select name="categoria" class="form-select" required>
                                <option value="Servicios">Servicios (Luz, Agua, Internet)</option>
                                <option value="Personal">Adelantos / Sueldos</option>
                                <option value="Limpieza">Artículos de Limpieza</option>
                                <option value="Proveedores">Pago a Proveedores</option>
                                <option value="Transporte">Transporte / Delivery</option>
                                <option value="Otros" selected>Otros Gastos Menores</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="small fw-bold">Monto a Retirar (<?php echo $moneda; ?>)</label>
                            <input type="number" step="0.01" name="monto" class="form-control form-control-lg fw-bold text-danger" placeholder="0.00" required>
                        </div>
                        <div class="mb-3">
                            <label class="small fw-bold">Descripción detallada</label>
                            <textarea name="descripcion" class="form-control" rows="3" placeholder="Ej: Pago de recibo de luz del mes de Octubre..." required></textarea>
                        </div>
                        <button type="submit" class="btn btn-danger w-100 py-2 fw-bold shadow">
                            <i class="fas fa-check-circle me-1"></i> REGISTRAR GASTO
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white fw-bold">
                    <i class="fas fa-history me-1"></i> Movimientos Registrados Hoy
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle m-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-3">Hora</th>
                                    <th>Categoría</th>
                                    <th>Descripción</th>
                                    <th class="text-end pe-3">Monto</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-egresos">
                                </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', loadEgresos);

function guardarEgreso(e) {
    e.preventDefault();
    
    Swal.fire({
        title: '¿Confirmar Salida de Dinero?',
        text: "Este monto se descontará automáticamente del efectivo en caja.",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        confirmButtonText: 'Sí, registrar gasto'
    }).then((result) => {
        if (result.isConfirmed) {
            let fd = new FormData(document.getElementById('formEgreso'));
            fetch('api.php?task=save_egreso', { method: 'POST', body: fd })
            .then(r => r.json())
            .then(res => {
                if(res.success) {
                    Swal.fire({ icon: 'success', title: 'Registrado', showConfirmButton: false, timer: 1500 });
                    document.getElementById('formEgreso').reset();
                    loadEgresos();
                } else {
                    Swal.fire('Error', res.error, 'error');
                }
            });
        }
    });
}

function loadEgresos() {
    fetch('api.php?task=get_egresos')
    .then(r => r.json())
    .then(data => {
        let html = '';
        let total = 0;
        data.forEach(item => {
            total += parseFloat(item.monto);
            let hora = item.fecha.split(' ')[1];
            html += `
                <tr>
                    <td class="ps-3 text-muted small">${hora}</td>
                    <td><span class="badge bg-light text-danger border border-danger">${item.categoria}</span></td>
                    <td class="small">${item.descripcion}</td>
                    <td class="text-end pe-3 fw-bold text-danger">- ${parseFloat(item.monto).toFixed(2)}</td>
                </tr>`;
        });
        document.getElementById('tbody-egresos').innerHTML = html || '<tr><td colspan="4" class="text-center py-4 text-muted">No se han registrado gastos hoy.</td></tr>';
        document.getElementById('total-gastos-hoy').innerText = total.toFixed(2);
    });
}
</script>