@extends('layouts.app')

@section('title', 'إدارة الدروس')

@section('content')
    <div class="container-fluid" dir="ltr">
        {{-- Breadcrumb + Header --}}
        <div class="d-flex justify-content-between align-items-center mb-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Videos</li>
                </ol>
            </nav>

            <div class="d-flex gap-2">
                {{-- Export CSV (يحافظ على البارامترات الحالية) --}}
                <a href="{{ request()->fullUrlWithQuery(['export' => 'csv']) }}" class="btn btn-outline-secondary"
                    aria-label="تصدير CSV">
                    <i class="fa-solid fa-file-csv me-1"></i> تصدير CSV
                </a>
                {{-- زر إضافة يفتح Modal الإنشاء --}}
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createVideoModal"
                    aria-label="إضافة درس">
                    <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="$stats['total']" icon="fa-layer-group" />
            <x-stat-card title="الدروس المنشورة" :count="$stats['published']" color="success" icon="fa-bullhorn" />
            <x-stat-card title="الدروس المجانية" :count="$stats['free']" color="warning" icon="fa-gift" />
            <x-stat-card title="اجمالي المشاهدات" :count="$stats['total_views']" color="danger" icon="fa-eye" />
        </div>

        {{-- Toolbar: Search + Filters --}}
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
            <div class="flex-grow-1" style="max-width:480px">
                <div class="input-group">
                    <span class="input-group-text"><i class="fa-solid fa-magnifying-glass"></i></span>
                    <input type="search" id="search-input" class="form-control" placeholder="ابحث بالعنوان/الوصف..."
                        value="{{ $search }}" aria-label="بحث">
                </div>
            </div>

            <div class="d-flex align-items-center gap-2">
                {{-- Tabs بالأنواع والحالة (تبدّل Query Params) --}}
                <div class="btn-group" role="group" aria-label="Tabs Type">
                    @php $activeType = $filters['type'] ?? null; @endphp
                    @php $countsByType = $stats['by_type'] ?? []; @endphp
                    <a href="{{ request()->fullUrlWithQuery(['type' => null]) }}"
                        class="btn btn-sm btn-outline-secondary {{ !$activeType ? 'active' : '' }}">
                        الكل
                    </a>
                    <a href="{{ request()->fullUrlWithQuery(['type' => 'video']) }}"
                        class="btn btn-sm btn-outline-secondary {{ $activeType === 'video' ? 'active' : '' }}">
                        درس <span class="badge bg-secondary ms-1">{{ $countsByType['video'] ?? 0 }}</span>
                    </a>
                    <a href="{{ request()->fullUrlWithQuery(['type' => 'audio']) }}"
                        class="btn btn-sm btn-outline-secondary {{ $activeType === 'audio' ? 'active' : '' }}">
                        صوت <span class="badge bg-secondary ms-1">{{ $countsByType['audio'] ?? 0 }}</span>
                    </a>
                </div>

                <div class="btn-group" role="group" aria-label="Tabs Publish">
                    @php $pub = $filters['is_published']; @endphp
                    <a href="{{ request()->fullUrlWithQuery(['is_published' => null]) }}"
                        class="btn btn-sm btn-outline-secondary {{ $pub === '' || $pub === null ? 'active' : '' }}">
                        جميع الحالات
                    </a>
                    <a href="{{ request()->fullUrlWithQuery(['is_published' => 1]) }}"
                        class="btn btn-sm btn-outline-success {{ (string) $pub === '1' ? 'active' : '' }}">
                        منشور
                    </a>
                    <a href="{{ request()->fullUrlWithQuery(['is_published' => 0]) }}"
                        class="btn btn-sm btn-outline-warning {{ (string) $pub === '0' ? 'active' : '' }}">
                        مسودة
                    </a>
                </div>

                {{-- زر فلاتر متقدمة (Offcanvas) --}}
                <button class="btn btn-outline-secondary" data-bs-toggle="offcanvas" data-bs-target="#filtersOffcanvas"
                    aria-controls="filtersOffcanvas">
                    <i class="fa-solid fa-filter me-1"></i> فلاتر متقدمة
                </button>
            </div>
        </div>

        {{-- Table --}}
        <div class="card shadow-sm border-0">
            <div class="table-responsive position-relative">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light sticky-top" style="top:0; z-index: 1;">
                        <tr>
                            @php
                                $makeSort = function ($col) use ($sort, $direction) {
                                    $dir = $sort === $col && $direction === 'asc' ? 'desc' : 'asc';
                                    return request()->fullUrlWithQuery(['sort' => $col, 'direction' => $dir]);
                                };
                                $dirIcon = fn($col) => $col !== $sort
                                    ? 'fa-sort'
                                    : ($direction === 'asc'
                                        ? 'fa-arrow-up-a-z'
                                        : 'fa-arrow-down-z-a');
                            @endphp
                            <th style="width:56px">#</th>
                            <th>
                                <a class="text-decoration-none" href="{{ $makeSort('title') }}">العنوان
                                    <i class="fa-solid {{ $dirIcon('title') }} ms-1 text-muted"></i></a>
                            </th>
                            <th style="width:120px">المادة</th>
                            <th style="width:90px">
                                <a class="text-decoration-none" href="{{ $makeSort('type') }}">النوع
                                    <i class="fa-solid {{ $dirIcon('type') }} ms-1 text-muted"></i></a>
                            </th>
                            <th style="width:110px">
                                <a class="text-decoration-none" href="{{ $makeSort('views') }}">المشاهدات
                                    <i class="fa-solid {{ $dirIcon('views') }} ms-1 text-muted"></i></a>
                            </th>
                            <th style="width:120px">
                                <a class="text-decoration-none" href="{{ $makeSort('duration') }}">المدة
                                    <i class="fa-solid {{ $dirIcon('duration') }} ms-1 text-muted"></i></a>
                            </th>
                            <th style="width:110px">
                                <a class="text-decoration-none" href="{{ $makeSort('order') }}">الترتيب
                                    <i class="fa-solid {{ $dirIcon('order') }} ms-1 text-muted"></i></a>
                            </th>
                            <th style="width:120px">
                                <a class="text-decoration-none" href="{{ $makeSort('is_published') }}">الحالة
                                    <i class="fa-solid {{ $dirIcon('is_published') }} ms-1 text-muted"></i></a>
                            </th>
                            <th style="width:120px">مجاني؟</th>
                            <th style="width:130px">الملف</th>
                            <th style="width:120px">الصورة</th>
                            <th class="text-end" style="width:130px">إجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($videos as $v)
                            <tr>
                                <td>{{ $v->id }}</td>
                                <td class="text-truncate" style="max-width:280px" title="{{ $v->title }}">
                                    <div class="fw-semibold">{{ $v->title }}</div>
                                    @if ($v->description)
                                        <div class="small text-muted text-truncate" title="{{ $v->description }}">
                                            {{ $v->description }}</div>
                                    @endif
                                </td>
                                <td>{{ optional($v->course)->title ?? '-' }}</td>
                                <td>
                                    <span class="badge bg-secondary">{{ $v->type }}</span>
                                </td>
                                <td>{{ number_format($v->views) }}</td>
                                <td><span class="badge bg-light border">{{ $v->duration ?? '00:00:00' }}</span></td>
                                <td>{{ $v->order }}</td>
                                <td>
                                    @if ($v->is_published)
                                        <span class="badge bg-success">منشور</span>
                                    @else
                                        <span class="badge bg-warning text-dark">مسودة</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($v->is_free)
                                        <span class="badge bg-info text-dark">نعم</span>
                                    @else
                                        <span class="badge bg-secondary">لا</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($v->path_url)
                                        <a href="{{ $v->path_url }}" target="_blank"
                                            class="btn btn-sm btn-outline-secondary">
                                            فتح <i class="fa-regular fa-file ms-1"></i>
                                        </a>
                                    @else
                                        <span class="text-muted small">لا يوجد</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($v->thumbnail_url)
                                        <img src="{{ $v->thumbnail_url }}" alt="thumb" class="rounded"
                                            style="width:48px;height:48px;object-fit:cover">
                                    @else
                                        <span class="text-muted small">لا يوجد</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="btn-group">
                                        {{-- Show --}}
                                        <button class="btn btn-sm btn-light" data-bs-toggle="modal"
                                            data-bs-target="#showVideoModal"
                                            data-video="{{ Js::from([
                                                'id' => $v->id,
                                                'title' => $v->title,
                                                'description' => $v->description,
                                                'course' => optional($v->course)->title,
                                                'type' => $v->type,
                                                'views' => $v->views,
                                                'duration' => $v->duration,
                                                'is_published' => $v->is_published,
                                                'is_free' => $v->is_free,
                                                'order' => $v->order,
                                                'path_url' => $v->path_url,
                                                'thumbnail_url' => $v->thumbnail_url,
                                                'created_at' => optional($v->created_at)->format('Y-m-d H:i'),
                                            ]) }}"
                                            aria-label="عرض">
                                            <i class="fa-regular fa-eye"></i>
                                        </button>

                                        {{-- Edit --}}
                                        <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#editVideoModal"
                                            data-video="{{ Js::from([
                                                'id' => $v->id,
                                                'course_id' => $v->course_id,
                                                'title' => $v->title,
                                                'description' => $v->description,
                                                'type' => $v->type,
                                                'views' => $v->views,
                                                'duration' => $v->duration,
                                                'is_published' => $v->is_published,
                                                'is_free' => $v->is_free,
                                                'order' => $v->order,
                                            ]) }}"
                                            aria-label="تعديل">
                                            <i class="fa-regular fa-pen-to-square"></i>
                                        </button>

                                        {{-- Delete --}}
                                        <button class="btn btn-sm btn-danger" data-bs-toggle="modal"
                                            data-bs-target="#deleteVideoModal" data-id="{{ $v->id }}"
                                            data-title="{{ $v->title }}" aria-label="حذف">
                                            <i class="fa-regular fa-trash-can"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="12">
                                    <div class="text-center p-5">
                                        <i class="fa-regular fa-folder-open fa-2xl mb-3 text-muted"></i>
                                        <div class="mb-3 text-muted">لا توجد بيانات بعد.</div>
                                        <button class="btn btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#createVideoModal">
                                            إضافة أول درس
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            <div class="card-footer d-flex justify-content-between align-items-center">
                <div class="text-muted small">
                    {{ $videos->firstItem() }}–{{ $videos->lastItem() }} من {{ $videos->total() }}
                </div>
                {{ $videos->onEachSide(1)->links() }}
            </div>
        </div>
    </div>

    {{-- Offcanvas Filters --}}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="filtersOffcanvas" aria-labelledby="filtersOffcanvasLabel">
        <div class="offcanvas-header">
            <h5 id="filtersOffcanvasLabel">فلاتر متقدمة</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="إغلاق"></button>
        </div>
        <div class="offcanvas-body">
            <form id="filters-form" method="get" action="{{ route('videos.index') }}">
                {{-- حافظ على search والفرز والصفحة الحالية --}}
                <input type="hidden" name="search" value="{{ $search }}">
                <input type="hidden" name="sort" value="{{ $sort }}">
                <input type="hidden" name="direction" value="{{ $direction }}">

                <div class="mb-3">
                    <label class="form-label">النوع</label>
                    <select name="type" class="form-select">
                        <option value="">الكل</option>
                        <option value="video" @selected(($filters['type'] ?? '') === 'video')>درس</option>
                        <option value="audio" @selected(($filters['type'] ?? '') === 'audio')>صوت</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label">الحالة</label>
                    <div class="btn-group w-100" role="group">
                        <input type="radio" class="btn-check" name="is_published" id="pub_all" value=""
                            @checked(($filters['is_published'] ?? '') === '')>
                        <label class="btn btn-outline-secondary" for="pub_all">الكل</label>

                        <input type="radio" class="btn-check" name="is_published" id="pub_yes" value="1"
                            @checked(($filters['is_published'] ?? '') === '1')>
                        <label class="btn btn-outline-success" for="pub_yes">منشور</label>

                        <input type="radio" class="btn-check" name="is_published" id="pub_no" value="0"
                            @checked(($filters['is_published'] ?? '') === '0')>
                        <label class="btn btn-outline-warning" for="pub_no">مسودة</label>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">مجاني</label>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" name="is_free" id="is_free"
                            value="1" @checked(($filters['is_free'] ?? '') === '1')>
                        <label class="form-check-label" for="is_free">عرض المجانية فقط</label>
                    </div>
                </div>

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

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

                <div class="d-flex justify-content-between mt-4">
                    <a href="{{ route('videos.index') }}" class="btn btn-outline-secondary">تفريغ</a>
                    <button type="submit" class="btn btn-primary">تطبيق</button>
                </div>
            </form>
        </div>
    </div>

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

    {{-- Toasts (نجاح/فشل) --}}
    <div class="position-fixed top-0 end-0 p-3" style="z-index:1080">
        @if (session('success'))
            <div class="toast align-items-center text-bg-success border-0 show" role="alert" aria-live="assertive"
                aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        {{ session('success') }}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                        aria-label="إغلاق"></button>
                </div>
            </div>
        @endif
        @if ($errors->any())
            <div class="toast align-items-center text-bg-danger border-0 show" role="alert" aria-live="assertive"
                aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        حدثت أخطاء في الإدخال. برجاء المراجعة.
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto"
                        data-bs-dismiss="toast"></button>
                </div>
            </div>
        @endif
    </div>

