@php
use Botble\Ecommerce\Models\Brand;
use Botble\Ecommerce\Models\ProductAttributeSet;
use Botble\Base\Enums\BaseStatusEnum;

// Get brands
$brands = [];
try {
    $brands = Brand::where('status', 'published')->orderBy('order', 'asc')->get();
} catch (\Exception $e) {}

// Get tyre size attributes
$widthSet = null;
$profileSet = null;
$diameterSet = null;

try {
    // Get the attribute sets for width, profile, diameter (order 0,1,2)
    $attributeSets = ProductAttributeSet::with(['attributes' => function($query) {
        $query->orderBy('order', 'asc');
    }])
    ->where('status', BaseStatusEnum::PUBLISHED)
    ->where('is_searchable', 1)
    ->orderBy('order', 'asc')
    ->get();

    // Find our three size-related attribute sets
    // Prefer using attribute set 'order' (1 => width, 2 => profile, 3 => diameter)
    foreach ($attributeSets as $set) {
        if ($set->order === 1) {
            $widthSet = $set;
            continue;
        }

        if ($set->order === 2) {
            $profileSet = $set;
            continue;
        }

        if ($set->order === 3) {
            $diameterSet = $set;
            continue;
        }
    }

    // Fallback by title matching if not found by order
    if (! $widthSet || ! $profileSet || ! $diameterSet) {
        foreach ($attributeSets as $set) {
            $title = strtolower($set->title);
            if (! $widthSet && in_array($title, ['width', 'tyre width'])) {
                $widthSet = $set;
            }
            if (! $profileSet && in_array($title, ['profile', 'tyre profile', 'size'])) {
                $profileSet = $set;
            }
            if (! $diameterSet && in_array($title, ['diameter', 'tyre diameter', 'rim size'])) {
                $diameterSet = $set;
            }
        }
    }
} catch (\Exception $e) {}
@endphp

<div class="tyre-search container py-2">
    <div class="row">
        <div class="col-lg-2 col-sm-1 col-12"></div>
        <div class="col-lg-12 col-sm-10 col-12 text-center mt-50">
            <h2 class="text-heading-1 color-gray-900">Queenslands Cheapest Tyre Wholesaler</span></h2>
            <h5 class="text-body-lead-large color-gray-600 mt-20">buy tyres online, save money, time and energy </h5>
            <h5 class="text-body-lead-large color-gray-600 mt-0">  Pick Up in Store or Next Day Delivery</h5>
            <h4 class="custom-text mt-20"> How We Work </h4>
            <h5 class="text-body-lead-large color-gray-600 mt-20 mb-20"> It's easy as 1,2,3. Just enter your tyre size, pick a tyre and order! </h5>
        </div>
        <div class="col-lg-2 col-sm-1 col-12"></div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="pl-24">
                <ul class="nav nav-pills justify-content-center" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#search-by-size" type="button" role="tab">
                            Search by Size
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="pill" data-bs-target="#search-by-brand" type="button" role="tab">
                            Search by Brand
                        </button>
                    </li>
                </ul>
            </div>

            <div class="tab-content">
                <div class="tab-pane fade show active" id="search-by-size" role="tabpanel">
                    <form method="GET" action="{{ route('public.products') }}" class="d-flex flex-wrap flex-column">
                        
                        @if($widthSet)
                        <div class="mb-3">
                            <label class="form-label">Width</label>
                            <select name="attributes[{{ $widthSet->slug }}][]" class="form-select select2-search" data-placeholder="Select Width">
                                <option value="">Select Width</option>
                                @foreach($widthSet->attributes as $attr)
                                    <option value="{{ $attr->id }}" 
                                        {{ in_array($attr->id, (array)request()->input('attributes.' . $widthSet->slug, [])) ? 'selected' : '' }}>
                                        {{ $attr->title }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @endif

                        @if($profileSet)
                        <div class="mb-3">
                            <label class="form-label">Profile</label>
                            <select name="attributes[{{ $profileSet->slug }}][]" class="form-select select2-search" data-placeholder="Select Profile">
                                <option value="">Select Profile</option>
                                @foreach($profileSet->attributes as $attr)
                                    <option value="{{ $attr->id }}"
                                        {{ in_array($attr->id, (array)request()->input('attributes.' . $profileSet->slug, [])) ? 'selected' : '' }}>
                                        {{ $attr->title }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @endif

                        @if($diameterSet)
                        <div class="mb-3">
                            <label class="form-label">Diameter</label>
                            <select name="attributes[{{ $diameterSet->slug }}][]" class="form-select select2-search" data-placeholder="Select Diameter">
                                <option value="">Select Diameter</option>
                                @foreach($diameterSet->attributes as $attr)
                                    <option value="{{ $attr->id }}"
                                        {{ in_array($attr->id, (array)request()->input('attributes.' . $diameterSet->slug, [])) ? 'selected' : '' }}>
                                        {{ $attr->title }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @endif

                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary btn-p fs-14">Search Tyres</button>
                        </div>
                    </form>
                </div>

                <div class="tab-pane fade" id="search-by-brand" role="tabpanel">
                    <form method="GET" action="{{ route('public.products') }}" class="d-flex flex-wrap flex-column">                        
                        <div class="mb-3">
                            <label class="form-label">Select Brand</label>
                            <select name="brands[]" class="form-select select2-search" data-placeholder="Choose a brand">
                                <option value="">Choose a brand</option>
                                @foreach($brands as $brand)
                                    <option value="{{ $brand->id }}" {{ in_array($brand->id, (array)request()->input('brands', [])) ? 'selected' : '' }}>
                                        {{ $brand->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary btn-p fs-14">Search Tyres</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-6 mt-30">
            <img src="{{ asset('assets/images/tyre-code.png') }}" class="img-fluid rounded" alt="Tyre Code Guide">
        </div>
    </div>
    
</div>
<style>
    .ck-content ul {
        list-style-type: none;
    }
    .select2-container {
        box-sizing: border-box;
        display: inline-block;
        margin: 0;
        position: relative;
        vertical-align: middle;
        border: 1px solid #ced4da;
        border-radius: .375rem;
        padding: 0.2rem 1.25rem .2rem .75rem;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 3px;
        right: 10px;
    }
    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-left: 0px;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #F7F7F7;
    }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Bootstrap tabs
    const triggerTabList = [].slice.call(document.querySelectorAll('.nav-pills button'))
    triggerTabList.forEach(function (triggerEl) {
        const tabTrigger = new bootstrap.Tab(triggerEl)
        triggerEl.addEventListener('click', function (event) {
            event.preventDefault()
            tabTrigger.show()
        })
    })
    
    // Initialize Select2
    if (typeof jQuery !== 'undefined' && jQuery.fn.select2) {
        jQuery('.select2-search').select2({
            placeholder: function() {
                return jQuery(this).data('placeholder');
            },
            allowClear: true,
            width: '100%'
        });
    }
})
</script>