@extends('layouts.app')
@section('title', 'إدارة المدرسين')
@section('content')
<div class="container">
    <x-header title="إدارة المدرسين" />
    
    <div class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center gap-2 mb-4 actions-wrapper">
        <div class="d-flex flex-nowrap overflow-x-auto gap-1 w-100 pb-2 pb-md-0 scrollbar-hidden">
            @canany(['teacher.create'])
                <a href="{{ route('teachers.create') }}" class="btn btn-action-sm btn-teacher-primary shadow-sm flex-shrink-0">
                    <i class="fa-solid fa-plus-circle"></i> <span>مدرس جديد</span>
                </a>

                <a href="{{ route('teachers.download_template') }}" class="btn btn-action-sm btn-teacher-outline shadow-sm flex-shrink-0">
                    <i class="fas fa-file-excel"></i> <span>تحميل النموذج</span>
                </a>

                <button type="button" class="btn btn-action-sm btn-teacher-success shadow-sm flex-shrink-0" data-bs-toggle="modal" data-bs-target="#importTeachersModal">
                    <i class="fa-solid fa-cloud-arrow-up"></i> <span>رفع إكسيل</span>
                </button>
            @endcanany
        </div>
    </div>

@canany(['teacher.create'])
    <div class="modal fade" id="importTeachersModal" tabindex="-1" aria-labelledby="importTeachersModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importTeachersModalLabel"><i class="fa-solid fa-file-excel text-success"></i> رفع بيانات المدرسين عبر الإكسيل</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('teachers.import') }}" method="POST" enctype="multipart/form-data" target="teachers_upload_iframe" onsubmit="showLoadingState()">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="excel_file" class="form-label">اختر ملف الإكسيل (.xlsx, .xls)</label>
                            <input class="form-control" type="file" id="excel_file" name="excel_file" accept=".xlsx, .xls" required>
                            <div class="form-text text-muted mt-2">
                                💡 يجب أن يحتوي الشيت على العواميد بالترتيب التالي:<br>
                                <strong>اسم المدرس | الرقم القومي | التليفون الأول | التليفون الثاني | العنوان | الديانة | المؤهل | التخصص</strong>
                            </div>
                        </div>
                        
                        <div id="upload_loading" class="text-center d-none my-3">
                            <div class="spinner-border text-success" role="status"></div>
                            <p class="mt-2 text-success">جاري فحص البيانات وحقنها في قاعدة البيانات، برجاء الانتظار...</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                        <button type="submit" id="submit_btn" class="btn btn-success">بدء الرفع والتحقق</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endcanany
