<div class="content-wrapper">
    <section class="content-header">
        <h1>
            Caja #<?php echo str_pad($caja->id, 4, '0', STR_PAD_LEFT); ?>
            <?php if ($caja->estado_codigo === 'ABT'): ?>
                <span class="label label-success" style="font-size:14px;">Abierta</span>
            <?php else: ?>
                <span class="label label-default" style="font-size:14px;">Cerrada</span>
            <?php endif; ?>
        </h1>
    </section>

    <section class="content">

        <!-- Tarjetas de resumen -->
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="info-box bg-aqua">
                    <span class="info-box-icon"><i class="fa fa-money"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Saldo actual</span>
                        <span class="info-box-number" id="saldoActual">
                            <?php echo $caja->moneda_abreviado . ' ' . number_format($caja->monto_actual, 2); ?>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="info-box bg-green">
                    <span class="info-box-icon"><i class="fa fa-arrow-down"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Total ingresos</span>
                        <span class="info-box-number">
                            <?php echo $caja->moneda_abreviado . ' ' . number_format($resumen->total_ingresos, 2); ?>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="info-box bg-red">
                    <span class="info-box-icon"><i class="fa fa-arrow-up"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Total egresos</span>
                        <span class="info-box-number">
                            <?php echo $caja->moneda_abreviado . ' ' . number_format($resumen->total_egresos, 2); ?>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="info-box bg-yellow">
                    <span class="info-box-icon"><i class="fa fa-calendar"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Apertura</span>
                        <span class="info-box-number" style="font-size:16px;">
                            <?php echo date('d/m/Y', strtotime($caja->fecha_apertura)); ?>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">

                <!-- Acciones -->
                <div style="margin-bottom:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;">
                    <?php if ($caja->estado_codigo === 'ABT'): ?>
                        <?php if (tiene_permiso('caja_chica_ingreso')): ?>
                            <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#modalMovimiento"
                                    onclick="abrirModal('I')">
                                <i class="fa fa-plus"></i> Registrar ingreso
                            </button>
                        <?php endif; ?>
                        <?php if (tiene_permiso('caja_chica_egreso')): ?>
                            <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#modalMovimiento"
                                    onclick="abrirModal('E')">
                                <i class="fa fa-minus"></i> Registrar egreso
                            </button>
                        <?php endif; ?>
                        <?php if (tiene_permiso('caja_chica_cierre')): ?>
                            <button class="btn btn-warning btn-sm" id="btnCerrarCaja">
                                <i class="fa fa-lock"></i> Cerrar caja
                            </button>
                        <?php endif; ?>
                    <?php endif; ?>

                    <a href="<?php echo base_url('index.php/finanzas/caja_chica/reporte/'.$caja->id); ?>"
                       class="btn btn-default btn-sm" target="_blank">
                        <i class="fa fa-print"></i> Imprimir reporte
                    </a>
                    <a href="<?php echo base_url('index.php/finanzas/caja_chica'); ?>"
                       class="btn btn-default btn-sm">
                        <i class="fa fa-arrow-left"></i> Volver
                    </a>
                </div>

                <!-- Tabla de movimientos -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <strong><i class="fa fa-list"></i> Movimientos</strong>
                        <span class="pull-right text-muted" style="font-size:12px;">
                            Con comprobante: <strong><?php echo $caja->moneda_abreviado . ' ' . number_format($resumen->total_egresos_con_comp, 2); ?></strong>
                            &nbsp;|&nbsp;
                            Sin comprobante: <strong><?php echo $caja->moneda_abreviado . ' ' . number_format($resumen->total_egresos_sin_comp, 2); ?></strong>
                        </span>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table id="tablaMovimientos" class="table table-bordered table-hover table-striped" style="font-size:12px;">
                                <thead>
                                    <tr>
                                        <th>Fecha</th>
                                        <th>Tipo</th>
                                        <th>Origen</th>
                                        <th>Concepto</th>
                                        <th>Proveedor</th>
                                        <th>Comprobante</th>
                                        <th>Banco / Cuenta</th>
                                        <th class="text-right">Ingreso</th>
                                        <th class="text-right">Egreso</th>
                                        <th>Registrado por</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach ($movimientos as $mov): ?>
                                        <tr class="<?php echo $mov->tipo === 'I' ? 'success' : 'danger'; ?>" style="opacity:0.85;">
                                            <td><?php echo date('d/m/Y', strtotime($mov->fecha)); ?></td>
                                            <td>
                                                <?php if ($mov->tipo === 'I'): ?>
                                                    <span class="label label-success">Ingreso</span>
                                                <?php else: ?>
                                                    <span class="label label-danger">Egreso</span>
                                                <?php endif; ?>
                                            </td>
                                            <td>
                                                <span class="label label-default">
                                                    <?php echo $mov->origen; ?>
                                                </span>
                                            </td>
                                            <td><?php echo $mov->concepto; ?></td>
                                            <td>
                                                <?php if (!empty($mov->proveedor_nombre)): ?>
                                                    <?php echo $mov->proveedor_nombre; ?>
                                                    <?php if (!empty($mov->proveedor_ruc)): ?>
                                                        <br><small class="text-muted"><?php echo $mov->proveedor_ruc; ?></small>
                                                    <?php endif; ?>
                                                <?php else: ?>
                                                    —
                                                <?php endif; ?>
                                            </td>
                                            <td>
                                                <?php if ($mov->tiene_comprobante): ?>
                                                    <i class="fa fa-check text-success"></i>
                                                    <?php echo $mov->tipo_comprobante; ?>
                                                    <?php if (!empty($mov->nro_comprobante)): ?>
                                                        <br><small><?php echo $mov->nro_comprobante; ?></small>
                                                    <?php endif; ?>
                                                <?php else: ?>
                                                    <span class="text-muted">—</span>
                                                <?php endif; ?>
                                            </td>
                                            <td>
                                                <?php if (!empty($mov->banco_nombre)): ?>
                                                    <?php echo $mov->banco_nombre; ?>
                                                    <br><small class="text-muted"><?php echo $mov->numero_cuenta; ?></small>
                                                    <?php if (!empty($mov->banco_nro_operacion)): ?>
                                                        <br><small class="text-muted">Op: <?php echo $mov->banco_nro_operacion; ?></small>
                                                    <?php endif; ?>
                                                <?php else: ?>
                                                    —
                                                <?php endif; ?>
                                            </td>
                                            <td class="text-right text-success">
                                                <?php echo $mov->tipo === 'I' ? number_format($mov->monto, 2) : ''; ?>
                                            </td>
                                            <td class="text-right text-danger">
                                                <?php echo $mov->tipo === 'E' ? number_format($mov->monto, 2) : ''; ?>
                                            </td>
                                            <td><?php echo $mov->usuario_nombre ?? '—'; ?></td>
                                        </tr>
                                    <?php endforeach; ?>
                                </tbody>
                                <tfoot>
                                    <tr style="font-weight:bold; background:#f5f5f5;">
                                        <td colspan="7" class="text-right">TOTALES:</td>
                                        <td class="text-right text-success">
                                            <?php echo number_format($resumen->total_ingresos, 2); ?>
                                        </td>
                                        <td class="text-right text-danger">
                                            <?php echo number_format($resumen->total_egresos, 2); ?>
                                        </td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</div>

