@extends('layouts.client')

@include('client.financing-request._home_theme')

@section('title', ln('My Financing Requests', 'طلباتي'))
@section('page_title', ln('Financing Requests', 'طلبات التمويل'))

@section('content')
<style>
    .fr-idx-hero {
        background: linear-gradient(135deg, #FF4040 0%, #FF6B6B 100%);
        color:#fff; border-radius:18px; padding:1.5rem 1.75rem;
        display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
        margin-bottom:1.25rem; box-shadow:0 12px 28px rgba(255,64,64,.22);
    }
    .fr-idx-hero h2 { margin:0; font-weight:800; font-size:1.35rem; }
    .fr-idx-hero p  { margin:.3rem 0 0; opacity:.92; font-size:.9rem; }
    .fr-idx-hero .btn-new {
        background:#fff; color:#D32F2F; padding:.6rem 1.2rem; border-radius:10px;
        font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:.45rem;
        transition:transform .15s, box-shadow .15s;
    }
    .fr-idx-hero .btn-new:hover { transform:translateY(-2px); box-shadow:0 8px 16px rgba(0,0,0,.14); color:#B71C1C; }

    .fr-card {
        background:#fff; border:1px solid #f1f3f5; border-radius:16px;
        box-shadow:0 4px 12px rgba(0,0,0,.04); overflow:hidden;
    }
    .fr-card-head {
        display:flex; align-items:center; justify-content:space-between;
        padding:1rem 1.25rem; border-bottom:1px solid #f1f3f5; background:#fafbfd;
    }
    .fr-card-head h3 { margin:0; font-weight:800; font-size:1rem; color:#1a1a1a; }
    .fr-count { background:#FFEDED; color:#D32F2F; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; }

    .fr-tbl-wrap { overflow-x:auto; }
    .fr-tbl { width:100%; border-collapse:collapse; }
    .fr-tbl thead th {
        background:#fafbfd; color:#6b7280; font-weight:700;
        font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
        padding:14px 18px; text-align:start; white-space:nowrap;
        border-bottom:1px solid #eef0f3;
    }
    .fr-tbl tbody td {
        padding:16px 18px; font-size:.9rem; color:#374151;
        border-bottom:1px solid #f5f5f7; vertical-align:middle;
    }
    .fr-tbl tbody tr { transition:background .15s; }
    .fr-tbl tbody tr:hover { background:#fefafa; }
    .fr-tbl tbody tr:last-child td { border-bottom:0; }

    .fr-req-num a {
        color:#D32F2F; font-weight:800; text-decoration:none;
        font-family:'Cairo', monospace; font-size:.92rem;
    }
    .fr-req-num a:hover { text-decoration:underline; }
    .fr-req-meta { font-size:.72rem; color:#9ca3af; margin-top:2px; }

    .fr-client {
        display:flex; align-items:center; gap:.65rem;
    }
    .fr-avatar {
        width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
        background:linear-gradient(135deg,#FF4040,#FF6B6B); color:#fff; font-weight:800; font-size:.95rem; flex-shrink:0;
    }
    .fr-client-info { line-height:1.25; }
    .fr-client-info .nm { font-weight:700; color:#1a1a1a; }
    .fr-client-info .id { font-size:.75rem; color:#9ca3af; margin-top:2px; }

    .fr-status {
        display:inline-flex; align-items:center; gap:6px;
        padding:5px 11px; border-radius:999px; font-size:.75rem; font-weight:700; white-space:nowrap;
    }
    .fr-status .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

    .fr-stage-lbl { color:#6b7280; font-size:.82rem; }

    .fr-actions { display:flex; gap:.4rem; flex-wrap:nowrap; justify-content:flex-end; }
    .fr-btn {
        display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border-radius:8px;
        font-size:.78rem; font-weight:700; text-decoration:none; white-space:nowrap;
        border:1px solid transparent; cursor:pointer; transition:all .15s;
    }
    .fr-btn-ghost   { color:#4b5563; border-color:#e5e7eb; background:#fff; }
    .fr-btn-ghost:hover { background:#f9fafb; color:#111; }
    .fr-btn-primary { background:linear-gradient(135deg,#FF4040,#FF6B6B); color:#fff; }
    .fr-btn-primary:hover { filter:brightness(.95); color:#fff; }
    .fr-btn-warn    { background:linear-gradient(135deg,#F59E0B,#FBBF24); color:#fff; }
    .fr-btn-warn:hover { filter:brightness(.95); color:#fff; }

    .fr-empty { padding:56px 24px; text-align:center; color:#6b7280; }
    .fr-empty i.big { font-size:3rem; color:#FFC5C5; display:block; margin-bottom:12px; }
    .fr-empty h3 { margin:0 0 6px; font-weight:800; color:#1a1a1a; font-size:1.05rem; }
    .fr-empty p  { margin:0 0 16px; font-size:.9rem; }

    .fr-pagination { padding:14px 18px; display:flex; justify-content:center; }

    @media (max-width: 768px) {
        .fr-tbl thead { display:none; }
        .fr-tbl, .fr-tbl tbody, .fr-tbl tr, .fr-tbl td { display:block; width:100%; }
        .fr-tbl tbody tr {
            margin-bottom:12px; border:1px solid #eef0f3; border-radius:12px; background:#fff;
            padding:.4rem 0;
        }
        .fr-tbl tbody td { border:0; padding:8px 14px; display:flex; justify-content:space-between; gap:12px; }
        .fr-tbl tbody td::before {
            content:attr(data-label); color:#9ca3af; font-size:.72rem; font-weight:700;
            text-transform:uppercase; letter-spacing:.04em;
        }
        .fr-actions { justify-content:flex-end; flex-wrap:wrap; }
    }
</style>

<div class="fr-idx-hero">
    <div>
        <h2><i class="fa-solid fa-file-signature"></i> {{ ln('Financing Requests', 'طلبات التمويل') }}</h2>
        <p>{{ ln('Track your requests, their status, and next actions in one place.', 'تابع طلباتك وحالتها والخطوات التالية من مكان واحد.') }}</p>
    </div>
    <a href="{{ route('client.financing-request.create') }}" class="btn-new">
        <i class="fa-solid fa-plus"></i> {{ ln('New Request', 'طلب جديد') }}
    </a>
</div>

<div class="fr-card">
    <div class="fr-card-head">
        <h3>{{ ln('All Requests', 'كل الطلبات') }}</h3>
        <span class="fr-count">{{ number_format($requests->total() ?? $requests->count()) }}</span>
    </div>

    @if($requests->count() > 0)
        @php
            $statusColors = [
                'pending'   => ['#FFF4E5', '#B25C00'],
                'approved'  => ['#E6F7EA', '#166534'],
                'rejected'  => ['#FEE2E2', '#991B1B'],
                'canceled'  => ['#F3F4F6', '#4B5563'],
                'completed' => ['#DBEAFE', '#1D4ED8'],
            ];
            $stageLabels = [
                'pending_payment' => ln('Pending Payment', 'بانتظار الدفع'),
                'paid'            => ln('Paid',            'مدفوع'),
                'offers'          => ln('Offers',          'العروض'),
                'offer_selected'  => ln('Offer Selected',  'تم اختيار العرض'),
                'completed'       => ln('Completed',       'مكتمل'),
            ];
        @endphp
        <div class="fr-tbl-wrap">
            <table class="fr-tbl">
                <thead>
                    <tr>
                        <th>{{ ln('Request #', 'رقم الطلب') }}</th>
                        <th>{{ ln('Client', 'العميل') }}</th>
                        <th>{{ ln('Mobile', 'الجوال') }}</th>
                        <th>{{ ln('Status', 'الحالة') }}</th>
                        <th>{{ ln('Stage', 'المرحلة') }}</th>
                        <th>{{ ln('Date', 'التاريخ') }}</th>
                        <th style="text-align:end;">{{ ln('Actions', 'الإجراءات') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($requests as $r)
                        @php
                            $effectiveStatus = $r->stage === 'completed' ? 'completed' : $r->status;
                            [$bg, $fg] = $statusColors[$effectiveStatus] ?? ['#F3F4F6', '#4B5563'];
                            $statusLabel = $r->stage === 'completed'
                                ? ln('Completed', 'مكتمل')
                                : ($r->status_label ?? $r->status);
                            $clientName = $r->client_name ?? '—';
                            $initial = mb_strtoupper(mb_substr($clientName, 0, 1));

                            $needsPay = $r->payment_status !== \App\Models\ClickPayPayments::STATUS_SUCCESS
                                && in_array($r->stage, [\App\Models\FinancingRequest::STAGE_PENDING_PAYMENT, null], true)
                                && !in_array($r->status, [\App\Models\FinancingRequest::STATUS_REJECTED, \App\Models\FinancingRequest::STATUS_CANCELED], true);
                            $needsOffer = $r->payment_status === \App\Models\ClickPayPayments::STATUS_SUCCESS && empty($r->selected_offer_id);
                        @endphp
                        <tr>
                            <td data-label="{{ ln('Request #', 'رقم الطلب') }}" class="fr-req-num">
                                <a href="{{ route('client.financing-request.show', $r->id) }}">{{ $r->request_number }}</a>
                                <div class="fr-req-meta">ID #{{ $r->id }}</div>
                            </td>
                            <td data-label="{{ ln('Client', 'العميل') }}">
                                <div class="fr-client">
                                    <div class="fr-avatar">{{ $initial }}</div>
                                    <div class="fr-client-info">
                                        <div class="nm">{{ $clientName }}</div>
                                        <div class="id">{{ $r->national_id ?? '—' }}</div>
                                    </div>
                                </div>
                            </td>
                            <td data-label="{{ ln('Mobile', 'الجوال') }}" style="direction:ltr; text-align:start;">{{ $r->phone ?? '—' }}</td>
                            <td data-label="{{ ln('Status', 'الحالة') }}">
                                <span class="fr-status" style="background: {{ $bg }}; color: {{ $fg }};">
                                    <span class="dot"></span>
                                    {{ $statusLabel }}
                                </span>
                            </td>
                            <td data-label="{{ ln('Stage', 'المرحلة') }}" class="fr-stage-lbl">
                                {{ $stageLabels[$r->stage] ?? ($r->stage ?: '—') }}
                            </td>
                            <td data-label="{{ ln('Date', 'التاريخ') }}" style="color:#6b7280; white-space:nowrap;">
                                {{ optional($r->created_at)->format('Y-m-d') }}
                            </td>
                            <td data-label="{{ ln('Actions', 'الإجراءات') }}">
                                <div class="fr-actions">
                                    <a href="{{ route('client.financing-request.show', $r->id) }}" class="fr-btn fr-btn-ghost">
                                        <i class="fa-regular fa-eye"></i> {{ ln('View', 'عرض') }}
                                    </a>
                                    @if($needsPay)
                                        <form method="POST" action="{{ route('client.financing-request.payment.initiate') }}" style="display:inline;">
                                            @csrf
                                            <input type="hidden" name="financing_request_id" value="{{ $r->id }}">
                                            <button type="submit" class="fr-btn fr-btn-warn">
                                                <i class="fa-solid fa-credit-card"></i> {{ ln('Pay', 'ادفع') }}
                                            </button>
                                        </form>
                                    @elseif($needsOffer)
                                        <a href="{{ route('client.financing-request.show', $r->id) }}#offers" class="fr-btn fr-btn-primary">
                                            <i class="fa-solid fa-handshake"></i> {{ ln('Offers', 'العروض') }}
                                        </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="fr-pagination">
            {{ $requests->links() }}
        </div>
    @else
        <div class="fr-empty">
            <i class="fa-solid fa-folder-open big"></i>
            <h3>{{ ln('No financing requests', 'لا توجد طلبات تمويل') }}</h3>
            <p>{{ ln('You have not submitted any financing request yet.', 'لم تقم بتقديم أي طلب تمويل بعد.') }}</p>
            <a href="{{ route('client.financing-request.create') }}" class="fr-btn fr-btn-primary">
                <i class="fa-solid fa-plus"></i> {{ ln('Submit New Request', 'تقديم طلب جديد') }}
            </a>
        </div>
    @endif
</div>
@endsection