<iframe name="teachers_upload_iframe" id="teachers_upload_iframe" class="d-none"></iframe>

    <x-alert />
    
    {{-- للعرض على الشاشات الكبيرة --}}
    <div class="table-responsive d-none d-md-block">
        <table class="table table-bordered table-striped table-hover table-sm text-center align-middle">
            <thead>
                <tr class="text-center">
                    <th>#</th>
                    <th>الاسم</th>
                    <th>الرقم القومى</th>
                    <th>تاريخ الميلاد</th>
                    <th>الهاتف</th>
                    <th>العنوان</th>
                    <th>الديانه</th>
                    <th>المؤهل و التخصص</th>
                    @canany(['teacher.edit', 'teacher.delete'])
                    <th>إجراءات</th>
                    @endcanany
                </tr>
            </thead>
            <tbody>
                @forelse ($teachers as $teacher)
                <tr class="text-center">
                    <td>{{ $loop->iteration + ($teachers->currentPage() - 1) * $teachers->perPage() }}</td>
                    <td>{{ $teacher->title }} {{ $teacher->name }}</td>
                    <td>{{ $teacher->NID }}</td>
                    <td>
                        {{ $teacher->birth_date }}
                        @if($teacher->age)
                        <br>
                             <span class="badge bg-secondary">{{ $teacher->age }} سنة</span>
                        @endif
                    </td>
                    <td>
                        @if($teacher->phones)
                            @foreach($teacher->phones as $phone)
                                <span class="badge bg-secondary">{{ $phone }}</span>
                            @endforeach
                        @else
                            <span class="text-muted">لا يوجد أرقام</span>
                        @endif

                    </td>
                    <td>{{ $teacher->address }}</td>
                    <td>{{ $teacher->religion }}</td>
                    <td>{{ $teacher->qualification }} {{ $teacher->major ? ' - ' . $teacher->major : '' }}</td>

                    @canany(['teacher.edit', 'teacher.delete'])
                    <td>
                        @canany(['teacher.edit'])
                            <a href="{{ route('teachers.edit', $teacher->id) }}" class="btn btn-sm btn-warning btn-sm"><i class="fa-regular fa-pen-to-square"></i></a>
                        @endcan
                        @canany(['teacher.delete'])
                            <!-- زر الحذف -->
                            <button type="button" 
                                    class="btn btn-outline-danger btn-sm flex-fill delete-ajax-trigger" 
                                    data-id="{{ $teacher->id }}"
                                    data-name="{{ $teacher->name }}"
                                    data-url="/teachers"
                                    data-bs-toggle="modal"
                                    data-bs-target="#deleteModal0">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        @endcanany
                    </td>
                    @endcanany
                </tr>
                @empty
                <tr>
                    <td colspan="9" class="text-center">لا يوجد بيانات</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- للعرض على الموبايل --}}
    <div class="d-block d-md-none">
        <ul class="list-group list-group-flush">
            @forelse ($teachers as $teacher)
                <li class="list-group-item">
                    <span class="badge text-bg-dark rounded-pill">{{ $loop->iteration + ($teachers->currentPage() - 1) * $teachers->perPage() }}</span>  <br>
                    <strong>الاسم:</strong> {{ $teacher->title }} {{ $teacher->name }} <br>
                    <strong>الرقم القومى:</strong> {{ $teacher->NID }} <br>
                    <strong>تاريخ الميلاد:</strong>
                    {{ $teacher->birth_date }}
                        @if($teacher->age)
                             <span class="badge bg-secondary">{{ $teacher->age }} سنة</span>
                        @endif
                        <br>
                    <strong>الهاتف:</strong>   
                    @if($teacher->phones)
                        @foreach($teacher->phones as $phone)
                            <span class="badge bg-secondary">{{ $phone }}</span>
                        @endforeach
                    @else
                        <span class="text-muted">لا يوجد أرقام</span>
                    @endif
                    <br>
                    <strong>العنوان:</strong> {{ $teacher->address }} <br>
                    <strong>الديانه:</strong> {{ $teacher->religion }} <br>
                    <strong>المؤهل:</strong> {{ $teacher->qualification }} {{ $teacher->major ? ' - ' . $teacher->major : '' }} <br>

                    @canany(['teacher.edit', 'teacher.delete'])
                        <div class="d-flex justify-content-evenly mt-2">
                            @canany(['teacher.edit'])
                                <a href="{{ route('teachers.edit', $teacher->id) }}" class="btn btn-sm btn-warning">
                                    <i class="fa-regular fa-pen-to-square"></i> تعديل
                                </a>
                            @endcan
                            @canany('teacher.delete')
                                <button type="button"
                                class="btn btn-danger btn-sm delete-ajax-trigger" 
                                    data-id="{{ $teacher->id }}"
                                    data-name="{{ $teacher->name }}"
                                    data-url="/teachers"
                                    data-bs-toggle="modal"
                                    data-bs-target="#deleteModal0">
                                    <i class="fa-solid fa-trash"></i> حذف
                                </button>
                            @endcanany
                        </div>
                    @endcanany
                </li>
            @empty
                <li class="list-group-item text-center">لا يوجد بيانات</li>
            @endforelse
        </ul>
    </div>

    <x-pagination :data="$teachers" />
</div>
@canany(['teacher.delete'])
    {{-- مودال واحد يتيم لكل الصفحة --}}
    <x-delete-modal id="0" model="teachers" />
@endcanany

<script>
    function showLoadingState() {
        document.getElementById('upload_loading').classList.remove('d-none');
        document.getElementById('submit_btn').disabled = true;
    }
</script>

@endsection