@extends('frontend.layouts.app', ['title' => 'Shop Page'])

@section('content')
    <x-breadcrumb :items="[
        [
            'label' => 'Shop Page',
            'url' => null,
        ],
    ]" />
    <div class="categories_section">
        <div class="container">
            <div class="row">
                <!-- Left Sidebar for Categories -->
                <div class="col-md-3">
                    <div class="categories_list">
                        <form method="GET" action="{{ url()->current() }}">
                            <h4>Categories</h4>
                            <div class="accordion" id="categoriesAccordion">
                                @foreach ($categories as $category)
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="heading{{ $category->cat_id }}">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapse{{ $category->cat_id }}"
                                                aria-expanded="false" aria-controls="collapse{{ $category->cat_id }}">
                                                {{ $category->title }}
                                            </button>
                                        </h2>
                                        <div id="collapse{{ $category->cat_id }}" class="accordion-collapse collapse"
                                            aria-labelledby="heading{{ $category->cat_id }}"
                                            data-bs-parent="#categoriesAccordion">
                                            <div class="accordion-body">
                                                @foreach ($category->sub_categories as $sub_category)
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="radio" name="category_id"
                                                            value="{{ $sub_category->cat_id }}"
                                                            id="category_{{ $sub_category->cat_id }}"
                                                            {{ request('category_id') == $sub_category->cat_id ? 'checked' : '' }}>
                                                        <label class="form-check-label"
                                                            for="category_{{ $sub_category->cat_id }}">
                                                            {{ $sub_category->title }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            

                            <div class="accordion mt-4" id="attributesAccordion">
                                <h4>Attributes</h4>
                                @foreach ($attributes as $attribute)
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingAttr{{ $attribute->id }}">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#collapseAttr{{ $attribute->id }}" aria-expanded="false"
                                                aria-controls="collapseAttr{{ $attribute->id }}">
                                                {{ $attribute->name }}
                                            </button>
                                        </h2>

                                        <div id="collapseAttr{{ $attribute->id }}" class="accordion-collapse collapse"
                                            aria-labelledby="headingAttr{{ $attribute->id }}"
                                            data-bs-parent="#attributesAccordion">
                                            <div class="accordion-body">
                                                @if ($attribute->name == 'Color')
                                                    <div class="attribute-options d-flex flex-wrap gap-2"
                                                        data-attribute="{{ $attribute->name }}">
                                                        @foreach ($attribute->values as $option)
                                                            <div class="color-swatch"
                                                                style="display: inline-block; margin: 5px;">
                                                                <input type="radio" class="color-swatch-input"
                                                                    name="attributes[{{ $attribute->id }}][]"
                                                                    value="{{ $option->id }}"
                                                                    id="attr_{{ $attribute->id }}_{{ $option->id }}"
                                                                    style="display: none;"
                                                                    {{ in_array($option->id, request()->input("attributes.{$attribute->id}", [])) ? 'checked' : '' }}>
                                                                <!-- Compare by ID -->
                                                                <label for="attr_{{ $attribute->id }}_{{ $option->id }}"
                                                                    class="color-swatch-label"
                                                                    style="background-color: {{ $option->value }}; border: 1px solid #ccc; cursor: pointer; {{ in_array($option->id, request()->input("attributes.{$attribute->id}", [])) ? 'border: 2px solid #000;' : '' }}">
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @else
                                                    @foreach ($attribute->values as $option)
                                                        <div class="form-check mb-2">
                                                            <input type="checkbox" class="form-check-input"
                                                                name="attributes[{{ $attribute->id }}][]"
                                                                value="{{ $option->id }}"
                                                                id="attr_{{ $attribute->id }}_{{ $option->id }}"
                                                                {{ in_array($option->id, request()->input("attributes.{$attribute->id}", [])) ? 'checked' : '' }}>
                                                            <label class="form-check-label"
                                                                for="attr_{{ $attribute->id }}_{{ $option->id }}">
                                                                {{ $option->name }}
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                            <div class="shop_page_button">
                                <button class="btn btn-primary mt-3" type="submit">Filter</button>
                                <button type="button" class="btn btn-secondary mt-2" onclick="resetFilter()">Clear</button>

                            </div>
                        </form>
                    </div>
                </div>

                <!-- Right Section for Products -->
                <div class="col-md-9 shop-page-products">

                    <div class="sorting_elements_div">
                        <form method="GET" action="{{ url()->current() }}" id="sortForm">
                            <div class="sorting_elements">
                                <label for="sort">Sort by:</label>
                                <select name="sort" id="sort"
                                    onchange="document.getElementById('sortForm').submit();">
                                    <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Latest
                                    </option>
                                    <option value="price_low_high"
                                        {{ request('sort') == 'price_low_high' ? 'selected' : '' }}>
                                        Price: Low to High</option>
                                    <option value="price_high_low"
                                        {{ request('sort') == 'price_high_low' ? 'selected' : '' }}>
                                        Price: High to Low</option>
                                    <option value="name_asc" {{ request('sort') == 'name_asc' ? 'selected' : '' }}>Name
                                        (A-Z)
                                    </option>
                                </select>
                            </div>
                        </form>
                    </div>

                    @if ($products->isNotEmpty())
                        <div class="product-card-grid row">
                            @foreach ($products as $product)
                                @php
                                    $isInWishlist = $wishlist->contains('product_id', $product->product_id);
                                @endphp
                                <div class="col-md-3 product-item" data-product-id="{{ $product->product_id }}">
                                    <a href="{{ route('single.product.view', $product->slug) }}">
                                        <div class="product-card">
                                            <img src="{{ asset('storage/' . $product->product_image) }}"
                                                alt="Summer Collection" class="product-card-image">
                                            <div class="wishlist">
                                                <span class="like-icon {{ $isInWishlist ? 'liked' : 'add-to-wishlist' }}"
                                                    title="wishlist"></span>
                                                {{-- <i class="far fa-heart"></i> --}}
                                            </div>
                                            <div class="product-card-info">
                                                <h3 class="product-card-title">{{ $product->product_name }}</h3>
                                                <p class="product-card-subtitle">{{ $product->description }}</p>
                                                <div class="product-card-price">
                                                    <span
                                                        class="current-price">₹{{ number_format($product->base_price, 0) }}</span>
                                                    <span
                                                        class="original-price">₹{{ number_format($product->base_mrp, 0) }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <h1>No Products Found</h1>
                    @endif
                </div> <!-- col-md-9 ends -->
            </div> <!-- row ends -->
        </div> <!-- container_section ends -->
    </div> <!-- categories_section ends -->
    @push('scripts')
        <script>
            function resetFilter() {
                window.location.href = "{{ url()->current() }}";
            }

            $('.color-swatch-input').on('change', function() {
                let $container = $(this).closest('.attribute-options');

                // Remove 'selected' class from all in group
                $container.find('.color-swatch-label').removeClass('attribute-selected-option-class');

                // Add 'selected' class to the selected one
                $container.find('label[for="' + this.id + '"]').addClass('attribute-selected-option-class');
            });

            // Handle checkboxes
            $('.form-check-input').on('change', function() {
                let $label = $('label[for="' + this.id + '"]');
                if ($(this).is(':checked')) {
                    $label.addClass('attribute-selected-option-class');
                } else {
                    $label.removeClass('attribute-selected-option-class');
                }
            });

            // Trigger change on load for pre-selected
            $('.color-swatch-input:checked, .form-check-input:checked').trigger('change');
        </script>
    @endpush
@endsection