@extends('dashboard.layouts.base')
@section('content')
<style>
    .card-header::after {
        content: none !important;
    }

    #providers-table th,
    #providers-table td {
        vertical-align: middle;
        text-align: center;
    }

</style>

<div class="col-12">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center w-100" style="direction: rtl;">
            <h3 class="card-title mb-0">طلبات مقدمي الخدمة</h3>
        </div>

        <div class="card-body">

            {{-- 🔍 فلتر البحث --}}
            <form method="GET" action="{{ route('dashboard.providers.index') }}" class="mb-4">
                <div class="row g-2 align-items-center" style="direction: rtl;">
                    <div class="col-md-5">
                        <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="ابحث بالاسم أو الهاتف">
                    </div>

                    {{-- <div class="col-md-4">
            <select name="status" class="form-control">
              <option value="">كل الحالات</option>
              <option value="in_review" {{ request('status') == 'in_review' ? 'selected' : '' }}>قيد المراجعة</option>
                    <option value="accepted" {{ request('status') == 'accepted' ? 'selected' : '' }}>تمت الموافقة</option>
                    <option value="reject" {{ request('status') == 'reject' ? 'selected' : '' }}>تم الرفض</option>
                    </select>
                </div> --}}

                <div class="col-md-3 mt-2 mt-md-0 d-flex gap-2">
                    <button type="submit" class="btn btn-primary ml-2">بحث</button>
                    <a href="{{ route('dashboard.providers.index') }}" class="btn btn-secondary">إعادة ضبط</a>
                </div>
        </div>
        </form>

        {{-- ✅ الجدول --}}
        <div class="table-responsive mt-3">
            <table id="providers-table" class="table table-bordered table-hover text-center align-middle" style="direction: rtl;">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>الاسم الاول </th>
                        <th>الاسم الاخير </th>
                        <th>رقم الهاتف</th>
                        <th>الحالة</th>
                        <th>القسم</th>
                        <th>الدولة</th>
                        <th>المدينة</th>
                        <th>الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($providers as $index => $provider)
                    <tr>
                        <td>{{ $providers->firstItem() + $index }}</td>
                        <td>{{ $provider->first_name }}</td>
                        <td>{{ $provider->last_name }}</td>
                        <td>{{ $provider->country_code . ' ' . $provider->phone }}</td>
                        <td>
                            @php
                            $status = [
                            'accepted' => ['text' => 'مقبول', 'class' => 'success'],
                            'reject' => ['text' => 'مرفوض', 'class' => 'danger'],
                            'in_review'=> ['text' => 'قيد المراجعة', 'class' => 'warning'],
                            ][$provider->status] ?? ['text' => 'غير محدد', 'class' => 'secondary'];
                            @endphp
                            <span class="badge bg-{{ $status['class'] }}">{{ $status['text'] }}</span>
                        </td>
                        <td>{{ $provider->category->getTranslation('name', 'ar') ?? '-' }}</td>
                        <td>{{ $provider->country->getTranslation('name', 'ar') ?? '-' }}</td>
                        <td>{{ $provider->city->getTranslation('name', 'ar') ?? '-' }}</td>
                        <td>
                            @if(Auth::guard('admin')->user()->can('read request_providers'))
                            <a href="{{ route('dashboard.providers.show', $provider->id) }}" class="btn btn-primary btn-sm">عرض</a>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-muted">لا توجد نتائج</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>

            <div class="row mt-4">
                <div class="col-12 overflow-auto">
                    {{ $providers->appends(request()->query())->links() }}
                </div>
            </div>
        </div>

    </div>
</div>
</div>
@endsection