@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="#allowed-create" class="btn btn-primary">إضافة رقم</a>
                <a href="#allowed-table" class="btn btn-secondary">عرض القائمة</a>
            </div>
        </div>
    </section>

    <section class="grid cols-3">
        <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['registered']) }}</strong>
        </div>
        <div class="card stat-card">
            <span class="muted">بانتظار التسجيل</span>
            <strong>{{ number_format($stats['pending']) }}</strong>
        </div>
    </section>

    <section class="split">
        <div class="card" id="allowed-create">
            <div class="panel-header">
                <div>
                    <span class="eyebrow">إضافة جديدة</span>
                    <h3>إضافة رقم جديد</h3>
                    <p>الرقم ينخزن كما تكتبه.</p>
                </div>
            </div>

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

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

                <div class="actions-row">
                    <button type="submit" class="btn btn-primary">إضافة للجدول</button>
                </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.allowed-students.index') }}" class="filters">
                <div class="filters-inline" style="grid-template-columns: 1.4fr 1fr;">
                    <div class="field">
                        <label for="search">بحث</label>
                        <input id="search" name="search" type="text" value="{{ $search }}" placeholder="رقم الهاتف أو اسم المستخدم">
                    </div>

                    <div class="field">
                        <label for="status">الحالة</label>
                        <select id="status" name="status">
                            <option value="">الكل</option>
                            <option value="registered" @selected($status === 'registered')>مرتبط بحساب</option>
                            <option value="pending" @selected($status === 'pending')>بانتظار التسجيل</option>
                        </select>
                    </div>
                </div>

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

    <section class="table-card" id="allowed-table">
        <div class="panel-header">
            <div>
                <span class="eyebrow">القائمة الرئيسية</span>
                <h3>كل الأرقام</h3>
                <p>عرض مباشر للحالة والربط.</p>
            </div>
            <span class="chip">{{ number_format($allowedStudents->total()) }} نتيجة</span>
        </div>

        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>رقم الهاتف</th>
                        <th>الحالة</th>
                        <th>الحساب المرتبط</th>
                        <th>الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($allowedStudents as $allowedStudent)
                        <tr>
                            <td data-label="#"><strong>{{ $allowedStudent->id }}</strong></td>
                            <td data-label="رقم الهاتف"><strong>{{ $allowedStudent->phone }}</strong></td>
                            <td data-label="الحالة">
                                @if ($allowedStudent->loginStudent)
                                    <span class="badge student">مرتبط</span>
                                @else
                                    <span class="badge pending">بانتظار التسجيل</span>
                                @endif
                            </td>
                            <td data-label="الحساب المرتبط">
                                @if ($allowedStudent->loginStudent)
                                    <a href="{{ route('admin.students.show', $allowedStudent->loginStudent) }}">{{ $allowedStudent->loginStudent->username }}</a>
                                @else
                                    <span class="muted">لا يوجد</span>
                                @endif
                            </td>
                            <td data-label="الإجراءات">
                                <form method="POST" action="{{ route('admin.allowed-students.destroy', $allowedStudent) }}" onsubmit="return confirm('تأكيد حذف السجل؟');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger">حذف</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="empty-state">لا توجد سجلات مطابقة.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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