{{-- للعرض على الشاشات الكبيرة --}}
<div class="table-responsive d-none d-md-block">
    <table class="table table-hover align-middle text-center shadow-sm border">
        <thead class="table-light">
            <tr>
                <th style="width: 5%">#</th>
                <th style="width: 15%">الكنيسة</th>
                <th style="width: 20%">الاسم</th>
                <th style="width: 15%">المرحلة والنوع</th>
                <th style="width: 10%">الرصيد</th>
                <th style="width: 10%">الهاتف</th>
                <th style="width: 25%">إجراءات</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($students as $student)
            <tr>
                <td class="text-muted fw-bold small">{{ $loop->iteration + ($students->currentPage() - 1) * $students->perPage() }}</td>
                <td class="small">{{ $student?->church->name . ' (' . $student?->church->address . ')' ?? '...' }}</td>
                <td class="fw-bold text-dark text-end px-3">
                    {{-- الاسم --}}
                    <div class="mb-2">{{ $student?->name }}</div>
                    
                    <div class="d-flex flex-column gap-1">
                        {{-- الرقم القومي (بشكل بطاقة تعريفية مميزة) --}}
                        @if($student?->NID)
                            <div class="d-flex align-items-center text-secondary" style="font-size: 0.75rem;">
                                <i class="fa-solid fa-id-card ms-1"></i>
                                <span class="font-monospace fw-medium">{{ $student->NID }}</span>
                            </div>
                        @endif

                        {{-- الكود الخارجي (بشكل خفيف وهادئ لعدم التداخل مع الرقم القومي) --}}
                        @if(!empty($student?->external_code))
                            <div class="d-flex align-items-center text-muted" style="font-size: 0.7rem;">
                                <i class="fa-solid fa-barcode ms-1 opacity-75"></i>
                                <span class="font-monospace">{{ $student->external_code }}</span>
                            </div>
                        @endif
                    </div>
                </td>
                
                {{-- المرحلة والنوع --}}
                <td>
                    @php 
                        $isArabic = ($student->study_type == 'عربي');
                        $badgeText = collect([$student->school_type, $student->study_type])->filter()->implode(' - ');
                    @endphp
                    @if($badgeText)
                        <div class="mb-1">
                            <span class="badge {{ $isArabic ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning' }} border" style="font-size: 0.7rem;">{{ $badgeText }}</span>
                        </div>
                    @endif
                    <div class="fw-semibold small">{{ $student->stage?->name ?? '---' }}</div>
                </td>

                <td class="fw-bold {{ $student->balance < 0 ? 'text-danger' : 'text-success' }}">
                    {{ number_format($student->balance, 2) }}
                </td>

                <td>
                    @forelse($student->phones ?? [] as $phone)
                        <div class="badge bg-light text-dark border mb-1">{{ $phone }}</div>
                    @empty <span class="small text-muted">-</span> @endforelse
                </td>

                <td class="text-center align-middle">
                    <div class="d-flex justify-content-center align-items-center gap-1">
                        @canany(['payment.create','payment.refund'])
                        <button type="button" class="btn btn-action-icon btn-finance" onclick="Livewire.dispatch('openFinanceModal', { id: {{ $student->id }} })" data-bs-toggle="modal" data-bs-target="#financeModal"><i class="fa-solid fa-wallet text-success"></i></button>
                        @endcanany

                        @canany(['placement_test.view','placement_test.create'])
                        <button type="button" class="btn btn-action-icon btn-placement-test open-placement-modal" data-id="{{ $student->id }}" data-name="{{ $student->name }}"><i class="fa-solid fa-file-circle-plus"></i></button>
                        @endcanany

                        <a href="{{ route('students.print', $student->id) }}" target="_blank" class="btn btn-action-icon btn-print-pdf"><i class="fas fa-file-pdf"></i></a>

                        @if($discounts->contains('status', 1))
                            @can('student.discount')
                                <div class="dropdown">
                                    <button class="btn btn-action-icon btn-discount-tag" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="تعديل الخصم">
                                        <i class="fa-solid fa-percent"></i>
                                        <span class="discount-badge">
                                            {{ str_pad($student->discount ? $student->discount->percentage : '0', 3, '0', STR_PAD_LEFT) }}
                                        </span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end shadow border-0 py-2 animated fadeIn">
                                        <li><h6 class="dropdown-header">تعديل نسبة الخصم</h6></li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item discount-option {{ is_null($student->discount_id) ? 'active' : '' }}" 
                                            href="javascript:void(0)" data-student="{{ $student->id }}" data-value="">
                                                <i class="fa-solid fa-circle-xmark text-danger me-2"></i> بدون خصم
                                            </a>
                                        </li>
                                        @foreach ($discounts as $discount)
                                            <li>
                                                <a class="dropdown-item discount-option {{ $student->discount_id == $discount->id ? 'active' : '' }}" 
                                                href="javascript:void(0)" data-student="{{ $student->id }}" data-value="{{ $discount->id }}">
                                                    <i class="fa-solid fa-tag text-primary me-2"></i> {{ $discount->name }} ({{ $discount->percentage }}%)
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endcan
                        @endif

                        @can('student.edit')
                        <a href="{{ route('students.edit', $student->id) }}" class="btn btn-action-icon btn-edit-profile"><i class="fa-regular fa-pen-to-square"></i></a>
                        @endcan

                        @can('student.archive')
                        <input type="checkbox" class="btn-check archive-toggle" id="archive-{{ $student->id }}" data-student="{{ $student->id }}" {{ $student->is_archived ? 'checked' : ''}}>
                        <label class="btn btn-action-icon btn-archive-check" for="archive-{{ $student->id }}"><i class="fa-solid fa-box-archive"></i></label>
                        @endcan

                        @can('student.delete')
                        <button type="button"
                                class="btn btn-action-icon btn-delete-trash delete-ajax-trigger"
                                data-id="{{ $student->id }}"
                                data-name="{{ $student->name }}"
                                data-bs-toggle="modal"
                                data-bs-target="#deleteModal0">
                                <i class="fa-solid fa-trash"></i>
                        </button>
                        @endcan
                    </div>
                </td>
            </tr>
            @empty <tr><td colspan="7" class="text-center">لا يوجد بيانات</td></tr> @endforelse
        </tbody>
    </table>
