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



    <main>

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



        <!-- ---------- banners ----------- -->
        @if(isset($banner))
            @if($banner->active_status)
                <section class="banners-sec6">
                    <div class="container">
                        <div class="row gx-3">
                            @for($i=0;$i<$banner->count_photo;$i++)
                                <div class="col-lg-{{$banner->count_photo == 2 ? ($i == 0 ? '8' : '4') : (12 / $banner->count_photo)}}">
                                    <a @if($banner->photos[$i]->link) href="{{$banner->photos[$i]->link}}"  target="_blank" @endif  class="banner d-block h-100">
                                        <img src="{{asset($banner->photos[$i]->image)}}" alt="" class="img-cover rounded-3">
                                    </a>
                                </div>
                            @endfor
                        </div>
                    </div>
                </section>
            @endif
        @endif


        <!-- ---------- products-page ----------- -->
        <section class="products-pg py-4">
            <div class="container">
                <form id="form" action="{{route('web.product')}}" method="GET" onsubmit="formAction(this)">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="product-filter">
                                <div class="accordion" id="accordionExample">
                                    <div class="accordion-item">
                                        <div class="accordion-header">
                                            <button class="accordion-button filter-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                                                    aria-expanded="true" aria-controls="collapseOne">
                                                <h5> <i class="fas fa-tags me-2 cr-blue"></i> {{__('web.sub_categories')}} </h5>
{{--                                                <a href="#" class="cr-blue ms-3"> مسح </a>--}}
                                            </button>
                                        </div>
                                        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                                <div class="category-filter">
                                                    <div class="accordion" id="category">
                                                        @foreach($main_categories as $key => $category)
                                                        <div class="accordion-item">
                                                            <div class="accordion-header">
                                                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#category{{$category->id}}"
                                                                        aria-expanded="true" aria-controls="category{{$category->id}}">
                                                                    <div> {{$category->title}}</div>
                                                                </button>
                                                            </div>
                                                            <div id="category{{$category->id}}" class="accordion-collapse {{$key == 0 ? 'collapse show' : 'collapse'}} " data-bs-parent="#category{{$category->id}}">
                                                                <div class="accordion-body">
                                                                    <div class="cat-checks">
                                                                        @foreach($category->sub as $row)
                                                                            <div class="form-check">
                                                                                <input class="form-check-input" {{in_array($row->id,($request->sub_category_id ?? [])) ? 'checked' : ''}} onclick="filter()" name="sub_category_id[]" type="checkbox" value="{{$row->id}}" id="cat{{$row->id}}">
                                                                                <label class="form-check-label" for="cat{{$row->id}}"> {{$row->currentDescription->title}} </label>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @if(count($brands))
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button filter-button" type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                <h5> <i class="fas fa-stars me-2 cr-blue"></i> {{__('web.brand')}} </h5>
                                                <!-- <a href="#" class="cr-blue ms-3"> مسح </a> -->
                                            </button>
                                        </h2>
                                        <div id="collapseTwo" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                                            <div class="accordion-body p-4 bg-light1">
                                                <div class="search-form">
                                                    <div class="form-group">
                                                        <button class="icon-btn"> <i class="fal fa-search"></i> </button>
                                                        <input type="text" onchange="filter()" value="{{$request->brand}}" name="brand" class="form-control" placeholder="{{__('web.search_for')}}...">
                                                    </div>
                                                </div>
                                                <div class="num-checks">
                                                    @foreach($brands as $key => $row)
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" {{in_array($key,($request->brand_id ?? [])) ? 'checked' : ''}} onclick="filter()" name="brand_id[]" value="{{$key}}" id="brand{{$key}}">
                                                            <label class="form-check-label" for="brand{{$key}}"> {{$row['title']}} <span class="num"> ({{$row['count']}}) </span> </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    @if(count($offers))
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button filter-button" type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                                <h5> <i class="fas fa-gifts me-2 cr-blue"></i> {{__('web.offers')}} </h5>
                                                <!-- <a href="#" class="cr-blue ms-3"> مسح </a> -->
                                            </button>
                                        </h2>
                                        <div id="collapseFour" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                                            <div class="accordion-body p-4 bg-light1">
                                                <div class="num-checks">
                                                    @foreach($offers as $row)
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" {{in_array($row->id,($request->offer_id ?? [])) ? 'checked' : ''}} onclick="filter()" name="offer_id[]" value="{{$row->id}}" id="offer{{$row->id}}">
                                                        <label class="form-check-label" for="offer{{$row->id}}"> {{$row->title}} <span class="num"> ({{$row->count_products}}) </span> </label>
                                                    </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button filter-button" type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                                <h5> <i class="fas fa-gifts me-2 cr-blue"></i> {{__('web.rate_product')}} </h5>
                                                <!-- <a href="#" class="cr-blue ms-3"> مسح </a> -->
                                            </button>
                                        </h2>
                                        <div id="collapseFive" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                                            <div class="accordion-body p-4 bg-light1">
                                                <div class="num-checks">
                                                    @foreach($rates as $key=>$row)
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" onclick="filter()" {{($key == $request->rate) ? 'checked' : ''}} name="rate" value="{{$key}}" id="rate{{$key}}">
                                                            <label class="form-check-label d-flex" for="rate{{$key}}">
                                                                <div class="stars">
                                                                    @for($i = 0 ; $i < $key;$i++)
                                                                    <i class="fas fa-star active"></i>
                                                                    @endfor
                                                                    @for($i = 0 ; $i < (5-$key);$i++)
                                                                        <i class="fas fa-star"></i>
                                                                    @endfor
                                                                </div>
                                                                <span class="h6 ms-2"> {{$key}} </span>
                                                                <small class="small ms-2"> ({{$row}}) </small>
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="products-content">
                                <div class="products-title mt-5">
                                    <div class="row justify-content-between">
                                        <div class="col-lg-6">
                                            <div class="text d-flex"> {{$products->total()}}  {{__('web.search_result')}}
                                                @if($category_search)
                                                    <h6 class="cr-blue"> "{{$category_search}}" </h6>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group d-flex align-items-center">
                                                <div class="text flex-shrink-0 me-3"> {{__('web.orderBy')}} </div>
                                                <select name="orderBy" onchange="filter()" id="" class="form-control form-select">
                                                    @foreach($orderBy_status as $row)
                                                        <option {{($request->orderBy == $row) ? 'selected' : ''}} value="{{$row}}"> {{__('web.ordetByStatus.'.$row)}} </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="products py-4 bg-transparent">
                                    <div class="content">
                                        <div class="row gx-2">
                                            @foreach($products as $row)
                                                <div class="col-lg-3 col-6">
                                                    @include('web.pages.components.products.card',['product'=>$row])
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    @if(!($products->hasMorePages() == false && $products->currentPage() == 1))
                                        <ul class="pagination justify-content-center mt-4">
                                            @if (!$products->onFirstPage())
                                            <li class="page-item"><a class="page-link" href="{{$products->previousPageUrl().'&'.$params}}"> <i class="fal fa-chevron-right me-1"></i> {{__('web.previous')}} </a></li>
                                            @endif
                                            @foreach ($products->getUrlRange(1, $products->lastPage()) as $page => $url)
                                                <li class="page-item"><a class="page-link num" href="{{$url.'&'.$params}}" >{{ $page }}</a></li>
                                            @endforeach
                                            @if ($products->hasMorePages())
                                                <li class="page-item"><a class="page-link" href="{{$products->nextPageUrl().'&'.$params}}"> {{__('web.next')}} <i class="fal fa-chevron-left ms-1"></i> </a></li>
                                            @endif
                                        </ul>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>



        <!-- ---------- banners ----------- -->
        @include('web.layouts.footer_banner')






    </main>

@endsection
@section('inject_js')
    <script src="{{url('')}}/assets/web/js/custom/products.js"></script>
@endsection