{{-- New-Unity ERP | Finance/Resources/Views/cxc/show.blade.php | v2.1 | 27/07/2026 --}}
{{-- v2.1 — Security: @can ajustado a finance.cxc.pay / finance.cxc.send-statement. --}}
{{-- v2.0 — CxC Fase 2: pago AJAX con validación en tiempo real, saldo restante, badge SALDADA. --}}
{{-- v1.0 — CxC Fase 1: detalle de factura, historial de pagos, formulario de pago y estado de cuenta. --}}

@extends('layouts.vertical')

@section('title', __('finance.invoice-detail'))

@section('content')
@php
    $status  = $invoice->status_cxc;
    $balance = $invoice->cxc_balance;
    $paid    = $invoice->cxc_paid_amount;
    $folio   = ($invoice->serie ?? '') . ($invoice->folio ?? $invoice->id);
    $customer = $invoice->customer;
@endphp

<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-file-invoice-dollar"></i>
        {{ __('finance.invoice-detail') }} — {{ $folio }}
        <small>{{ $customer?->commercial_name ?: $customer?->name }}</small>
    </h1>
    <div class="subheader-block d-lg-flex align-items-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('finance.price-lists.index') }}">{{ __('menu.finance') }}</a></li>
            <li class="breadcrumb-item"><a href="{{ route('ar.index') }}">{{ __('finance.cxc-breadcrumb') }}</a></li>
            <li class="breadcrumb-item active">{{ $folio }}</li>
        </ol>
    </div>
</div>

