@extends('web.layouts.layout')
@section('content')


    <main>
        <!-- Start pg_header -->
        @include('web.pages.components.header.header')

        <!-- Start section -->

        <section class="products_pg products_sec section">
            <div class="container">
                <form id="filter">
                    <div class="row">
                        <input type="hidden" name="page" id="page" value="1">
                        <div class="col-lg-3">
                            <div class="categ_box mb-5">
                                @isset($category)
                                    <input type="hidden" name="main_category_id" value="{{$category->id}}">
                                @endisset
                                @foreach($categories as $category_row)
                                    <div class="item">
                                        <button class="categ_title" type="button" data-bs-toggle="collapse" data-bs-target="#collapsecCteg{{$category_row->id}}" aria-expanded="true" aria-controls="collapsecCteg{{$category_row->id}}">
                                            {{$category_row->title}}
                                        </button>
                                        <div class="collapse show" id="collapsecCteg{{$category_row->id}}">
                                            <div class="ps-2 pt-3">
                                                <div class="checks">
                                                    @foreach($category_row->sub as $row)
                                                        <div class="form-check">
                                                            <input class="choice_choice form-check-input" onclick="filter()" name="sub_ids[]" type="checkbox" value="{{$row->id}}" id="categCheck{{$row->id}}">
                                                            <label class="form-check-label" for="categCheck{{$row->id}}">
                                                                {{$row->currentDescription->title}}
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="filter_box mb-5">
                                <div class="title_box d-flex align-items-center justify-content-between">
                                    <h5 class="title fw-bold text-white mb-0">{{__('web.filter_search')}}</h5>
                                    <button type="button" onclick="clearFilter()" class="del_link underline text-white"> <small> {{__('web.delete_filter')}}  </small></button>
                                </div>
                                <div class="card-body">
                                    <form class="form">
                                        <div class="item">
                                            <a class="collapse_title" data-bs-toggle="collapse" href="#collapseFilter1" role="button" aria-expanded="true" aria-controls="collapseFilter1">
                                                {{__('web.size')}}
                                            </a>
                                            <div class="collapse show" id="collapseFilter1">
                                                <div class="collapse_body">
                                                    <div class="checkboxes">
                                                        @foreach($sizes as $size)
                                                        <div class="form-check mb-2">
                                                            <input class="choice_choice form-check-input" onclick="filter()" name="size_ids[]" type="checkbox" value="{{$size->id}}" id="sizeCheck{{$size->id}}">
                                                            <label class="form-check-label" for="sizeCheck{{$size->id}}">
                                                                {{$size->title}}
                                                            </label>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="item">
                                            <a class="collapse_title" data-bs-toggle="collapse" href="#collapseFilter6" role="button" aria-expanded="false" aria-controls="collapseFilter6">
                                                {{__('web.color')}}
                                            </a>
                                            <div class="collapse" id="collapseFilter6">
                                                <div class="collapse_body">
                                                    <div class="checkboxes">
                                                        @foreach($colors as $color)
                                                            <div class="form-check mb-2">
                                                                <input class="choice_choice form-check-input" onclick="filter()" name="color_ids[]" type="checkbox" value="{{$color->id}}" id="colorCheck{{$color->id}}">
                                                                <label class="form-check-label" for="colorCheck{{$color->id}}">
                                                                    {{$color->title}}
                                                                </label>
                                                            </div>
                                                        @endforeach

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <a class="collapse_title" data-bs-toggle="collapse" href="#collapseFilter5" role="button" aria-expanded="false" aria-controls="collapseFilter5">
                                                {{__('web.cost')}}
                                            </a>
                                            <div class="collapse" id="collapseFilter5">

                                                <div class="collapse_body">
                                                    <div class="price-wrapper">
                                                        <!-- <div id="slider-range" class="price-filter-range" name="rangeInput"></div> -->
                                                        <div class="inputs-wrapper mt-3">
                                                            <input type="" onkeyup="filter()" name="min_cost" min=0 max="9900" placeholder="0" class="inputs_value price-range-field digitsOnly" />
                                                            <input type="" onkeyup="filter()"name="max_cost" min=0 max="10000" placeholder="10000" class="inputs_value price-range-field digitsOnly" />
                                                            <span class="currency_title">ر.س</span>
                                                        </div>


                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="">
                                <div class="search_filter border-bottom pb-4 mb-5 mt-2">
                                        <div class="row justify-content-between align-items-center">
                                            @isset($category)
                                                <div class="col-lg-4 col-6">
                                                    <h1 class="fw-bold color-primary text-uppercase mb-0 px-1"> {{$category->title}} </h1>
                                                </div>
                                            @endisset
                                            <div class="col-lg-3 col-6">
                                                <div class="form-group">
                                                    <select name="orderBy" onchange="filter()" class="form-control form-select selectItem">
                                                        <option selected value="">{{__('web.orderBy')}}</option>
                                                        <option value="priceDesc">{{__('web.priceDesc')}}</option>
                                                        <option value="priceAsc">{{__('web.priceAsc')}}</option>
                                                        <option value="rate">{{__('web.rate')}}</option>
                                                        <option value="newest">{{__('web.newest')}}</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                            </div>
                            <div id="products"></div>
                        </div>
                    </div>
                </form>
            </div>
        </section>

    </main>

@endsection
@section('inject_js')
    <script>
        let url_category = "{{route('web.fetch.categories')}}"
        let url_filter = "{{route('web.filter')}}"
    </script>
    <script src="{{url('')}}/assets/web/js/custom/products.js"></script>
@endsection
