@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <style>
        .payments-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .payments-page .ui-card__header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .payments-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .stat-card {
            border-radius: 18px;
            border: 1px solid #e5e7eb;
            background: linear-gradient(180deg, #fff, #f8fafc);
            padding: 1rem 1.1rem;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
        }

        .stat-label {
            color: #64748b;
            font-size: 0.82rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .stat-value {
            color: #111827;
            font-size: 1.6rem;
            font-weight: 900;
            margin-top: 0.35rem;
        }

        .payments-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .payments-page table {
            min-width: 1460px;
            vertical-align: middle;
        }

        .payments-page table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.035em;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
        }

        .payments-page table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 600;
            border-color: #eef2f7;
            vertical-align: middle;
            white-space: nowrap;
        }

        .payments-page table tbody tr:hover {
            background: #f8fafc;
        }

        .payment-no {
            font-weight: 900;
            color: #111827;
        }

        .payment-party {
            display: flex;
            flex-direction: column;
            min-width: 150px;
        }

        .payment-party__name {
            font-weight: 850;
            color: #111827;
        }

        .payment-party__ref {
            color: #94a3b8;
            font-size: 0.76rem;
            margin-top: 0.1rem;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--success { background: #f0fdf4; color: #166534; }
        .ui-pill--warn { background: #fffbeb; color: #92400e; }
        .ui-pill--danger { background: #fef2f2; color: #b91c1c; }
        .ui-pill--neutral { background: #f3f4f6; color: #374151; }
        .ui-pill--primary { background: #eff6ff; color: #1d4ed8; }

        .payments-ledger-table { direction: ltr; }
        .payments-ledger-table th,
        .payments-ledger-table td { text-align: center; }

        .payment-no-link,
        .journal-link {
            color: inherit;
            font-weight: 900;
            text-decoration: none;
        }

        .payment-no-link:hover,
        .journal-link:hover {
            color: #0d6efd;
            text-decoration: underline;
        }

        .payment-type-cell {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            font-weight: 850;
        }

        .payment-type-cell--incoming { color: #047857; }
        .payment-type-cell--outgoing { color: #dc2626; }
        .payment-type-cell--transfer { color: #7c3aed; }

        .source-chip,
        .reference-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 1.65rem;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            padding: 0.2rem 0.55rem;
            background: #f8fafc;
            color: #0f172a;
            font-size: 0.74rem;
            font-weight: 850;
            direction: ltr;
        }

        .reference-chip {
            border-color: #d9efef;
            background: #eaf7f6;
            color: #155e63;
        }

        .money-cell {
            direction: ltr;
            font-weight: 950;
            font-variant-numeric: tabular-nums;
        }

        .money-cell--incoming { color: #047857; }
        .money-cell--outgoing { color: #dc2626; }
        .money-cell--transfer { color: #7c3aed; }

        .allocation-meter {
            min-width: 210px;
            direction: ltr;
        }

        .allocation-meter__top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.35rem;
            font-size: 0.76rem;
        }

        .allocation-meter__amount {
            color: #334155;
            font-weight: 850;
            font-variant-numeric: tabular-nums;
        }

        .allocation-meter__bar {
            height: 4px;
            border-radius: 999px;
            background: #e5e7eb;
            overflow: hidden;
        }

        .allocation-meter__fill {
            height: 100%;
            border-radius: inherit;
        }

        .allocation-meter__fill--full { background: #047857; }
        .allocation-meter__fill--partial { background: #b7791f; }
        .allocation-meter__fill--empty { background: #dc2626; }

        .row-actions {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            direction: ltr;
        }

        .table-empty-state {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .table-empty-state i {
            display: block;
            font-size: 2.3rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .table-pagination {
            padding: 1rem 1.25rem;
            border-top: 1px solid #eef2f7;
            background: #fff;
        }

        @media (max-width: 991.98px) {
            .payments-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 575.98px) {
            .payments-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <div class="container-fluid app-bg payments-page">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title
                    title="Payments"
                    description="Track payment records, linked invoices, parties, and accounting status.">
                    <a href="{{ route('payments.create') }}" class="btn btn-primary rounded-pill">
                        <i class="fas fa-plus me-1"></i>
                        New Payment
                    </a>
                </x-page-title>

                <div class="payments-grid">
                    <div class="stat-card">
                        <div class="stat-label">Incoming</div>
                        <div class="stat-value">{{ number_format($summary['incoming_total'] ?? 0, 2) }}</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Outgoing</div>
                        <div class="stat-value">{{ number_format($summary['outgoing_total'] ?? 0, 2) }}</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Net Cash Flow</div>
                        <div class="stat-value">{{ number_format($summary['net_cash_flow'] ?? 0, 2) }}</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">Pending</div>
                        <div class="stat-value">{{ number_format($summary['pending_count'] ?? 0) }}</div>
                    </div>
                </div>

                <div class="ui-card">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap w-100">
                            <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap" style="margin-right: auto;">
                                Filters
                            </h6>

                            <x-table-controls
                                :action="route('payments.index')"
                                searchName="search"
                                searchPlaceholder="search by payment no, party, reference"
                                formId="payments-table-controls"
                                :clearUrl="route('payments.index')"
                            />

                            <a href="{{ route('payments.create') }}" class="btn btn-outline-primary rounded-pill">
                                <i class="fas fa-plus me-1"></i>
                                New Payment
                            </a>
                        </div>
                    </div>

                    <div class="payments-table-wrap">
                        <x-table
                            tableClass="payments-ledger-table"
                            :headers="['Payment No', 'Party', 'Type', 'Status', 'Method', 'Cost Center', 'Reference', 'From Account', 'To Account', 'Amount', 'Date', 'Actions']"
                        >
                            @forelse ($payments as $payment)
                                @php
                                    $statusClass = match ($payment->status) {
                                        'posted' => 'ui-pill--success',
                                        'draft' => 'ui-pill--warn',
                                        'pending' => 'ui-pill--primary',
                                        'reversed' => 'ui-pill--danger',
                                        'voided' => 'ui-pill--neutral',
                                        default => 'ui-pill--neutral',
                                    };

                                    $statusLabel = match ($payment->status) {
                                        'posted' => 'Posted',
                                        'draft' => 'Draft',
                                        'pending' => 'Pending',
                                        'reversed' => 'Reversed',
                                        'voided' => 'Voided',
                                        default => ucfirst($payment->status),
                                    };

                                    $directionLabel = match ($payment->direction) {
                                        'incoming' => 'Incoming',
                                        'outgoing' => 'Outgoing',
                                        'transfer' => 'Transfer',
                                        default => ucfirst($payment->direction),
                                    };

                                    $directionIcon = match ($payment->direction) {
                                        'incoming' => 'fa-arrow-down',
                                        'outgoing' => 'fa-arrow-up',
                                        'transfer' => 'fa-exchange-alt',
                                        default => 'fa-circle',
                                    };

                                    $directionTone = match ($payment->direction) {
                                        'incoming' => 'payment-type-cell--incoming',
                                        'outgoing' => 'payment-type-cell--outgoing',
                                        'transfer' => 'payment-type-cell--transfer',
                                        default => '',
                                    };

                                    $moneyTone = match ($payment->direction) {
                                        'incoming' => 'money-cell--incoming',
                                        'outgoing' => 'money-cell--outgoing',
                                        'transfer' => 'money-cell--transfer',
                                        default => '',
                                    };

                                    $moneyPrefix = match ($payment->direction) {
                                        'incoming' => '+',
                                        'outgoing' => '-',
                                        default => '',
                                    };

                                    $reference = $payment->reference_no ?: $payment->journalEntry?->reference_no;
                                    $studentInvoiceAllocations = $payment->allocations
                                        ->where('allocatable_type', \App\Models\StudentInvoice::class)
                                        ->filter(fn ($allocation) => $invoiceSettlements->has((int) $allocation->allocatable_id));
                                    $settledInvoiceIds = $studentInvoiceAllocations
                                        ->pluck('allocatable_id')
                                        ->map(fn ($id) => (int) $id)
                                        ->unique()
                                        ->values();
                                    $settlementInvoiceTotal = $settledInvoiceIds->sum(fn ($id) => (float) ($invoiceSettlements[$id]['total'] ?? 0));
                                    $settlementPaidAmount = $settledInvoiceIds->sum(fn ($id) => (float) ($invoiceSettlements[$id]['paid'] ?? 0));
                                    $settlementRemainingAmount = $settledInvoiceIds->sum(fn ($id) => (float) ($invoiceSettlements[$id]['remaining'] ?? 0));
                                    $allocationPercent = $settlementInvoiceTotal > 0
                                        ? min(100, round(($settlementPaidAmount / $settlementInvoiceTotal) * 100, 2))
                                        : 0;
                                    $settlementState = $settlementInvoiceTotal <= 0 || $settlementPaidAmount <= 0
                                        ? 'unpaid'
                                        : ($settlementRemainingAmount > 0.001 ? 'partial' : 'paid');
                                    $settlementLabel = match ($settlementState) {
                                        'paid' => 'Paid',
                                        'partial' => 'Partial',
                                        default => 'Unpaid',
                                    };
                                    $settlementPillClass = match ($settlementState) {
                                        'paid' => 'ui-pill--success',
                                        'partial' => 'ui-pill--warn',
                                        default => 'ui-pill--danger',
                                    };
                                    $settlementFillClass = match ($settlementState) {
                                        'paid' => 'allocation-meter__fill--full',
                                        'partial' => 'allocation-meter__fill--partial',
                                        default => 'allocation-meter__fill--empty',
                                    };
                                    $firstAllocation = $studentInvoiceAllocations->first() ?: $payment->allocations->first();
                                    $allocationDocument = $firstAllocation?->allocatable;
                                    $allocationReference = $allocationDocument->invoice_number
                                        ?? $allocationDocument->bill_no
                                        ?? $allocationDocument->reference_no
                                        ?? null;
                                    $canEdit = in_array($payment->status, ['draft', 'pending'], true);
                                @endphp
                                <tr>
                                    <td>
                                        <a href="{{ route('payments.show', $payment->id) }}" class="payment-no-link">{{ $payment->payment_no }}</a>
                                    </td>
                                    <td>
                                        <div class="payment-party">
                                            <span class="payment-party__name">{{ $payment->party_name }}</span>
                                            <span class="payment-party__ref">{{ $payment->party_ref ?: ucfirst($payment->party_type) }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="payment-type-cell {{ $directionTone }}">
                                            <i class="fas {{ $directionIcon }}"></i>
                                            {{ $directionLabel }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="ui-pill {{ $statusClass }}">
                                            @if ($payment->status === 'posted')
                                                <i class="fas fa-circle" style="font-size: 0.45rem;"></i>
                                            @endif
                                            {{ $statusLabel }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="source-chip">{{ ucwords(str_replace('_', ' ', $payment->payment_method ?? 'cash')) }}</span>
                                    </td>
                                    <td>
                                        {{ $payment->costCenter ? $payment->costCenter->code . ' - ' . $payment->costCenter->title : '-' }}
                                    </td>
                                    <td>
                                        @if ($payment->journalEntry)
                                            <a href="{{ route('journal_entries.show', $payment->journalEntry->id) }}" class="reference-chip journal-link" title="Journal Entry Details">
                                                {{ $reference ?: 'JE-' . $payment->journalEntry->id }}
                                            </a>
                                        @elseif ($reference)
                                            <span class="reference-chip">{{ $reference }}</span>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>{{ $payment->fromAccount?->title ?? '-' }}</td>
                                    <td>{{ $payment->toAccount?->title ?? '-' }}</td>
                                    <td>
                                        <span class="money-cell {{ $moneyTone }}">{{ $moneyPrefix }}{{ number_format((float) ($payment->treasury_amount ?? $payment->amount), 2) }} {{ $payment->treasury_currency ?: $payment->currency }}</span>
                                    </td>
                                    {{-- <td>
                                        @if ($studentInvoiceAllocations->isNotEmpty())
                                            <div class="allocation-meter">
                                                <div class="allocation-meter__top">
                                                    <span class="ui-pill {{ $settlementPillClass }}">{{ $settlementLabel }}</span>
                                                    <span class="allocation-meter__amount">
                                                        {{ number_format($settlementPaidAmount, 2) }} / {{ number_format($settlementInvoiceTotal, 2) }}
                                                    </span>
                                                </div>
                                                <div class="allocation-meter__bar">
                                                    <div class="allocation-meter__fill {{ $settlementFillClass }}" style="width: {{ $allocationPercent }}%;"></div>
                                                </div>
                                                @if ($allocationReference)
                                                    <div class="text-muted small mt-1">
                                                        {{ $allocationReference }}{{ $settledInvoiceIds->count() > 1 ? ' +' . ($settledInvoiceIds->count() - 1) : '' }}
                                                        @if ($settlementRemainingAmount > 0)
                                                            - Remain {{ number_format($settlementRemainingAmount, 2) }}
                                                        @endif
                                                    </div>
                                                @endif
                                            </div>
                                        @else
                                            -
                                        @endif
                                    </td> --}}
                                    <td>{{ optional($payment->payment_date)->format('Y-m-d') ?? $payment->payment_date }}</td>
                                    <td>
                                        <div class="row-actions">
                                            @if ($payment->journalEntry)
                                                <x-table-action type="view" :url="route('journal_entries.show', $payment->journalEntry->id)" title="Journal Entry Details" custom-icon="lucide:book-open" />
                                            @endif
                                            <x-table-action type="view" :url="route('payments.show', $payment->id)" />
                                            @if ($canEdit)
                                                <x-table-action type="edit" :url="route('payments.edit', $payment->id)" />
                                            @else
                                                <x-table-action type="edit" title="Only draft or pending payments can be edited" disabled />
                                            @endif
                                            @if ($payment->status === 'draft')
                                                <x-table-action type="delete" :target="'#deletePaymentModal' . $payment->id" />
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="13">
                                        <div class="table-empty-state">
                                            <i class="fas fa-wallet"></i>
                                            <h6>No payments found.</h6>
                                            <p>Start by creating a new payment.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </x-table>
                    </div>

                    @if ($payments->hasPages())
                        <div class="table-pagination">
                            {{ $payments->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @foreach ($payments as $payment)
        @if ($payment->status === 'draft')
            <div class="modal fade" id="deletePaymentModal{{ $payment->id }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <form action="{{ route('payments.destroy', $payment->id) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Delete Payment</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                Are you sure you want to delete payment <strong>{{ $payment->payment_no }}</strong>?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-outline-danger">Delete</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        @endif
    @endforeach
@endsection