Tul xxx Tul

Viewing: cobro.php

<?php
$clientesListado = array_map(static function ($cliente) {
    return [
        'id' => (int) ($cliente['id'] ?? 0),
        'nombre' => $cliente['nombre'] ?? '',
        'apellido' => $cliente['apellido'] ?? '',
        'cedula' => $cliente['cedula'] ?? '',
        'telefono' => $cliente['telefono'] ?? '',
        'membresia' => $cliente['membresia'] ?? 'Ninguna',
    ];
}, $clientes ?? []);

$clientesJson = htmlspecialchars(json_encode($clientesListado, JSON_UNESCAPED_UNICODE), ENT_QUOTES, 'UTF-8');
?>

<!-- Mobile-optimized Cobro CSS -->
<style>
    body {
        overflow-x: hidden;
    }
    
    .caja-form {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    @media (max-width: 767.98px) {
        html, body {
            max-width: 100vw;
            overflow-x: hidden;
        }
        
        .container-fluid {
            padding-left: 0.75rem !important;
            padding-right: 0.75rem !important;
        }
        
        .caja-form {
            padding: 1rem 0 !important;
        }
        
        .caja-form h1 {
            font-size: 1.25rem;
        }
        
        .caja-form p {
            font-size: 0.85rem;
        }
        
        .card-body {
            padding: 1rem !important;
        }
        
        .btn {
            font-size: 0.85rem;
        }
        
        .form-label {
            font-size: 0.85rem;
            margin-bottom: 0.3rem;
        }
        
        .form-control,
        .form-select {
            font-size: 0.9rem;
        }
    }
    
    @media (max-width: 575.98px) {
        .caja-form h1 {
            font-size: 1.15rem;
        }
        
        .btn {
            font-size: 0.8rem;
        }
    }
</style>

<div class="caja-form container-fluid py-4">
    <?php if (!empty($mensaje)): ?>
        <div class="alert alert-<?php echo htmlspecialchars($mensaje['tipo']); ?> border-0 shadow-sm mb-4">
            <i class="fa-solid fa-circle-info me-2"></i><?php echo htmlspecialchars($mensaje['mensaje']); ?>
        </div>
    <?php endif; ?>

    <div class="row g-2 g-md-4">
        <div class="col-12 col-xl-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3 p-md-4">
                <h1 class="h4 fw-semibold mb-2 mb-md-3"><i class="fa-solid fa-cash-register me-2 text-success"></i>Registrar cobro</h1>
                <p class="text-muted mb-3 mb-md-4 small">Registra cobros de entradas, servicios o ventas del restaurante. Los movimientos impactarán el balance diario.</p>
                <form action="<?php echo base_url('caja/guardarCobro'); ?>" method="POST" class="row g-2 g-md-3 needs-validation" novalidate id="cobroForm" data-clientes="<?php echo $clientesJson; ?>">
                    <div class="col-12 col-lg-6">
                        <label for="tipo_cobro" class="form-label">Tipo de cobro</label>
                        <select class="form-select" id="tipo_cobro" name="tipo_cobro" required>
                            <?php foreach ($tiposCobro as $tipo): ?>
                                <option value="<?php echo htmlspecialchars($tipo); ?>"><?php echo htmlspecialchars($tipo); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="col-12">
                        <input type="hidden" name="cliente" value="">
                        <label for="cliente_buscar" class="form-label">Cliente</label>
                        <div class="position-relative">
                            <input type="text" class="form-control" id="cliente_buscar" placeholder="Busca por nombre, cédula o teléfono" data-cliente-input autocomplete="off" required>
                            <div class="invalid-feedback">Selecciona un cliente de la lista.</div>
                            <div class="list-group position-absolute w-100 mt-1 d-none" data-clientes-list style="max-height: 220px; overflow-y: auto; z-index: 10;"></div>
                        </div>
                    </div>
                    <div class="col-12">
                        <label for="concepto" class="form-label">Concepto</label>
                        <input type="text" class="form-control" id="concepto" name="concepto" placeholder="Ej. Entrada familiar, Sauna 1h, Combo almuerzo" required>
                    </div>
                    <div class="col-12 col-lg-6">
                        <label for="monto" class="form-label">Monto (C$)</label>
                        <input type="number" min="0" step="1000" class="form-control" id="monto" name="monto" placeholder="0" required>
                    </div>
                    <div class="col-12 col-lg-6">
                        <label for="metodo" class="form-label">Método de pago</label>
                        <select class="form-select" id="metodo" name="metodo" required>
                            <?php foreach ($metodos as $metodo): ?>
                                <option value="<?php echo htmlspecialchars($metodo); ?>"><?php echo htmlspecialchars($metodo); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="col-12 d-flex gap-2">
                        <a class="btn btn-outline-secondary" href="<?php echo base_url('caja'); ?>"><i class="fa-solid fa-arrow-left me-1"></i>Cancelar</a>
                        <button type="submit" class="btn btn-success flex-grow-1"><i class="fa-solid fa-check me-1"></i>Guardar cobro</button>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('cobroForm');
        if (!form) {
            return;
        }

        let clientes = [];
        try {
            clientes = JSON.parse(form.dataset.clientes || '[]');
        } catch (error) {
            clientes = [];
        }

        const inputCliente = form.querySelector('[data-cliente-input]');
        const listaClientes = form.querySelector('[data-clientes-list]');
        const hiddenCliente = form.querySelector('input[name="cliente"]');

        const normalizar = (texto) => (texto || '').toString().toLowerCase();

        const formatearCliente = (cliente) => {
            const nombreCompleto = `${cliente.nombre ?? ''} ${cliente.apellido ?? ''}`.trim();
            const cedula = cliente.cedula || 'Sin cédula';
            const telefono = cliente.telefono || 'Sin teléfono';
            const membresia = cliente.membresia && cliente.membresia !== 'Ninguna' ? ` · ${cliente.membresia}` : '';
            return `${nombreCompleto} · ${cedula} · ${telefono}${membresia}`;
        };

        const buscarClientes = (termino) => {
            const valor = normalizar(termino);
            if (valor === '') {
                return [];
            }

            return clientes.filter((cliente) =>
                normalizar(`${cliente.nombre} ${cliente.apellido}`).includes(valor) ||
                normalizar(cliente.cedula).includes(valor) ||
                normalizar(cliente.telefono).includes(valor)
            ).slice(0, 8);
        };

        const mostrarResultados = (resultados) => {
            listaClientes.innerHTML = '';
            if (resultados.length === 0) {
                listaClientes.classList.add('d-none');
                return;
            }

            listaClientes.classList.remove('d-none');
            resultados.forEach((cliente) => {
                const item = document.createElement('button');
                item.type = 'button';
                item.className = 'list-group-item list-group-item-action';
                item.textContent = formatearCliente(cliente);
                item.addEventListener('mousedown', () => {
                    const nombreCompleto = `${cliente.nombre ?? ''} ${cliente.apellido ?? ''}`.trim();
                    hiddenCliente.value = nombreCompleto || formatearCliente(cliente);
                    inputCliente.value = formatearCliente(cliente);
                    inputCliente.classList.remove('is-invalid');
                    listaClientes.innerHTML = '';
                    listaClientes.classList.add('d-none');
                });
                listaClientes.appendChild(item);
            });
        };

        inputCliente.addEventListener('input', () => {
            hiddenCliente.value = '';
            const resultados = buscarClientes(inputCliente.value);
            mostrarResultados(resultados);
        });

        inputCliente.addEventListener('focus', () => {
            const resultados = buscarClientes(inputCliente.value);
            mostrarResultados(resultados);
        });

        inputCliente.addEventListener('blur', () => {
            setTimeout(() => {
                listaClientes.innerHTML = '';
                listaClientes.classList.add('d-none');
                if (!hiddenCliente.value) {
                    inputCliente.classList.add('is-invalid');
                }
            }, 150);
        });

        form.addEventListener('submit', (event) => {
            if (!hiddenCliente.value) {
                event.preventDefault();
                inputCliente.classList.add('is-invalid');
                inputCliente.focus();
            }
        });
    });
</script>
User / IP	: 216.73.217.33
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64