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

    #example2 th,
    #example2 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" dir="rtl">
            <h3 class="card-title mb-0">{{ __('user.country') }}</h3>
            @if(Auth::guard('admin')->user()->can('create countries'))
            <a href="{{ route('dashboard.country.create') }}" class="btn btn-success">
                إضافة دولة
            </a>
            @endif
        </div>

        <div class="card-body">
            <div class="table-responsive"> {{-- ✅ الحل الأساسي --}}
                <table id="example2" class="table table-bordered table-hover text-center align-middle" dir="rtl">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>الاسم بالعربية</th>
                            <th>الاسم بالإنجليزية</th>
                            <th>الاسم بالأردية</th>
                            <th>العمليات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($countries as $index => $country)
                        <tr>
                            <td>{{ $countries->firstItem() + $index }}</td>
                            <td>{{ $country->getTranslation('name', 'ar') }}</td>
                            <td>{{ $country->getTranslation('name', 'en') }}</td>
                            <td>{{ $country->getTranslation('name', 'ur') }}</td>
                            <td>
                                @if(Auth::guard('admin')->user()->can('update countries'))
                                <a href="{{ route('dashboard.country.edit', $country->id) }}" class="btn btn-info btn-sm">تعديل</a>
                                @endif

                                @if(Auth::guard('admin')->user()->can('delete countries'))
                                <form action="{{ route('dashboard.country.delete', $country->id) }}" method="POST" style="display: inline-block;" onsubmit="return confirm('هل أنت متأكد من حذف هذه الدولة؟');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm">حذف</button>
                                </form>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-end mt-3">
                {{-- {{ $countries->links() }} --}}
                {{ $countries->appends(request()->query())->links() }}
            </div>
        </div>
    </div>
</div>
@endsection