@extends('layouts.admin')
@section('content')
<div>
    <nav aria-label="breadcrumb" class="breadcrumb-wrap">
        <div class="container">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ URL::to('/') }}"><i class="ti-home"></i> @lang('messages.Home')</a></li>
                    <li class="breadcrumb-item active" aria-current="page"><a href="{{ route('products.list',['category_id'=>'all-products','level'=>'all']) }}">All Products</a></li>
                    @if(!empty($breadcrumb))
                    @if(isset($breadcrumb->first_level_category_id) && !empty($breadcrumb->first_level_category_id))
                    <li class="breadcrumb-item"><a data-category-id="{{$breadcrumb->first_level_category_id}}" data-name-slug="{{$breadcrumb->first_level_name_slug}}" data-meta-keyword="{{$breadcrumb->first_level_meta_keywords}}" data-meta-description="{{$breadcrumb->first_level_meta_description}}" data-level="1" href="javascript:;" class="category_product_list">{{ $breadcrumb->first_level_category_name }}</a></li>
                    @endif
                    @if(isset($breadcrumb->second_level_category_id) && !empty($breadcrumb->second_level_category_id))
                    <li class="breadcrumb-item"><a data-category-id="{{$breadcrumb->second_level_category_id}}" data-name-slug="{{$breadcrumb->second_level_name_slug}}" data-meta-keyword="{{$breadcrumb->second_level_meta_keywords}}" data-meta-description="{{$breadcrumb->second_level_meta_description}}" data-level="2" href="javascript:;" class="category_product_list">{{ $breadcrumb->second_level_category_name }}</a></li>
                    @endif
                    @if(isset($breadcrumb->third_level_category_id) && !empty($breadcrumb->third_level_category_id))
                    <li class="breadcrumb-item"><a data-category-id="{{$breadcrumb->third_level_category_id}}" data-name-slug="{{$breadcrumb->third_level_name_slug}}" data-meta-keyword="{{$breadcrumb->third_level_meta_keywords}}" data-meta-description="{{$breadcrumb->third_level_meta_description}}" data-level="3" href="javascript:;" class="category_product_list">{{ $breadcrumb->third_level_category_name }}</a></li>
                    @endif
                    @if(isset($breadcrumb->fourth_level_category_id) && !empty($breadcrumb->fourth_level_category_id))
                    <li class="breadcrumb-item"><a data-category-id="{{$breadcrumb->fourth_level_category_id}}" data-name-slug="{{$breadcrumb->fourth_level_name_slug}}" data-meta-keyword="{{$breadcrumb->fourth_level_meta_keywords}}" data-meta-description="{{$breadcrumb->fourth_level_meta_description}}" data-level="4" href="javascript:;" class="category_product_list">{{ $breadcrumb->fourth_level_category_name }}</a></li>
                    @endif
                    @if(isset($breadcrumb->fifth_level_category_id) && !empty($breadcrumb->fifth_level_category_id))
                    <li class="breadcrumb-item"><a href="javascript:;">{{ $breadcrumb->fifth_level_category_name }}</a></li>
                    @endif
                    @endif
                </ol>
            </div>
    </nav>
