@extends('layouts.portal_theme_01')
@section('customcss')
    <style>
    .card-img-top {
        height: 200px; /* Ensures all images are the same height */
        object-fit: cover; /* Maintains aspect ratio and ensures image fills the container */
    }
    .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Aligns content properly inside the card */
    }

    </style>
@endsection
@section('content')

    @include('storefront.menus.filters')

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12  col-lg-3 d-none d-lg-block">
                <div class="card mt-1">
                    <div class="card-body">
                        <div class="filter-section">
                            <h3>Categories</h3>
                            <ul class="collapse show list-unstyled pl-3 ">
                                @foreach($data['categories'] as $category)
                                    <li class="form-check">
                                        <input class="form-check-input category-filter" type="checkbox"
                                               value="{{ $category['code'] }}"
                                               id="{{ trim($category['name']) }}">
                                        <label class="form-check-label fs-6" for="{{ $category['name'] }}">
                                            {{ ucfirst( strtolower($category['name']) ) }}
                                        </label>
                                    </li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="filter-section">
                            <h3>Sub-categories</h3>
                            <ul id="collapseTwo" class="list-unstyled pl-3">
                                <ul class="collapse show list-unstyled pl-3">
                                    @foreach($data['subcategories'] as $subcategory)
                                        <li class="form-check">
                                            <input class="form-check-input subcategory-filter  " type="checkbox"
                                                   value="{{ $subcategory['sub_code'] }}"
                                                   id="{{ $subcategory['sub_name'] }}">
                                            <label class="form-check-label fs-6" for="{{ $subcategory['sub_code'] }}">
                                                {{ ucfirst( strtolower( $subcategory['sub_name'])) }}
                                            </label>
                                        </li>
                                    @endforeach
                                </ul>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 col-lg-9">
{{--                <div class="row">--}}
{{--                    <div class="col-md-6 pb-4">--}}
{{--                        <div class="d-flex">--}}
{{--                            <select class="form-control">--}}
{{--                                <option>Featured</option>--}}
{{--                                <option>A to Z</option>--}}
{{--                                <option>Item</option>--}}
{{--                            </select>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
                <div class="row">
                    @if(count($data['products'] ) > 0)
                    @foreach($data['products'] as $product)
                    <div class="col-sm-16 col-md-6 col-lg-6 col-xl-4">
                        <div class="card mb-4 product-wap rounded-2 shadow">
                            <div class=" rounded-0">
                                @if(!empty($product['images']))
                                    <img class="card-img-top rounded-0" src="{{ $product['images'][0]['image_url'] }}">
                                @endif
                            </div>
                            <div class="card-body">
                                <a href="{{ URL::to('product/'.  strtolower($product['product_id'])  . '/view')  }}" class="h3 text-decoration-none">
                                    {{ $product['product_name'] }}
                                </a>
                                <p class="fs-6">
                                    <i class="bi bi-star-fill text-bg-success fs-6"></i>
                                    <i class="bi bi-star-fill text-bg-success fs-6"></i>
                                    <i class="bi bi-star-fill text-bg-success fs-6"></i>
                                    <i class="bi bi-star-fill text-bg-success fs-6"></i>
                                    <i class="bi bi-star-fill text-bg-success fs-6"></i>
                                </p>
                                <p>
                                    {{ $product['description'] }}
                                </p>

                                <p>
                                @if($product['source_from_idp'] )
                                        🤝 Sourced from genuine a <span class='badge bg-success rounded-pill'>IDP</span>
                                @endif
                                </p>

                                <p class="text-center mb-0">
                                    {{ $product['merchant']['enterprise_name'] }}
                                </p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @else
                        <div class="col-md-10 offset-md-1">
                    <p class="alert alert-info">No product available yet ... </p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')

    <script>

        $(document).ready(function () {
            const urlParams = new URLSearchParams(window.location.search);
            const categories = urlParams.getAll('category[]');
            categories.forEach(function (val) {
                $(`.category-filter[value="${val}"]`).prop('checked', true);
            });
            const subcategories = urlParams.getAll('subcategory[]');
            subcategories.forEach(function (val) {
                $(`.subcategory-filter[value="${val}"]`).prop('checked', true);
            });
        });



        $('.form-check-input').on('change', function () {
            let filters = {
                category: [],
                subcategory: []
            };

            $('.category-filter:checked').each(function () {
                filters.category.push($(this).val());
            });

            $('.subcategory-filter:checked').each(function () {
                filters.subcategory.push($(this).val());
            });
            const params = new URLSearchParams();
            filters.category.forEach(val => params.append('category[]', val));
            filters.subcategory.forEach(val => params.append('subcategory[]', val));
            window.location.href = window.location.pathname + '?' + params.toString();

        });


    </script>

@endsection