@extends('front.layout.app')
@section('content')
    <style>
        .storeBox figure {
            width: 100%;
            height: 250px; /* Adjust the height as needed */
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .storeBox img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures images keep their aspect ratio */
        }

    </style>
    <section class="innerBanner">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <div class="mainContent">
                        <h1>Store</h1>
                    </div>
                </div>
            </div>
        </div>
        <img src="{{asset('assets/images/innerbanimg.png')}}" class="img-fluid mainImg" alt="">
    </section>

    <section class="storeInner">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="categoryFlex">
                        <div class="categoryWraps">
                            <span>Shop by categories: </span>
                            <select onchange="redirectToCategory(this)">
                                <option value="">All</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name ?? '' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

{{--                        <div class="shortBy">--}}
{{--                            <span>Short by :</span>--}}
{{--                            <select>--}}
{{--                                <option>Featured</option>--}}
{{--                            </select>--}}
{{--                        </div>--}}
                    </div>
                </div>

                @if($products->isNotEmpty())
                    @foreach($products as $product)
                        <div class="col-md-3">
                            <div class="storeBox">
                                <figure>
                                    <a href="{{route('store.detail.front',$product->id)}}"><img
                                            src="{{asset('data/product_images/'.($product->image ?? ''))}}"
                                            class="img-fluid" alt=""></a>
                                </figure>

                                <div class="storeContent">
                                    <h3>{{$product->name ?? ''}}<br>
                                    </h3>
                                    <span>${{$product->price ?? ''}}.00</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="col-md-3">
                        <div class="storeBox">
                            <p style="color: white">No Product Found</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>

@endsection
@push('script')
    <script>
        function redirectToCategory(selectElement) {
            const categoryId = selectElement.value;

                const url = categoryId ? `{{ route('store.front', '') }}/${categoryId}` : `{{ route('store.front') }}`;
                window.location.href = url; // Redirect to the constructed URL

        }
    </script>

@endpush