<!-- ============================================================
     MODAL: Registrar movimiento
============================================================ -->
<div class="modal fade" id="modalMovimiento" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" id="modalMovimientoHeader">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="modalMovimientoTitulo">Registrar movimiento</h4>
            </div>
            <div class="modal-body">

                <input type="hidden" id="mov_tipo" value="">

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Fecha <span class="text-danger">*</span></label>
                            <input type="date" id="mov_fecha" class="form-control"
                                   value="<?php echo date('Y-m-d'); ?>">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Origen <span class="text-danger">*</span></label>
                            <select id="mov_origen" class="form-control">
                                <option value="">Seleccione...</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label>Concepto <span class="text-danger">*</span></label>
                    <input type="text" id="mov_concepto" class="form-control" maxlength="255">
                </div>

                <div class="form-group">
                    <label>Monto <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <span class="input-group-addon"><?php echo $caja->moneda_abreviado; ?></span>
                        <input type="number" id="mov_monto" class="form-control" step="0.01" min="0.01">
                    </div>
                    <?php if ($caja->estado_codigo === 'ABT'): ?>
                        <small class="text-muted">Saldo disponible: <strong id="textoSaldo">
                            <?php echo $caja->moneda_abreviado . ' ' . number_format($caja->monto_actual, 2); ?>
                        </strong></small>
                    <?php endif; ?>
                </div>

                <!-- Datos banco (origen BANCO) -->
                <div id="seccionBancoMov" style="display:none;">
                    <hr style="margin:10px 0;">
                    <p style="font-size:12px; color:#888;"><i class="fa fa-university"></i> Datos del retiro bancario</p>
                    <div class="row">
                        <div class="col-md-7">
                            <div class="form-group">
                                <label>Cuenta bancaria</label>
                                <select id="mov_banco_cuenta_id" class="form-control">
                                    <option value="">Seleccione...</option>
                                    <?php foreach ($bancos_cuentas as $bc): ?>
                                        <option value="<?php echo $bc->id; ?>">
                                            <?php echo $bc->banco_nombre . ' — ' . $bc->numero_cuenta . ' (' . $bc->moneda_abreviado . ')'; ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Nro operación</label>
                                <input type="text" id="mov_banco_nro_operacion" class="form-control" maxlength="50">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Datos egreso -->
                <div id="seccionEgreso" style="display:none;">
                    <hr style="margin:10px 0;">
                    <p style="font-size:12px; color:#888;"><i class="fa fa-user"></i> Datos del proveedor (opcional)</p>
                    <div class="row">
                        <div class="col-md-7">
                            <div class="form-group">
                                <label>Nombre / Razón social</label>
                                <input type="text" id="mov_proveedor_nombre" class="form-control" maxlength="150">
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>RUC / DNI</label>
                                <input type="text" id="mov_proveedor_ruc" class="form-control" maxlength="20">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="mov_tiene_comprobante">
                                Tiene comprobante de pago
                            </label>
                        </div>
                    </div>

                    <div id="seccionComprobante" style="display:none;">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label>Tipo</label>
                                    <select id="mov_tipo_comprobante" class="form-control">
                                        <option value="">Seleccione...</option>
                                        <option>Factura</option>
                                        <option>Boleta</option>
                                        <option>Ticket</option>
                                        <option>Recibo</option>
                                        <option>Otro</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label>Nro comprobante</label>
                                    <input type="text" id="mov_nro_comprobante" class="form-control" maxlength="30">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="btnGuardarMovimiento">
                    <i class="fa fa-save"></i> Guardar
                </button>
            </div>
        </div>
    </div>
