@extends('index')
@section('title', Helper::getSiteTitle(isset($title) && !empty($title) ? $title : ''))

@section('content')
<section class="category-main">
    <div class="container">
        <div class="row">
            @include('includes.products_filter')
            <div class="col-xl-10 col-lg-10">
                <div class="category-header">
                    <div class="count-list">Showing {{ $products->count() }} of {{ $products->total() }} Products</div>
                    <div class="sorting-fiter">
                        <select class="form-control sort-filter" name="sort">
                            <option value="on_sale-desc" {{ isset($sort) && !empty($sort) && $sort == 'on_sale-desc' ? 'selected="selected"' : '' }}>Specials</option>
                            <option value="name-asc" {{ isset($sort) && !empty($sort) && $sort == 'name-asc' ? 'selected="selected"' : '' }}>Name (A - Z)</option>
                            <option value="name-desc" {{ isset($sort) && !empty($sort) && $sort == 'name-desc' ? 'selected="selected"' : '' }}>Name (Z - A)</option>
                            <option value="selling_price-asc" {{ isset($sort) && !empty($sort) && $sort == 'selling_price-asc' ? 'selected="selected"' : '' }}>Price (Low - High)</option>
                            <option value="selling_price-desc" {{ isset($sort) && !empty($sort) && $sort == 'selling_price-desc' ? 'selected="selected"' : '' }}>Price (High - Low)</option>
                            <option value="thc_value-asc" {{ isset($sort) && !empty($sort) && $sort == 'thc_value-asc' ? 'selected="selected"' : '' }}>THC (Low - High)</option>
                            <option value="thc_value-desc" {{ isset($sort) && !empty($sort) && $sort == 'thc_value-desc' ? 'selected="selected"' : '' }}>THC (High - Low)</option>
                        </select>

                        <ul class="nav nav-tabs  list-view" id="myTab" role="tablist">
                            <li role="presentation" class="nav-item style-filter" data-type="grid">
                                <a class="{{ empty($style) || $style == 'grid' ? 'active' : '' }}" id="grid-tab" data-toggle="tab" href="#grid" role="tab" aria-controls="grid" aria-selected="true"><i class="fas fa-grip-horizontal"></i> </a>
                            </li>
                            <li class="nav-item style-filter" role="presentation" data-type="list">
                                <a class="{{ !empty($style) && $style == 'list' ? 'active' : '' }}" id="list-tab" data-toggle="tab" href="#list" role="tab" aria-controls="list" aria-selected="false"><i class="fas fa-list"></i></a>
                            </li>
                            <li>
                                <button class="filter-open d-inline-flex d-lg-none ml-2"><i class="fa fa-sliders-h"></i></button>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="tab-content category-view" id="myTabContent">
                    <div class="tab-pane fade {{ empty($style) || $style == 'grid' ? 'show active' : '' }}" id="grid" role="tabpanel" aria-labelledby="grid-tab">
                        <div class="row">
                            @if(!$products->isEmpty())
                                @include('includes.products_list', ['products' => $products, 'store_slug' => $store->slug, 'class_names' => 'col-xl-3 col-md-3 col-sm-6'])

                                <div class="col-xl-12 col-md-12 col-sm-12 mt-5" style="text-align: center;">
                                    {!! $products->links('vendor.pagination.bootstrap-4') !!}
                                </div>
                            @else
                                <div class="col-xl-12 col-md-12 col-sm-12" style="text-align: center;">
                                    @include('includes.no_data_found')
                                    <p class="mt-4">No Data Found In This Category!</p>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="tab-pane fade {{ !empty($style) && $style == 'list' ? 'show active' : '' }}" id="list" role="tabpanel" aria-labelledby="list-tab">
                        @if(!$products->isEmpty())
                            @include('includes.products_list_listview', ['products' => $products, 'store_slug' => $store->slug])

                            <div class="card-media" style="text-align: center;">
                                {!! $products->links('vendor.pagination.bootstrap-4') !!}
                            </div>
                        @else
                            <div class="row">
                                <div class="col-xl-12 col-md-12 col-sm-12" style="text-align: center;">
                                    @include('includes.no_data_found')
                                    <p class="mt-4">No Data Found In This Category!</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<form method="get" action="{{ URL::current() }}" id="filters-form">
    
    <input type="hidden" name="style" class="style" value="{{ $style }}">
    <input type="hidden" name="type" class="type" value="{{ $selected_type }}">
    <input type="hidden" name="sort" class="sort" value="{{ $sort }}">
    <input type="hidden" name="brand" class="brand" value="{{ $selected_brands }}">
    <input type="hidden" name="keyword" class="keyword" value="{{ $query }}">
    <input type="hidden" name="effect" class="effect" value="{{ $selected_effect }}">
</form>
@endsection