@extends('admin.layouts.app')

@section('title', 'الطلاب المسجلون')
@section('page-title', 'الطلاب المسجلون')
@section('page-description', 'إضافة، بحث، تعديل، ومسح الجلسات من مكان واحد.')

@section('content')
    <section class="hero-card">
        <div class="hero-split">
            <div>
                <span class="eyebrow">إدارة الحسابات</span>
                <h3>كل الحسابات من شاشة واحدة</h3>
                <p>إضافة، بحث، تبديل الدور، ومسح الجلسة بسرعة.</p>
            </div>

            <div class="hero-actions">
                <a href="#create-student" class="btn btn-primary">إضافة حساب</a>
                <a href="#students-table" class="btn btn-secondary">عرض القائمة</a>
            </div>
        </div>
    </section>

    <section class="grid cols-4">
        <div class="card stat-card">
            <span class="muted">كل الحسابات</span>
            <strong>{{ number_format($stats['all']) }}</strong>
        </div>
        <div class="card stat-card">
            <span class="muted">طلاب</span>
            <strong>{{ number_format($stats['students']) }}</strong>
        </div>
        <div class="card stat-card">
            <span class="muted">ممثلون</span>
            <strong>{{ number_format($stats['representatives']) }}</strong>
        </div>
        <div class="card stat-card">
            <span class="muted">مقررون</span>
            <strong>{{ number_format($stats['coordinators']) }}</strong>
        </div>
        <div class="card stat-card">
            <span class="muted">مشرفون</span>
            <strong>{{ number_format($stats['supervisors']) }}</strong>
        </div>
    </section>

    <section class="split">
        <div class="card" id="create-student">
            <div class="panel-header">
                <div>
                    <span class="eyebrow">إضافة جديدة</span>
                    <h3>إنشاء حساب طالب أو ممثل أو مقرر</h3>
                    <p>رقم الطالب/الممثل يربط مع <code>allowed_students</code>، ورقم المقرر يربط مع <code>allowed_department_coordinators</code>.</p>
                </div>
            </div>

            <form method="POST" action="{{ route('admin.students.store') }}" class="grid" data-academic-form>
                @csrf

                <div class="form-section">
                    <div class="section-kicker">بيانات الحساب</div>
                    <div class="form-grid cols-3">
                        <div class="field">
                            <label for="username">اسم المستخدم</label>
                            <input id="username" name="username" type="text" value="{{ old('username') }}" required>
                        </div>

                        <div class="field">
                            <label for="password">كلمة المرور</label>
                            <input id="password" name="password" type="text" value="{{ old('password') }}" required>
                        </div>

                        <div class="field">
                            <label for="role">الدور</label>
                            <select id="role" name="role" required>
                                @foreach (['طالب', 'ممثل', 'مقرر', 'مشرف'] as $roleOption)
                                    <option value="{{ $roleOption }}" @selected(old('role', 'طالب') === $roleOption)>{{ $roleOption }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="field">
                            <label for="phone">رقم الهاتف</label>
                            <input id="phone" name="phone" type="text" value="{{ old('phone') }}" placeholder="07xxxxxxxxx">
                        </div>

                        <div class="field">
                            <label for="study_shift">الدوام</label>
                            <select id="study_shift" name="study_shift">
                                <option value="">غير محدد</option>
                                <option value="صباحي" @selected(old('study_shift') === 'صباحي')>صباحي</option>
                                <option value="مسائي" @selected(old('study_shift') === 'مسائي')>مسائي</option>
                            </select>
                        </div>

                        <div class="field">
                            <label for="stage">المرحلة</label>
                            <input id="stage" name="stage" type="text" value="{{ old('stage') }}" placeholder="مثال: 1">
                        </div>

                        <div class="field">
                            <label for="section">الشعبة</label>
                            <input id="section" name="section" type="text" value="{{ old('section') }}" placeholder="A">
                        </div>

                        <div class="field is-wide">
                            <label for="fcm_token">FCM Token</label>
                            <input id="fcm_token" name="fcm_token" type="text" value="{{ old('fcm_token') }}">
                        </div>
                    </div>
                </div>

                <div class="form-section">
                    <div class="section-kicker">الموقع الدراسي</div>
                    <div class="form-grid cols-3">
                        <div class="field">
                            <label for="governorate_id">المحافظة</label>
                            <select id="governorate_id" name="governorate_id" data-role="governorate">
                                <option value="">اختر المحافظة</option>
                                @foreach ($options['governorates'] as $governorate)
                                    <option value="{{ $governorate->id }}" @selected((string) old('governorate_id') === (string) $governorate->id)>
                                        {{ $governorate->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="field">
                            <label for="university_id">الجامعة</label>
                            <select id="university_id" name="university_id" data-role="university">
                                <option value="">اختر الجامعة</option>
                                @foreach ($options['universities'] as $university)
                                    <option value="{{ $university->id }}" data-governorate="{{ $university->governorate_id }}" @selected((string) old('university_id') === (string) $university->id)>
                                        {{ $university->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="field">
                            <label for="college_id">الكلية</label>
                            <select id="college_id" name="college_id" data-role="college">
                                <option value="">اختر الكلية</option>
                                @foreach ($options['colleges'] as $college)
                                    <option value="{{ $college->id }}" data-university="{{ $college->university_id }}" @selected((string) old('college_id') === (string) $college->id)>
                                        {{ $college->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="field is-wide">
                            <label for="department_id">القسم</label>
                            <select id="department_id" name="department_id" data-role="department">
                                <option value="">اختر القسم</option>
                                @foreach ($options['departments'] as $department)
                                    <option value="{{ $department->id }}" data-college="{{ $department->college_id }}" @selected((string) old('department_id') === (string) $department->id)>
                                        {{ $department->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="actions-row">
                    <button type="submit" class="btn btn-primary">حفظ الحساب</button>
                    <span class="muted tiny">بعد الحفظ تقدر تدخل للتفاصيل مباشرة.</span>
                </div>
            </form>
        </div>

        <div class="table-card">
            <div class="panel-header">
                <div>
                    <span class="eyebrow">بحث سريع</span>
                    <h3>فلترة الحسابات</h3>
                    <p>ابحث بالاسم أو الهاتف أو الكلية أو القسم أو الدور.</p>
                </div>
            </div>

            <form method="GET" action="{{ route('admin.students.index') }}" class="filters">
                <div class="filters-inline">
                    <div class="field">
                        <label for="search">بحث</label>
                        <input id="search" name="search" type="text" value="{{ $search }}" placeholder="اسم، هاتف، كلية، قسم...">
                    </div>

                    <div class="field">
                        <label for="role_filter">الدور</label>
                        <select id="role_filter" name="role">
                            <option value="">الكل</option>
                            @foreach (['طالب', 'ممثل', 'مقرر', 'مشرف'] as $roleOption)
                                <option value="{{ $roleOption }}" @selected($role === $roleOption)>{{ $roleOption }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="field">
                        <label for="college_filter">الكلية</label>
                        <select id="college_filter" name="college_id">
                            <option value="">الكل</option>
                            @foreach ($options['colleges'] as $college)
                                <option value="{{ $college->id }}" @selected($collegeId === $college->id)>{{ $college->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="field">
                        <label for="department_filter">القسم</label>
                        <select id="department_filter" name="department_id">
                            <option value="">الكل</option>
                            @foreach ($options['departments'] as $department)
                                <option value="{{ $department->id }}" @selected($departmentId === $department->id)>{{ $department->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="actions-row">
                    <button type="submit" class="btn btn-primary">تطبيق الفلترة</button>
                    <a href="{{ route('admin.students.index') }}" class="btn btn-secondary">إلغاء</a>
                </div>
            </form>
        </div>
    </section>

    <section class="table-card" id="students-table">
        <div class="panel-header">
            <div>
                <span class="eyebrow">القائمة الرئيسية</span>
                <h3>كل الطلاب المسجلين</h3>
                <p>تفاصيل، تبديل الدور، مسح الجلسة، والحذف.</p>
            </div>
            <span class="chip">{{ number_format($students->total()) }} نتيجة</span>
        </div>

        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>الحساب</th>
                        <th>الهاتف</th>
                        <th>الدور</th>
                        <th>الموقع الدراسي</th>
                        <th>الجلسة</th>
                        <th>الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($students as $student)
                        <tr>
                            <td data-label="الحساب">
                                <strong>{{ $student->username }}</strong>
                                <div class="tiny muted">#{{ $student->id }} | {{ optional($student->created_at)->format('Y-m-d H:i') }}</div>
                            </td>
                            <td data-label="الهاتف">{{ $student->linked_phone ?? 'غير مربوط' }}</td>
                            <td data-label="الدور">
                                <span class="badge {{ $student->role === 'ممثل' ? 'rep' : ($student->role === 'مقرر' ? 'rep' : ($student->role === 'مشرف' ? 'supervisor' : 'student')) }}">
                                    {{ $student->role }}
                                </span>
                            </td>
                            <td data-label="الموقع الدراسي">
                                <div>{{ $student->college ?? '-' }}</div>
                                <div class="tiny muted">{{ $student->department ?? '-' }} / {{ $student->stage ?? '-' }} / {{ $student->section ?? '-' }}</div>
                            </td>
                            <td data-label="الجلسة">
                                @if ($student->fcm_token || ($student->active_device_id ?? null))
                                    <span class="badge pending">موجودة</span>
                                    <div class="tiny muted" style="margin-top: 6px;">
                                        @if ($student->fcm_token)
                                            FCM
                                        @endif
                                        @if ($student->fcm_token && ($student->active_device_id ?? null))
                                            |
                                        @endif
                                        @if ($student->active_device_id ?? null)
                                            Device ID
                                        @endif
                                    </div>
                                @else
                                    <span class="badge empty">فارغة</span>
                                @endif
                            </td>
                            <td data-label="الإجراءات">
                                <div class="actions-row">
                                    <a href="{{ route('admin.students.show', $student) }}" class="btn btn-secondary">تفاصيل</a>

                                    @if (in_array($student->role, ['طالب', 'ممثل'], true))
                                        <form method="POST" action="{{ route('admin.students.toggle-role', $student) }}">
                                            @csrf
                                            <button type="submit" class="btn btn-warning">تبديل الدور</button>
                                        </form>
                                    @endif

                                    <form method="POST" action="{{ route('admin.students.clear-session', $student) }}">
                                        @csrf
                                        <button type="submit" class="btn btn-success">مسح الجلسة</button>
                                    </form>

                                    <form method="POST" action="{{ route('admin.students.destroy', $student) }}" onsubmit="return confirm('تأكيد حذف الحساب؟');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger">حذف</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="empty-state">لا توجد حسابات مطابقة للبحث الحالي.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="pagination">
            {{ $students->links() }}
        </div>
    </section>
@endsection