</div>

<script>
var URL_MOVIMIENTO = '<?php echo base_url("index.php/finanzas/caja_chica/store_movimiento"); ?>';
var URL_CIERRE     = '<?php echo base_url("index.php/finanzas/caja_chica/cierre/".$caja->id); ?>';
var CAJA_ID        = <?php echo $caja->id; ?>;
var MONEDA         = '<?php echo $caja->moneda_abreviado; ?>';

var ORIGENES_INGRESO = [
    { val: 'BANCO',    txt: 'Retiro bancario' },
    { val: 'VENTA',    txt: 'Venta en efectivo' },
    { val: 'APERTURA', txt: 'Apertura / saldo anterior' },
];
var ORIGENES_EGRESO = [
    { val: 'GASTO',        txt: 'Gasto sin comprobante' },
    { val: 'COMPROBANTE',  txt: 'Compra con comprobante' },
];

function abrirModal(tipo) {
    $('#mov_tipo').val(tipo);
    $('#mov_concepto').val('');
    $('#mov_monto').val('');
    $('#mov_proveedor_nombre').val('');
    $('#mov_proveedor_ruc').val('');
    $('#mov_tiene_comprobante').prop('checked', false);
    $('#mov_tipo_comprobante').val('');
    $('#mov_nro_comprobante').val('');
    $('#mov_banco_cuenta_id').val('');
    $('#mov_banco_nro_operacion').val('');
    $('#seccionBancoMov').hide();
    $('#seccionEgreso').hide();
    $('#seccionComprobante').hide();

    // Título y color del header
    if (tipo === 'I') {
        $('#modalMovimientoTitulo').text('Registrar ingreso');
        $('#modalMovimientoHeader').removeClass('bg-danger').addClass('bg-success').css('color','#fff');
    } else {
        $('#modalMovimientoTitulo').text('Registrar egreso');
        $('#modalMovimientoHeader').removeClass('bg-success').addClass('bg-danger').css('color','#fff');
    }

    // Poblar select de origen
    var origenes = tipo === 'I' ? ORIGENES_INGRESO : ORIGENES_EGRESO;
    var opts = '<option value="">Seleccione...</option>';
    origenes.forEach(function(o) { opts += '<option value="'+o.val+'">'+o.txt+'</option>'; });
    $('#mov_origen').html(opts);
}

