@extends('layouts.app')

@section('title', 'التعليقات')

@section('content')
    <div class="container py-4" style="direction:ltr">
        {{-- Breadcrumb + Header Actions --}}
        <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="/">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">التعليقات</li>
                </ol>
            </nav>
            <div class="d-flex gap-2">
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createCommentModal">
                    <i class="fa fa-plus me-1"></i> إضافة تعليق
                </button>
                <a href="{{ request()->fullUrlWithQuery(['export' => 'csv']) }}" class="btn btn-outline-secondary">
                    <i class="fa fa-file-csv me-1"></i> تصدير CSV
                </a>
            </div>
        </div>

        {{-- Hero Stats --}}
        <div class="row g-3 mb-4">
            <x-stat-card title="جميع التعليقات" :count="$total" icon="fa-layer-group" />
            <x-stat-card title="تعليقات تحتوي نصًا" :count="$withText" color="success" icon="fa-bullhorn" />
            <x-stat-card title="تعليقات بدون نص" :count="$noText" color="warning" icon="fa-exclamation-circle" />
            <x-stat-card title="اليوم / آخر 7 أيام" :count="$last7" color="danger" icon="fa-calendar-day" />
        </div>

        {{-- Toolbar: Search + Filters --}}
        <div class="d-flex gap-2 mb-3">
            <div class="flex-grow-1">
                <input type="search" id="searchInput" class="form-control"
                    placeholder="ابحث في التعليقات والمستخدمين والفيديوهات..." value="{{ $search }}"
                    aria-label="بحث" />
            </div>
            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="offcanvas"
                data-bs-target="#filtersOffcanvas" aria-controls="filtersOffcanvas">
                <i class="fa fa-sliders-h me-1"></i> فلاتر متقدمة
            </button>
        </div>

        {{-- Tabs --}}
        <ul class="nav nav-tabs mb-3">
            @php $tab = request('has_text', ''); @endphp
            <li class="nav-item">
                <a class="nav-link {{ $tab === '' ? 'active' : '' }}"
                    href="{{ request()->fullUrlWithQuery(['has_text' => null, 'page' => null]) }}">الكل <span
                        class="badge bg-secondary ms-1">{{ $total }}</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ $tab === '1' ? 'active' : '' }}"
                    href="{{ request()->fullUrlWithQuery(['has_text' => 1, 'page' => null]) }}">تحتوي نصًا <span
                        class="badge bg-success ms-1">{{ $withText }}</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ $tab === '0' ? 'active' : '' }}"
                    href="{{ request()->fullUrlWithQuery(['has_text' => 0, 'page' => null]) }}">بدون نص <span
                        class="badge bg-warning ms-1">{{ $noText }}</span></a>
            </li>
        </ul>

        {{-- Table --}}
        <div class="table-responsive border rounded shadow-sm">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light sticky-top" style="top:0; z-index:1;">
                    @php
                        $sort = request('sort', 'created_at');
                        $direction = request('direction', 'desc');
                        $dirToggle = $direction === 'asc' ? 'desc' : 'asc';
                        $sortUrl = fn($col) => request()->fullUrlWithQuery([
                            'sort' => $col,
                            'direction' => $sort === $col ? $dirToggle : 'asc',
                        ]);
                    @endphp
                    <tr>
                        <th><a href="{{ $sortUrl('id') }}" class="text-decoration-none text-muted">#
                                @include('partials.sort-icon', [
                                    'col' => 'id',
                                    'sort' => $sort,
                                    'direction' => $direction,
                                ])</a></th>
                        <th>المستخدم</th>
                        <th>الفيديو</th>
                        <th>التعليق</th>
                        <th><a href="{{ $sortUrl('created_at') }}" class="text-decoration-none text-muted">تاريخ الإنشاء
                                @include('partials.sort-icon', [
                                    'col' => 'created_at',
                                    'sort' => $sort,
                                    'direction' => $direction,
                                ])</a></th>
                        <th class="text-end">إجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($comments as $c)
                        <tr>
                            <td>{{ $c->id }}</td>
                            <td>
                                <span
                                    class="badge bg-primary-subtle text-primary border">{{ optional($c->user)->name ?? '—' }}</span>
                            </td>
                            <td>
                                <span
                                    class="badge bg-info-subtle text-info border">{{ optional($c->video)->title ?? '#' . $c->video_id }}</span>
                            </td>
                            <td>
                                <div class="text-truncate" style="max-width: 360px" title="{{ $c->comment }}">
                                    {{ $c->comment ?: '—' }}</div>
                            </td>
                            <td>{{ $c->created_at?->format('Y-m-d H:i') }}</td>
                            <td class="text-end">
                                <div class="btn-group" role="group">
                                    <button class="btn btn-sm btn-outline-secondary" data-action="show"
                                        data-id="{{ $c->id }}" aria-label="عرض"><i class="fa fa-eye"></i></button>
                                    @can('update', $c)
                                        <button class="btn btn-sm btn-outline-primary" data-action="edit"
                                            data-id="{{ $c->id }}" aria-label="تعديل"><i
                                                class="fa fa-edit"></i></button>
                                    @endcan
                                    @can('delete', $c)
                                        <button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal"
                                            data-bs-target="#deleteCommentModal" data-id="{{ $c->id }}"
                                            data-name="{{ Str::limit($c->comment, 30) }}" aria-label="حذف"><i
                                                class="fa fa-trash"></i></button>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6">
                                <div class="p-5 text-center text-muted">
                                    <i class="fa fa-inbox fa-2x mb-2"></i>
                                    <div class="mb-2">لا توجد بيانات لعرضها</div>
                                    <button class="btn btn-primary" data-bs-toggle="modal"
                                        data-bs-target="#createCommentModal"><i class="fa fa-plus me-1"></i> إضافة أول
                                        تعليق</button>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

    {{-- Offcanvas Filters --}}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="filtersOffcanvas" aria-labelledby="filtersLabel">
        <div class="offcanvas-header">
            <h5 id="filtersLabel">فلاتر متقدمة</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <form method="GET" action="{{ route('comments.index') }}" id="filtersForm">
                <input type="hidden" name="search" value="{{ request('search') }}">
                <div class="mb-3">
                    <label class="form-label">حالة النص</label>
                    <select name="has_text" class="form-select">
                        <option value="" @selected(request('has_text', '') === '')>الكل</option>
                        <option value="1" @selected(request('has_text') === '1')>تحتوي نصًا</option>
                        <option value="0" @selected(request('has_text') === '0')>بدون نص</option>
                    </select>
                </div>
                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label">من تاريخ</label>
                        <input type="date" name="from" class="form-control" value="{{ request('from') }}">
                    </div>
                    <div class="col-6">
                        <label class="form-label">إلى تاريخ</label>
                        <input type="date" name="to" class="form-control" value="{{ request('to') }}">
                    </div>
                </div>
                <div class="mt-3 d-flex gap-2">
                    <button class="btn btn-primary" type="submit"><i class="fa fa-filter me-1"></i> تطبيق</button>
                    <a class="btn btn-outline-secondary" href="{{ route('comments.index') }}">تفريغ</a>
                </div>
            </form>
        </div>
    </div>

    {{-- Modals Containers --}}
    @include('dashboard.comments.modals.create')
    @include('dashboard.comments.modals.delete')

    {{-- Generic dynamic modals for show/edit (loaded via fetch) --}}
    <div id="dynamicModals"></div>

    {{-- 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="Close"></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"
                        aria-label="Close"></button>
                </div>
            </div>
        @endif
    </div>

@endsection

@push('scripts')
    <script>
        (function() {
            // Debounce search
            const input = document.getElementById('searchInput');
            let t;
            input && input.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');
                    window.location = url.toString();
                }, 400);
            });

            // Dynamic Show/Edit modals via fetch
            const table = document.querySelector('table');
            const container = document.getElementById('dynamicModals');
            table && table.addEventListener('click', async (e) => {
                const btn = e.target.closest('button');
                if (!btn) return;
                const id = btn.getAttribute('data-id');
                const action = btn.getAttribute('data-action');
                if (!id || !action) return;
                const url = action === 'show' ? `{{ url('comments') }}/${id}?modal=1` :
                    `{{ url('comments') }}/${id}/edit?modal=1`;
                const html = await fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                }).then(r => r.text());
                container.innerHTML = html;
                const modalEl = container.querySelector('.modal');
                const modal = new bootstrap.Modal(modalEl);
                modal.show();
            });

            // Pass id to delete modal
            const deleteModal = document.getElementById('deleteCommentModal');
            deleteModal && deleteModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const id = button.getAttribute('data-id');
                const name = button.getAttribute('data-name');
                this.querySelector('[data-delete-form]').setAttribute('action', `{{ url('comments') }}/${id}`);
                this.querySelector('[data-delete-name]').textContent = name || ('#' + id);
            });
        })();
    </script>
@endpush