</div>

{{-- للعرض على الموبايل --}}
<div class="d-block d-md-none">
    <div class="row g-2">
        @forelse ($students as $student)
            <div class="col-12">
                <div class="card shadow-sm border-0 mb-2">
                    <div class="card-body p-3">
                        <div class="mb-2">
                            <div class="d-flex justify-content-between align-items-start mb-1">
                                <h6 class="fw-bold text-primary mb-0">{{ $student->name }}</h6>
                                <span class="badge {{ $student->balance < 0 ? 'bg-danger' : 'bg-success' }} font-xxs">
                                    {{ number_format($student->balance, 2) }}
                                </span>
                            </div>

                            {{-- صف التعريفات (NID + الكود) - مدمجين بشكل أنيق --}}
                            <div class="d-flex flex-wrap gap-2 mb-2" style="font-size: 0.75rem;">
                                @if($student->NID)
                                    <span class="text-secondary">
                                        <i class="fa-solid fa-id-card ms-1"></i>{{ $student->NID }}
                                    </span>
                                @endif
                                @if($student->external_code)
                                    <span class="text-muted">
                                        <i class="fa-solid fa-barcode ms-1"></i>{{ $student->external_code }}
                                    </span>
                                @endif
                            </div>
                        </div>

                        {{-- بيانات الطالب (المرحلة بجانب النوع) --}}
                        <div class="row g-1 text-muted small mb-2">
                            <div class="col-12">
                                <i class="fa-solid fa-graduation-cap ms-1"></i>
                                <strong>المرحلة:</strong> {{ $student->stage?->name ?? 'غير محدد' }}
                                
                                @php $isArabic = ($student->study_type == 'عربي'); @endphp
                                <span class="badge {{ $isArabic ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning' }} ms-1">
                                    {{ $student->school_type }} - {{ $student->study_type }}
                                </span>
                            </div>
                            <div class="col-12 text-truncate">
                                <i class="fa-solid fa-church ms-1"></i> {{ $student->church?->name . ' (' . $student->church?->address . ')' ?? '---' . ')' }}
                            </div>
                        </div>

                        {{-- الهواتف --}}
                        <div class="mb-3">
                            @foreach($student->phones ?? [] as $phone)
                                <a href="tel:{{ $phone }}" class="btn btn-sm btn-outline-success border-dashed me-1"><i class="fa-solid fa-phone"></i> {{ $phone }}</a>
                            @endforeach
                        </div>

                        {{-- الأزرار (تم الحفاظ على الترتيب) --}}
                        <div class="d-flex gap-2 flex-wrap justify-content-center border-top pt-2">
                             <div class="d-flex gap-2 flex-wrap justify-content-center border-top pt-2">
                                {{-- المالية --}}
                                @canany(['payment.create','payment.refund'])
                                <button type="button" class="btn btn-sm btn-success" onclick="Livewire.dispatch('openFinanceModal', { id: {{ $student->id }} })" data-bs-toggle="modal" data-bs-target="#financeModal">
                                    <i class="fa-solid fa-wallet"></i>
                                </button>
                                @endcanany

                                {{-- اختبار التأسيس --}}
                                @canany(['placement_test.view', 'placement_test.create'])
                                <button type="button" class="btn btn-sm btn-primary open-placement-modal" data-id="{{ $student->id }}">
                                    <i class="fa-solid fa-file-circle-plus"></i>
                                </button>
                                @endcanany

                                {{-- الطباعة --}}
                                <a href="{{ route('students.print', $student->id) }}" target="_blank" class="btn btn-sm btn-info text-white">
                                    <i class="fas fa-file-pdf"></i>
                                </a>

                                {{-- الخصم (Dropdown) --}}
                                @if($discounts->contains('status', 1))
                                    @can('student.discount')
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-secondary btn-discount-tag" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="تعديل الخصم">
                                                <i class="fa-solid fa-percent"></i>
                                                <span class="discount-badge">
                                                    {{ str_pad($student->discount ? $student->discount->percentage : '0', 3, '0', STR_PAD_LEFT) }}
                                                </span>
                                            </button>
                                            <ul class="dropdown-menu shadow border-0 py-2">
                                                <li><h6 class="dropdown-header">تعديل نسبة الخصم</h6></li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li>
                                                    <a class="dropdown-item discount-option {{ is_null($student->discount_id) ? 'active' : '' }}" 
                                                    href="javascript:void(0)" data-student="{{ $student->id }}" data-value="">
                                                        <i class="fa-solid fa-circle-xmark text-danger me-2"></i> بدون خصم
                                                    </a>
                                                </li>
                                                @foreach ($discounts as $discount)
                                                    <li>
                                                        <a class="dropdown-item discount-option {{ $student->discount_id == $discount->id ? 'active' : '' }}" 
                                                        href="javascript:void(0)" data-student="{{ $student->id }}" data-value="{{ $discount->id }}">
                                                            <i class="fa-solid fa-tag text-primary me-2"></i> {{ $discount->name }} ({{ $discount->percentage }}%)
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endcan
                                @endif

                                {{-- التعديل --}}
                                @can('student.edit')
                                <a href="{{ route('students.edit', $student->id) }}" class="btn btn-sm btn-warning text-white">
                                    <i class="fa-regular fa-pen-to-square"></i>
                                </a>
                                @endcan

                                {{-- الأرشفة --}}
                                @can('student.archive')
                                <input type="checkbox" class="btn-check archive-toggle" id="m-archive-{{ $student->id }}" data-student="{{ $student->id }}" {{ $student->is_archived ? 'checked' : ''}}>
                                <label class="btn btn-sm btn-outline-secondary" for="m-archive-{{ $student->id }}">
                                    <i class="fa-solid fa-box-archive"></i>
                                </label>
                                @endcan

                                {{-- الحذف --}}
                                @can('student.delete')
                                <button type="button"
                                        class="btn btn-sm btn-outline-danger delete-ajax-trigger"
                                        data-id="{{ $student->id }}"
                                        data-name="{{ $student->name }}"
                                        data-bs-toggle="modal"
                                        data-bs-target="#deleteModal0">
                                        <i class="fa-solid fa-trash"></i>
                                </button>
                                @endcan
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 text-center py-3">لا يوجد بيانات</div>
        @endforelse
    </div>
</div>

{{-- Pagination --}}
<div class="mt-3">
    <x-pagination :data="$students" />
</div>