$(document).ready(function () {

    // Mostrar sección banco si origen = BANCO
    $('#mov_origen').on('change', function () {
        var origen = $(this).val();
        $('#seccionBancoMov').toggle(origen === 'BANCO');
        // Si es egreso mostrar sección proveedor/comprobante
        var tipo = $('#mov_tipo').val();
        $('#seccionEgreso').toggle(tipo === 'E');
    });

    // Toggle comprobante
    $('#mov_tiene_comprobante').on('change', function () {
        $('#seccionComprobante').toggle($(this).is(':checked'));
    });

    // Guardar movimiento
    $('#btnGuardarMovimiento').on('click', function () {
        var tipo    = $('#mov_tipo').val();
        var origen  = $('#mov_origen').val();
        var monto   = parseFloat($('#mov_monto').val()) || 0;
        var concepto= $.trim($('#mov_concepto').val());
        var fecha   = $('#mov_fecha').val();

        if (!origen)         { Swal.fire('Validación', 'Seleccione el origen.', 'warning'); return; }
        if (!concepto)       { Swal.fire('Validación', 'Ingrese el concepto.', 'warning'); return; }
        if (monto <= 0)      { Swal.fire('Validación', 'Ingrese un monto válido.', 'warning'); return; }

        var data = {
            caja_id: CAJA_ID,
            tipo: tipo,
            origen: origen,
            fecha: fecha,
            monto: monto,
            concepto: concepto,
        };

        if (origen === 'BANCO') {
            data.banco_cuenta_id     = $('#mov_banco_cuenta_id').val();
            data.banco_nro_operacion = $('#mov_banco_nro_operacion').val();
        }

        if (tipo === 'E') {
            data.proveedor_nombre  = $('#mov_proveedor_nombre').val();
            data.proveedor_ruc     = $('#mov_proveedor_ruc').val();
            data.tiene_comprobante = $('#mov_tiene_comprobante').is(':checked') ? 1 : 0;
            data.tipo_comprobante  = $('#mov_tipo_comprobante').val();
            data.nro_comprobante   = $('#mov_nro_comprobante').val();
        }

        $('#btnGuardarMovimiento').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Guardando...');

        $.ajax({
            url: URL_MOVIMIENTO,
            method: 'POST',
            dataType: 'json',
            data: data,
            success: function (resp) {
                if (resp.status) {
                    $('#modalMovimiento').modal('hide');
                    // Actualizar saldo en pantalla
                    $('#saldoActual').text(MONEDA + ' ' + resp.nuevo_saldo);
                    $('#textoSaldo').text(MONEDA + ' ' + resp.nuevo_saldo);
                    Swal.fire({
                        icon: 'success',
                        title: 'Correcto',
                        text: resp.msg,
                        timer: 1800,
                        showConfirmButton: false
                    }).then(function() { location.reload(); });
                } else {
                    Swal.fire('Error', resp.msg, 'error');
                }
            },
            error: function () {
                Swal.fire('Error', 'No se pudo conectar con el servidor.', 'error');
            },
            complete: function () {
                $('#btnGuardarMovimiento').prop('disabled', false).html('<i class="fa fa-save"></i> Guardar');
            }
        });
    });

    // Cierre de caja
    $('#btnCerrarCaja').on('click', function () {
        Swal.fire({
            title: '¿Cerrar la caja?',
            html: 'El saldo actual de <strong><?php echo $caja->moneda_abreviado . " " . number_format($caja->monto_actual, 2); ?></strong> quedará disponible para la próxima apertura.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#f39c12',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Sí, cerrar caja',
        }).then(function(result) {
            if (result.isConfirmed) {
                window.location.href = URL_CIERRE;
            }
        });
    });

    // DataTable
    if (typeof $.fn.DataTable !== 'undefined') {
        $('#tablaMovimientos').DataTable({
            language: {
                lengthMenu: "Mostrar _MENU_ registros",
                zeroRecords: "Sin movimientos registrados",
                info: "Mostrando del _START_ al _END_ de _TOTAL_",
                infoEmpty: "Sin registros",
                search: "Buscar:",
                paginate: { first:"Primero", last:"Último", next:"Siguiente", previous:"Anterior" }
            },
            pageLength: 25,
            order: [[0, 'asc']],
            columnDefs: [{ orderable: false, targets: [] }]
        });
    }
});
</script>