</div>
<section class="pt-4">               
    <div class="container products-listing-page">
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="filter_search_opt">
                    <a href="javascript:void(0);" onclick="openFilterSearch()"><i class="ti-reload"></i></a>
                </div>
            </div>
        </div>

        <div class="row ">
                        <!-- Single Product -->

            <div class="col-lg-3 col-md-12">
                <div class="search-sidebar sm-sidebar" id="filter_search" style="left:0;">
                    <div class="search-sidebar_header">
                        <h4 class="ssh_heading">Filter</h4>
                        <button onclick="closeFilterSearch()" class="w3-bar-item w3-button w3-large"><i class="ti-close"></i></button>
                    </div>
                    <div class="search-sidebar-body">
                        <div class="single_search_boxed" style="display: none">
                            <div class="widget-boxed-header">
                                <h4 class="ml-4 mt-3 mb-1 text-success">Categories</h4>
                            </div>
                            <div class="widget-boxed-body">
                                <div class="side-list no-border">
                                    <div class="filter-card" id="shop-categories">
                                        @if(!empty($category_list))
                                        @foreach($category_list as $category)
                                        <!-- Single Filter Card -->
                                        <div class="single_filter_card">

                                            @if(!empty($category->subcategory))
                                            <h5 class="d-flex w-100 align-items-center">
                                                <!-- <img src="" width="18%"> -->
                                                <a href="#{{$category->id}}" data-toggle="collapse" class="collapsed" aria-expanded="false" role="button">{{ $category->name }}<i class="accordion-indicator ti-angle-down"></i></a>
                                            </h5>
                                            <div class="collapse" id="{{$category->id}}" data-parent="#shop-categories">
                                                <div class="card-body">
                                                    <div class="inner_widget_link">
                                                        <ul>
                                                            @foreach($category->subcategory as $sub)
                                                            <li class="d-flex w-100 align-items-center">
                                                                <!-- <img src="" width="18%"> -->
                                                                <a href="{{ route('products.list',['category_id'=>$sub->id,'level'=>$sub->level]) }}">{{ $sub->name }}<span></span></a></li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            @else
                                            <h5>
                                                <a href="#{{$category->id}}" data-toggle="collapse" class="collapsed" aria-expanded="false" role="button">{{ $category->name }}</a>


                                            </h5>
                                            @endif
                                        </div>
                                        @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single_search_boxed d-flex align-items-center">
                            <div class="widget-boxed-header">
                                <h4 class="ml-3 mt-3 mb-3 text-success">Filter Products</h4>
                            </div>
                        </div>
                                                @if(isset($filter_list))
                        @forelse($filter_list as $key => $list)
                        @if($filter_list[$key]['title'] == 'Price' || $filter_list[$key]['title'] == 'Discounts')
                        <div class="single_search_boxed">
                            <div class="widget-boxed-header">
                                <h4>
                                    <a href="#{{ $filter_list[$key]['key'] }}" data-toggle="collapse" aria-expanded="false" role="button" class="collapsed">
                                        {{ $filter_list[$key]['title'] }}
                                    </a>
                                </h4>
                            </div>
                            <div class="widget-boxed-body collapse" id="{{ $filter_list[$key]['key'] }}" data-parent="#{{ $filter_list[$key]['key'] }}">
                                <div class="side-list no-border">
                                    <!-- Single Filter Card -->
                                    <div class="single_filter_card">
                                        <div class="card-body pt-0">
                                            <div class="inner_widget_link">
                                                <ul class="no-ul-list slim-scroll">
                                                    @if(isset($filter_list[$key]['filter_data']))
                                                    @forelse($filter_list[$key]['filter_data'] as $data)
                                                    <li>
                                                        <input id="{{ $filter_list[$key]['title'] }}-{{ $data['id'] }}" class="common-selector checkbox-custom {{$list['key']}} filter-products" type="radio" name="{{ $filter_list[$key]['title'] }}" value="{{ $data['id'] }}" />
                                                        <label for="{{ $filter_list[$key]['title'] }}-{{ $data['id']}}" class="checkbox-custom-label">
                                                            {{ $data['name'] }}
                                                        </label>
                                                    </li>
                                                    @empty
                                                    <li>
                                                        <p>{{ $filter_list[$key]['title'] }} Data not Available </p>
                                                    </li>
                                                    @endforelse
                                                    @endif
                                                    <li>
                                                        <input id="all-{{$list['title']}}" class="common-selector checkbox-custom {{$list['title']}} filter-products" type="radio" name="{{ $filter_list[$key]['title'] }}" value="" />
                                                        <label for="all-{{$list['title']}}" class="checkbox-custom-label">
                                                            All
                                                        </label>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="single_search_boxed">
                            <div class="widget-boxed-header">
                                <h4>
                                    <a href="#{{ $filter_list[$key]['key'] }}" data-toggle="collapse" aria-expanded="false" role="button" class="collapsed">
                                        {{ $filter_list[$key]['title'] }}
                                    </a>
                                </h4>
                            </div>
                            <div class="widget-boxed-body collapse" id="{{ $filter_list[$key]['key'] }}" data-parent="#{{ $filter_list[$key]['key'] }}">
                                <div class="side-list no-border">
                                    <!-- Single Filter Card -->
                                    <div class="single_filter_card">
                                        <div class="card-body pt-0">
                                            <div class="inner_widget_link">
                                                <div class="input-group mb-2 mt-2">
                                                    <input type="text" class="form-control" placeholder="search brands here.." style="height: 35px;border-radius: 0;" aria-label="Recipient's username" aria-describedby="basic-addon2" id="search_{{ $filter_list[$key]['key'] }}">
                                                    <div class="input-group-append">
                                                        <span class="input-group-text" id="basic-addon2"><i class="fa fa-search"></i></span>
                                                    </div>
                                                </div>
                                                <ul class="no-ul-list slim-scroll" id="{{ $filter_list[$key]['key'] }}">
                                                    @if(isset($filter_list[$key]['filter_data']))
                                                    @forelse($filter_list[$key]['filter_data'] as $data)
                                                    <li>
                                                        <input id="{{ $filter_list[$key]['title'] }}-{{ $data['id'] }}" class="common-selector checkbox-custom {{$list['key']}} filter-products" type="checkbox" value="{{ $data['id'] }}" />
                                                        <label for="{{ $filter_list[$key]['title'] }}-{{ $data['id']}}" class="checkbox-custom-label">
                                                            {{ $data['name'] }}
                                                        </label>
                                                    </li>
                                                    @empty
                                                    <li>
                                                        <p>{{ $filter_list[$key]['title'] }} Data not Available </p>
                                                    </li>
                                                    @endforelse
                                                    @endif

                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                        @empty
                        <p>data not available</p>
                        @endforelse
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-lg-9 col-md-12">
                
                                
                @if(!empty($products))
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="toolbar toolbar-products">
                            <div class="toolbar-sorter sorter">
                                <label class="sorter-label" for="sorter">Sort By</label>
                                <select id="sorter" data-role="sorter" data-category-id="{{$category_id}}" data-level="{{$level}}" name="sorter" class="sorter-options">
                                    <option value="">Most Popular</option>
                                    <option value="featured">Featured </option>
                                    <option value="priceLowest">Price: Low to High </option>
                                    <option value="priceHighest">Price: High to Low</option>
                                    <option value="latest">New Arrivals</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                <input type="hidden" data-url="{{ url()->current() }}" data-level="{{$level}}" id="current_page_url">
                <div class="product-content">
                    @include('admin.sub_view.looping_product')
                </div>
            </div>

        </div>
    </div>