<div class="container-fluid">

    {{-- Flash (fallback para POST tradicional) --}}
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fal fa-check-circle me-2"></i>{{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <div class="row">

        {{-- Columna principal --}}
        <div class="col-lg-8">

            {{-- Encabezado factura --}}
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center py-2">
                    <span class="fw-semibold">{{ $folio }}</span>
                    <span id="statusBadge">
                        @switch($status)
                            @case('overdue')  <span class="badge bg-danger fs-sm">{{ __('finance.overdue') }}</span>   @break
                            @case('partial')  <span class="badge bg-warning text-dark fs-sm">{{ __('finance.partial') }}</span> @break
                            @case('paid')     <span class="badge bg-success fs-sm">{{ __('finance.paid') }}</span>     @break
                            @default          <span class="badge bg-secondary fs-sm">{{ __('finance.pending') }}</span>
                        @endswitch
                    </span>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-sm-6">
                            <p class="mb-1 text-muted small">{{ __('finance.col-customer') }}</p>
                            <p class="mb-0 fw-semibold">{{ $customer?->commercial_name ?: $customer?->name }}</p>
                            @if($customer?->rfc)
                            <p class="mb-0 text-muted small">RFC: {{ $customer->rfc }}</p>
                            @endif
                        </div>
                        <div class="col-sm-3">
                            <p class="mb-1 text-muted small">{{ __('finance.col-date') }}</p>
                            <p class="mb-0">{{ $invoice->fecha_emision ? \Carbon\Carbon::parse($invoice->fecha_emision)->format('d/m/Y') : '—' }}</p>
                        </div>
                        <div class="col-sm-3">
                            <p class="mb-1 text-muted small">{{ __('finance.col-due') }}</p>
                            <p class="mb-0 {{ $status === 'overdue' ? 'text-danger fw-semibold' : '' }}">
                                {{ $invoice->expiration_date ? \Carbon\Carbon::parse($invoice->expiration_date)->format('d/m/Y') : '—' }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <div class="row text-center">
                        <div class="col-4">
                            <p class="mb-0 text-muted small">{{ __('finance.col-total') }}</p>
                            <p class="mb-0 fw-semibold">${{ number_format($invoice->total, 2) }}</p>
                        </div>
                        <div class="col-4">
                            <p class="mb-0 text-muted small">{{ __('finance.col-paid') }}</p>
                            <p class="mb-0 text-success fw-semibold" id="totalPaidDisplay">${{ number_format($paid, 2) }}</p>
                        </div>
                        <div class="col-4">
                            <p class="mb-0 text-muted small">{{ __('finance.col-balance') }}</p>
                            <p class="mb-0 fw-bold {{ $status === 'overdue' ? 'text-danger' : 'text-primary' }} fs-5" id="balanceDisplay">
                                ${{ number_format($balance, 2) }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Historial de pagos --}}
            <div class="card mb-3">
                <div class="card-header py-2 fw-semibold">
                    <i class="fal fa-history me-1"></i>{{ __('finance.payment-history') }}
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="text-center">{{ __('finance.payment-date') }}</th>
                                    <th class="text-end">{{ __('finance.amount') }}</th>
                                    <th>{{ __('finance.payment-method') }}</th>
                                    <th>{{ __('finance.reference') }}</th>
                                    <th>{{ __('finance.notes') }}</th>
                                    <th class="text-center small">{{ __('finance.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody id="paymentsTableBody">
                                @forelse($invoice->arPayments as $pago)
                                <tr>
                                    <td class="text-center small">{{ $pago->payment_date->format('d/m/Y') }}</td>
                                    <td class="text-end small fw-semibold">${{ number_format($pago->amount, 2) }}</td>
                                    <td class="small">{{ \App\Modules\Finance\Models\ArPayment::methodLabel($pago->payment_method) }}</td>
                                    <td class="small">{{ $pago->reference ?: '—' }}</td>
                                    <td class="small text-muted">{{ $pago->notes ?: '—' }}</td>
                                    <td class="text-center small text-muted">{{ $pago->user?->name }}</td>
                                </tr>
                                @empty
                                <tr id="noPaymentsRow">
                                    <td colspan="6" class="text-center text-muted py-3">{{ __('finance.no-payments') }}</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>

        {{-- Columna lateral --}}
        <div class="col-lg-4">

            {{-- Registrar pago --}}
            @if($balance > 0)
            @can('finance.cxc.pay')
            <div class="card mb-3 border-primary" id="paymentFormCard">
                <div class="card-header bg-primary text-white py-2 fw-semibold">
                    <i class="fal fa-plus-circle me-1"></i>{{ __('finance.register-payment') }}
                </div>
                <div class="card-body">
                    {{-- Alerta de errores AJAX --}}
                    <div id="paymentAlert" class="d-none"></div>

                    <form id="formPayment" novalidate>
                        <div class="mb-2">
                            <label class="form-label form-label-sm mb-1">
                                {{ __('finance.amount') }}
                                <small class="text-muted">{{ __('finance.max-amount-hint', ['balance' => number_format($balance, 2)]) }}</small>
                            </label>
                            <input type="number" id="payAmount" name="amount"
                                   class="form-control form-control-sm"
                                   step="0.01" min="0.01" max="{{ $balance }}"
                                   value="{{ number_format($balance, 2, '.', '') }}" required>
                            <div id="remainingHint" class="text-muted mt-1" style="font-size:.78rem;">
                                <i class="fal fa-info-circle me-1"></i>
                                <span id="remainingHintText">{{ __('finance.total-payment-badge') }}</span>
                            </div>
                        </div>
                        <div class="mb-2">
                            <label class="form-label form-label-sm mb-1">{{ __('finance.payment-date') }}</label>
                            <input type="date" name="payment_date" class="form-control form-control-sm"
                                   value="{{ now()->format('Y-m-d') }}" required>
                        </div>
                        <div class="mb-2">
                            <label class="form-label form-label-sm mb-1">{{ __('finance.payment-method') }}</label>
                            <select name="payment_method" class="form-select form-select-sm" required>
                                <option value="transfer" selected>{{ __('finance.method-transfer') }}</option>
                                <option value="cash">{{ __('finance.method-cash') }}</option>
                                <option value="card">{{ __('finance.method-card') }}</option>
                                <option value="check">{{ __('finance.method-check') }}</option>
                                <option value="other">{{ __('finance.method-other') }}</option>
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label form-label-sm mb-1">{{ __('finance.reference') }}</label>
                            <input type="text" name="reference" class="form-control form-control-sm" maxlength="100">
                        </div>
                        <div class="mb-2">
                            <label class="form-label form-label-sm mb-1">{{ __('finance.cfdi-uuid') }}</label>
                            <input type="text" name="cfdi_pago_uuid" class="form-control form-control-sm"
                                   maxlength="36" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">
                        </div>
                        <div class="mb-3">
                            <label class="form-label form-label-sm mb-1">{{ __('finance.notes') }}</label>
                            <textarea name="notes" class="form-control form-control-sm" rows="2" maxlength="500"></textarea>
                        </div>
                        <button type="submit" id="btnSubmitPay" class="btn btn-primary btn-sm w-100">
                            <i class="fal fa-check me-1"></i>{{ __('finance.register-btn') }}
                        </button>
                    </form>
                </div>
            </div>
            @endcan
            @else
            <div class="alert alert-success d-flex align-items-center gap-2 mb-3">
                <i class="fal fa-check-circle fa-lg"></i>
                <span>{{ __('finance.invoice-settled') }}</span>
            </div>
            @endif


            {{-- Estado de cuenta --}}
            @if($customer)
            <div class="card mb-3">
                <div class="card-header py-2 fw-semibold">
                    <i class="fal fa-file-pdf me-1"></i>{{ __('finance.statement') }}
                </div>
                <div class="card-body">
                    <a href="{{ route('ar.statement.pdf', $customer->id) }}"
                       class="btn btn-outline-danger btn-sm w-100 mb-2" target="_blank">
                        <i class="fal fa-file-pdf me-1"></i>{{ __('finance.download-statement') }}
                    </a>
                    @can('finance.cxc.send-statement')
                    <form method="POST" action="{{ route('ar.statement.email', $customer->id) }}">
                        @csrf
                        <div class="input-group input-group-sm">
                            <input type="email" name="send_to" class="form-control"
                                   placeholder="{{ __('finance.send-to') }}..."
                                   value="{{ old('send_to', $customer->email ?? '') }}" required>
                            <button type="submit" class="btn btn-outline-primary">
                                <i class="fal fa-paper-plane"></i>
                            </button>
                        </div>
                    </form>
                    @endcan
                </div>
            </div>
            @endif

            {{-- Volver --}}
            <a href="{{ route('ar.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fal fa-arrow-left me-1"></i>{{ __('finance.back-to-cxc') }}
            </a>

        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
(function () {
    var maxBalance   = {{ $balance }};
    var storeUrl     = '{{ route('ar.payment.store', $invoice->id) }}';
    var csrfToken    = document.querySelector('meta[name=csrf-token]')?.content ?? '';
    var txtExceeds   = '{{ __('finance.amount-exceeds-balance') }}';
    var txtSettled   = '{{ __('finance.total-payment-badge') }}';
    var txtRemaining = '{{ __('finance.remaining-balance') }}';
    var txtError     = '{{ __('finance.payment-error') }}';
    var txtSaving    = '{{ __('finance.register-btn') }}...';

    var form         = document.getElementById('formPayment');
    var payAmount    = document.getElementById('payAmount');
    var remainTxt    = document.getElementById('remainingHintText');
    var remainDiv    = document.getElementById('remainingHint');
    var alertBox     = document.getElementById('paymentAlert');
    var btnSubmit    = document.getElementById('btnSubmitPay');
    var balDisp      = document.getElementById('balanceDisplay');
    var paidDisp     = document.getElementById('totalPaidDisplay');
    var tbody        = document.getElementById('paymentsTableBody');

    if (!form) return; // invoice fully paid, form not rendered

    // ── Real-time remaining balance feedback ─────────────────────────────────
    payAmount.addEventListener('input', updateHint);
    updateHint();

    function updateHint() {
        var val = parseFloat(payAmount.value) || 0;
        var rem = maxBalance - val;
        payAmount.classList.remove('is-invalid', 'is-valid');
        remainDiv.className = 'mt-1';

        if (val <= 0 || val > maxBalance) {
            payAmount.classList.add('is-invalid');
            remainDiv.style.color = '#dc3545';
            remainTxt.textContent = val > maxBalance ? txtExceeds : '';
        } else if (rem < 0.005) {
            payAmount.classList.add('is-valid');
            remainDiv.style.color = '#198754';
            remainTxt.textContent = txtSettled;
        } else {
            payAmount.classList.add('is-valid');
            remainDiv.style.color = '#6c757d';
            remainTxt.textContent = txtRemaining + ': $' + rem.toFixed(2);
        }
    }

    // ── AJAX submit ──────────────────────────────────────────────────────────
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        hideAlert();

        if (payAmount.classList.contains('is-invalid')) {
            showAlert('danger', txtExceeds);
            return;
        }

        btnSubmit.disabled = true;
        btnSubmit.innerHTML = '<i class="fal fa-spinner fa-spin me-1"></i>' + txtSaving;

        var formData = new FormData(form);

        fetch(storeUrl, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: formData,
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            if (!data.success) {
                showAlert('danger', data.message ?? txtError);
                resetBtn();
                return;
            }

            // Update balance displays
            var newBal = parseFloat(data.balance) || 0;
            maxBalance = newBal;
            balDisp.textContent = '$' + newBal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            paidDisp.textContent = '$' + (parseFloat(data.paid) || 0).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');

            // Add row to history table
            var noRow = document.getElementById('noPaymentsRow');
            if (noRow) noRow.remove();
            var p = data.payment;
            var tr = document.createElement('tr');
            tr.innerHTML =
                '<td class="text-center small">' + p.date + '</td>' +
                '<td class="text-end small fw-semibold">$' + p.amount + '</td>' +
                '<td class="small">' + p.method + '</td>' +
                '<td class="small">' + p.ref + '</td>' +
                '<td class="small text-muted">—</td>' +
                '<td class="text-center small text-muted">' + p.user + '</td>';
            tbody.prepend(tr);

            if (data.settled) {
                // Replace payment form card with settled badge
                var card = document.getElementById('paymentFormCard');
                if (card) {
                    card.outerHTML = '<div class="alert alert-success d-flex align-items-center gap-2 mb-3">' +
                        '<i class="fal fa-check-circle fa-lg"></i><span>{{ __('finance.invoice-settled') }}</span></div>';
                }
                var badge = document.getElementById('statusBadge');
                if (badge) badge.innerHTML = '<span class="badge bg-success fs-sm">{{ __('finance.paid') }}</span>';
            } else {
                form.reset();
                payAmount.max = newBal;
                payAmount.value = newBal.toFixed(2);
                updateHint();
                showAlert('success', data.message);
                resetBtn();
            }

            if (typeof showNotification === 'function') {
                showNotification('success', data.message);
            }
        })
        .catch(function (err) {
            showAlert('danger', txtError);
            resetBtn();
        });
    });

    function showAlert(type, msg) {
        alertBox.className = 'alert alert-' + type + ' py-2 small';
        alertBox.textContent = msg;
    }
    function hideAlert() { alertBox.className = 'd-none'; }
    function resetBtn() {
        btnSubmit.disabled = false;
        btnSubmit.innerHTML = '<i class="fal fa-check me-1"></i>{{ __('finance.register-btn') }}';
    }
})();
</script>
@endsection