<?php $__env->startSection('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="<?php echo e(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"><?php echo e($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"><?php echo e($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"><?php echo e($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="<?php echo e(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>
                            <?php $__currentLoopData = $shops; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $shop): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($shop->id); ?>" <?php if(request('shop_id') == $shop->id): echo 'selected'; endif; ?>><?php echo e($shop->name); ?>

                                </option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </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" <?php if(request('status') === 'active'): echo 'selected'; endif; ?>>Active</option>
                            <option value="hidden" <?php if(request('status') === 'hidden'): echo 'selected'; endif; ?>>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"><?php echo e($reels->total()); ?> result(s)</small>
            </div>
            <div id="reelsTableWrap">
                <?php echo $__env->make('backend.reels.partials.table', ['reels' => $reels], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
            </div>
            <div id="reelsPaginationWrap">
                <?php echo $__env->make('backend.reels.partials.pagination', ['reels' => $reels], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
            </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 || "<?php echo e(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>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('backend.layout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\Abdur Rahman\Desktop\faa\resources\views/backend/reels/index.blade.php ENDPATH**/ ?>