@extends('layout.guest')

@section('title')
{{ $title }}
@endsection

@section('content')
    <div>
        @include('directory.partials.header', ['title' => $title])
        <div class="directory-listing-header">
            <div class="d-flex justify-content-between align-items-center px-2">
                <div class="breadcrumbs">
                    @foreach($breadcrumbs as $breadcrumb)
                        @if ($loop->last)
                            <b>{{ $breadcrumb['name'] }}</b>
                        @else
                            <span class="text-gray">
                                @if(isset($breadcrumb['link']))
                                    <a class="text-gray" href="{{ $breadcrumb['link'] }}">
                                        {{ $breadcrumb['name'] }}
                                    </a>
                                @else
                                    {{ $breadcrumb['name'] }}
                                @endif
                            </span> > 
                        @endif
                    @endforeach
                </div>
                <div class="sort-group">
                    <img src="{{ asset('assets/media/icons/tile.svg') }}" id="tile-view" />
                    <img src="{{ asset('assets/media/icons/list.svg') }}" id="list-view" />
                    <span>Sort by:</span>
                    <select name="sort" id="sort" onchange="editSort(this.value)">
                        <option value="asc">A to Z</option>
                        <option value="desc">Z to A</option>
                    </select> 
                </div>
            </div>
            <hr style="margin-top:0.3rem"/>
        </div>
        <div class="directory-listing">
            <div id="subcategory-list" class="container">
                <div id="item-list"></div>
                <div class="text-center" id="list-prompt" style="margin-bottom:calc(20px + 1rem)">Loading...</div>
                <div id="list-error" style="display:none"><p class="text-danger">Failed to load data.</p></div>
            </div>
    
            <div class="directory-footer">
                <div>
                    <span>
                        Show 
                        <select name="limit" id="limit" onchange="editOffset(this.value)">
                            <option value="12">12</option>
                            <option value="8">8</option>
                            <option value="4">4</option>
                        </select> 
                        items
                    </span>
                </div>
                <div class="pagination-group">
                    <button onclick="loadPage(currentPage - 1)" id="prev-btn" class="btn">Previous</button>
                    <div id="pagination"></div>
                    <button onclick="loadPage(currentPage + 1)" id="next-btn" class="btn">Next</button>
                </div>
                <div id="page-total" class="d-flex align-items-center">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    let currentPage = 1;
    let offset_limit = 12;
    let sort = 'asc';
    let view_type = 'tile';
    let is_service = null;
    let search = null;
    let category = null;
    let subcategory = null;
    let productGroup = null;

    $('#search_name').on('input', function () {
        search = $(this).val();
    });

    $('#list-view').on('click', function () {
        view_type = 'list';
        loadPage(currentPage, offset_limit);
    });

    $('#tile-view').on('click', function () {
        view_type = 'tile';
        loadPage(currentPage, offset_limit);
    });

    @isset($categories)
        $('#category').on('change', function () {
            category = $(this).val();
        });
    @endisset

    @isset($subcategories)
        $('#sub-category').on('change', function () {
            subcategory = $(this).val();
        });
    @endisset

    @isset($productGroups)
        $('#product-group').on('change', function () {
            productGroup = $(this).val();
        });
    @endisset

    function toggleProduct() {
        if(is_service == 0) {
            is_service = null;
            $('.product-icon-inner').removeClass('active');
            loadPage(currentPage, offset_limit);
        }
        else {
            is_service = 0;
            $('.product-icon-inner').addClass('active');
            $('.service-icon-inner').removeClass('active');
            loadPage(currentPage, offset_limit);
        }
    }

    function toggleService() {
        if(is_service == 1) {
            is_service = null;
            $('.service-icon-inner').removeClass('active');
            loadPage(currentPage, offset_limit);
        }
        else {
            is_service = 1;
            $('.service-icon-inner').addClass('active');
            $('.product-icon-inner').removeClass('active');
            loadPage(currentPage, offset_limit);
        }
    }

    function editSort (sorting) {
        sort = sorting;
        loadPage(currentPage, offset_limit);
    }

    function editOffset(offset) {
        offset_limit = parseInt(offset);
        loadPage(currentPage, offset_limit);
    }

    function goToPage() {
        currentPage = parseInt($('#page').val());
        loadPage(currentPage, offset_limit);
    }

    function searchFunc() {
        loadPage(currentPage, offset_limit);
    }

    function clearAll() {
        $('#search_name').val(null);
        $('#category').val(null);
        $('#sub-category').val(null);
        $('#product-group').val(null);
        $('.product-icon-inner').removeClass('active');
        $('.service-icon-inner').removeClass('active');
        category = null;
        subcategory = null;
        productGroup = null;
        is_service = null;
        search = null;
        currentPage = 1;
        loadPage(currentPage, offset_limit);
    }

    function renderPagination(currentPage, totalPages) {
        const $pagination = $('#pagination');
        $pagination.empty();

        const maxButtons = 3;
        let startPage = Math.max(1, currentPage - 1);
        let endPage = startPage + maxButtons - 1;

        if (endPage > totalPages) {
            endPage = totalPages;
            startPage = Math.max(1, endPage - maxButtons + 1);
        }

        for (let i = startPage; i <= endPage; i++) {
            const btn = $(`<button class="btn btn-sm pagination-btn ${i === currentPage ? 'active' : ''}">${i}</button>`);
            btn.on('click', () => {
                if (i !== currentPage) {
                    currentPage = i;
                    loadPage(i);
                }
            });
            $pagination.append(btn);
        }
    }

    function loadPage(page, limit = offset_limit, sorting = sort) {
        $.ajax({
            url: "{{ $ajaxLink }}",
            method: 'GET',
            data: {
                page: page,
                limit: limit,
                sort: sorting,
                is_service: is_service,
                search_name: search,
                categories: category,
                subcategories: subcategory,
                productgroups: productGroup
            },
            dataType: 'json',
            beforeSend: function() {
                $('#list-error').hide();
                $('#item-list').empty();
                $('#pagination').empty();
                $('#list-prompt').text('Loading...');
                $('#list-prompt').show();
                $('#prev-btn').prop('disabled', true);
                $('#next-btn').prop('disabled', true);
                $('#page-total').empty();
            },
            success: function (data) {
                const list = $('#item-list');

                if (!data.data || data.data.length === 0) {
                    $('#list-prompt').text('No items found.');
                } else {
                    $('#list-prompt').hide();
                    if (view_type == 'tile') {
                        for (let i = 0; i < data.data.length; i += 4) {
                            const rowItems = data.data.slice(i, i + 4);
                            const row = $('<div class="row directory-row"></div>');

                            rowItems.forEach(category => {
                                const col = $(`
                                    <div class="col-lg-3 col-md-6">
                                        <a href="{{ $itemLink }}${category.id}">
                                            <div class="directory-card">
                                                <div class="directory-img">
                                                    <img src="{{ asset('storage/${category.image}') }}" onerror="this.onerror=null; this.src='{{ asset('assets/media/misc/image.png') }}';" alt="${category.name}" class="img-fluid mb-2">
                                                </div>
                                                <p class="title">${category.name}</p>
                                                <p class="subtitle">${category.product_count} Listings</p>
                                            </div>
                                        </a>
                                    </div>
                                `);
                                row.append(col);
                            });

                            list.append(row);
                        }
                    }
                    else {
                        data.data.forEach((category, index)=> {
                            const row = $('<div class="row directory-row"></div>');

                            const col = $(`
                                <div class="col-12">
                                    <a href="{{ $itemLink }}${category.id}">
                                        <div class="directory-list-item">
                                            <div class="directory-img">
                                                <img src="{{ asset('storage/${category.image}') }}" 
                                                    onerror="this.onerror=null; this.src='{{ asset('assets/media/misc/image.png') }}';" 
                                                    alt="${category.name}" class="img-fluid mb-2">
                                            </div>
                                            <div class="directory-list-label-group">
                                                <p class="title">${category.name}</p>
                                                <p class="subtitle">${category.product_count} Listings</p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            `);

                            row.append(col);
                            
                            list.append(row);

                            if (index < data.data.length - 1) {
                                list.append('<hr/>');
                            }
                        });
                    }
                }

                currentPage = parseInt(data.page);
                totalPage = parseInt(data.total_pages);
                renderPagination(currentPage, totalPage);
                if(totalPage == 0){
                    $('.directory-footer').hide();
                } else {
                    $('.directory-footer').show();
                    $('#prev-btn').prop('disabled', currentPage === 1 );
                    $('#next-btn').prop('disabled', currentPage >= totalPage);
                    $('#page-total').html(`<div class="d-flex align-items-center">
                        <span>Page</span>
                        <input type="text" class="form-control mx-2" name="page" id="page" value="${data.page}">
                        <span>of ${totalPage}</span> 
                        <button class='btn btn-go ms-2' id="go_to_page" onclick="goToPage()">Go</button>
                    </div>`);
                }

                // $('html, body').animate({
                //     scrollTop: $('.directory-header').offset().top
                // }, 500);
            },
            error: function (xhr, status, error) {
                console.error('AJAX error:', error);
                $('#list-prompt').hide();
                $('#list-error').show();
            }
        });
    }

    $(document).ready(function() {
        $('#search_name').val('');
        @isset($subcategories)
            $('#sub-category').val('');
        @endisset
        @isset($productGroups)
            $('#product-group').val('');
        @endisset
        $('#search_name').on('keypress', function(e) {
            if (e.which === 13) { // 13 = Enter key
                $('.search-btn').click();
            }
        });
        loadPage(currentPage);
    });
</script>
@endsection