@extends('index')
@section('contenido')
<div class="container-fluid" style="padding: 0.5rem;">
    
    <!-- Header con información de Caja -->
    <div class="card mb-2">
        <div class="card-body p-2">
            <div class="d-flex justify-content-between align-items-center flex-wrap">
                <div class="mb-1 mb-sm-0">
                    <h6 class="mb-0">
                        <span class="text-muted">I S/. & $ I - CAJA:</span>
                        <span class="text-primary fw-bold">Nº {{ $caja_info['codigo'] }}</span>
                        <span class="text-muted">, CON ESTADO:</span>
                        <span class="text-success fw-bold">{{ $caja_info['estado'] }}</span>
                        <span class="text-muted">.::{{ $caja_info['fecha'] }}</span>
                    </h6>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <small class="text-muted">Detallado</small>
                    <label class="switch mb-0">
                        <input type="checkbox" id="switch-vista" checked>
                        <span class="slider round"></span>
                    </label>
                    <small class="text-primary fw-bold">Efectivo</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Vista EFECTIVO (por defecto visible) -->
    <div id="vista-efectivo">
        <div class="card mb-2">
            <div class="card-header bg-success text-white p-2">
                <h6 class="mb-0"><i class="fas fa-arrow-down"></i> INGRESOS</h6>
            </div>
            <div class="card-body p-2">
                <table class="table table-sm table-borderless mb-0">
                    <tbody>
                        <tr>
                            <td class="text-start">DINERO EN EGRESOS S/.</td>
                            <td class="text-end fw-bold text-success">S/. {{ number_format($cajachica['ingresos_efectivo'], 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">VENTAS | EFECT S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($cajachica['ventas_efectivo'], 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">COBRANZA | EFECT S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($cajachica['cobranza_efectivo'], 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">TRANSFER | EFECT S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($cajachica['transfer_efectivo_ingreso'], 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">COMP/VENT S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($cajachica['compra_venta_ingreso'], 2) }}</td>
                        </tr>
                        <tr class="border-top">
                            <td class="text-start fw-bold">TOTAL INGRESOS S/.</td>
                            <td class="text-end fw-bold text-success">S/. {{ number_format($cajachica['total_ingresos'], 2) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card mb-2">
            <div class="card-header bg-danger text-white p-2">
                <h6 class="mb-0"><i class="fas fa-arrow-up"></i> EGRESOS</h6>
            </div>
            <div class="card-body p-2">
                <table class="table table-sm table-borderless mb-0">
                    <tbody>
                        <tr>
                            <td class="text-start">EGRESOS S/.</td>
                            <td class="text-end fw-bold text-danger">S/. {{ number_format($cajachica['egresos_efectivo'], 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">PLAN. MOVILIDAD S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($cajachica['planilla_movilidad'], 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">PAGOS | EFECT S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($cajachica['pagos_efectivo'], 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">TRANSFER | EFECT S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($cajachica['transfer_efectivo_egreso'], 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">COMP/VENT S/.</td>
                            <td class="text-end fw-bold">S/. {{ number_format($cajachica['compra_venta_egreso'], 2) }}</td>
                        </tr>
                        <tr class="border-top">
                            <td class="text-start fw-bold">TOTAL EGRESOS S/.</td>
                            <td class="text-end fw-bold text-danger">S/. {{ number_format($cajachica['total_egresos'], 2) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card mb-2 border-warning">
            <div class="card-body p-2 bg-warning bg-opacity-25">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 text-dark">TOTAL EFECTIVO:</h5>
                    <h4 class="mb-0 fw-bold text-dark">S/. {{ number_format($cajachica['total_efectivo'], 2) }}</h4>
                </div>
            </div>
        </div>

        <div class="card mb-2">
            <div class="card-header bg-primary text-white p-2">
                <h6 class="mb-0"><i class="fas fa-info-circle"></i> TRANSF. DE VALORES TOTALES</h6>
            </div>
            <div class="card-body p-2">
                <table class="table table-sm table-borderless mb-0">
                    <tbody>
                        <tr>
                            <td class="text-start">VENTAS AL CONTADO:</td>
                            <td class="text-end fw-bold">S/. {{ number_format($cajachica['ventas_al_contado_total'], 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">VENTAS AL CRÉDITO:</td>
                            <td class="text-end fw-bold">S/. {{ number_format($cajachica['ventas_al_credito_total'], 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">COBRANZA CLIENTES:</td>
                            <td class="text-end fw-bold">S/. {{ number_format($cajachica['cobranza_clientes_total'], 2) }}</td>
                        </tr>
                        <tr class="border-top">
                            <td class="text-start">TRANSF. INGRESO S/.</td>
                            <td class="text-end fw-bold text-success">S/. {{ number_format($cajachica['transf_ingreso'], 2) }}</td>
                        </tr>
                        <tr>
                            <td class="text-start">TRANSF. SALIDA S/.</td>
                            <td class="text-end fw-bold text-danger">S/. {{ number_format($cajachica['transf_salida'], 2) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Vista DETALLADA (por defecto oculta) -->
    <div id="vista-detallada" style="display: none;">
        <div class="row g-2">
            <!-- Columna INGRESOS -->
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-success text-white p-2">
                        <h6 class="mb-0"><i class="fas fa-arrow-down"></i> INGRESOS</h6>
                    </div>
                    <div class="card-body p-2">
                        <table class="table table-sm table-borderless mb-0">
                            <tbody>
                                <tr>
                                    <td class="text-start">Ingreso de Efectivo</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['ingresos_efectivo'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">Ventas al Contado</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['ventas_contado'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">Ventas al Crédito</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['ventas_credito'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">Cobranzas a Clientes</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['cobranzas_clientes'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">Cobr: Efectivo (S/.)</td>
                                    <td class="text-end fw-bold text-success">S/. {{ number_format($cajachica['cobr_efectivo'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">Cobr: Depósito Bancario</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['cobr_deposito'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">Cobr: Transferencia</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['cobr_transferencia'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">Cobr: YAPE</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['cobr_yape'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">Transf. de Dinero</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['transf_dinero'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">TD: Efectivo (S/.)</td>
                                    <td class="text-end fw-bold text-success">S/. {{ number_format($cajachica['td_efectivo'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">Compra/Venta Dólares</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['compra_venta_dolares'], 2) }}</td>
                                </tr>
                                <tr class="border-top">
                                    <td class="text-start fw-bold">TOTAL INGRESOS:</td>
                                    <td class="text-end fw-bold text-success">S/. {{ number_format($cajachica['total_ingresos'], 2) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Columna EGRESOS -->
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-danger text-white p-2">
                        <h6 class="mb-0"><i class="fas fa-arrow-up"></i> EGRESOS</h6>
                    </div>
                    <div class="card-body p-2">
                        <table class="table table-sm table-borderless mb-0">
                            <tbody>
                                <tr>
                                    <td class="text-start">Salida de Efectivo</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['egresos_efectivo'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">***** Pagos a Proveedores</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['pago_proveedores'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">Pag: Efectivo (S/.)</td>
                                    <td class="text-end fw-bold text-danger">S/. {{ number_format($cajachica['pag_efectivo'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">***** Pagos de Hojas de Letras</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['pago_letras'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">***** Pagos de Provisiones</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['pago_provisiones'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">Transf. de Dinero</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['transf_salida'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">TD: Efectivo (S/.)</td>
                                    <td class="text-end fw-bold text-danger">S/. {{ number_format($cajachica['td_salida'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">Planilla Movilidad</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['planilla_movilidad'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">Compra/Venta Dólares</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['compra_venta_dolares_egreso'], 2) }}</td>
                                </tr>
                                <tr class="border-top">
                                    <td class="text-start fw-bold">TOTAL EGRESOS:</td>
                                    <td class="text-end fw-bold text-danger">S/. {{ number_format($cajachica['total_egresos'], 2) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Total Final -->
            <div class="col-12">
                <div class="card border-warning">
                    <div class="card-body p-2 bg-warning bg-opacity-25">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0 text-dark">TOTAL EFECTIVO:</h5>
                            <h4 class="mb-0 fw-bold text-dark">S/. {{ number_format($cajachica['total_efectivo'], 2) }}</h4>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Info adicional -->
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-info text-white p-2">
                        <h6 class="mb-0"><i class="fas fa-info-circle"></i> Información Adicional</h6>
                    </div>
                    <div class="card-body p-2">
                        <table class="table table-sm table-borderless mb-0">
                            <tbody>
                                <tr>
                                    <td class="text-start">VENTAS AL CONTADO:</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['ventas_al_contado_total'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">VENTAS AL CRÉDITO:</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['ventas_al_credito_total'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start">COBRANZA CLIENTES:</td>
                                    <td class="text-end fw-bold">S/. {{ number_format($cajachica['cobranza_clientes_total'], 2) }}</td>
                                </tr>
                                <tr class="border-top">
                                    <td class="text-start fw-bold">CONTADO + CRÉDITO:</td>
                                    <td class="text-end fw-bold text-primary">S/. {{ number_format($cajachica['contado_credito'], 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start fw-bold">TOTALES:</td>
                                    <td class="text-end fw-bold text-success">S/. {{ number_format($cajachica['totales_general'], 2) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Switch estilo iOS */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    vertical-align: middle;
}
.switch input {display:none;}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #bfc9d1;
    transition: .4s;
    border-radius: 26px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
.switch input:checked + .slider {
    background-color: #28a745;
}
.switch input:checked + .slider:before {
    transform: translateX(22px);
}

/* Estadísticas */
.stat-box {
    border: 1px solid #e0e0e0;
}
.stat-label {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 0.25rem;
}
.stat-value {
    font-size: 1.1rem;
    font-weight: bold;
}
.stat-value-sm {
    font-size: 0.95rem;
    font-weight: bold;
}
.stat-value-big {
    font-size: 1.5rem;
}

/* Tablas compactas */
.table-sm td {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
}

/* Optimización móvil */
@media (max-width: 576px) {
    .container-fluid {
        padding: 0.25rem !important;
    }
    .card-body {
        padding: 0.5rem !important;
    }
    h5 {
        font-size: 1rem;
    }
    h6 {
        font-size: 0.9rem;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const switchVista = document.getElementById('switch-vista');
    const vistaEfectivo = document.getElementById('vista-efectivo');
    const vistaDetallada = document.getElementById('vista-detallada');

    switchVista.addEventListener('change', function() {
        if (this.checked) {
            // Mostrar vista Efectivo
            vistaEfectivo.style.display = 'block';
            vistaDetallada.style.display = 'none';
        } else {
            // Mostrar vista Detallada
            vistaEfectivo.style.display = 'none';
            vistaDetallada.style.display = 'block';
        }
    });
});
</script>

@endsection