</section>
<input type="hidden" id="current_category_id" value="{{$category_id}}">
<input type="hidden" id="current_level" value="{{$level}}">
<input type="hidden" name="customer_id" id="customer_id" value="{{ Session::get('CustomerId') }}">

<style type="text/css">
    
</style>
<script src="{{ URL::asset('js/slimscroll.js') }}"></script>

<script type="text/javascript">

    $(document).on('click', '.subscribe-btn', function(e) {

        e.preventDefault();
        var customer_id = $('#customer_id').val();
        if (customer_id <= 0) {
            swal("Please login to continue further")
                .then((value) => {
                    if (value === true) {
                        $("#customer_login").trigger("click");
                        return false;
                    }
                });
        } else {
            var token = $('meta[name="csrf-token"]').attr('content');
            var status = $(this).attr("data-status");
            var product_id = $(this).attr('data-product');
            var warehouse_product_id = $(this).attr('data-warehouse-product');
            var vendor_id = $(this).attr('data-vendor');
            var group_id = $(this).attr('data-group-id');

            var data = {
                'product_id': product_id,
                'status': status,
                'warehouse_product_id': warehouse_product_id,
                'vendor_id': vendor_id,
                'group_id': group_id,
            };
            var url = "{{url('update-subscribed')}}";
            $.ajax({
                url: url,
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: data,
                type: 'POST',
                datatype: 'JSON',
                success: function(resp) {
                    if (resp.http_code == 400) {
                        toastr.warning(resp.message);
                    } else if (resp.http_code == 200) {
                        toastr.success(resp.message);
                    } else if (resp.http_code == 500) {
                        toastr.success(resp.message);
                    }
                    window.location.reload();
                }
            });
        }
    });
    
    $(document).on('click', '.favProducts', function(e) {
        e.preventDefault();
        var customer_id = $('#customer_id').val();
        if (customer_id <= 0) {
            swal("Please login to continue further")
                .then((value) => {
                    if (value === true) {
                        $("#customer_login").trigger("click");
                        return false;
                    }
                });
        } else {
            var token = $('meta[name="csrf-token"]').attr('content');
            var status = $(this).attr("data-status");
            var product_id = $(this).attr('data-product');
            var warehouse_product_id = $(this).attr('data-warehouse-product');
            var vendor_id = $(this).attr('data-vendor');
            var group_id = $(this).attr('data-group-id');

            var data = {
                'product_id': product_id,
                'status': status,
                'warehouse_product_id': warehouse_product_id,
                'vendor_id': vendor_id,
                'group_id': group_id,
            };
            var url = "{{url('update-fav')}}";
            $.ajax({
                url: url,
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: data,
                type: 'POST',
                datatype: 'JSON',
                success: function(resp) {
                    if (resp.http_code == 400) {
                        toastr.warning(resp.message);
                    } else if (resp.http_code == 200) {
                        if (status == '1') {
                            $('.fav-' + warehouse_product_id).html("<i class='favProducts heart fas fa-heart' data-vendor='" + vendor_id + "' data-product='" + product_id + "' data-warehouse-product='" + warehouse_product_id + "' data-group-id='" + group_id + "' data-status='0'></i>");
                        } else {
                            $('.fav-' + warehouse_product_id).html("<i class='favProducts heart far fa-heart' data-vendor='" + vendor_id + "' data-product='" + product_id + "' data-warehouse-product='" + warehouse_product_id + "' data-group-id='" + group_id + "' data-status='1'></i>");
                        }
                        toastr.success(resp.message);
                    } else if (resp.http_code == 500) {
                        toastr.success(resp.message);
                    }
                }
            });
        }
    });

    $(document).on('click', '.page-link', function(e) {
        $('.preloader').show();
        var token = $('meta[name="csrf-token"]').attr('content');
        var page = $(this).attr("data-url");
        var current_pagee_url = $('#current_page_url').attr('data-url');
        var url = current_pagee_url+'?page='+page;
        var level = $('#current_page_url').attr('data-level');
        var brand = get_list_filter_value("brand_filter");
        var price = $(".price_filter:checked").val();
        var discount = $(".discount_filter:checked").val();
        var category = get_list_filter_value("category_filter");
        var sub_category = get_list_filter_value("sub_category_filter");
        var category_id = $("#current_category_id").val();
        var level = $("#current_level").val();
        var sorter = $('#sorter').val();
        $.ajax({
            url: url,
            headers: {
                'X-CSRF-TOKEN': token
            },
            type: 'get',
            data: {
                brand: brand,
                price: price,
                discount: discount,
                category: category,
                sub_category:sub_category,
                category_id: category_id,
                level: level,
                sorter: sorter,
                page:page
            },
            datatype: 'JSON',
            success: function(resp) {
                $('.preloader').hide();
                if (resp.http_code == 400) {
                    toastr.warning(resp.message);
                } else if (resp.http_code == 200) {
                    $('.product-content').html(resp.data);
                } else if (resp.http_code == 500) {
                    toastr.success(resp.message);
                }
            },
            error: function(err) {
                $('.preloader').hide();
            }
        });
    });

    function get_list_filter_value(filter_class) {
        var filter_data = [];

        $("." + filter_class + ":checked").each(function() {
            filter_data.push($(this).val());
        });

        return filter_data;
    }

    $(document).ready(function() {
        $('.slim-scroll').slimScroll({
            height: '250px'
        });
    });

    $("#search_brand_filter").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#brand_filter li").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });

    $("#search_sub_category_filter").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#sub_category_filter li").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });

