@extends('front.layout.master')

@section('content')

    <main class="main-content">
        <div class="category-wrap">
            <div class="container">
                <div class="g-head">
                    <h3>{{$category->name}}</h3>
                    <ul style="display: none">
                        <li>
                            <a href="#">{{ __('main.main_section') }}</a>
                        </li>
                        <li>{{ __('main.sub_section') }}</li>

                    </ul>
                    <div class="left">
                        <button type="button" class="filter-trigger btn">
                            <img src="{{asset('front/images/filter.svg')}}" alt="filter" />
                            {{ __('main.filter') }}
                        </button>
                        <div class="filter-select-wrap">
                            <img src="{{asset('front/images/sort.svg')}}" alt="sort" />
                            <select class="form-select form-control" onchange="window.location.href=this.value;">
                                <option value="{{ route('get-categories', ['id' => $category->id]) }}">{{ __('main.sort_by') }}</option>
                                <option value="{{ route('get-categories', ['id' => $category->id, 'sort' => 'price_asc']) }}">{{ __('main.price_asc') }}</option>
                                <option value="{{ route('get-categories', ['id' => $category->id, 'sort' => 'price_desc']) }}">{{ __('main.price_desc') }}</option>
                                <option value="{{ route('get-categories', ['id' => $category->id, 'sort' => 'newest']) }}">{{ __('main.newest') }}</option>
                            </select>

                        </div>
                    </div>
                </div>
                <div class="row">
{{--                    <div class="col-lg-3 col-12">--}}
{{--                        <div class="filter-sidebar">--}}
{{--                            <button type="button" class="close-sidebar">--}}
{{--                                <span></span>--}}
{{--                                <span></span>--}}
{{--                            </button>--}}
{{--                            <div class="accordion" id="filter-accordion">--}}
{{--                                <div class="accordion-item">--}}
{{--                                    <button--}}
{{--                                            class="accordion-button"--}}
{{--                                            type="button"--}}
{{--                                            data-bs-toggle="collapse"--}}
{{--                                            data-bs-target="#item-1"--}}
{{--                                    >--}}
{{--                                        حسب المنتج--}}
{{--                                    </button>--}}
{{--                                    <div--}}
{{--                                            id="item-1"--}}
{{--                                            class="accordion-collapse collapse show"--}}
{{--                                            data-bs-parent="#filter-accordion"--}}
{{--                                    >--}}
{{--                                        <div class="accordion-body">--}}
{{--                                            <ul>--}}
{{--                                                <li>--}}
{{--                                                    <label>--}}
{{--                                                        <input type="checkbox" />--}}
{{--                                                        <span>كيك</span>--}}
{{--                                                    </label>--}}
{{--                                                </li>--}}
{{--                                                <li>--}}
{{--                                                    <label>--}}
{{--                                                        <input type="checkbox" />--}}
{{--                                                        <span>كب كيك</span>--}}
{{--                                                    </label>--}}
{{--                                                </li>--}}
{{--                                                <li>--}}
{{--                                                    <label>--}}
{{--                                                        <input type="checkbox" />--}}
{{--                                                        <span>شوكولاتة</span>--}}
{{--                                                    </label>--}}
{{--                                                </li>--}}
{{--                                                <li>--}}
{{--                                                    <label>--}}
{{--                                                        <input type="checkbox" />--}}
{{--                                                        <span>فواكه</span>--}}
{{--                                                    </label>--}}
{{--                                                </li>--}}
{{--                                            </ul>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="accordion-item">--}}
{{--                                    <button--}}
{{--                                            class="accordion-button collapsed"--}}
{{--                                            type="button"--}}
{{--                                            data-bs-toggle="collapse"--}}
{{--                                            data-bs-target="#item-2"--}}
{{--                                    >--}}
{{--                                        الماركات--}}
{{--                                    </button>--}}
{{--                                    <div--}}
{{--                                            id="item-2"--}}
{{--                                            class="accordion-collapse collapse"--}}
{{--                                            data-bs-parent="#filter-accordion"--}}
{{--                                    >--}}
{{--                                        <div class="accordion-body">--}}
{{--                                            <ul>--}}
{{--                                                <li>--}}
{{--                                                    <label>--}}
{{--                                                        <input type="checkbox" />--}}
{{--                                                        <span>كيك</span>--}}
{{--                                                    </label>--}}
{{--                                                </li>--}}
{{--                                                <li>--}}
{{--                                                    <label>--}}
{{--                                                        <input type="checkbox" />--}}
{{--                                                        <span>كب كيك</span>--}}
{{--                                                    </label>--}}
{{--                                                </li>--}}
{{--                                                <li>--}}
{{--                                                    <label>--}}
{{--                                                        <input type="checkbox" />--}}
{{--                                                        <span>شوكولاتة</span>--}}
{{--                                                    </label>--}}
{{--                                                </li>--}}
{{--                                                <li>--}}
{{--                                                    <label>--}}
{{--                                                        <input type="checkbox" />--}}
{{--                                                        <span>فواكه</span>--}}
{{--                                                    </label>--}}
{{--                                                </li>--}}
{{--                                            </ul>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <button type="button" class="btn reset-filter">--}}
{{--                                اعادة تعيين الفلتر--}}
{{--                            </button>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                    <div class="col-lg-12col-12">
                        <div class="row">
                            @if($products->count() > 0)
                                @foreach($products as $product)