@extends('backend.layout')

@section('backend_content')
    <div class="p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold mb-1">Reel Management</h4>
                <small class="text-muted">Manage, search, and monitor reels shown in frontend</small>
            </div>
            <a href="{{ route('admin.reels.create') }}" class="btn btn-primary">
                <i class="bx bx-plus"></i> Add Reel
            </a>
        </div>

        <div class="row g-3 mb-4">
            <div class="col-12 col-md-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <small class="text-muted text-uppercase">Total Reels</small>
                        <h4 class="mb-0 fw-bold">{{ $stats['total'] }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <small class="text-muted text-uppercase">Active</small>
                        <h4 class="mb-0 fw-bold text-success">{{ $stats['active'] }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <small class="text-muted text-uppercase">Hidden</small>
                        <h4 class="mb-0 fw-bold text-secondary">{{ $stats['hidden'] }}</h4>
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <form id="reelsFilters" class="row g-3">
                    <div class="col-12 col-lg-6">
                        <label class="form-label fw-semibold">Search</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white"><i class="bx bx-search"></i></span>
                            <input type="text" id="searchInput" name="search" class="form-control"
                                placeholder="Search by reel title, caption, or shop..." value="{{ request('search') }}">
                        </div>
                    </div>
                    <div class="col-6 col-lg-3">
                        <label class="form-label fw-semibold">Shop</label>
                        <select name="shop_id" id="shopFilter" class="form-select">
                            <option value="">All Shops</option>
                            @foreach ($shops as $shop)
                                <option value="{{ $shop->id }}" @selected(request('shop_id') == $shop->id)>{{ $shop->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6 col-lg-3">
                        <label class="form-label fw-semibold">Status</label>
                        <select name="status" id="statusFilter" class="form-select">
                            <option value="">All</option>
                            <option value="active" @selected(request('status') === 'active')>Active</option>
                            <option value="hidden" @selected(request('status') === 'hidden')>Hidden</option>
                        </select>
                    </div>
                </form>
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
                <h6 class="mb-0 fw-semibold">Reels List</h6>
                <small class="text-muted" id="resultCount">{{ $reels->total() }} result(s)</small>
            </div>
            <div id="reelsTableWrap">
                @include('backend.reels.partials.table', ['reels' => $reels])
            </div>
            <div id="reelsPaginationWrap">
                @include('backend.reels.partials.pagination', ['reels' => $reels])
            </div>
        </div>
    </div>

    <script>
        (function() {
            const form = document.getElementById('reelsFilters');
            const tableWrap = document.getElementById('reelsTableWrap');
            const paginationWrap = document.getElementById('reelsPaginationWrap');
            const resultCount = document.getElementById('resultCount');
            const searchInput = document.getElementById('searchInput');
            let debounceTimer = null;

            function buildQuery(extra = {}) {
                const params = new URLSearchParams(new FormData(form));
                Object.keys(extra).forEach((k) => params.set(k, extra[k]));
                return params.toString();
            }

            function fetchReels(pageUrl = null) {
                const baseUrl = pageUrl || "{{ route('admin.reels.index') }}";
                const query = buildQuery();
                const url = baseUrl.includes('?') ? `${baseUrl}&${query}` : `${baseUrl}?${query}`;

                fetch(url, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    })
                    .then(res => res.json())
                    .then(data => {
                        tableWrap.innerHTML = data.table;
                        paginationWrap.innerHTML = data.pagination;
                        resultCount.textContent = data.countText;
                    });
            }

            form.addEventListener('change', () => fetchReels());

            searchInput.addEventListener('input', () => {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => fetchReels(), 350);
            });

            paginationWrap.addEventListener('click', (e) => {
                const link = e.target.closest('a');
                if (!link) return;
                e.preventDefault();
                fetchReels(link.href);
            });
        })();
    </script>
@endsection