</script>
<script type="text/javascript">
    var timer = '';
    $(document).ready(function(){
        $('.js-range-slider').ionRangeSlider({ 
            type: "double",
            min:1,
            max: 2000,
            from:1,
            to: 2000,
            grid: true,
            onChange: function(data) {
            var brand = get_filter_value("brand_filter");
            var category = get_filter_value("category_filter");
            var level = $('#current_page_url').attr('data-level');
            var discount = $(".discount_filter:checked").val();
            var sub_category = get_filter_value("sub_category_filter");
            var sorter = $('#sorter').val();
            var range= this.value
            var minimum_price=data.from;
            var maximum_price = data.to;

            $('#minimum_price').val(minimum_price);
            $('#maximum_price').val(maximum_price);
        
            clearTimeout(timer);
            timer = setTimeout(function() {
            token = $('meta[name="csrf-token"]').attr("content");
            $.ajax({
                url:"products.list",
            headers: {
            'X-CSRF-TOKEN': token
            },
                method:"get",
                data:{
                minimum_price:minimum_price,
                maximum_price:maximum_price,
                brand: brand,
                sorter: sorter,
                level: level,
            // price: price,
                discount: discount,
                category: category,
            },
                datatype: "JSON",
                success: function(resp) {
                if (resp.http_code == 400) {
                    $('.preloader').hide();
                } else if (resp.http_code == 200) {
                    if (resp.data) {
                        $(".product-block").html(resp.data);
                    }
                    $('.preloader').hide();
                } else if (resp.http_code == 500) {
                    $('.preloader').hide();
                }
            },

            error: function(err) {
                $('.preloader').hide();
            }
            });
            }, 500);
            }
        });
        $('.slim-scroll').slimScroll({
                height: '250px'
        });
    });
</script>
@endsection