@extends('layouts.app')

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

@section('content')
    <div class="container-fluid" style="direction:ltr;">
        {{-- Breadcrumb + Header Actions --}}
        <div class="d-flex align-items-center justify-content-between mb-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">الرئيسية</a></li>
                    <li class="breadcrumb-item active" aria-current="page">المود</li>
                </ol>
            </nav>
            <div class="d-flex gap-2">
                <a href="{{ route('courses.export', request()->query()) }}" class="btn btn-outline-secondary">
                    <i class="fa fa-file-csv me-1"></i> تصدير CSV
                </a>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createCourseModal">
                    <i class="fa fa-plus-circle 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['sum_prices']" color="warning" icon="fa-coins" />
            <x-stat-card title="متوسط سعر المادة" :count="$stats['avg_price']" color="danger" icon="fa-trash" />
        </div>

        {{-- Toolbar: Search + Filters button --}}
        <div class="d-flex align-items-center justify-content-between mb-3">
            <div class="flex-grow-1 me-2" style="max-width:520px;">
                <input id="searchInput" type="search" class="form-control" placeholder="ابحث عن مادة..."
                    value="{{ $search }}" aria-label="بحث">
            </div>
            <div class="d-flex align-items-center gap-2">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="trashedSwitch" {{ $onlyTrashed ? 'checked' : '' }}>
                    <label class="form-check-label" for="trashedSwitch">المحذوفة فقط</label>
                </div>
                <button class="btn btn-outline-primary" data-bs-toggle="offcanvas" data-bs-target="#filtersCanvas">
                    <i class="fa fa-filter me-1"></i> فلاتر متقدمة
                </button>
            </div>
        </div>

        {{-- Tabs (كل/منشورة/غير منشورة) --}}
        @php
            $tab =
                request('is_published', '') === ''
                    ? 'all'
                    : (request('is_published') == 1
                        ? 'published'
                        : 'unpublished');
            $counts = [
                'all' => $stats['total'],
                'published' => $stats['published'],
                'unpublished' => $stats['total'] - $stats['published'],
            ];
        @endphp
        <ul class="nav nav-tabs mb-3">
            <li class="nav-item">
                <a class="nav-link {{ $tab === 'all' ? 'active' : '' }}"
                    href="{{ request()->fullUrlWithQuery(['is_published' => null, 'page' => 1]) }}">الكل <span
                        class="badge bg-secondary ms-1">{{ $counts['all'] }}</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ $tab === 'published' ? 'active' : '' }}"
                    href="{{ request()->fullUrlWithQuery(['is_published' => 1, 'page' => 1]) }}">منشورة <span
                        class="badge bg-success ms-1">{{ $counts['published'] }}</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ $tab === 'unpublished' ? 'active' : '' }}"
                    href="{{ request()->fullUrlWithQuery(['is_published' => 0, 'page' => 1]) }}">غير منشورة <span
                        class="badge bg-warning text-dark ms-1">{{ $counts['unpublished'] }}</span></a>
            </li>
        </ul>

        {{-- Table --}}
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead class="table-light sticky-top" style="top:60px; z-index: 5;">
                    <tr>
                        @php
                            function sort_link($col, $label)
                            {
                                $isActive = request('sort', 'created_at') === $col;
                                $dir = request('direction', 'desc') === 'asc' ? 'desc' : 'asc';
                                $icon = $isActive
                                    ? (request('direction', 'desc') === 'asc'
                                        ? 'fa-sort-up'
                                        : 'fa-sort-down')
                                    : 'fa-sort';
                                $url = request()->fullUrlWithQuery([
                                    'sort' => $col,
                                    'direction' => $isActive ? $dir : 'asc',
                                ]);
                                return '<a href="' .
                                    $url .
                                    '" class="text-decoration-none">' .
                                    $label .
                                    ' <i class="fa ' .
                                    $icon .
                                    ' ms-1"></i></a>';
                            }
                        @endphp
                        <th>{!! sort_link('name', 'الاسم') !!}</th>
                        <th>الفئة</th>
                        <th>المدرّس</th>
                        <th>الفصل</th>
                        <th class="text-nowrap">{!! sort_link('price', 'السعر') !!}</th>
                        <th class="text-nowrap">{!! sort_link('discount', 'الخصم%') !!}</th>
                        <th>{!! sort_link('language', 'اللغة') !!}</th>
                        <th>{!! sort_link('is_published', 'الحالة') !!}</th>
                        <th class="text-end">إجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($courses as $course)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    @if ($course->thumbnail)
                                        <img src="{{ asset('storage/' . $course->thumbnail) }}" class="rounded"
                                            width="40" height="40" alt="thumb">
                                    @else
                                        <span class="badge bg-secondary">لا صورة</span>
                                    @endif
                                    <div class="text-truncate" style="max-width:260px;" title="{{ $course->name }}">
                                        {{ $course->name }}</div>
                                </div>
                            </td>
                            <td>{{ $course->category->name ?? '-' }}</td>
                            <td>{{ $course->teacher->name ?? '-' }}</td>
                            <td>{{ $course->classRoom->name ?? '-' }}</td>
                            <td>{{ number_format($course->price, 2) }}</td>
                            <td>{{ number_format($course->discount, 2) }}</td>
                            <td><span class="badge bg-info text-dark">{{ $course->language }}</span></td>
                            <td>
                                @if ($course->is_published)
                                    <span class="badge bg-success">منشورة</span>
                                @else
                                    <span class="badge bg-warning text-dark">غير منشورة</span>
                                @endif
                            </td>
                            <td class="text-end">
                                <div class="btn-group">
                                    <button class="btn btn-light btn-sm" data-bs-toggle="modal"
                                        data-bs-target="#showCourseModal" data-id="{{ $course->id }}" aria-label="عرض"><i
                                            class="fa fa-eye"></i></button>
                                    <button class="btn btn-secondary btn-sm" data-bs-toggle="modal"
                                        data-bs-target="#editCourseModal" data-id="{{ $course->id }}"
                                        data-name='@json($course->name)'
                                        data-description='@json($course->description)'
                                        data-category-id='{{ $course->category_id }}'
                                        data-teacher-id='{{ $course->teacher_id }}'
                                        data-class-room-id='{{ $course->class_room_id }}'
                                        data-language='{{ $course->language }}' data-price='{{ $course->price }}'
                                        data-discount='{{ $course->discount }}'
                                        data-is-published='{{ (int) $course->is_published }}' aria-label="تعديل"><i
                                            class="fa fa-pen"></i></button>
                                    @if (is_null($course->deleted_at))
                                        <button class="btn btn-danger btn-sm" data-bs-toggle="modal"
                                            data-bs-target="#deleteCourseModal" data-id="{{ $course->id }}"
                                            data-name="{{ $course->name }}" aria-label="حذف"><i
                                                class="fa fa-trash"></i></button>
                                    @else
                                        <form method="POST" action="{{ route('courses.restore', $course->id) }}"
                                            class="d-inline">
                                            @csrf
                                            <button class="btn btn-success btn-sm" aria-label="استعادة"><i
                                                    class="fa fa-rotate-left"></i></button>
                                        </form>
                                        <form method="POST" action="{{ route('courses.forceDelete', $course->id) }}"
                                            class="d-inline" onsubmit="return confirm('حذف نهائي؟ لا يمكن التراجع.');">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-outline-danger btn-sm" aria-label="حذف نهائي"><i
                                                    class="fa fa-skull"></i></button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9">
                                <div class="card border-0 text-center py-5">
                                    <div class="display-6 text-muted"><i class="fa fa-inbox"></i></div>
                                    <p class="mb-3">لا توجد بيانات بعد</p>
                                    <button class="btn btn-primary" data-bs-toggle="modal"
                                        data-bs-target="#createCourseModal">إضافة أول مادة</button>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-3">
            {{ $courses->links() }}
        </div>
    </div>

    {{-- Offcanvas Filters --}}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="filtersCanvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">فلاتر متقدمة</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <form id="filtersForm" method="GET" action="{{ route('courses.index') }}">
                <input type="hidden" name="search" value="{{ $search }}">
                <div class="mb-3">
                    <label class="form-label">الفئة</label>
                    <select name="category_id" class="form-select">
                        <option value="">الكل</option>
                        @foreach ($categories as $cat)
                            <option value="{{ $cat->id }}" @selected($filters['category_id'] == $cat->id)>{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">المدرّس</label>
                    <select name="teacher_id" class="form-select">
                        <option value="">الكل</option>
                        @foreach ($teachers as $t)
                            <option value="{{ $t->id }}" @selected($filters['teacher_id'] == $t->id)>{{ $t->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">الفصل</label>
                    <select name="class_room_id" class="form-select">
                        <option value="">الكل</option>
                        @foreach ($classRooms as $cr)
                            <option value="{{ $cr->id }}" @selected(request('class_room_id') == $cr->id)>{{ $cr->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">الحالة</label>
                    <div class="btn-group w-100" role="group">
                        @php $isp = $filters['is_published']; @endphp
                        <input type="radio" class="btn-check" name="is_published" id="isp_all" value=""
                            {{ $isp === null ? 'checked' : '' }}>
                        <label class="btn btn-outline-secondary" for="isp_all">الكل</label>
                        <input type="radio" class="btn-check" name="is_published" id="isp_yes" value="1"
                            {{ $isp === 1 ? 'checked' : '' }}>
                        <label class="btn btn-outline-success" for="isp_yes">منشورة</label>
                        <input type="radio" class="btn-check" name="is_published" id="isp_no" value="0"
                            {{ $isp === 0 ? 'checked' : '' }}>
                        <label class="btn btn-outline-warning" for="isp_no">غير منشورة</label>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">اللغة</label>
                    <select name="language" class="form-select">
                        <option value="">الكل</option>
                        @foreach ($languages as $lang)
                            <option value="{{ $lang }}" @selected($filters['language'] == $lang)>{{ $lang }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-primary" type="submit">تطبيق</button>
                    <a class="btn btn-outline-secondary" href="{{ route('courses.index') }}">تفريغ</a>
                </div>
            </form>
        </div>
    </div>

    @include('dashboard.courses.modals.create')
    @include('dashboard.courses.modals.edit')
    @include('dashboard.courses.modals.show')
    @include('dashboard.courses.modals.delete')

    {{-- Toasts --}}
    @if (session('toast.success') || session('toast.error'))
        <div class="position-fixed top-0 end-0 p-3" style="z-index: 1080;">
            <div id="liveToast"
                class="toast align-items-center text-bg-{{ session('toast.error') ? 'danger' : 'success' }} border-0 show"
                role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        {{ session('toast.success') ?? session('toast.error') }}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                        aria-label="Close"></button>
                </div>
            </div>
        </div>
    @endif

@endsection

@push('scripts')
    <script>
        // Debounce للبحث
        (function() {
            const input = document.getElementById('searchInput');
            if (!input) return;
            let t = null;
            input.addEventListener('input', function() {
                clearTimeout(t);
                t = setTimeout(() => {
                    const url = new URL(window.location.href);
                    url.searchParams.set('search', input.value);
                    url.searchParams.set('page', 1);
                    window.location.assign(url);
                }, 400);
            });
        })();

        // سويتش المحذوفة فقط
        (function() {
            const sw = document.getElementById('trashedSwitch');
            if (!sw) return;
            sw.addEventListener('change', function() {
                const url = new URL(window.location.href);
                if (sw.checked) url.searchParams.set('onlyTrashed', '1');
                else url.searchParams.delete('onlyTrashed');
                url.searchParams.set('page', 1);
                window.location.assign(url);
            });
        })();

        // تعبئة مودال التعديل من الـdata-*
        const editModal = document.getElementById('editCourseModal');
        if (editModal) {
            editModal.addEventListener('show.bs.modal', event => {
                const button = event.relatedTarget;
                const id = button.getAttribute('data-id');
                editModal.querySelector('form').action = `/courses/${id}`;
                editModal.querySelector('input[name=name]').value = JSON.parse(button.getAttribute('data-name'));
                editModal.querySelector('textarea[name=description]').value = JSON.parse(button.getAttribute(
                    'data-description')) || '';
                editModal.querySelector('select[name=category_id]').value = button.getAttribute(
                    'data-category-id') || '';
                editModal.querySelector('select[name=teacher_id]').value = button.getAttribute('data-teacher-id') ||
                    '';
                editModal.querySelector('select[name=class_room_id]').value = button.getAttribute(
                    'data-class-room-id') || '';
                editModal.querySelector('input[name=language]').value = button.getAttribute('data-language') ||
                    'en';
                editModal.querySelector('input[name=price]').value = button.getAttribute('data-price') || 0;
                editModal.querySelector('input[name=discount]').value = button.getAttribute('data-discount') || 0;
                editModal.querySelector('input[name=is_published]').checked = button.getAttribute(
                    'data-is-published') == '1';
                const preview = editModal.querySelector('#editPreview');
                preview.src = button.closest('tr').querySelector('img')?.src || '';
            });
        }

        // مودال العرض — جلب JSON سريع
        const showModal = document.getElementById('showCourseModal');
        if (showModal) {
            showModal.addEventListener('show.bs.modal', event => {
                const id = event.relatedTarget.getAttribute('data-id');
                fetch(`/courses/${id}`)
                    .then(r => r.json())
                    .then(c => {
                        showModal.querySelector('[data-field=name]').textContent = c.name;
                        showModal.querySelector('[data-field=description]').textContent = c.description ?? '-';
                        showModal.querySelector('[data-field=category]').textContent = c.category?.name ?? '-';
                        showModal.querySelector('[data-field=teacher]').textContent = c.teacher?.name ?? '-';
                        showModal.querySelector('[data-field=class_room]').textContent = c.class_room?.name ??
                            '-';
                        showModal.querySelector('[data-field=language]').textContent = c.language;
                        showModal.querySelector('[data-field=price]').textContent = Number(c.price).toFixed(2);
                        showModal.querySelector('[data-field=discount]').textContent = Number(c.discount)
                            .toFixed(2);
                        showModal.querySelector('[data-field=published]').innerHTML = c.is_published ?
                            '<span class="badge bg-success">منشورة</span>' :
                            '<span class="badge bg-warning text-dark">غير منشورة</span>';
                        const img = showModal.querySelector('img');
                        img.src = c.thumbnail ? (`/storage/${c.thumbnail}`) : '';
                        img.classList.toggle('d-none', !c.thumbnail);
                    });
            });
        }

        // Preview لصور المودالات
        function bindPreview(inputId, imgId) {
            const input = document.getElementById(inputId);
            const img = document.getElementById(imgId);
            if (!input || !img) return;
            input.addEventListener('change', e => {
                const f = e.target.files?.[0];
                if (!f) return;
                img.src = URL.createObjectURL(f);
                img.classList.remove('d-none');
            });
        }
        bindPreview('createThumbnail', 'createPreview');
        bindPreview('editThumbnail', 'editPreview');
    </script>
@endpush