@extends('layouts.admin')

@section('title', 'Cierre de Caja')

@section('content')
<div class="container-fluid">

    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-primary text-white shadow">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="font-weight-bold mb-0">VENTA TOTAL GENERADA ({{ date('d/m/Y') }})</h5>
                        <small class="text-white-50">Incluye Efectivo, Bancos y Créditos</small>
                    </div>
                    <div class="display-4 font-weight-bold">
                        Q. {{ number_format($total_vendido_dia, 2) }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form action="{{ route('caja.cuadreStore') }}" method="POST" id="formCierre">
        @csrf


        <input type="hidden" name="sistema_efectivo" value="{{ $efectivo_esperado_en_caja }}">
        <input type="hidden" name="sistema_tarjeta" value="{{ $cobrado_tarjeta }}">

        <input type="hidden" name="sistema_transf" value="{{ $cobrado_transf }}">
        <input type="hidden" name="sistema_cheque" value="{{ $cobrado_cheque }}">

        <div class="row">

            <div class="col-lg-5 mb-4">

                <div class="card shadow mb-4 border-left-success">
                    <div class="card-header py-3 bg-white">
                        <h6 class="m-0 font-weight-bold text-success"><i class="fas fa-money-bill-wave mr-2"></i>Dinero Líquido (Cajón)</h6>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm table-borderless">
                            <tr>
                                <td class="text-muted small">Saldo Inicial + Entradas</td>
                                <td class="text-right">Q. {{ number_format($entradas_manuales, 2) }}</td>
                            </tr>
                            <tr>
                                <td class="text-muted small">Ventas en Efectivo</td>
                                <td class="text-right font-weight-bold text-success">Q. {{ number_format($cobrado_efectivo, 2) }}</td>
                            </tr>
                            <tr class="border-bottom">
                                <td class="text-muted small">Salidas / Gastos</td>
                                <td class="text-right text-danger">- Q. {{ number_format($salidas_manuales, 2) }}</td>
                            </tr>
                            <tr class="bg-light mt-2">
                                <td class="font-weight-bold p-2">DEBE HABER EN CAJA:</td>
                                <td class="font-weight-bold text-right p-2 h5 mb-0 text-dark">Q. {{ number_format($efectivo_esperado_en_caja, 2) }}</td>
                            </tr>
                        </table>
                        <input type="hidden" id="sys_efectivo" value="{{ $efectivo_esperado_en_caja }}">
                    </div>
                </div>

                <div class="card shadow mb-4 border-left-info">
                    <div class="card-header py-3 bg-white">
                        <h6 class="m-0 font-weight-bold text-info"><i class="fas fa-university mr-2"></i>Documentos y Bancos</h6>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm table-borderless">
                            <tr>
                                <td>Tarjetas / POS</td>
                                <td class="text-right font-weight-bold">Q. {{ number_format($cobrado_tarjeta, 2) }}</td>
                            </tr>
                            <tr>
                                <td>Transferencias</td>
                                <td class="text-right font-weight-bold">Q. {{ number_format($cobrado_transf, 2) }}</td>
                            </tr>
                            <tr>
                                <td>Cheques</td>
                                <td class="text-right font-weight-bold">Q. {{ number_format($cobrado_cheque, 2) }}</td>
                            </tr>
                            <tr class="border-top mt-2">
                                <td class="text-muted small pt-2">Ventas al Crédito (Info)</td>
                                <td class="text-right text-muted small pt-2">Q. {{ number_format($ventas_credito, 2) }}</td>
                            </tr>
                        </table>
                        <input type="hidden" id="sys_tarjeta" value="{{ $cobrado_tarjeta }}">
                        <input type="hidden" id="sys_transf" value="{{ $cobrado_transf }}">
                        <input type="hidden" id="sys_cheque" value="{{ $cobrado_cheque }}">
                    </div>
                </div>

            </div>

            <div class="col-lg-7 mb-4">
                <div class="card shadow h-100">
                    <div class="card-header py-3 bg-gray-900 text-white d-flex justify-content-between align-items-center">
                        <h6 class="m-0 font-weight-bold"><i class="fas fa-hand-holding-usd mr-2"></i>Conteo Físico</h6>
                        <span class="badge badge-light text-dark">Ingrese lo que cuenta</span>
                    </div>
                    <div class="card-body">

                        <div class="alert alert-warning small mb-4">
                            <i class="fas fa-info-circle"></i> Ingrese la cantidad exacta de dinero y documentos que tiene en mano. El sistema calculará la diferencia.
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label font-weight-bold text-success">Total Efectivo:</label>
                            <div class="col-sm-8">
                                <div class="input-group input-group-lg">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-success text-white">Q</span>
                                    </div>
                                    <input type="number" step="0.01" class="form-control font-weight-bold input-calculo"
                                        name="fisico_efectivo" id="fisico_efectivo" required placeholder="0.00">
                                </div>
                                <div id="msg_efectivo" class="text-right mt-1 font-weight-bold small" style="min-height: 20px;"></div>
                            </div>
                        </div>

                        <hr>

                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label">Vouchers (POS):</label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-credit-card"></i></span></div>
                                    <input type="number" step="0.01" class="form-control input-calculo"
                                        name="fisico_tarjeta" id="fisico_tarjeta" placeholder="0.00">
                                </div>
                                <div id="msg_tarjeta" class="text-right mt-1 small" style="min-height: 20px;"></div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label">Transferencias:</label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-mobile-alt"></i></span></div>
                                    <input type="number" step="0.01" class="form-control input-calculo"
                                        name="fisico_transf" id="fisico_transf" placeholder="0.00">
                                </div>
                                <div id="msg_transf" class="text-right mt-1 small" style="min-height: 20px;"></div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-4 col-form-label">Cheques:</label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-money-check"></i></span></div>
                                    <input type="number" step="0.01" class="form-control input-calculo"
                                        name="fisico_cheque" id="fisico_cheque" placeholder="0.00">
                                </div>
                                <div id="msg_cheque" class="text-right mt-1 small" style="min-height: 20px;"></div>
                            </div>
                        </div>

                        <hr>

                        <div class="form-group">
                            <label>Observaciones del Cierre:</label>
                            <textarea name="observaciones" class="form-control" rows="2" placeholder="Ej: Faltan Q.5 por compra de agua sin vale..."></textarea>
                        </div>

                    </div>
                    <div class="card-footer bg-light">
                        <div class="row align-items-center">
                            <div class="col-6">
                                <h6 class="font-weight-bold text-dark mb-0">Balance Global:</h6>
                                <h4 id="gran_total_diff" class="font-weight-bold mb-0 text-muted">Q. 0.00</h4>
                            </div>
                            <div class="col-6 text-right">
                                <button type="submit" class="btn btn-dark btn-lg shadow-sm">
                                    <i class="fas fa-lock mr-2"></i> CERRAR CAJA
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
    const formatter = new Intl.NumberFormat('es-GT', {
        style: 'currency',
        currency: 'GTQ',
        minimumFractionDigits: 2
    });

    $(document).ready(function() {
        // Ejecutar calculo al escribir
        $('.input-calculo').on('input change', function() {
            calcularCuadre();
        });
    });

    function calcularCuadre() {
        let totalDiferenciaGlobal = 0;

        // --- 1. Calcular Efectivo ---
        let sys_efectivo = parseFloat($('#sys_efectivo').val()) || 0;
        let fis_efectivo = parseFloat($('#fisico_efectivo').val()) || 0;
        let diff_efectivo = fis_efectivo - sys_efectivo;
        totalDiferenciaGlobal += diff_efectivo;
        mostrarMensaje('#msg_efectivo', diff_efectivo);

        // --- 2. Calcular Tarjeta ---
        let sys_tarjeta = parseFloat($('#sys_tarjeta').val()) || 0;
        let fis_tarjeta = parseFloat($('#fisico_tarjeta').val()) || 0;
        let diff_tarjeta = fis_tarjeta - sys_tarjeta;
        totalDiferenciaGlobal += diff_tarjeta;
        mostrarMensaje('#msg_tarjeta', diff_tarjeta);

        // --- 3. Calcular Transferencia ---
        let sys_transf = parseFloat($('#sys_transf').val()) || 0;
        let fis_transf = parseFloat($('#fisico_transf').val()) || 0;
        let diff_transf = fis_transf - sys_transf;
        totalDiferenciaGlobal += diff_transf;
        mostrarMensaje('#msg_transf', diff_transf);

        // --- 4. Calcular Cheque ---
        let sys_cheque = parseFloat($('#sys_cheque').val()) || 0;
        let fis_cheque = parseFloat($('#fisico_cheque').val()) || 0;
        let diff_cheque = fis_cheque - sys_cheque;
        totalDiferenciaGlobal += diff_cheque;
        mostrarMensaje('#msg_cheque', diff_cheque);


        // --- 5. Total Global ---
        let labelTotal = $('#gran_total_diff');

        if (Math.abs(totalDiferenciaGlobal) < 0.05) {
            labelTotal.html('<span class="text-success"><i class="fas fa-check-circle"></i> CUADRADO</span>');
        } else if (totalDiferenciaGlobal > 0) {
            labelTotal.html('<span class="text-primary">SOBRAN ' + formatter.format(totalDiferenciaGlobal) + '</span>');
        } else {
            labelTotal.html('<span class="text-danger">FALTAN ' + formatter.format(Math.abs(totalDiferenciaGlobal)) + '</span>');
        }
    }

    function mostrarMensaje(selector, diferencia) {
        let el = $(selector);
        // Margen de error de 5 centavos
        if (Math.abs(diferencia) < 0.05) {
            el.html('<span class="text-success"><i class="fas fa-check"></i> Correcto</span>');
        } else if (diferencia > 0) {
            el.html('<span class="text-primary">Sobra: Q. ' + diferencia.toFixed(2) + '</span>');
        } else {
            el.html('<span class="text-danger font-weight-bold">Falta: Q. ' + Math.abs(diferencia).toFixed(2) + '</span>');
        }
    }
</script>
@endsection