@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">
        <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 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]['title'] }}">
                                <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']}} placeholder-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']}} placeholder-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']}} placeholder-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="placeholder_sorter" data-role="sorter" data-category-id="" data-level="" 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="placeholder-content">
                    @include('admin.sub_view.placeholder_looping_product')
                </div>
            </div>
        </div>
    </div>
</section>
<script>

    $(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', '.page-link-placeholder', function(e) {
        $('.preloader').show();
        var token = $('meta[name="csrf-token"]').attr('content');
        var url = $(this).attr("data-url");

        var brand = get_placeholder_filter_value("brand_filter");
        var price = $(".price_filter:checked").val();
        var discount = $(".discount_filter:checked").val();
        var category = get_placeholder_filter_value("category_filter");
        var sub_category = get_placeholder_filter_value("sub_category_filter");
        var sorter = $('#placeholder_sorter').val();

        $.ajax({
            url: url,
            headers: {
                'X-CSRF-TOKEN': token
            },
            data: {
                brand: brand,
                price: price,
                discount: discount,
                category: category,
                sorter: sorter,
            },
            type: 'get',
            datatype: 'JSON',
            success: function(resp) {
                $('.preloader').hide();
                if (resp.http_code == 400) {
                    toastr.warning(resp.message);
                } else if (resp.http_code == 200) {
                    $('.placeholder-content').html(resp.data);
                } else if (resp.http_code == 500) {
                    toastr.success(resp.message);
                }
            },
            error: function(err) {
                $('.preloader').hide();
            }
        });
    });

    function get_placeholder_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>

<script>
    $(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);
                    }
                }
            });
        }
    });
</script>
@endsection