@extends('layouts.admin')
@section('content')

 <nav aria-label="breadcrumb-wrap" 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 href="{{ url('product-list/'.$breadcrumb->first_level_category_id.'/1') }}">{{ $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 href="{{ url('product-list/'.$breadcrumb->second_level_category_id.'/2') }}">{{ $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 href="{{ url('product-list/'.$breadcrumb->third_level_category_id.'/3') }}">{{ $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 href="{{ url('product-list/'.$breadcrumb->fourth_level_category_id.'/4') }}">{{ $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>
               
<section class="pt-4">
    <div class="container">

        <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']}} search-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']}} search-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']}} search-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">
              
                                <div class="row mb-4">
                    <div class="col-lg-12 col-md-12">
                        <div class="owl-carousel category-slider owl-theme">
                            @if(!empty($subcategory_list))
                            @foreach($subcategory_list as $key => $category)
                            <!-- Single Item -->
                            <div class="item">
                                <div class="woo_product_grid">
                                    <div class="woo_product_thumb">
                                        <a href="{{ route('products.list',['category_id' => $category->id, 'level' => $category->level]) }}" ?>
                                            <img src="" class="img-fluid" alt="" />
                                        </a>
                                    </div>
                                    <div class="woo_product_caption left">
                                        <div class="woo_title">
                                            <h4 class="woo_pro_title"><a href="{{ route('products.list',['category_id' => $category->id, 'level' => $category->level]) }}">{{$category->name}}</a></h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            @endif
                        </div>
                    </div>
                </div>
                @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="search_sorter" data-role="sorter" data-category-id="" data-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

                <div class="product-content">
                    @include('admin.sub_view.search_looping_product')

            </div>
            </div>

        </div>
    </div>
</section>
@if(!isset($search_key))
<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') }}">
@endif
<style type="text/css">
  
</style>

<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-search', function(e) {
        $('.preloader').show();

        var token = $('meta[name="csrf-token"]').attr('content');
        var url = $(this).attr("data-url");

        var brand = get_search_filter_value("brand_filter");
        var price = $(".price_filter:checked").val();
        var discount = $(".discount_filter:checked").val();
        var category = get_search_filter_value("category_filter");
        var sub_category = get_search_filter_value("sub_category_filter");
        // var category_id = $("#current_category_id").val();
        // var level = $("#current_level").val();
        var sorter = $('#search_sorter').val();

        $.ajax({
            url: url,
            headers: {
                'X-CSRF-TOKEN': token
            },
            type: 'get',
            data : {
                brand: brand,
                price: price,
                discount: discount,
                category: category,
                // category_id: category_id,
                // level: level,
                sorter: sorter,
            },
            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_search_filter_value(filter_class) {
        var filter_data = [];

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

        return filter_data;
    }

    $("#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 src="{{ URL::asset('js/slimscroll.js') }}"></script>
<script>
    $(document).ready(function() {
        $('.slim-scroll').slimScroll({
            height: '280px'
        });
    });
</script>

@endsection