Tul xxx Tul

Viewing: edit.php

<?= $this->extend('layout/app'); ?>

<?php $this->section('title'); ?>
Editar Pago
<?php $this->endSection(); ?>

<?php $this->section('content'); ?>

<style>
    .payment-membership-picker .payment-search-anchor {
        position: relative;
    }

    .payment-membership-picker .payment-search-input-bar {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e5e7eb;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }

    .payment-membership-picker .input-group-text,
    .payment-membership-picker .btn-membership-search {
        border: 0;
        background: #f9fafb;
    }

    .payment-membership-picker .btn-membership-search {
        border-left: 1px solid #e5e7eb;
        min-width: 48px;
    }

    .payment-membership-picker #membership_search {
        border: 0;
    }

    .payment-membership-picker #membership_search:focus {
        box-shadow: none;
    }

    #membership_search_results {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        z-index: 1055;
        max-height: 280px;
        overflow-y: auto;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .2);
        display: none;
    }

    #membership_search_results .list-group-item {
        border: 0;
        border-bottom: 1px solid #f3f4f6;
    }
</style>

<div class="app-title">
    <div>
        <h1><i class="bi bi-wallet"></i> Pago</h1>
        <p>Editar Pago</p>
    </div>
    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="bi bi-house-door fs-6"></i></li>
        <li class="breadcrumb-item"><a href="<?= base_url('admin'); ?>">Admin</a></li>
        <li class="breadcrumb-item"><a href="#">Pago</a></li>
    </ul>
</div>

