@extends('admin.layouts.app', ['title' => 'Admin Settlements'])

@push('head')
    <style>
        .admin-settlement-hero,
        .admin-settlement-list-header,
        .admin-settlement-modal-header {
            position: relative;
            overflow: hidden;
            border: 0;
            color: #f8fbff;
        }

        .admin-settlement-hero,
        .admin-settlement-modal-header {
            background: linear-gradient(135deg, #243b53 0%, #334e68 52%, #486581 100%);
        }

        .admin-settlement-list-header {
            background: linear-gradient(135deg, #0f766e 0%, #0f9a8a 50%, #38b2ac 100%);
        }

        .admin-settlement-hero::before,
        .admin-settlement-list-header::before,
        .admin-settlement-modal-header::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 34%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 55%);
            pointer-events: none;
        }

        .admin-settlement-hero > *,
        .admin-settlement-list-header > *,
        .admin-settlement-modal-header > * {
            position: relative;
            z-index: 1;
        }

        .admin-settlement-hero .small,
        .admin-settlement-list-header .small {
            color: rgba(240, 245, 250, 0.78) !important;
        }

        .admin-settlement-kpi {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.18);
            border-radius: 1.25rem;
            padding: 0.8rem 0.9rem;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
            box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);
            height: 100%;
        }

        .admin-settlement-kpi::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 34%);
            pointer-events: none;
        }

        .admin-settlement-kpi > * {
            position: relative;
            z-index: 1;
        }

        .admin-settlement-kpi-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.85rem;
            margin-bottom: 0.65rem;
        }

        .admin-settlement-kpi-label {
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--admin-muted);
        }

        .admin-settlement-kpi-icon {
            width: 2.45rem;
            height: 2.45rem;
            border-radius: 0.85rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
        }

        .admin-settlement-kpi-value {
            font-size: clamp(1.3rem, 2vw, 1.7rem);
            font-weight: 800;
            line-height: 1.05;
            color: #0f172a;
        }

        .admin-settlement-kpi-note {
            margin-top: 0.2rem;
            font-size: 0.76rem;
            color: var(--admin-muted);
        }

        .admin-settlement-kpi.is-rows .admin-settlement-kpi-icon {
            background: rgba(37, 99, 235, 0.12);
            color: #2563eb;
        }

        .admin-settlement-kpi.is-completed .admin-settlement-kpi-icon {
            background: rgba(16, 185, 129, 0.14);
            color: #047857;
        }

        .admin-settlement-kpi.is-amount .admin-settlement-kpi-icon {
            background: rgba(249, 115, 22, 0.14);
            color: #ea580c;
        }

        .admin-settlement-filter-form .form-control,
        .admin-settlement-filter-form .form-select,
        .admin-settlement-filter-form .btn,
        .admin-settlement-modal .form-control,
        .admin-settlement-modal .form-select {
            min-height: 3rem;
            border-radius: 999px;
        }

        .admin-settlement-filter-form .btn {
            font-weight: 700;
        }

        .admin-settlement-trigger {
            border-radius: 999px;
            padding: 0.8rem 1.2rem;
            font-weight: 700;
        }

        .admin-settlement-status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 5.5rem;
            padding: 0.35rem 0.7rem;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 700;
        }

        .admin-settlement-status-credit { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
        .admin-settlement-status-debit { background: rgba(249, 115, 22, 0.14); color: #ea580c; }
        .admin-settlement-status-negative { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
        .admin-settlement-status-completed { background: rgba(16, 185, 129, 0.14); color: #047857; }
        .admin-settlement-status-pending { background: rgba(245, 158, 11, 0.16); color: #b45309; }

        .admin-settlement-modal .modal-content {
            border: 0;
            border-radius: 1.75rem;
            overflow: hidden;
            box-shadow: 0 28px 60px rgba(15, 23, 42, 0.22);
        }

        .admin-settlement-modal-header .btn-close {
            filter: invert(1);
            opacity: 0.9;
        }

        .admin-settlement-modal .modal-body {
            padding: 1.75rem;
        }

        .admin-settlement-modal .modal-footer {
            padding: 1.25rem 1.75rem 1.75rem;
            border-top: 1px solid var(--admin-border);
        }

        .admin-settlement-modal .form-label {
            font-weight: 700;
            color: var(--admin-muted);
        }

        .admin-settlement-modal .form-control,
        .admin-settlement-modal .form-select {
            background: var(--admin-input);
            border-color: var(--admin-border);
            box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 18px rgba(15, 23, 42, 0.06);
        }

        .admin-settlement-modal textarea.form-control {
            min-height: 7rem;
            border-radius: 1.25rem;
            resize: none;
        }

        .admin-settlement-action-btn {
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .admin-settlement-mobile-list {
            display: grid;
            gap: 1rem;
            padding: 1rem;
        }

        .admin-settlement-mobile-card {
            border: 1px solid var(--admin-border);
            border-radius: 1.25rem;
            background: var(--admin-card);
            box-shadow: 0 14px 26px rgba(15, 23, 42, 0.05);
        }

        html[data-theme="dark"] .admin-settlement-kpi {
            border-color: rgba(148, 163, 184, 0.16);
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.94));
            box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
        }

        html[data-theme="dark"] .admin-settlement-kpi-label,
        html[data-theme="dark"] .admin-settlement-kpi-note {
            color: #94a3b8;
        }

        html[data-theme="dark"] .admin-settlement-kpi-value {
            color: #f8fafc;
        }

        html[data-theme="dark"] .admin-settlement-kpi.is-rows .admin-settlement-kpi-icon {
            background: rgba(59, 130, 246, 0.18);
            color: #93c5fd;
        }

        html[data-theme="dark"] .admin-settlement-kpi.is-completed .admin-settlement-kpi-icon {
            background: rgba(16, 185, 129, 0.18);
            color: #6ee7b7;
        }

        html[data-theme="dark"] .admin-settlement-kpi.is-amount .admin-settlement-kpi-icon {
            background: rgba(249, 115, 22, 0.2);
            color: #fdba74;
        }

        @media (max-width: 767.98px) {
            .admin-settlement-kpi {
                padding: 0.75rem 0.8rem;
                border-radius: 0.95rem;
            }

            .admin-settlement-kpi-top {
                margin-bottom: 0.55rem;
            }

            .admin-settlement-kpi-icon {
                width: 2.25rem;
                height: 2.25rem;
                border-radius: 0.75rem;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $totalAmount = $settlements->sum('amount');
        $completedCount = $settlements->where('payment_status', 'Completed')->count();
        $pendingCount = $settlements->where('payment_status', 'Pending')->count();
        $typeOptions = [
            'credit' => 'Add Balance (Credit)',
            'debit' => 'Settled To Bank/Payment Done (Debit)',
            'negative' => 'Negative Amount (Deduct from Next day)',
        ];
        $transactionTypeLabels = [
            1 => 'Credit',
            2 => 'Debit',
            3 => 'Negative',
        ];
        $transactionTypeFormValues = [
            1 => 'credit',
            2 => 'debit',
            3 => 'negative',
        ];
        $editSettlementId = old('edit_settlement_id');
        $editSettlement = $editSettlementId ? $settlements->getCollection()->firstWhere('id', (int) $editSettlementId) : null;
    @endphp

    <div class="d-grid gap-3">
        <section class="card admin-card admin-settlement-hero">
            <div class="card-body p-4 p-lg-4">
                <div class="d-flex align-items-start justify-content-between gap-3 flex-wrap">
                    <div>
                        <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill bg-white bg-opacity-10 small fw-bold text-uppercase text-nowrap">
                            <i class="bi bi-cash-stack"></i>
                            <span>Management / Settlement</span>
                        </div>
                        <div class="mt-3">
                            <h1 class="h3 fw-bold mb-2">Settlement</h1>
                            <p class="small mb-0">Track debit and credit adjustments, review payment settlement activity, and launch direct entries from one admin workspace.</p>
                        </div>
                    </div>

                    <button type="button" class="btn btn-light admin-settlement-trigger" data-bs-toggle="modal" data-bs-target="#settlementEntryModal">
                        <i class="bi bi-person-plus-fill me-2"></i>Add Direct Debit/Credit Entry
                    </button>
                </div>

                <div class="row g-3 mt-1" id="settlementStatsWrap">
                    <div class="col-12 col-md-4">
                        <div class="admin-settlement-kpi is-rows">
                            <div class="admin-settlement-kpi-top">
                                <div class="admin-settlement-kpi-label">Rows Visible</div>
                                <span class="admin-settlement-kpi-icon"><i class="bi bi-table"></i></span>
                            </div>
                            <div class="admin-settlement-kpi-value">{{ $settlements->count() }}</div>
                            <div class="admin-settlement-kpi-note">Settlement rows in current result</div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="admin-settlement-kpi is-completed">
                            <div class="admin-settlement-kpi-top">
                                <div class="admin-settlement-kpi-label">Completed Entries</div>
                                <span class="admin-settlement-kpi-icon"><i class="bi bi-check2-circle"></i></span>
                            </div>
                            <div class="admin-settlement-kpi-value">{{ $completedCount }}</div>
                            <div class="admin-settlement-kpi-note">Successful visible settlements</div>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="admin-settlement-kpi is-amount">
                            <div class="admin-settlement-kpi-top">
                                <div class="admin-settlement-kpi-label">Visible Amount</div>
                                <span class="admin-settlement-kpi-icon"><i class="bi bi-cash-stack"></i></span>
                            </div>
                            <div class="admin-settlement-kpi-value">PKR {{ number_format((float) $totalAmount, 2) }}</div>
                            <div class="admin-settlement-kpi-note">Combined amount for current results</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="card admin-card border-0">
            <div class="card-body p-4">
                <h2 class="h5 fw-bold mb-1">Search</h2>
                <div class="text-muted small mb-3">Filter settlements by merchant, transaction id, entry type, or payment status.</div>

                <form method="GET" action="{{ route('admin.settlements.index') }}" class="row g-3 admin-settlement-filter-form">
                    <div class="col-12 col-lg-5">
                        <input type="search" name="search" class="form-control" value="{{ $filters['search'] }}" placeholder="Search users, transaction id or note">
                    </div>
                    <div class="col-12 col-md-6 col-lg-2">
                        <select name="status" class="form-select">
                            <option value="">All Types</option>
                            <option value="Credit" @selected($filters['status'] === 'Credit')>Credit</option>
                            <option value="Debit" @selected($filters['status'] === 'Debit')>Debit</option>
                            <option value="Negative" @selected($filters['status'] === 'Negative')>Negative</option>
                        </select>
                    </div>
                    <div class="col-12 col-md-6 col-lg-2">
                        <select name="payment_status" class="form-select">
                            <option value="">Payment Status</option>
                            <option value="Completed" @selected($filters['payment_status'] === 'Completed')>Completed</option>
                            <option value="Pending" @selected($filters['payment_status'] === 'Pending')>Pending</option>
                        </select>
                    </div>
                    <div class="col-6 col-lg-1">
                        <button type="submit" class="btn btn-dark w-100">Search</button>
                    </div>
                    <div class="col-6 col-lg-2">
                        <a href="{{ route('admin.settlements.index') }}" class="btn btn-outline-secondary w-100">Reset</a>
                    </div>
                </form>
            </div>
        </section>

        <section class="card admin-card border-0">
            <div class="card-header admin-settlement-list-header py-3">
                <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
                    <div>
                        <div class="fw-bold">Settlement List</div>
                        <div class="small">{{ $pendingCount }} pending settlements visible in current result set</div>
                    </div>
                    <button type="button" class="btn btn-light btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#settlementEntryModal">
                        <i class="bi bi-plus-circle me-1"></i>New Entry
                    </button>
                </div>
            </div>
            <div class="card-body p-0" id="settlementListWrap">
                @if (session('status'))
                    <div class="alert alert-success rounded-0 border-0 mb-0">{{ session('status') }}</div>
                @endif

                <div class="d-none d-lg-block p-3">
                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="px-4 py-3 small text-muted text-uppercase">SL</th>
                                    <th class="px-4 py-3 small text-muted text-uppercase">Transaction At</th>
                                    <th class="px-4 py-3 small text-muted text-uppercase">Merchant</th>
                                    <th class="px-4 py-3 small text-muted text-uppercase">Transaction ID</th>
                                    <th class="px-4 py-3 small text-muted text-uppercase">Amount</th>
                                    <th class="px-4 py-3 small text-muted text-uppercase">Status</th>
                                    <th class="px-4 py-3 small text-muted text-uppercase">Payment Status</th>
                                    <th class="px-4 py-3 small text-muted text-uppercase">Note</th>
                                    <th class="px-4 py-3 small text-muted text-uppercase">Detail</th>
                                    <th class="px-4 py-3 small text-muted text-uppercase text-end">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($settlements as $settlement)
                                    @php
                                        $entryLabel = $transactionTypeLabels[(int) $settlement->transaction_type] ?? 'Debit';
                                        $entryClass = match (strtolower($entryLabel)) {
                                            'credit' => 'admin-settlement-status-credit',
                                            'negative' => 'admin-settlement-status-negative',
                                            default => 'admin-settlement-status-debit',
                                        };
                                        $paymentClass = strtolower((string) $settlement->payment_status) === 'completed' ? 'admin-settlement-status-completed' : 'admin-settlement-status-pending';
                                        $settlementUserName = $settlement->user?->name ?: ($settlement->user?->username ?: 'Unknown User');
                                        $settlementDate = $settlement->settlement_date?->format('d/m/Y h:i A') ?: ($settlement->created_at?->format('d/m/Y h:i A') ?: '-');
                                        $settlementEditDate = $settlement->settlement_date?->format('Y-m-d') ?: ($settlement->created_at?->format('Y-m-d') ?: '');
                                        $settlementTypeValue = $transactionTypeFormValues[(int) $settlement->transaction_type] ?? 'debit';
                                    @endphp
                                    <tr>
                                        <td class="px-4 py-3">{{ $settlement->id }}</td>
                                        <td class="px-4 py-3">{{ $settlementDate }}</td>
                                        <td class="px-4 py-3">{{ $settlementUserName }}</td>
                                        <td class="px-4 py-3 fw-semibold">{{ $settlement->utr ?: 'N/A' }}</td>
                                        <td class="px-4 py-3 fw-bold">{{ number_format((float) $settlement->amount, 2) }} PKR</td>
                                        <td class="px-4 py-3"><span class="admin-settlement-status {{ $entryClass }}">{{ $entryLabel }}</span></td>
                                        <td class="px-4 py-3"><span class="admin-settlement-status {{ $paymentClass }}">{{ $settlement->payment_status ?: 'Pending' }}</span></td>
                                        <td class="px-4 py-3">{{ $settlement->note ?: 'No note available' }}</td>
                                        <td class="px-4 py-3">{{ $settlement->detail ?: 'No detail available' }}</td>
                                        <td class="px-4 py-3 text-end">
                                            <div class="d-inline-flex align-items-center gap-2">
                                                <button
                                                    type="button"
                                                    class="btn btn-outline-secondary btn-sm admin-settlement-action-btn"
                                                    title="View"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#viewSettlementModal"
                                                    data-settlement-id="{{ $settlement->id }}"
                                                    data-settlement-user="{{ $settlementUserName }}"
                                                    data-settlement-utr="{{ $settlement->utr ?: 'N/A' }}"
                                                    data-settlement-amount="{{ number_format((float) $settlement->amount, 2) }} PKR"
                                                    data-settlement-type="{{ $entryLabel }}"
                                                    data-settlement-payment="{{ $settlement->payment_status ?: 'Pending' }}"
                                                    data-settlement-date="{{ $settlementDate }}"
                                                    data-settlement-note="{{ $settlement->note ?: 'No note available' }}"
                                                    data-settlement-detail="{{ $settlement->detail ?: 'No detail available' }}"
                                                ><i class="bi bi-eye"></i></button>
                                                <button
                                                    type="button"
                                                    class="btn btn-outline-primary btn-sm admin-settlement-action-btn"
                                                    title="Edit"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#editSettlementModal"
                                                    data-settlement-id="{{ $settlement->id }}"
                                                    data-settlement-user-id="{{ $settlement->user_id }}"
                                                    data-settlement-date-edit="{{ $settlementEditDate }}"
                                                    data-settlement-amount-edit="{{ $settlement->amount }}"
                                                    data-settlement-type-edit="{{ $settlementTypeValue }}"
                                                    data-settlement-note-edit="{{ $settlement->note }}"
                                                ><i class="bi bi-pencil"></i></button>
                                                <form method="POST" action="{{ route('admin.settlements.destroy', $settlement) }}" onsubmit="return confirm('Delete this settlement entry?');" class="d-inline">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-outline-danger btn-sm admin-settlement-action-btn" title="Delete"><i class="bi bi-trash"></i></button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10" class="text-center text-muted py-5">No settlement records found for the selected filters.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="d-grid d-lg-none admin-settlement-mobile-list">
                        @forelse ($settlements as $settlement)
                            @php
                                $entryLabel = $transactionTypeLabels[(int) $settlement->transaction_type] ?? 'Debit';
                                $entryClass = match (strtolower($entryLabel)) {
                                    'credit' => 'admin-settlement-status-credit',
                                'negative' => 'admin-settlement-status-negative',
                                default => 'admin-settlement-status-debit',
                                };
                                $paymentClass = strtolower((string) $settlement->payment_status) === 'completed' ? 'admin-settlement-status-completed' : 'admin-settlement-status-pending';
                                $settlementUserName = $settlement->user?->name ?: ($settlement->user?->username ?: 'Unknown User');
                                $settlementDate = $settlement->settlement_date?->format('d/m/Y h:i A') ?: ($settlement->created_at?->format('d/m/Y h:i A') ?: '-');
                                $settlementEditDate = $settlement->settlement_date?->format('Y-m-d') ?: ($settlement->created_at?->format('Y-m-d') ?: '');
                                $settlementTypeValue = $transactionTypeFormValues[(int) $settlement->transaction_type] ?? 'debit';
                            @endphp
                        <article class="admin-settlement-mobile-card p-4">
                            <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
                                <div class="min-w-0">
                                    <div class="small text-muted text-uppercase">Settlement {{ $settlement->id }}</div>
                                    <div class="fw-bold mt-1">{{ $settlementUserName }}</div>
                                    <div class="small text-muted mt-1">{{ $settlement->utr ?: 'N/A' }}</div>
                                </div>
                                <span class="admin-settlement-status {{ $entryClass }}">{{ $entryLabel }}</span>
                            </div>
                            <div class="small text-muted">Amount</div>
                            <div class="fw-bold mb-3">{{ number_format((float) $settlement->amount, 2) }} PKR</div>
                            <div class="small text-muted">Payment Status</div>
                            <div class="mb-3"><span class="admin-settlement-status {{ $paymentClass }}">{{ $settlement->payment_status ?: 'Pending' }}</span></div>
                            <div class="small text-muted">Transaction At</div>
                            <div class="mb-3">{{ $settlementDate }}</div>
                            <div class="small text-muted">Note</div>
                            <div>{{ $settlement->note ?: 'No note available' }}</div>
                            <div class="d-flex align-items-center gap-2 mt-3">
                                <button
                                    type="button"
                                    class="btn btn-outline-secondary btn-sm rounded-pill px-3"
                                    data-bs-toggle="modal"
                                    data-bs-target="#viewSettlementModal"
                                    data-settlement-id="{{ $settlement->id }}"
                                    data-settlement-user="{{ $settlementUserName }}"
                                    data-settlement-utr="{{ $settlement->utr ?: 'N/A' }}"
                                    data-settlement-amount="{{ number_format((float) $settlement->amount, 2) }} PKR"
                                    data-settlement-type="{{ $entryLabel }}"
                                    data-settlement-payment="{{ $settlement->payment_status ?: 'Pending' }}"
                                    data-settlement-date="{{ $settlementDate }}"
                                    data-settlement-note="{{ $settlement->note ?: 'No note available' }}"
                                    data-settlement-detail="{{ $settlement->detail ?: 'No detail available' }}"
                                >View</button>
                                <button
                                    type="button"
                                    class="btn btn-outline-primary btn-sm rounded-pill px-3"
                                    data-bs-toggle="modal"
                                    data-bs-target="#editSettlementModal"
                                    data-settlement-id="{{ $settlement->id }}"
                                    data-settlement-user-id="{{ $settlement->user_id }}"
                                    data-settlement-date-edit="{{ $settlementEditDate }}"
                                    data-settlement-amount-edit="{{ $settlement->amount }}"
                                    data-settlement-type-edit="{{ $settlementTypeValue }}"
                                    data-settlement-note-edit="{{ $settlement->note }}"
                                >Edit</button>
                                <form method="POST" action="{{ route('admin.settlements.destroy', $settlement) }}" onsubmit="return confirm('Delete this settlement entry?');" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger btn-sm rounded-pill px-3">Delete</button>
                                </form>
                            </div>
                        </article>
                    @empty
                        <div class="text-center text-muted py-5">No settlement records found for the selected filters.</div>
                    @endforelse
                </div>

                <div class="p-3 pt-0 settlement-pagination-wrap">
                    {{ $settlements->onEachSide(1)->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade admin-settlement-modal" id="settlementEntryModal" tabindex="-1" aria-labelledby="settlementEntryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <form method="POST" action="{{ route('admin.settlements.store') }}">
                    @csrf
                    <div class="modal-header admin-settlement-modal-header px-4 py-3">
                        <div>
                            <h2 class="modal-title fs-3 fw-bold mb-1" id="settlementEntryModalLabel">Debit/Credit Entry</h2>
                            <div class="small">Create a direct settlement adjustment from the admin panel.</div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-4">
                            <div class="col-12 col-md-6">
                                <label class="form-label" for="settlement_user_id">Select User</label>
                                <select id="settlement_user_id" name="user_id" class="form-select @error('user_id') is-invalid @enderror" required>
                                    <option value="">Search users...</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}" @selected(old('user_id') == $user->id)>{{ $user->name }}{{ $user->username ? ' ('.$user->username.')' : '' }}{{ $user->email ? ' - '.$user->email : '' }}</option>
                                    @endforeach
                                </select>
                                @error('user_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="form-label" for="transaction_date">Transaction Date</label>
                                <input id="transaction_date" type="date" name="transaction_date" class="form-control @error('transaction_date') is-invalid @enderror" value="{{ old('transaction_date') }}" required>
                                @error('transaction_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="form-label" for="settlement_amount">Amount</label>
                                <input id="settlement_amount" type="number" step="0.01" min="0.01" name="amount" class="form-control @error('amount') is-invalid @enderror" value="{{ old('amount') }}" required>
                                @error('amount') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="form-label" for="settlement_type">Type</label>
                                <select id="settlement_type" name="type" class="form-select @error('type') is-invalid @enderror" required>
                                    @foreach ($typeOptions as $value => $label)
                                        <option value="{{ $value }}" @selected(old('type', 'credit') === $value)>{{ $label }}</option>
                                    @endforeach
                                </select>
                                @error('type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-12">
                                <label class="form-label" for="settlement_note">Note</label>
                                <textarea id="settlement_note" name="note" class="form-control @error('note') is-invalid @enderror" placeholder="Add a short note for this debit/credit entry">{{ old('note') }}</textarea>
                                @error('note') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-end gap-2">
                        <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-dark rounded-pill px-4">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade admin-settlement-modal" id="editSettlementModal" tabindex="-1" aria-labelledby="editSettlementModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <form method="POST" action="{{ $editSettlement ? route('admin.settlements.update', $editSettlement) : '#' }}" id="editSettlementForm">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="edit_settlement_id" id="edit_settlement_id" value="{{ old('edit_settlement_id') }}">
                    <div class="modal-header admin-settlement-modal-header px-4 py-3">
                        <div>
                            <h2 class="modal-title fs-3 fw-bold mb-1" id="editSettlementModalLabel">Edit Settlement Entry</h2>
                            <div class="small">Update the selected settlement adjustment.</div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row g-4">
                            <div class="col-12 col-md-6">
                                <label class="form-label" for="edit_settlement_user_id">Select User</label>
                                <select id="edit_settlement_user_id" name="user_id" class="form-select @error('user_id') is-invalid @enderror" required>
                                    <option value="">Search users...</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}" @selected(old('user_id', $editSettlement?->user_id) == $user->id)>{{ $user->name }}{{ $user->username ? ' ('.$user->username.')' : '' }}{{ $user->email ? ' - '.$user->email : '' }}</option>
                                    @endforeach
                                </select>
                                @error('user_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="form-label" for="edit_transaction_date">Transaction Date</label>
                                <input id="edit_transaction_date" type="date" name="transaction_date" class="form-control @error('transaction_date') is-invalid @enderror" value="{{ old('transaction_date', $editSettlement?->settlement_date?->format('Y-m-d')) }}" required>
                                @error('transaction_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="form-label" for="edit_settlement_amount">Amount</label>
                                <input id="edit_settlement_amount" type="number" step="0.01" min="0.01" name="amount" class="form-control @error('amount') is-invalid @enderror" value="{{ old('amount', $editSettlement?->amount) }}" required>
                                @error('amount') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="form-label" for="edit_settlement_type">Type</label>
                                <select id="edit_settlement_type" name="type" class="form-select @error('type') is-invalid @enderror" required>
                                    @foreach ($typeOptions as $value => $label)
                                        <option value="{{ $value }}" @selected(old('type', $editSettlement ? ($transactionTypeFormValues[(int) $editSettlement->transaction_type] ?? 'credit') : 'credit') === $value)>{{ $label }}</option>
                                    @endforeach
                                </select>
                                @error('type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-12">
                                <label class="form-label" for="edit_settlement_note">Note</label>
                                <textarea id="edit_settlement_note" name="note" class="form-control @error('note') is-invalid @enderror" placeholder="Add a short note for this debit/credit entry">{{ old('note', $editSettlement?->note) }}</textarea>
                                @error('note') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-end gap-2">
                        <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-dark rounded-pill px-4">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade admin-settlement-modal" id="viewSettlementModal" tabindex="-1" aria-labelledby="viewSettlementModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header admin-settlement-modal-header px-4 py-3">
                    <div>
                        <h2 class="modal-title fs-3 fw-bold mb-1" id="viewSettlementModalLabel">Settlement Detail</h2>
                        <div class="small">Review the selected settlement entry information.</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-4">
                        <div class="col-12 col-md-6">
                            <div class="small text-muted mb-1">Settlement ID</div>
                            <div class="fw-bold" data-view-settlement-id>-</div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="small text-muted mb-1">Merchant</div>
                            <div class="fw-bold" data-view-settlement-user>-</div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="small text-muted mb-1">Transaction ID</div>
                            <div class="fw-bold" data-view-settlement-utr>-</div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="small text-muted mb-1">Amount</div>
                            <div class="fw-bold" data-view-settlement-amount>-</div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="small text-muted mb-1">Type</div>
                            <div class="fw-bold" data-view-settlement-type>-</div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="small text-muted mb-1">Payment Status</div>
                            <div class="fw-bold" data-view-settlement-payment>-</div>
                        </div>
                        <div class="col-12">
                            <div class="small text-muted mb-1">Transaction At</div>
                            <div class="fw-bold" data-view-settlement-date>-</div>
                        </div>
                        <div class="col-12">
                            <div class="small text-muted mb-1">Note</div>
                            <div data-view-settlement-note>-</div>
                        </div>
                        <div class="col-12">
                            <div class="small text-muted mb-1">Detail</div>
                            <div data-view-settlement-detail>-</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-end gap-2">
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const editSettlementModalElement = document.getElementById('editSettlementModal');
            const viewSettlementModalElement = document.getElementById('viewSettlementModal');
            const editSettlementForm = document.getElementById('editSettlementForm');
            const filterForm = document.querySelector('.admin-settlement-filter-form');
            const statsWrap = document.getElementById('settlementStatsWrap');
            const listWrap = document.getElementById('settlementListWrap');
            const searchInput = filterForm?.querySelector('input[name="search"]');
            const statusInput = filterForm?.querySelector('select[name="status"]');
            const paymentStatusInput = filterForm?.querySelector('select[name="payment_status"]');
            const resetButton = filterForm?.querySelector('a[href]');
            let filterTimer;

            const setLoading = function (state) {
                if (statsWrap) {
                    statsWrap.style.opacity = state ? '0.55' : '1';
                }

                if (listWrap) {
                    listWrap.style.opacity = state ? '0.55' : '1';
                }
            };

            const fetchSettlements = async function (url) {
                if (!filterForm) {
                    return;
                }

                setLoading(true);

                try {
                    const response = await fetch(url, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                    });

                    if (!response.ok) {
                        throw new Error('Unable to load settlements.');
                    }

                    const html = await response.text();
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');
                    const nextStats = doc.getElementById('settlementStatsWrap');
                    const nextList = doc.getElementById('settlementListWrap');

                    if (nextStats && statsWrap) {
                        statsWrap.innerHTML = nextStats.innerHTML;
                    }

                    if (nextList && listWrap) {
                        listWrap.innerHTML = nextList.innerHTML;
                    }

                    window.adminInitMobileTables?.(document);
                    window.history.replaceState({}, '', url);
                } catch (error) {
                    // Keep current state if realtime fetch fails.
                } finally {
                    setLoading(false);
                }
            };

            const buildFilterUrl = function () {
                if (!filterForm) {
                    return window.location.href;
                }

                const url = new URL(filterForm.getAttribute('action'), window.location.origin);
                const formData = new FormData(filterForm);

                formData.forEach(function (value, key) {
                    const normalized = String(value).trim();

                    if (normalized !== '') {
                        url.searchParams.set(key, normalized);
                    }
                });

                return url.toString();
            };

            const scheduleFetch = function (delay = 350) {
                window.clearTimeout(filterTimer);
                filterTimer = window.setTimeout(function () {
                    fetchSettlements(buildFilterUrl());
                }, delay);
            };

            filterForm?.addEventListener('submit', function (event) {
                event.preventDefault();
                fetchSettlements(buildFilterUrl());
            });

            searchInput?.addEventListener('input', function () {
                scheduleFetch(350);
            });

            statusInput?.addEventListener('change', function () {
                scheduleFetch(0);
            });

            paymentStatusInput?.addEventListener('change', function () {
                scheduleFetch(0);
            });

            resetButton?.addEventListener('click', function (event) {
                event.preventDefault();

                if (!filterForm) {
                    return;
                }

                filterForm.reset();
                fetchSettlements(filterForm.getAttribute('action'));
            });

            listWrap?.addEventListener('click', function (event) {
                const paginationLink = event.target.closest('.pagination a');

                if (!paginationLink) {
                    return;
                }

                event.preventDefault();
                fetchSettlements(paginationLink.href);
            });

            if (editSettlementModalElement && editSettlementForm) {
                editSettlementModalElement.addEventListener('show.bs.modal', function (event) {
                    const button = event.relatedTarget;
                    if (!button) {
                        return;
                    }

                    const settlementId = button.getAttribute('data-settlement-id') || '';
                    const userId = button.getAttribute('data-settlement-user-id') || '';
                    const transactionDate = button.getAttribute('data-settlement-date-edit') || '';
                    const amount = button.getAttribute('data-settlement-amount-edit') || '';
                    const type = button.getAttribute('data-settlement-type-edit') || 'credit';
                    const note = button.getAttribute('data-settlement-note-edit') || '';
                    const actionTemplate = "{{ url('/admin/settlements') }}/";

                    editSettlementForm.setAttribute('action', actionTemplate + settlementId);
                    document.getElementById('edit_settlement_id').value = settlementId;
                    document.getElementById('edit_settlement_user_id').value = userId;
                    document.getElementById('edit_transaction_date').value = transactionDate;
                    document.getElementById('edit_settlement_amount').value = amount;
                    document.getElementById('edit_settlement_type').value = type;
                    document.getElementById('edit_settlement_note').value = note;
                });
            }

            if (viewSettlementModalElement) {
                viewSettlementModalElement.addEventListener('show.bs.modal', function (event) {
                    const button = event.relatedTarget;
                    if (!button) {
                        return;
                    }

                    const setText = function (selector, value) {
                        const element = viewSettlementModalElement.querySelector(selector);
                        if (element) {
                            element.textContent = value || '-';
                        }
                    };

                    setText('[data-view-settlement-id]', button.getAttribute('data-settlement-id'));
                    setText('[data-view-settlement-user]', button.getAttribute('data-settlement-user'));
                    setText('[data-view-settlement-utr]', button.getAttribute('data-settlement-utr'));
                    setText('[data-view-settlement-amount]', button.getAttribute('data-settlement-amount'));
                    setText('[data-view-settlement-type]', button.getAttribute('data-settlement-type'));
                    setText('[data-view-settlement-payment]', button.getAttribute('data-settlement-payment'));
                    setText('[data-view-settlement-date]', button.getAttribute('data-settlement-date'));
                    setText('[data-view-settlement-note]', button.getAttribute('data-settlement-note'));
                    setText('[data-view-settlement-detail]', button.getAttribute('data-settlement-detail'));
                });
            }

            @if ($errors->any())
                if (document.getElementById('edit_settlement_id') && document.getElementById('edit_settlement_id').value && editSettlementModalElement) {
                    const settlementEditModal = new bootstrap.Modal(editSettlementModalElement);
                    settlementEditModal.show();
                } else {
                    const settlementModalElement = document.getElementById('settlementEntryModal');
                    if (settlementModalElement) {
                        const settlementModal = new bootstrap.Modal(settlementModalElement);
                        settlementModal.show();
                    }
                }
            @endif
        });
    </script>
@endpush