@extends('user.layouts.app', ['title' => 'Settlement List'])

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

        .settlement-search-header {
            background: linear-gradient(135deg, #5b6474 0%, #70798b 50%, #8c95a3 100%);
        }

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

        .settlement-search-header::before,
        .settlement-list-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;
        }

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

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

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

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

        .settlement-status-credit {
            background: rgba(37, 99, 235, 0.12);
            color: #2563eb;
        }

        .settlement-status-debit {
            background: rgba(14, 165, 233, 0.12);
            color: #0284c7;
        }

        .settlement-status-negative {
            background: rgba(239, 68, 68, 0.12);
            color: #dc2626;
        }

        .mobile-table-list {
            padding: 1rem;
        }

        .mobile-table-card {
            min-width: 0;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 1.25rem;
            background: var(--bs-body-bg);
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
        }

        .mobile-table-card + .mobile-table-card {
            margin-top: 1rem;
        }

        @media (max-width: 767.98px) {
            .settlement-filter-form .col-6 {
                width: 50%;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $visibleAmount = $settlements->sum('amount');
        $typeLabel = static fn ($type) => match ((int) $type) {
            1 => 'Credit',
            3 => 'Negative',
            default => 'Debit',
        };
        $currencies = collect(['PKR']);
    @endphp

    <div class="d-grid gap-4">
        <section class="card admin-card border-0">
            <div class="card-header settlement-search-header py-3">
                <div class="fw-bold">Search</div>
            </div>
            <div class="card-body p-4">
                <form method="GET" action="{{ route('user.settlements.settlement_list.index') }}" class="row g-3 settlement-filter-form">
                    <div class="col-12 col-md-6 col-xl-2">
                        <input type="text" name="email" class="form-control" value="{{ $filters['email'] }}" placeholder="E-mail">
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <input type="text" name="transaction_id" class="form-control" value="{{ $filters['transaction_id'] }}" placeholder="Transaction ID">
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <input type="number" step="0.01" min="0" name="min_amount" class="form-control" value="{{ $filters['min_amount'] }}" placeholder="Min Amount">
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <input type="number" step="0.01" min="0" name="max_amount" class="form-control" value="{{ $filters['max_amount'] }}" placeholder="Maximum Amount">
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <input type="date" name="date" class="form-control" value="{{ $filters['date'] }}">
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <select name="currency" class="form-select">
                            <option value="">All Currency</option>
                            @foreach ($currencies as $currency)
                                <option value="{{ $currency }}" @selected($filters['currency'] === $currency)>{{ $currency }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6 col-xl-2">
                        <button type="submit" class="btn btn-dark w-100">Search</button>
                    </div>
                    <div class="col-6 col-xl-2">
                        <a href="{{ route('user.settlements.settlement_list.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 settlement-list-header py-3">
                <div class="fw-bold text-nowrap">Payout List</div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive d-none d-md-block">
                    <table class="table align-middle mb-0 text-nowrap">
                        <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 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">Note</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Transaction At</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($settlements as $index => $settlement)
                                @php
                                    $statusLabel = $typeLabel($settlement->transaction_type);
                                    $statusClass = match ($statusLabel) {
                                        'Credit' => 'settlement-status-credit',
                                        'Negative' => 'settlement-status-negative',
                                        default => 'settlement-status-debit',
                                    };
                                @endphp
                                <tr>
                                    <td class="px-4 py-3">{{ $settlements->firstItem() + $index }}</td>
                                    <td class="px-4 py-3 fw-semibold">{{ $settlement->utr ?: 'N/A' }}</td>
                                    <td class="px-4 py-3">{{ number_format((float) $settlement->amount, 2) }} PKR</td>
                                    <td class="px-4 py-3"><span class="settlement-status-badge {{ $statusClass }}">{{ $statusLabel }}</span></td>
                                    <td class="px-4 py-3">{{ $settlement->note ?: 'No note available' }}</td>
                                    <td class="px-4 py-3">{{ $settlement->settlement_date?->format('d/m/Y h:i A') ?: ($settlement->created_at?->format('d/m/Y h:i A') ?: '-') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center text-muted py-5">No settlements found for this user.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="d-grid d-md-none mobile-table-list">
                    @forelse ($settlements as $index => $settlement)
                        @php
                            $statusLabel = $typeLabel($settlement->transaction_type);
                            $statusClass = match ($statusLabel) {
                                'Credit' => 'settlement-status-credit',
                                'Negative' => 'settlement-status-negative',
                                default => 'settlement-status-debit',
                            };
                        @endphp
                        <article class="mobile-table-card p-4">
                            <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
                                <div>
                                    <div class="small text-muted text-uppercase">SL {{ $settlements->firstItem() + $index }}</div>
                                    <div class="fw-bold mt-1">{{ $settlement->utr ?: 'N/A' }}</div>
                                    <div class="small text-muted">{{ $settlement->settlement_date?->format('d/m/Y h:i A') ?: ($settlement->created_at?->format('d/m/Y h:i A') ?: '-') }}</div>
                                </div>
                                <span class="settlement-status-badge {{ $statusClass }}">{{ $statusLabel }}</span>
                            </div>
                            <div class="small text-muted mb-1">Amount</div>
                            <div class="fw-bold mb-3">{{ number_format((float) $settlement->amount, 2) }} PKR</div>
                            <div class="small text-muted mb-1">Note</div>
                            <div class="mb-3">{{ $settlement->note ?: 'No note available' }}</div>
                            <div class="small text-muted">Transaction At</div>
                            <div>{{ $settlement->settlement_date?->format('d/m/Y h:i A') ?: ($settlement->created_at?->format('d/m/Y h:i A') ?: '-') }}</div>
                        </article>
                    @empty
                        <div class="text-center text-muted py-5">No settlements found for this user.</div>
                    @endforelse
                </div>

                <div class="p-3 border-top fw-semibold">
                    Total Records : {{ $settlements->total() }}
                    <span class="ms-4">Total Amount: {{ number_format((float) $visibleAmount, 2) }} PKR</span>
                </div>

                <div class="p-3 pt-0">
                    {{ $settlements->links() }}
                </div>
            </div>
        </section>
    </div>
@endsection