<div class="card">
    <div class="card-body">
        <h6 class="card-title">Editar Pago</h6>
        <hr>
        <?php $selectedPaymentType = old('payment_type', $payment['payment_type'] ?? 'contado'); ?>
        <?php if (session()->get('errors')) : ?>
            <div class="alert alert-danger">
                <ul>
                    <?php foreach (session()->get('errors') as $error) : ?>
                        <li><?= esc($error) ?></li>
                    <?php endforeach ?>
                </ul>
            </div>
        <?php endif; ?>
        <form action="<?= base_url('admin/payments/' . $payment['id']); ?>" method="post" enctype="multipart/form-data">
            <?= csrf_field() ?>
            <input type="hidden" name="_method" value="PUT">
            <input type="hidden" id="membership_amount_reference" value="0.00">
            <div class="row">
                <div class="mb-3 col-md-6 payment-membership-picker" style="overflow: visible;">
                    <label for="membership_search" class="form-label">Membresía</label>
                    <div class="payment-search-anchor" id="membership_search_anchor">
                        <div class="input-group payment-search-input-bar">
                            <span class="input-group-text"><i class="bi bi-person"></i></span>
                            <input type="text" class="form-control" id="membership_search" placeholder="Nombre del cliente o tipo de membresía..." autocomplete="off">
                            <button class="btn btn-membership-search" type="button" id="btnMembershipSearch" title="Buscar membresía">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                        <div id="membership_search_results" class="list-group"></div>
                    </div>
                    <select class="form-select d-none" id="membership_id" name="membership_id" onchange="amountMembership(event)">
                        <option value="">Seleccione una membresía</option>
                        <?php foreach ($memberships as $membership) : ?>
                            <?php
                            $statusLabel = $membership['status'] == 'active' ? '[ACTIVA]' : ($membership['status'] == 'expired' ? '[EXPIRADA]' : '[' . strtoupper($membership['status']) . ']');
                            $membershipLabel = trim(($membership['membership_type_name'] ?? '') . ' - ' . ($membership['user_name'] ?? '') . ' - DNI: ' . ($membership['user_dni'] ?? '') . ' ' . $statusLabel);
                            $searchKey = strtolower(trim(($membership['membership_type_name'] ?? '') . ' ' . ($membership['user_name'] ?? '') . ' ' . ($membership['user_dni'] ?? '') . ' ' . $membership['status']));
                            ?>
                            <option value="<?= $membership['id'] ?>" data-search-key="<?= esc($searchKey) ?>" <?= set_select('membership_id', $membership['id'], $payment['membership_id'] == $membership['id']) ?>>
                                <?= esc($membershipLabel); ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <div class="mb-3 col-md-3">
                    <label for="payment_type" class="form-label">Tipo de Pago</label>
                    <select class="form-select" id="payment_type" name="payment_type">
                        <option value="contado" <?= $selectedPaymentType === 'contado' ? 'selected' : '' ?>>Contado</option>
                        <option value="credito" <?= $selectedPaymentType === 'credito' ? 'selected' : '' ?>>Crédito</option>
                    </select>
                </div>

                <div class="mb-3 col-md-2">
                    <label for="amount" class="form-label">Monto Bruto</label>
                    <?php $grossAmount = (float)$payment['amount'] + (float)$payment['discount_amount']; ?>
                    <input type="number" class="form-control" id="amount" name="amount" step="0.01" placeholder="Ingrese el monto del pago" value="<?= set_value('amount', $grossAmount) ?>">
                </div>

                <div class="mb-3 col-md-2">
                    <label for="discount_perc" class="form-label">Descuento (%)</label>
                    <input type="number" class="form-control" id="discount_perc" name="discount_perc" step="0.01" min="0" max="100" placeholder="0%" value="<?= set_value('discount_perc', (float)$payment['discount_perc']) ?>">
                </div>

                <div class="mb-3 col-md-2">
                    <label for="final_amount" class="form-label">Total a Pagar</label>
                    <input type="number" class="form-control fw-bold text-dark" id="final_amount" name="final_amount" step="0.01" readonly style="background-color: #f8fafc; color: #000 !important;" value="<?= set_value('final_amount', $payment['amount']) ?>">
                </div>

                <div class="mb-3 col-md-6">
                    <label for="payment_date" class="form-label">Fecha de Pago</label>
                    <input type="date" class="form-control" id="payment_date" name="payment_date" value="<?= set_value('payment_date', $payment['payment_date']) ?>">
                </div>
            </div>

            <div class="row">
                <div class="col-12" id="cashSection">
                    <div class="card border-success-subtle bg-light mb-3">
                        <div class="card-body">
                            <h6 class="card-title mb-3"><i class="bi bi-cash-coin"></i> Movimiento en Caja</h6>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="box_id" class="form-label">Caja *</label>
                                    <select class="form-select" id="box_id" name="box_id">
                                        <option value="">Seleccionar</option>
                                        <?php foreach ($boxes as $box) { ?>
                                            <option value="<?= $box['id']; ?>" <?= set_select('box_id', $box['id'], $payment['box_id'] == $box['id']) ?>><?= $box['name'] . ' - ' . $box['opening_date']; ?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="payment_method_id" class="form-label">Método de Pago *</label>
                                    <select class="form-select" id="payment_method_id" name="payment_method_id">
                                        <option value="">Seleccione un método de pago</option>
                                        <?php foreach ($payment_methods as $method) : ?>
                                            <option value="<?= $method['id'] ?>" <?= set_select('payment_method_id', $method['id'], $payment['payment_method_id'] == $method['id']) ?>>
                                                <?= esc($method['name']) ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12" id="creditSection">
                    <div class="card border-warning-subtle bg-light mb-3">
                        <div class="card-body">
                            <h6 class="card-title mb-3"><i class="bi bi-journal-text"></i> Registro a Crédito</h6>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Saldo pendiente actual</label>
                                    <input type="text" class="form-control" id="preview_balance" value="0.00" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Saldo pendiente resultante</label>
                                    <input type="text" class="form-control" id="projected_balance" value="0.00" readonly>
                                </div>
                                <div class="col-md-8 d-flex align-items-end">
                                    <div class="alert alert-warning w-100 mb-0">
                                        Al guardar como crédito, la cobertura de la membresía se actualizará y el monto quedará pendiente de cobro sin ingresar a caja.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card border-primary-subtle bg-light mb-3">
                        <div class="card-body">
                            <h6 class="card-title mb-3"><i class="bi bi-calendar-range"></i> Cobertura del Pago</h6>
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">Cliente</label>
                                    <input type="text" class="form-control" id="preview_user_name" value="" readonly>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Plan</label>
                                    <input type="text" class="form-control" id="preview_membership_name" value="" readonly>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Vence actualmente</label>
                                    <input type="text" class="form-control" id="preview_current_end_date" value="" readonly>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Cubrirá desde</label>
                                    <input type="date" class="form-control" id="coverage_start" name="coverage_start" value="<?= set_value('coverage_start', $payment['coverage_start'] ?? '') ?>">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Cubrirá hasta</label>
                                    <input type="date" class="form-control" id="coverage_end" name="coverage_end" value="<?= set_value('coverage_end', $payment['coverage_end'] ?? '') ?>">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-end">
                <a href="<?= base_url('admin/payments'); ?>" class="btn btn-danger">Cancelar</a>
                <button type="submit" class="btn btn-primary">Actualizar Pago</button>
            </div>
        </form>
    </div>
</div>

<?php $this->endSection(); ?>

<?php $this->section('js'); ?>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const membershipSelect = document.getElementById('membership_id');
        const membershipSearchInput = document.getElementById('membership_search');
        const membershipSearchResults = document.getElementById('membership_search_results');
        const membershipSearchAnchor = document.getElementById('membership_search_anchor');
        const membershipSearchBtn = document.getElementById('btnMembershipSearch');
        const paymentDateInput = document.getElementById('payment_date');
        const paymentTypeSelect = document.getElementById('payment_type');
        const amountInput = document.getElementById('amount');
        const discountInput = document.getElementById('discount_perc');
        const finalAmountInput = document.getElementById('final_amount');
        const membershipAmountInput = document.getElementById('membership_amount_reference');

        togglePaymentSections();
        updateProjectedBalance();

        if (membershipSelect && membershipSelect.value !== '') {
            amountMembership({
                target: membershipSelect
            }, true);

            if (membershipSearchInput) {
                const selectedOption = membershipSelect.options[membershipSelect.selectedIndex];
                membershipSearchInput.value = selectedOption ? selectedOption.text : '';
            }
        }

        function hideMembershipSearchResults() {
            membershipSearchResults.innerHTML = '';
            membershipSearchResults.style.display = 'none';
        }

        function membershipOptions() {
            return Array.from(membershipSelect.options).filter(option => option.value !== '');
        }

        function renderMembershipSearchResults(query) {
            const q = (query || '').trim().toLowerCase();
            const options = membershipOptions().filter(option => {
                const searchKey = (option.getAttribute('data-search-key') || option.text || '').toLowerCase();
                return searchKey.includes(q);
            });

            if (!options.length) {
                membershipSearchResults.innerHTML = '<div class="list-group-item text-muted small">No se encontraron membresías</div>';
                membershipSearchResults.style.display = 'block';
                return;
            }

            membershipSearchResults.innerHTML = options.slice(0, 40).map(option =>
                '<button type="button" class="list-group-item list-group-item-action text-start" data-membership-id="' + option.value + '">' + option.text + '</button>'
            ).join('');

            membershipSearchResults.querySelectorAll('[data-membership-id]').forEach(item => {
                item.addEventListener('click', function() {
                    const membershipId = this.getAttribute('data-membership-id');
                    membershipSelect.value = membershipId;
                    membershipSearchInput.value = this.textContent.trim();
                    hideMembershipSearchResults();
                    amountMembership({ target: membershipSelect }, true);
                });
            });

            membershipSearchResults.style.display = 'block';
        }

        if (membershipSearchInput) {
            membershipSearchInput.addEventListener('input', function() {
                membershipSelect.value = '';
                amountMembership({ target: membershipSelect }, true);
                renderMembershipSearchResults(this.value);
            });

            membershipSearchInput.addEventListener('focus', function() {
                renderMembershipSearchResults(this.value);
            });
        }

        if (membershipSearchBtn) {
            membershipSearchBtn.addEventListener('click', function() {
                renderMembershipSearchResults(membershipSearchInput.value);
                membershipSearchInput.focus();
            });
        }

        document.addEventListener('click', function(e) {
            if (membershipSearchAnchor && !membershipSearchAnchor.contains(e.target)) {
                hideMembershipSearchResults();
            }
        });

        if (paymentTypeSelect) {
            paymentTypeSelect.addEventListener('change', function() {
                togglePaymentSections();
                updateProjectedBalance();
            });
        }

        if (amountInput) {
            amountInput.addEventListener('input', function() {
                calculateDiscount();
                updateProjectedBalance();
            });
        }

        if (discountInput) {
            discountInput.addEventListener('input', function() {
                calculateDiscount();
                updateProjectedBalance();
            });
        }

        function calculateDiscount() {
            const amount = parseFloat(amountInput.value || 0);
            const discount = parseFloat(discountInput.value || 0);
            const discountAmount = (amount * discount) / 100;
            const finalAmount = amount - discountAmount;
            finalAmountInput.value = finalAmount.toFixed(2);
        }

        if (paymentDateInput) {
            paymentDateInput.addEventListener('change', function() {
                if (membershipSelect && membershipSelect.value !== '') {
                    amountMembership({
                        target: membershipSelect
                    });
                }
            });
        }
    });

    function togglePaymentSections() {
        const paymentType = document.getElementById('payment_type').value;
        const cashSection = document.getElementById('cashSection');
        const creditSection = document.getElementById('creditSection');
        const boxInput = document.getElementById('box_id');
        const methodInput = document.getElementById('payment_method_id');

        if (paymentType === 'credito') {
            cashSection.style.display = 'none';
            creditSection.style.display = 'block';
            boxInput.value = '';
            methodInput.value = '';
        } else {
            cashSection.style.display = 'block';
            creditSection.style.display = 'none';
        }

        updateProjectedBalance();
    }

    function updateProjectedBalance() {
        const currentBalance = parseFloat(document.getElementById('preview_balance').value || 0);
        const finalAmount = parseFloat(document.getElementById('final_amount').value || 0);
        const membershipAmount = parseFloat(document.getElementById('membership_amount_reference').value || 0);
        const paymentType = document.getElementById('payment_type').value;
        const pendingGenerated = paymentType === 'credito' ? Math.max(0, membershipAmount - finalAmount) : 0;
        const projected = currentBalance + pendingGenerated;
        document.getElementById('projected_balance').value = projected.toFixed(2);
    }

    function amountMembership(e, preserveCoverage = false) {
        if (e.target.value != '') {
            const paymentDate = document.getElementById('payment_date').value;
            const excludePaymentId = <?= (int) $payment['id'] ?>;
            const http = new XMLHttpRequest();
            http.open("GET", base_url + 'admin/amountMembership/' + e.target.value + '?payment_date=' + encodeURIComponent(paymentDate) + '&exclude_payment_id=' + excludePaymentId, true);
            http.send();
            http.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    try {
                        const res = JSON.parse(this.responseText);
                        if (res.status === 'success' || res.amount !== undefined) {
                            document.querySelector('#amount').value = res.amount || 0;
                            document.querySelector('#membership_amount_reference').value = Number(res.amount || 0).toFixed(2);
                            if (typeof calculateDiscount === 'function') calculateDiscount();
                            document.querySelector('#preview_balance').value = Number(res.balance || 0).toFixed(2);
                            updateProjectedBalance();
                            document.querySelector('#preview_user_name').value = res.user_name || 'N/A';
                            document.querySelector('#preview_membership_name').value = res.membership_name || 'N/A';
                            document.querySelector('#preview_current_end_date').value = res.current_end_date || 'N/A';
                            if (!preserveCoverage || !document.querySelector('#coverage_start').value) {
                                document.querySelector('#coverage_start').value = res.coverage_start || '';
                            }
                            if (!preserveCoverage || !document.querySelector('#coverage_end').value) {
                                document.querySelector('#coverage_end').value = res.coverage_end || '';
                            }
                        }
                    } catch (e) {
                        console.error("Error parsing membership data", e);
                    }
                }
            };
        } else {
            document.querySelector('#amount').value = '';
            document.querySelector('#membership_amount_reference').value = '0.00';
            document.querySelector('#preview_balance').value = '0.00';
            document.querySelector('#projected_balance').value = '0.00';
            document.querySelector('#preview_user_name').value = '';
            document.querySelector('#preview_membership_name').value = '';
            document.querySelector('#preview_current_end_date').value = '';
            document.querySelector('#coverage_start').value = '';
            document.querySelector('#coverage_end').value = '';
        }
    }
</script>
<?php $this->endSection(); ?>
User / IP	: 216.73.216.191
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