@extends('layouts.frontend.frontend_main')

@section('title')
    @lang('frontend_lang.offers')
@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.offers')</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.offers')</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();
                filters['offers'] = 1;
            }

            //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();
            filters['offers'] = 1;

            //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