@extends('layouts.app')

@section('title', 'الامتحانات')
@section('content')
    <div class="container-fluid" dir="ltr">
        {{-- Breadcrumb + Header --}}
        <div class="d-flex align-items-center justify-content-between mb-4">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-1">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}">الرئيسية</a></li>
                        <li class="breadcrumb-item active" aria-current="page">الامتحانات</li>
                    </ol>
                </nav>
                <h3 class="mb-0 fw-bold">إدارة الامتحانات</h3>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('exams.export', request()->query()) }}" class="btn btn-outline-secondary">
                    <i class="fa-solid fa-file-csv me-1"></i> تصدير CSV
                </a>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#examCreateModal">
                    <i class="fa-solid fa-plus me-1"></i> إضافة امتحان
                </button>
            </div>
        </div>

        {{-- Hero Stats --}}
        <div class="row g-3 mb-4">
            <x-stat-card title="اجمالي الامتحانات" :count="$statsTotal" icon="fa-layer-group"  color="primary" />
            <x-stat-card title="مجموع الدقائق" :count="$statsDurationSum" color="success" icon="fa-clock" />
            <x-stat-card title="متوسط الدقيقة" :count="$statsDurationAvg" color="warning" icon="fa-gauge-simple-high" />
        </div>

        {{-- Toolbar: Search + Filters --}}
        <div class="d-flex align-items-center justify-content-between mb-3">
            <form id="examsSearchForm" action="{{ route('exams.index') }}" method="get" class="d-flex flex-wrap gap-2">
                <input type="hidden" name="course_id" value="{{ $filters['course_id'] }}">
                <input type="hidden" name="duration_from" value="{{ $filters['duration_from'] }}">
                <input type="hidden" name="duration_to" value="{{ $filters['duration_to'] }}">
                <input type="hidden" name="created_from" value="{{ $filters['created_from'] }}">
                <input type="hidden" name="created_to" value="{{ $filters['created_to'] }}">
                <input type="hidden" name="sort" value="{{ $sort }}">
                <input type="hidden" name="direction" value="{{ $direction }}">

                <div class="input-group">
                    <span class="input-group-text"><i class="fa-solid fa-search"></i></span>
                    <input type="text" class="form-control" name="search" id="searchInput" value="{{ $search }}"
                        placeholder="ابحث بعنوان الامتحان...">
                </div>
            </form>

            <button class="btn btn-outline-secondary" data-bs-toggle="offcanvas" data-bs-target="#filtersCanvas">
                <i class="fa-solid fa-filter me-1"></i> فلاتر متقدمة
            </button>
        </div>

        {{-- Tabs: الكل + حسب المقرر --}}
        <ul class="nav nav-tabs mb-3">
            @foreach ($tabs as $tab)
                @php
                    $active =
                        ($tab['key'] === null && empty($filters['course_id'])) ||
                        ($tab['key'] !== null && (string) $filters['course_id'] === (string) $tab['key']);
                    $url = request()->fullUrlWithQuery(['course_id' => $tab['key'], 'page' => 1]);
                @endphp
                <li class="nav-item">
                    <a class="nav-link d-flex align-items-center {{ $active ? 'active' : '' }}"
                        href="{{ $url }}">
                        <span class="me-2">{{ $tab['label'] }}</span>
                        <span class="badge bg-secondary">{{ $tab['count'] }}</span>
                    </a>
                </li>
            @endforeach
        </ul>

        {{-- Table --}}
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead class="table-light position-sticky top-0" style="z-index: 1;">
                    <tr>
                        @php
                            $flip = $direction === 'asc' ? 'desc' : 'asc';
                            $qs = request()->except('page');
                        @endphp
                        <th style="width: 70px;">#</th>
                        <th>
                            <a href="{{ request()->fullUrlWithQuery(array_merge($qs, ['sort' => 'title', 'direction' => $sort === 'title' ? $flip : 'asc'])) }}"
                                class="text-decoration-none text-dark">
                                العنوان {!! $sort === 'title' ? ($direction === 'asc' ? '&uarr;' : '&darr;') : '' !!}
                            </a>
                        </th>
                        <th>المقرر</th>
                        <th style="width:120px;">
                            <a href="{{ request()->fullUrlWithQuery(array_merge($qs, ['sort' => 'duration', 'direction' => $sort === 'duration' ? $flip : 'asc'])) }}"
                                class="text-decoration-none text-dark">
                                المدة {!! $sort === 'duration' ? ($direction === 'asc' ? '&uarr;' : '&darr;') : '' !!}
                            </a>
                        </th>
                        <th style="width:160px;">
                            <a href="{{ request()->fullUrlWithQuery(array_merge($qs, ['sort' => 'created_at', 'direction' => $sort === 'created_at' ? $flip : 'desc'])) }}"
                                class="text-decoration-none text-dark">
                                تاريخ الإنشاء {!! $sort === 'created_at' ? ($direction === 'asc' ? '&uarr;' : '&darr;') : '' !!}
                            </a>
                        </th>
                        <th style="width:140px;">عدد الأسئلة</th>
                        <th style="width:130px;" class="text-end">إجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($exams as $exam)
                        <tr>
                            <td>{{ $exam->id }}</td>
                            <td class="text-truncate" style="max-width: 280px" title="{{ $exam->title }}">
                                {{ $exam->title }}</td>
                            <td>{{ $exam->course->name ?? '—' }}</td>
                            <td><span class="badge bg-info-subtle text-info">{{ $exam->duration }}</span></td>
                            <td><span class="text-muted">{{ optional($exam->created_at)->format('Y-m-d') }}</span></td>
                            <td><span class="badge bg-secondary">{{ $exam->questions_count }}</span></td>
                            <td class="text-end">
                                <div class="btn-group" role="group">
                                    <a href="{{ route('exams.show', $exam->id) }}"
                                        class="btn btn-sm btn-secondary" title="عرض" aria-label="عرض">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                    <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                        data-bs-target="#examEditModal" data-id="{{ $exam->id }}"
                                        data-title="{{ $exam->title }}" data-course_id="{{ $exam->course_id }}"
                                        data-duration="{{ $exam->duration }}" title="تعديل" aria-label="تعديل">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button class="btn btn-sm btn-danger" data-bs-toggle="modal"
                                        data-bs-target="#examDeleteModal" data-id="{{ $exam->id }}"
                                        data-title="{{ $exam->title }}" title="حذف" aria-label="حذف">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7">
                                <div class="card border-0 text-center py-5">
                                    <div class="card-body">
                                        <div class="mb-2"><i class="fa-regular fa-file-lines fa-2x text-muted"></i>
                                        </div>
                                        <h6 class="text-muted mb-3">لا توجد بيانات بعد</h6>
                                        <button class="btn btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#examCreateModal">
                                            أضف أول امتحان
                                        </button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        <div class="d-flex justify-content-end">
            {{ $exams->links() }}
        </div>
    </div>

    {{-- Offcanvas Filters --}}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="filtersCanvas" aria-labelledby="filtersCanvasLabel">
        <div class="offcanvas-header">
            <h5 id="filtersCanvasLabel" class="mb-0">فلاتر متقدمة</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <form action="{{ route('exams.index') }}" method="get" id="filtersForm" class="vstack gap-3">
                <input type="hidden" name="search" value="{{ $search }}">
                <input type="hidden" name="sort" value="{{ $sort }}">
                <input type="hidden" name="direction" value="{{ $direction }}">

                <div>
                    <label class="form-label">المقرر</label>
                    <select class="form-select" name="course_id">
                        <option value="">الكل</option>
                        @foreach ($courses as $c)
                            <option value="{{ $c->id }}" @selected($filters['course_id'] == $c->id)>{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="row g-2">
                    <div class="col">
                        <label class="form-label">المدة من</label>
                        <input type="number" class="form-control" name="duration_from"
                            value="{{ $filters['duration_from'] }}">
                    </div>
                    <div class="col">
                        <label class="form-label">المدة إلى</label>
                        <input type="number" class="form-control" name="duration_to"
                            value="{{ $filters['duration_to'] }}">
                    </div>
                </div>

                <div class="row g-2">
                    <div class="col">
                        <label class="form-label">تاريخ من</label>
                        <input type="date" class="form-control" name="created_from"
                            value="{{ $filters['created_from'] }}">
                    </div>
                    <div class="col">
                        <label class="form-label">تاريخ إلى</label>
                        <input type="date" class="form-control" name="created_to"
                            value="{{ $filters['created_to'] }}">
                    </div>
                </div>

                <div class="d-flex gap-2">
                    <button class="btn btn-primary flex-fill" type="submit"><i class="fa-solid fa-check me-1"></i>
                        تطبيق</button>
                    <a class="btn btn-light flex-fill" href="{{ route('exams.index') }}"><i
                            class="fa-solid fa-rotate me-1"></i> تفريغ</a>
                </div>
            </form>
        </div>
    </div>

    {{-- Toasts --}}
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 1080">
        <div id="toastContainer"></div>
    </div>

    {{-- Modals --}}
    @include('dashboard.exams.modals.create', ['courses' => $courses])
    @include('dashboard.exams.modals.edit', ['courses' => $courses])
    @include('dashboard.exams.modals.show')
    @include('dashboard.exams.modals.delete')

@endsection

@push('scripts')
    <script>
        (function() {
            // Tooltips
            const ttList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            ttList.map(el => new bootstrap.Tooltip(el));

            // Debounce search
            const form = document.getElementById('examsSearchForm');
            const input = document.getElementById('searchInput');
            let t;
            input?.addEventListener('input', function() {
                clearTimeout(t);
                t = setTimeout(() => form.submit(), 400);
            });

            // Toasts from session
            const container = document.getElementById('toastContainer');
            @if (session('toast.success'))
                showToast(@json(session('toast.success')), 'success');
            @endif
            @if (session('toast.error'))
                showToast(@json(session('toast.error')), 'danger');
            @endif
            function showToast(msg, type) {
                const w = document.createElement('div');
                w.className = 'toast align-items-center text-bg-' + type + ' border-0';
                w.setAttribute('role', 'alert');
                w.innerHTML = `<div class="d-flex">
            <div class="toast-body">${msg}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>`;
                container.appendChild(w);
                new bootstrap.Toast(w, {
                    delay: 2500
                }).show();
            }

            // ===== Modals: Exams =====
            const editModal = document.getElementById('examEditModal');
            editModal?.addEventListener('show.bs.modal', function(ev) {
                const btn = ev.relatedTarget;
                const id = btn.getAttribute('data-id');
                const title = btn.getAttribute('data-title');
                const course_id = btn.getAttribute('data-course_id');
                const duration = btn.getAttribute('data-duration');

                this.querySelector('form').action = `{{ url('exams') }}/${id}`;
                this.querySelector('input[name="title"]').value = title || '';
                this.querySelector('select[name="course_id"]').value = course_id || '';
                this.querySelector('input[name="duration"]').value = duration || 0;
            });

            const showModal = document.getElementById('examShowModal');
            showModal?.addEventListener('show.bs.modal', function(ev) {
                const b = ev.relatedTarget;
                this.querySelector('[data-field="id"]').textContent = b.getAttribute('data-id');
                this.querySelector('[data-field="title"]').textContent = b.getAttribute('data-title') || '—';
                this.querySelector('[data-field="course"]').textContent = b.getAttribute('data-course') || '—';
                this.querySelector('[data-field="duration"]').textContent = b.getAttribute('data-duration') ||
                    '0';
                this.querySelector('[data-field="created"]').textContent = b.getAttribute('data-created') ||
                '—';
            });

            const deleteModal = document.getElementById('examDeleteModal');
            deleteModal?.addEventListener('show.bs.modal', function(ev) {
                const b = ev.relatedTarget;
                const id = b.getAttribute('data-id');
                const title = b.getAttribute('data-title');
                this.querySelector('[data-field="title"]').textContent = title || '';
                this.querySelector('form').action = `{{ url('exams') }}/${id}`;
            });
        })();
    </script>
@endpush