@endsection

@push('styles')
    <style>
        .sticky-top {
            position: sticky;
        }
    </style>
@endpush

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

            // Debounce Search
            const searchInput = document.getElementById('search-input');
            let t;
            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    clearTimeout(t);
                    t = setTimeout(() => {
                        const url = new URL(window.location.href);
                        if (this.value) url.searchParams.set('search', this.value);
                        else url.searchParams.delete('search');
                        url.searchParams.delete('page'); // reset pagination
                        window.location.href = url.toString();
                    }, 400);
                });
            }

            // Show Modal — يملأ البيانات من data-video (JSON)
            const showModalEl = document.getElementById('showVideoModal');
            showModalEl?.addEventListener('show.bs.modal', function(ev) {
                const btn = ev.relatedTarget;
                const data = btn?.getAttribute('data-video');
                if (!data) return;
                const v = JSON.parse(data);
                this.querySelector('[data-field="title"]').textContent = v.title ?? '-';
                this.querySelector('[data-field="course"]').textContent = v.course ?? '-';
                this.querySelector('[data-field="type"]').textContent = v.type ?? '-';
                this.querySelector('[data-field="views"]').textContent = v.views ?? 0;
                this.querySelector('[data-field="duration"]').textContent = v.duration ?? '00:00:00';
                this.querySelector('[data-field="status"]').innerHTML = v.is_published ?
                    '<span class="badge bg-success">منشور</span>' :
                    '<span class="badge bg-warning text-dark">مسودة</span>';
                this.querySelector('[data-field="free"]').innerHTML = v.is_free ?
                    '<span class="badge bg-info text-dark">نعم</span>' :
                    '<span class="badge bg-secondary">لا</span>';
                this.querySelector('[data-field="order"]').textContent = v.order ?? 0;
                this.querySelector('[data-field="created_at"]').textContent = v.created_at ?? '-';
                this.querySelector('[data-field="description"]').textContent = v.description ?? '-';

                const link = this.querySelector('[data-field="path_url"]');
                if (v.path_url) {
                    link.href = v.path_url;
                    link.classList.remove('disabled');
                } else {
                    link.href = '#';
                    link.classList.add('disabled');
                }

                const img = this.querySelector('[data-field="thumbnail_url"]');
                if (v.thumbnail_url) {
                    img.src = v.thumbnail_url;
                    img.classList.remove('d-none');
                } else {
                    img.src = '';
                    img.classList.add('d-none');
                }
            });

            // Edit Modal — يملأ فورم التعديل ويضبط action
            const editModalEl = document.getElementById('editVideoModal');
            editModalEl?.addEventListener('show.bs.modal', function(ev) {
                const btn = ev.relatedTarget;
                const json = btn?.getAttribute('data-video');
                if (!json) return;
                const v = JSON.parse(json);

                const form = this.querySelector('form');
                form.action = "{{ url('/videos') }}/" + v.id;

                // Fill fields
                form.querySelector('[name="title"]').value = v.title ?? '';
                form.querySelector('[name="description"]').value = v.description ?? '';
                form.querySelector('[name="course_id"]').value = v.course_id ?? '';
                form.querySelector('[name="type"]').value = v.type ?? 'video';
                form.querySelector('[name="views"]').value = v.views ?? 0;
                form.querySelector('[name="duration"]').value = v.duration ?? '00:00:00';
                form.querySelector('[name="order"]').value = v.order ?? 0;

                form.querySelector('[name="is_published"]').checked = !!v.is_published;
                form.querySelector('[name="is_free"]').checked = !!v.is_free;

                // Reset file inputs & previews
                form.querySelector('[name="path"]').value = '';
                form.querySelector('[name="thumbnail"]').value = '';
                this.querySelector('[data-edit-thumb-preview]').classList.add('d-none');
                this.querySelector('[data-edit-thumb-preview]').src = '';
            });

            // Delete Modal — يضبط action + النص
            const deleteModalEl = document.getElementById('deleteVideoModal');
            deleteModalEl?.addEventListener('show.bs.modal', function(ev) {
                const btn = ev.relatedTarget;
                const id = btn?.getAttribute('data-id');
                const title = btn?.getAttribute('data-title');
                const form = this.querySelector('form');
                form.action = "{{ url('/videos') }}/" + id;
                this.querySelector('[data-delete-title]').textContent = title ?? ('#' + id);
            });

            // Preview للصورة (Create/Edit)
            document.querySelectorAll('[data-thumb-input]').forEach(function(input) {
                input.addEventListener('change', function() {
                    const tgt = document.querySelector(this.dataset.previewTarget);
                    if (!tgt) return;
                    if (this.files && this.files[0]) {
                        const reader = new FileReader();
                        reader.onload = e => {
                            tgt.src = e.target.result;
                            tgt.classList.remove('d-none');
                        };
                        reader.readAsDataURL(this.files[0]);
                    } else {
                        tgt.src = '';
                        tgt.classList.add('d-none');
                    }
                });
            });
        })();
    </script>
@endpush