@if($pendingOrders)
    <div class="card mb-4">
        <div class="card-header bg-white d-flex flex-wrap justify-content-between align-items-center gap-2">
            <div>
                <h2 class="h6 mb-0">Pedidos pendientes de pago</h2>
                <div class="small text-secondary">Del turno actual · saldo por cobrar o pasar a crédito</div>
            </div>
            <span class="badge text-bg-warning text-dark">{{ $pendingOrders->total() }} pendiente(s)</span>
        </div>
        <div class="table-responsive">
            <table class="table align-middle mb-0">
                <thead>
                    <tr>
                        <th>Ped.</th>
                        <th>Cliente</th>
                        <th>Pedido (Etapa)</th>
                        <th>Repartidor</th>
                        <th class="text-end">$ Valor</th>
                        <th class="text-end">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pendingOrders as $order)
                        @php
                            $balance = (float) $order->pendingBalance();
                        @endphp
                        <tr>
                            <td class="font-monospace small">{{ $order->number }}</td>
                            <td>{{ $order->client?->business_name }}</td>
                            <td>
                                <span class="badge text-bg-secondary">{{ $order->statusLabel() }}</span>
                                <div class="small text-secondary">{{ $order->financialStatusLabel() }}</div>
                            </td>
                            <td>{{ $order->driverLabel() }}</td>
                            <td class="text-end fw-semibold">${{ number_format($balance, 2) }}</td>
                            <td class="text-nowrap text-end">
                                <button type="button"
                                    class="btn btn-sm btn-outline-primary btn-pending-view"
                                    data-bs-toggle="modal"
                                    data-bs-target="#modalPendingOrderView"
                                    data-number="{{ $order->number }}"
                                    data-client="{{ $order->client?->business_name }}"
                                    data-status="{{ $order->statusLabel() }}"
                                    data-financial="{{ $order->financialStatusLabel() }}"
                                    data-driver="{{ $order->driverLabel() }}"
                                    data-balance="{{ number_format($balance, 2, '.', '') }}"
                                    data-total="{{ number_format((float) $order->total, 2, '.', '') }}"
                                    data-method="{{ $order->paymentMethodLabel() }}"
                                    data-url="{{ route('orders.show', $order) }}">
                                    Ver
                                </button>
                                @if(auth()->user()->hasPermission('payments.create'))
                                    <button type="button"
                                        class="btn btn-sm btn-primary btn-pending-pay"
                                        data-bs-toggle="modal"
                                        data-bs-target="#modalPendingOrderPay"
                                        data-order-id="{{ $order->id }}"
                                        data-number="{{ $order->number }}"
                                        data-client="{{ $order->client?->business_name }}"
                                        data-balance="{{ number_format($balance, 4, '.', '') }}"
                                        data-defer-url="{{ route('cash.defer-credit', $order) }}">
                                        Registrar pago
                                    </button>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-4 text-secondary">
                                No hay pedidos pendientes de cobro en este turno.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($pendingOrders->hasPages())
            <div class="card-footer">{{ $pendingOrders->withQueryString()->links() }}</div>
        @endif
    </div>

    {{-- Ver pedido --}}
    <div class="modal fade" id="modalPendingOrderView" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewOrderTitle">Pedido</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <dl class="row mb-0 small">
                        <dt class="col-4 text-secondary">Cliente</dt>
                        <dd class="col-8" id="viewOrderClient">—</dd>
                        <dt class="col-4 text-secondary">Etapa</dt>
                        <dd class="col-8" id="viewOrderStatus">—</dd>
                        <dt class="col-4 text-secondary">Financiero</dt>
                        <dd class="col-8" id="viewOrderFinancial">—</dd>
                        <dt class="col-4 text-secondary">Repartidor</dt>
                        <dd class="col-8" id="viewOrderDriver">—</dd>
                        <dt class="col-4 text-secondary">Pago previsto</dt>
                        <dd class="col-8" id="viewOrderMethod">—</dd>
                        <dt class="col-4 text-secondary">Total pedido</dt>
                        <dd class="col-8" id="viewOrderTotal">—</dd>
                        <dt class="col-4 text-secondary">Saldo pendiente</dt>
                        <dd class="col-8 fw-bold text-danger" id="viewOrderBalance">—</dd>
                    </dl>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <a class="btn btn-primary" id="viewOrderLink" href="#">Abrir pedido completo</a>
                </div>
            </div>
        </div>
    </div>

    {{-- Registrar pago / crédito --}}
    @if(auth()->user()->hasPermission('payments.create'))
    <div class="modal fade" id="modalPendingOrderPay" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title mb-0">Cobro · <span id="payOrderNumber"></span></h5>
                        <div class="small text-secondary" id="payOrderClient"></div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-light border py-2 mb-3">
                        Saldo pendiente: <strong class="text-danger" id="payOrderBalanceLabel">$0.00</strong>
                    </div>

                    <ul class="nav nav-pills mb-3 gap-2" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-pay-now" data-bs-toggle="pill" data-bs-target="#pane-pay-now" type="button" role="tab">
                                Cobrar ahora
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-pay-credit" data-bs-toggle="pill" data-bs-target="#pane-pay-credit" type="button" role="tab">
                                Dejar en crédito
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="pane-pay-now" role="tabpanel">
                            <form method="POST" enctype="multipart/form-data" action="{{ route('payments.store') }}" id="formPendingPay">
                                @csrf
                                <input type="hidden" name="order_id" id="payOrderId" value="">

                                <label class="form-label">Fecha</label>
                                <input class="form-control mb-3" type="datetime-local" name="paid_at" value="{{ now()->format('Y-m-d\TH:i') }}" required>

                                <label class="form-label">Monto a cobrar</label>
                                <input class="form-control mb-3" type="number" step="0.01" min="0.01" name="amount" id="payOrderAmount" required>

                                <label class="form-label">Método</label>
                                <select class="form-select mb-3" name="method" id="payOrderMethod">
                                    @foreach(\App\Enums\PaymentMethod::collectableCases() as $m)
                                        <option value="{{ $m->value }}">{{ $m->label() }}</option>
                                    @endforeach
                                </select>

                                <div id="payNonCashFields" class="d-none">
                                    <label class="form-label">Banco</label>
                                    <input class="form-control mb-3" name="bank" id="payOrderBank">

                                    <label class="form-label">Referencia</label>
                                    <input class="form-control mb-3" name="reference" id="payOrderReference">

                                    <label class="form-label">Comprobante</label>
                                    <input class="form-control mb-3" type="file" name="receipt" accept=".pdf,image/*">
                                </div>

                                <label class="form-label">Observaciones</label>
                                <textarea class="form-control mb-0" name="notes" rows="2" placeholder="Opcional"></textarea>

                                <div class="mt-3 d-grid">
                                    <button class="btn btn-success" type="submit">
                                        <i class="bi bi-cash-coin me-1"></i> Registrar cobro en caja
                                    </button>
                                </div>
                            </form>
                        </div>

                        <div class="tab-pane fade" id="pane-pay-credit" role="tabpanel">
                            <p class="small text-secondary">
                                El saldo queda en <strong>cuentas por cobrar</strong> del cliente.
                                La caja mostrará faltante hasta que paguen después.
                            </p>
                            <form method="POST" action="#" id="formPendingCredit">
                                @csrf
                                <label class="form-label">Fecha de vencimiento</label>
                                <input class="form-control mb-3" type="date" name="due_at" id="payCreditDue" value="{{ now()->addDays(30)->format('Y-m-d') }}" required min="{{ now()->format('Y-m-d') }}">

                                <label class="form-label">Notas</label>
                                <textarea class="form-control mb-3" name="notes" rows="2" placeholder="Ej.: cliente pidió crédito 30 días"></textarea>

                                <button class="btn btn-outline-warning w-100" type="submit"
                                    onclick="return confirm('¿Dejar el saldo pendiente en cartera/crédito?')">
                                    <i class="bi bi-wallet2 me-1"></i> Confirmar en crédito / CxC
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    @push('scripts')
    <script>
    (() => {
        document.querySelectorAll('.btn-pending-view').forEach((btn) => {
            btn.addEventListener('click', () => {
                document.getElementById('viewOrderTitle').textContent = btn.dataset.number;
                document.getElementById('viewOrderClient').textContent = btn.dataset.client || '—';
                document.getElementById('viewOrderStatus').textContent = btn.dataset.status || '—';
                document.getElementById('viewOrderFinancial').textContent = btn.dataset.financial || '—';
                document.getElementById('viewOrderDriver').textContent = btn.dataset.driver || '—';
                document.getElementById('viewOrderMethod').textContent = btn.dataset.method || '—';
                document.getElementById('viewOrderTotal').textContent = '$' + parseFloat(btn.dataset.total || 0).toFixed(2);
                document.getElementById('viewOrderBalance').textContent = '$' + parseFloat(btn.dataset.balance || 0).toFixed(2);
                const link = document.getElementById('viewOrderLink');
                if (link) link.href = btn.dataset.url || '#';
            });
        });

        const methodEl = document.getElementById('payOrderMethod');
        const nonCash = document.getElementById('payNonCashFields');
        function toggleNonCash() {
            const m = methodEl?.value || 'CASH';
            const needs = ['TRANSFER', 'DEPOSIT', 'CHECK'].includes(m);
            nonCash?.classList.toggle('d-none', !needs);
        }
        methodEl?.addEventListener('change', toggleNonCash);

        document.querySelectorAll('.btn-pending-pay').forEach((btn) => {
            btn.addEventListener('click', () => {
                const balance = parseFloat(btn.dataset.balance || '0');
                document.getElementById('payOrderNumber').textContent = btn.dataset.number || '';
                document.getElementById('payOrderClient').textContent = btn.dataset.client || '';
                document.getElementById('payOrderBalanceLabel').textContent = '$' + balance.toFixed(2);
                document.getElementById('payOrderId').value = btn.dataset.orderId || '';
                document.getElementById('payOrderAmount').value = balance.toFixed(2);
                document.getElementById('payOrderAmount').max = balance.toFixed(4);
                const creditForm = document.getElementById('formPendingCredit');
                if (creditForm) creditForm.action = btn.dataset.deferUrl || '#';
                document.getElementById('tab-pay-now')?.click();
                toggleNonCash();
            });
        });
    })();
    </script>
    @endpush
@endif