@extends('layouts.admin')
@section('content')
<section class="pt-4">
    <div class="container-fluid">
        <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 ">
            <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">
                                                    @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']}} brand-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']}} brand-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>
                        @endif
                        @empty
                        <p>data not available</p>
                        @endforelse
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-lg-9 col-md-12">
                <div class="">
                    <nav aria-label="breadcrumb">
                        <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>
                            <li class="breadcrumb-item active" aria-current="page"><a href="javascript:;">Brands</a></li>
                            <li class="breadcrumb-item active" aria-current="page"><a href="javascript:;">{{ $brand_name }}</a></li>
                        </ol>
                    </nav>
                </div>
                                <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="javascript:;">
                                            <img data-category-id="{{$category->id}}" data-name-slug="{{$category->name_slug}}" data-meta-keyword="{{$category->meta_keywords}}" data-meta-description="{{$category->meta_description}}" data-level="{{$category->level}}" class="category_product_list" src="" class="img-fluid" alt="" />
                                        </a>
                                    </div>
                                    <div class="woo_product_caption left">
                                        <div class="woo_title">
                                            <h4 class="woo_pro_title"><a data-category-id="{{$category->id}}" data-name-slug="{{$category->name_slug}}" data-meta-keyword="{{$category->meta_keywords}}" data-meta-description="{{$category->meta_description}}" data-level="{{$category->level}}" href="javascript:;" class="category_product_list">{{$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="brand_sorter" data-role="brand_sorter" data-category-id="" data-level="" name="brand_sorter" class="sorter-options">
                                    <option value="">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() }}" id="current_page_url">
                <div class="product-content">
                    @include('admin.sub_view.looping_product')

            </div>
            </div>

        </div>
    </div>
</section>
@php $brand = isset($brand) ? $brand : 0; @endphp
<input type="hidden" id="current_category_id" value="">
<input type="hidden" id="current_level" value="">
<input type="hidden" name="customer_id" id="customer_id" value="{{ Session::get('CustomerId') }}">

<style type="text/css">
    .heart {
        flex-basis: 35px;
        font-size: 25px;
        color: #6aa80a;
        outline-color: black;
        margin-left: 10px;
        cursor: pointer;
    }
</style>

<script type="text/javascript">
    $(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_page_url = $('#current_page_url').attr('data-url');
        var url = current_page_url+'?page='+page;
        var brand = get_list_filter_value("brand_filter");
        var price = $(".price_filter:checked").val();
        var discount = $(".discount_filter:checked").val();
        var sorter = $('#brand_sorter').val();

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

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

        return filter_data;
    }
</script>
@endsection