@extends('layouts-dash.master')

@section('title')
    المطالبات المالية - GOVI
@endsection

@section('content')

@if(session('success'))
    <div class="p-4 rounded-lg bg-green-100 text-green-800 border border-green-200">
        {{ session('success') }}
    </div>
@endif

<!-- Stats -->
<div class="grid grid-cols-2 lg:grid-cols-3 gap-3 lg:gap-7.5">
    <div class="grid grid-cols-1 place-content-center gap-1 text-center">
        <span class="text-mono text-2xl lg:text-2xl leading-none font-semibold">{{ \App\Models\FinancialClaim::where('status', 'جديد')->count() }}</span>
        <span class="text-secondary-foreground text-sm">جديد</span>
    </div>
    <div class="grid grid-cols-1 place-content-center gap-1 text-center">
        <span class="text-mono text-2xl lg:text-2xl leading-none font-semibold">{{ \App\Models\FinancialClaim::where('status', 'تم التحويل')->count() }}</span>
        <span class="text-secondary-foreground text-sm">تم التحويل</span>
    </div>
    <div class="grid grid-cols-1 place-content-center gap-1 text-center">
        <span class="text-mono text-2xl lg:text-2xl leading-none font-semibold">{{ \App\Models\FinancialClaim::where('status', 'لم يتم التحويل')->count() }}</span>
        <span class="text-secondary-foreground text-sm">لم يتم التحويل</span>
    </div>
</div>

<br>
<div class="kt-card">
    <div class="kt-card-header px-5">
        <div class="flex flex-col md:flex-row gap-3 md:items-center md:justify-between w-full">
            <h3 class="kt-card-title">المطالبات المالية</h3>
            <div class="flex flex-wrap items-center gap-2">
                <form method="GET" action="{{ route('admin.claims.index') }}" class="flex flex-wrap items-center gap-2">
                    <select name="status" class="kt-input w-40" onchange="this.form.submit()">
                        <option value="">كل الحالات</option>
                        <option value="جديد" {{ request('status') == 'جديد' ? 'selected' : '' }}>جديد</option>
                        <option value="تم التحويل" {{ request('status') == 'تم التحويل' ? 'selected' : '' }}>تم التحويل</option>
                        <option value="لم يتم التحويل" {{ request('status') == 'لم يتم التحويل' ? 'selected' : '' }}>لم يتم التحويل</option>
                    </select>
                    <select name="category" class="kt-input w-48" onchange="this.form.submit()">
                        <option value="">كل الفئات</option>
                        <option value="جائزة من منصة اكس" {{ request('category') == 'جائزة من منصة اكس' ? 'selected' : '' }}>جائزة من منصة اكس</option>
                        <option value="جائزة من مسابقة اخرى" {{ request('category') == 'جائزة من مسابقة اخرى' ? 'selected' : '' }}>جائزة من مسابقة أخرى</option>
                        <option value="استرجاع مالي" {{ request('category') == 'استرجاع مالي' ? 'selected' : '' }}>استرجاع مالي</option>
                        <option value="الغاء طلب" {{ request('category') == 'الغاء طلب' ? 'selected' : '' }}>إلغاء طلب</option>
                    </select>
                    @if(request('status') || request('category'))
                        <a href="{{ route('admin.claims.index') }}" class="kt-btn kt-btn-sm kt-btn-light">إزالة الفلتر</a>
                    @endif
                </form>
            </div>
        </div>
    </div>

    <div class="kt-card-content">
        <div class="grid datatable-initialized" data-kt-datatable="true" data-kt-datatable-page-size="15" data-kt-datatable-initialized="true">
            <div class="kt-scrollable-x-auto relative">
                <table class="kt-table table-auto kt-table-border w-full" data-kt-datatable-table="true">
                    <thead>
                        <tr>
                            <th class="min-w-[80px]">رقم المطالبة</th>
                            <th class="min-w-[160px]">الاسم</th>
                            <th class="min-w-[120px]">الهاتف</th>
                            <th class="min-w-[100px]">المبلغ</th>
                            <th class="min-w-[140px]">الفئة</th>
                            <th class="min-w-[120px]">البنك</th>
                            <th class="min-w-[120px]">الحالة</th>
                            <th class="min-w-[120px]">التاريخ</th>
                            <th class="w-[100px]">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($claims as $claim)
                            <tr>
                                <td class="font-medium text-foreground">{{ $claim->claim_number ?? $claim->id }}</td>
                                <td class="font-medium text-foreground">{{ $claim->full_name }}</td>
                                <td class="font-normal text-foreground" dir="ltr">{{ $claim->phone }}</td>
                                <td class="font-bold text-mono">{{ number_format($claim->amount, 2) }} ر.س</td>
                                <td>
                                    <span class="kt-badge kt-badge-outline kt-badge-sm">{{ $claim->category }}</span>
                                </td>
                                <td class="font-normal text-foreground">{{ $claim->bank_name }}</td>
                                <td>
                                    @if($claim->status == 'جديد')
                                        <span class="kt-badge kt-badge-warning kt-badge-sm">جديد</span>
                                    @elseif($claim->status == 'تم التحويل')
                                        <span class="kt-badge kt-badge-success kt-badge-sm">تم التحويل</span>
                                    @else
                                        <span class="kt-badge kt-badge-destructive kt-badge-sm">لم يتم التحويل</span>
                                    @endif
                                </td>
                                <td class="text-secondary-foreground text-sm">{{ $claim->created_at->format('Y/m/d H:i') }}</td>
                                <td>
                                    <a href="{{ route('admin.claims.show', $claim) }}" class="kt-btn kt-btn-sm kt-btn-light">
                                        عرض
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center py-8 text-secondary-foreground">
                                    لا توجد مطالبات مالية حتى الآن.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="p-4">
            {{ $claims->withQueryString()->links() }}
        </div>
    </div>
</div>
@endsection