@extends('layouts.frontend.frontend_main')

@section('title')
    @lang('frontend_lang.products')
@endsection

@section('search_bar')
    @include('frontend.product.partials.product_search_bar',['categories' => $categories])
@endsection
@section('content')
    <div class="gambo-Breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('frontend.home.index') }}">@lang('frontend_lang.home')</a></li>
                            <li class="breadcrumb-item active" aria-current="page">@lang('frontend_lang.products')</li>
                            @if(request('category'))
                                <li class="breadcrumb-item active" aria-current="page">{{ ucfirst(request('category')) }}</li>
                            @endif
                            @if(request('sub_category'))
                                <li class="breadcrumb-item active" aria-current="page">{{ ucfirst(request('sub_category')) }}</li>
                            @endif
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="all-product-grid">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="product-top-dt">
                        <div class="product-left-title">
                            <h2>@lang('frontend_lang.products')</h2>
                        </div>
                        <a href="javascript:void(0)" class="filter-btn pull-bs-canvas-right">@lang('frontend_lang.filters')</a>
                        <div class="product-sort">
                            <select name="sorting" id="" class="ui selection dropdown vchrt-dropdown">
                                <option value="price:asc">{{ trans('frontend_lang.low_to_high') }}</option>
                                <option value="price:desc"  >{{ trans('frontend_lang.high_to_low') }}</option>
                                <option value="created_at:desc" {{ request('sort')=='new' ? 'selected' : ''}}>{{ trans('frontend_lang.latest') }}</option>
                                <option value="demanded" {{ request('sort')=='demanded' ? 'selected' : ''}}>{{ trans('frontend_lang.demanded') }}</option>
                                <option value="ascending" {{ request('sort')=='ascending' ? 'selected' : ''}}>{{ trans('frontend_lang.ascending') }}</option>
                                <option value="descending" {{ request('sort')=='descending' ? 'selected' : ''}}>{{ trans('frontend_lang.descending') }}</option>
                            </select>
                            <input type="hidden" name="is_featured" value="{{ app('request')->input('is_featured') }}">
                            <input type="hidden" name="url_sub_category" value="{{ request('sub_category') }}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="product-list-view">
                <div class="row" id="products-container">

                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="more-product-btn">
                            <button class="show-more-btn hover-btn showMore d-none">@lang('frontend_lang.show_more')</button>
                            <button class="show-more-btn hover-btn showAll d-none">@lang('frontend_lang.show_all')</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
<script>
    var lastPage = 1, cur = 1;

    jQuery(document).ready(function() {
        loadProducts(true);
    });

    $('body').on('change', '.selectable[name="categories[]"]', function() {
        loadProducts(true);
        jQuery('[name="url_sub_category"]').val('');
    });

    jQuery(document).on('change', '[name="sorting"]', function() {
        loadProducts(true);
    });

    function loadProducts(isFiltered, page) {
        if (typeof page == 'undefined') {
            cur = 1;
            page = 1;
            jQuery('#products-container').html('');
        }
        let url = "{{ route('frontend.product.searchFilter') }}" + '?page=' + page, filters = {};
        if (isFiltered) {
            filters['categories'] = getCheckedArray(jQuery('[name="categories[]"]'));
            filters['sub_categories'] =  jQuery('[name="url_sub_category"]').val();
            filters['search'] = "{{ request('search') }}";
            filters['sort'] = jQuery('[name="sorting"]').val();
            filters['is_featured'] = jQuery('[name="is_featured"]').val();
        }

        //load products from server
        jQuery.ajax({
            url: url,
            method: 'GET',
            dataType: 'JSON',
            data: filters,
            beforeSend: function() {
                showLoading();
            },
            success: function(response) {
                if(response.status == true){
                    jQuery('#products-container').append(response.html);
                    jQuery('#products-count').text(response.count);
                    lastPage = parseInt(response.last);
                    if(response.last == cur){
                        $('.showMore').addClass('d-none');
                        $('.showAll').addClass('d-none');
                    }else{
                        $('.showMore').removeClass('d-none');
                        $('.showAll').removeClass('d-none');
                    }

                }
            },
            complete: function() {
                hideLoading();
            }
        });
    }
    function getCheckedArray(checkedInputs) {
        var arr = [];
        checkedInputs.each(function(key, checkbox) {
            if (jQuery(checkbox).is(":checked")) {
                arr.push(jQuery(checkbox).val());
            }
        });
        return arr;
    }

    $('body').on('click','.showMore', function () {
        if (lastPage != cur) {
            loadProducts(true, ++cur);
        }
    });

    $(document).on('click','.showAll', function () {
        jQuery('#products-container').html('');
        let url = "{{ route('frontend.product.searchAllFilter') }}"
        var filters = {};

        filters['categories'] = getCheckedArray(jQuery('[name="categories[]"]'));
        filters['sub_categories'] =  jQuery('[name="url_sub_category"]').val();
        filters['search'] = "{{ request('search') }}";
        filters['sort'] = jQuery('[name="sorting"]').val();
        filters['is_featured'] = jQuery('[name="is_featured"]').val();

        //load products from server
        jQuery.ajax({
            url: url,
            method: 'GET',
            dataType: 'JSON',
            data: filters,
            beforeSend: function() {
                showLoading();
            },
            success: function(response) {
                if(response.status == true){
                    jQuery('#products-container').append(response.html);
                    jQuery('#products-count').text(response.count);

                    $(document).find('.showMore').addClass('d-none');
                    $(document).find('.showAll').addClass('d-none');

                }
            },
            complete: function() {
                hideLoading();
            }
        });
    });

</script>
@endsection