@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)

                                    <div
                                    class="col-xl-3 col-md-6 col-12"
                                    data-aos="fade-up"
                                    data-aos-duration="1000"
                                    data-aos-delay="100"
                            >
                                        <div class="product-block">
                                            <div class="block-img">
                                                <img src="{{$product->image_path }}" alt="product" />
                                                <a href="{{route('products-details',['id'=>$product->id , 'slug' => str_replace(' ','-',$product->name)])}}"></a>
                                                <span>
                      <b>{{$product->prefit_price_discount}}%</b>
                      <br />
                                                                      {{ __('main.discount') }}

                    </span>
                                            </div>
                                            <div class="block-info">
{{--                                                <div class="merchant-area">--}}
{{--                                                    {{ __('main.from') }}--}}

{{--                                                    <a href="{{route('my-branchDetials' ,$branches?->id)}}">{{$branches?->name}}</a>--}}
{{--                                                </div>--}}
                                                <div class="product-name">
                                                    {{--                                            <a href="#">{{$discount['name']}}</a>--}}
                                                    <a href="{{route('products-details',['id'=>$product->id , 'slug' => str_replace(' ','-',$product->name)])}}">{{$product->name}}</a>

                                                </div>
                                                <div class="product-footer">
                                                    <div class="product-price">
                                                        <span> {{$product->discount}} <b>{{ __('main.KD') }}</b> </span>
                                                        <span> {{$product->mainprice}}<b>{{ __('main.KD') }}</b> </span>
                                                    </div>
                                                    <button type="button" class="add-to-fav">
                                                        <img src="{{asset('front/images/heart.svg')}}" alt="heart" />
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                            </div>
                            @endforeach

                            @else
                                <div class="alert alert-danger"  style="text-align: center">
                                    <p style="text-align: center">{{ __('main.no_products') }}</p>
                                </div>

                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

@endsection
@push('js')
    <script>
        $(document).ready(function () {
            $('#filter-select').change(function () {
                var filterValue = $(this).val();

                $.ajax({
                    url: window.location.href, // The current route
                    method: 'GET',
                    data: {
                        filter: filterValue
                    },
                    success: function (response) {
                        // Append the filtered products to the DOM, assuming your response is HTML
                        $('#product-list').html(response);
                    },
                    error: function (xhr, status, error) {
                        console.error(error);
                    }
                });
            });
        });

    </script>
@endpush