@extends('layouts.app')

@section('content')
<!-- <div class="container"> -->
        <header>
            <h1><i class="fa-solid fa-shop"></i> دليل المتاجر</h1>
        </header>
        
        <div class="filters-container">
            <div class="filter-group">
                <label for="status-filter">الحالة</label>
                <select id="status-filter">
                    <option value="">الكل</option>
                    <option value="active">فعال</option>
                    <option value="inactive">غير فعال</option>
                    <option value="pending">قيد الانتظار</option>
                </select>
            </div>
            
            <div class="filter-group">
                <label for="governorate-filter">المحافظة</label>
                <select id="governorate-filter">
                    <option value="">الكل</option>
                </select>
            </div>
            
            <div class="filter-group">
                <label for="department-filter">القسم</label>
                <select id="department-filter">
                    <option value="">الكل</option>
                </select>
            </div>
            
            <div class="btn-container filter-group">
                <button id="apply-filters" class="btn btn-view"><i class="fas fa-filter"></i> تطبيق المرشحات</button>
            </div>
        </div>
        
        <div class="results-container">
            <div class="results-count" id="results-count" style="display: none;">Showing 0 of 0 stores</div>
            
            <div id="table-container" class="table-container">
                <table id="stores-table" class="table-custom">
                    <thead>
                        <tr>
                            <th>الاسم</th>
                            <th>القسم</th>
                            <th>المحافظة</th>
                            <th>الحالة</th>
                            <th>تاريخ الالتحاق</th>
                            <th>التقييم</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="stores-body">
                        <!-- Table rows will be generated by JavaScript -->
                    </tbody>
                </table>
                
                <div id="no-results" class="no-results" style="display: none;">
                    <i class="fas fa-search"></i>
                    <h3>لم يتم العثور على متاجر</h3>
                    <p>حاول ضبط عوامل التصفية الخاصة بك للعثور على ما تبحث عنه.</p>
                </div>
            </div>
            
            <div class="pagination" id="pagination">
                <!-- Pagination buttons will be generated by JavaScript -->
            </div>
        </div>
    <!-- </div> -->

    <div class="modal fade modal-custom" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="confirmModalLabel"><i class="bi bi-question-circle-fill"></i> تأكيد الإجراء</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="إغلاق"></button>
                    </div>
                    <div class="modal-body text-center py-4">
                        <i class="bi bi-question-circle text-primary icon-lg" style="font-size: 3rem;"></i>
                        <h4 class="my-3">هل أنت متأكد من المتابعة؟</h4>
                        <p>هذا الإجراء لا يمكن التراجع عنه. سيتم إعتماد المتجر المحدد بشكل دائم.</p>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                        <button type="button" class="btn btn-primary" onclick="confirmAction()">تأكيد</button>
                    </div>
                </div>
            </div>
        </div>

    <script>
        var searchStatus = '';
        var searchGovernorate = '';
        var searchDepartment = '';
        var searchPageNumber = 0;

        var currentData = {};

        async function getPage(pageNumber){
            searchPageNumber = pageNumber;
    try{
        var rez = await fetch(`{{url("/api/subscriber/search")}}`, {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ status: searchStatus, govs: searchGovernorate, mainDepts: searchDepartment, page: searchPageNumber, perPage: rowsPerPage })
        });

        currentData = await rez.json();
        console.log(JSON.stringify(currentData));
        displayStores();
    } catch(e){
        console.log(e);
    }
}
        // DOM elements
        const statusFilter = document.getElementById('status-filter');
        const governorateFilter = document.getElementById('governorate-filter');
        const departmentFilter = document.getElementById('department-filter');
        const applyFiltersBtn = document.getElementById('apply-filters');
        const storesBody = document.getElementById('stores-body');
        const paginationContainer = document.getElementById('pagination');
        const resultsCount = document.getElementById('results-count');
        const noResults = document.getElementById('no-results');

        // Pagination variables
        const rowsPerPage = 100;

        // Department mapping for display
        const departmentMap = {};

        // Governorate mapping for display
        const governorateMap = {};

        // Format date for display
        function formatDate(dateString) {
            const options = { year: 'numeric', month: 'short', day: 'numeric' };
            return new Date(dateString).toLocaleDateString('en-US', options);
        }

        // Get status class and display text
        function getStatusInfo(status) {
            switch(status) {
                case 'active': return { class: 'status-active', text: 'فعال' };
                case 'inactive': return { class: 'status-inactive', text: 'غير فعال' };
                case 'pending': return { class: 'status-pending', text: 'قيد الانتظار' };
                default: return { class: '', text: status };
            }
        }

        // Filter employees based on selected filters
        function filterStores() {
            searchStatus = statusFilter.value==''? null : statusFilter.value;
            searchGovernorate = governorateFilter.value == ''? null : governorateFilter.value;
            searchDepartment = departmentFilter.value == ''? null : departmentFilter.value;
            
            getPage(1);
        }

        function getRating(rating){
            return rating;
        }

        // Display stores for the current page
        function displayStores() {
            // Clear current table rows
            storesBody.innerHTML = '';
            
            // Update results count
            //resultsCount.textContent = `Showing ${startIndex + 1} to ${Math.min(endIndex, filteredEmployees.length)} of ${filteredEmployees.length} employees`;
            
            // Show/hide no results message
            if (currentData.data.length === 0) {
                noResults.style.display = 'block';
                document.getElementById('stores-table').style.display = 'none';
                return;
            } else {
                noResults.style.display = 'none';
                document.getElementById('stores-table').style.display = 'table';
            }
            
            // Generate table rows
            currentData.data.forEach(store => {
                const statusInfo = getStatusInfo(store.subscription_status_id);
                const row = document.createElement('tr');
                
                var innerHTML = `
                    <td>${store.name}</td>
                    <td>${departmentMap[store.department_id]}</td>
                    <td>${governorateMap[store.governorate_id]}</td>
                    <td><span class="status ${statusInfo.class}">${statusInfo.text}</span></td>
                    <td>${formatDate(store.created_at)}</td>
                    <td>${getRating(store.average_rating)}</td>
                    <td class='actions-cell'><button type='button' class='btn btn-action btn-view' onclick="view('${store.id}')"><i class="bi bi-eye"></i> عرض</button>
                `;
                if(store.subscription_status_id == 0){
                    innerHTML += `<button type='button' class='btn btn-action btn-add' onclick="approve('${store.id}')"><i class="bi bi-check-circle me-1"></i> إعتماد</button>`;
                }
                row.innerHTML = innerHTML + `</td>`;
                storesBody.appendChild(row);
            });
            
            // Update pagination buttons
            updatePagination();
        }

        // Update pagination buttons
        function updatePagination() {
            paginationContainer.innerHTML = '';
            
            const totalPages = currentData.pages;
            
            // Previous button currentData
            const prevButton = document.createElement('button');
            prevButton.innerHTML = '<i class="fas fa-chevron-right"></i>';
            prevButton.disabled = searchPageNumber === 1;
            prevButton.addEventListener('click', () => {
                if (searchPageNumber > 1) {
                    getPage(searchPageNumber -1);
                }
            });
            paginationContainer.appendChild(prevButton);
            
            // Page buttons
            // const maxVisiblePages = 9999;
            // let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
            // let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
            
            // if (endPage - startPage + 1 < maxVisiblePages) {
            //     startPage = Math.max(1, endPage - maxVisiblePages + 1);
            // }
            
            for (let i = 1; i <= currentData.pages; i++) {
                const pageButton = document.createElement('button');
                pageButton.textContent = i;
                if (i === searchPageNumber) {
                    pageButton.classList.add('active');
                }
                pageButton.addEventListener('click', () => {
                    getPage(i);
                });
                paginationContainer.appendChild(pageButton);
            }
            
            // Next button
            const nextButton = document.createElement('button');
            nextButton.innerHTML = '<i class="fas fa-chevron-left"></i>';
            nextButton.disabled = searchPageNumber === totalPages;
            nextButton.addEventListener('click', () => {
                if (searchPageNumber < totalPages) {
                    getPage(searchPageNumber + 1);
                }
            });
            paginationContainer.appendChild(nextButton);
        }

        // Apply filters when button is clicked
        applyFiltersBtn.addEventListener('click', () => {
            filterStores();
        });

        // Initialize the page
        async function init(){
            try{
        var rez = await fetch(`{{url("/api/subscriber/deptGovs")}}`, {
            method: "GET",
            headers: {
                'Content-Type': 'application/json'
            }
        });

        var rez = await rez.json();
        for(var dept of rez.depts){
            if(dept.department_id == null){
                departmentMap[dept.id] = dept.name;
                departmentFilter.appendChild(new Option(dept.icon + " " + dept.name, dept.id));
            }
        }
        for(var gov of rez.govs){
            governorateMap[gov.id] = gov.name;
            governorateFilter.appendChild(new Option(gov.name, gov.id));
        }
    } catch(e){
    }
    filterStores();
        }

        
        init();
        
        let currentId = null;
        function approve(id){
            currentId = id;
            new bootstrap.Modal(document.getElementById('confirmModal')).show();
        }
        async function confirmAction(){
            try{
                var rez = await fetch(`{{url("/api/subscriber/approve")}}/${currentId}` , {
                    method: "GET",
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                await rez.text();
            } catch(e){}
            bootstrap.Modal.getInstance(document.getElementById('confirmModal')).hide();
        }
    </script>
@stop