@extends('layouts.storefront')

@section('title', 'Repairs & Services Catalog | Clusterfix Specialists')
@section('meta_description', 'Browse, search, and filter our laboratory-grade repair services by component category or vehicle make.')

@section('content')
    @php
        $currentCategoryName = data_get(collect($categories)->firstWhere('slug', $category), 'name', 'All Categories');
        $hasActiveFilters = count($activeFilters) > 0;
        $featureFields = [
            'express' => '24h Express Delivery',
            'warranty' => 'Lifetime Warranty',
            'popular' => 'Popular Repair',
        ];
    @endphp

    <section class="bg-surface-container-low border-b border-outline-variant py-8 relative">
        <div class="absolute inset-0 tech-grid pointer-events-none opacity-20"></div>
        <div class="max-w-container-max mx-auto px-margin-desktop relative z-10">
            <nav class="flex items-center gap-2 text-xs text-on-surface-variant mb-6" aria-label="Breadcrumb">
                <a href="{{ route('home') }}" class="hover:text-primary transition-colors flex items-center gap-1 font-medium">
                    <span class="material-symbols-outlined text-[16px]">home</span>
                    Home
                </a>
                <span class="material-symbols-outlined text-[12px] text-slate-400">chevron_right</span>
                <a href="{{ route('services.index') }}" class="hover:text-primary transition-colors font-medium">Repair Services</a>
                <span class="material-symbols-outlined text-[12px] text-slate-400">chevron_right</span>
                <span class="text-slate-500 font-semibold" id="breadcrumb-current">{{ $category !== '' ? $currentCategoryName : 'All Categories' }}</span>
            </nav>

            <div class="max-w-3xl">
                <div class="inline-flex items-center gap-2 font-label-md text-label-md text-primary tracking-widest font-bold bg-primary/10 px-3 py-1 rounded-full border border-primary/20 mb-4">
                    <span class="w-1.5 h-1.5 rounded-full bg-primary animate-ping"></span>
                    SERVICES CATALOG LAB
                </div>
                <h1 class="font-display-lg text-display-lg text-gradient font-bold mb-3" id="catalog-title">Automotive Electronics Catalog</h1>
                <p class="font-body-md text-body-md text-on-surface-variant">Browse, search, and filter our laboratory-grade repair services by component category or vehicle make.</p>
            </div>
        </div>
    </section>

    <main class="py-12 bg-background">
        <div class="max-w-container-max mx-auto px-margin-desktop flex flex-col lg:flex-row gap-gutter">
            <aside class="hidden lg:block w-72 shrink-0 space-y-8">
                <div class="bg-surface rounded-2xl border border-outline-variant p-6 shadow-sm">
                    <h3 class="font-headline-sm text-sm uppercase tracking-wider font-bold text-on-surface border-b border-outline-variant/60 pb-3 mb-4">Categories</h3>
                    <div class="space-y-2" id="category-filter-list">
                        <a href="{{ route('services.index', request()->except(['category', 'page'])) }}" class="{{ $category === '' ? 'text-primary font-semibold' : 'text-on-surface-variant hover:text-primary' }} w-full flex justify-between items-center text-body-sm transition-all py-1.5" data-filter-category="all">
                            <span>All Components</span>
                            <span class="{{ $category === '' ? 'bg-primary/10 text-primary' : 'bg-slate-100 text-slate-500' }} text-xs px-2 py-0.5 rounded-full">{{ $summary['services'] }}</span>
                        </a>
                        @foreach ($categories as $item)
                            <a href="{{ route('services.index', array_merge(request()->except(['page']), ['category' => $item['slug']])) }}" class="{{ $category === $item['slug'] ? 'text-primary font-semibold' : 'text-on-surface-variant hover:text-primary' }} w-full flex justify-between items-center text-body-sm transition-all py-1.5" data-filter-category="{{ $item['slug'] }}">
                                <span>{{ $item['name'] }}</span>
                                <span class="{{ $category === $item['slug'] ? 'bg-primary/10 text-primary' : 'bg-slate-100 text-slate-500' }} text-xs px-2 py-0.5 rounded-full">{{ $item['count'] }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>

                <div class="bg-surface rounded-2xl border border-outline-variant p-6 shadow-sm">
                    <h3 class="font-headline-sm text-sm uppercase tracking-wider font-bold text-on-surface border-b border-outline-variant/60 pb-3 mb-4">Vehicle Make</h3>
                    <div class="space-y-2" id="make-filter-list">
                        <a href="{{ route('services.index', request()->except(['make', 'page'])) }}" class="{{ $make === '' ? 'text-primary font-semibold' : 'text-on-surface-variant hover:text-primary' }} w-full flex justify-between items-center text-body-sm transition-all py-1.5" data-filter-make="all">
                            <span>All Makes</span>
                            <span class="{{ $make === '' ? 'bg-primary/10 text-primary' : 'bg-slate-100 text-slate-500' }} text-xs px-2 py-0.5 rounded-full">{{ $summary['services'] }}</span>
                        </a>
                        @foreach ($makes as $item)
                            <a href="{{ route('services.index', array_merge(request()->except(['page']), ['make' => $item['slug']])) }}" class="{{ $make === $item['slug'] ? 'text-primary font-semibold' : 'text-on-surface-variant hover:text-primary' }} w-full flex justify-between items-center text-body-sm transition-all py-1.5" data-filter-make="{{ $item['slug'] }}">
                                <span>{{ $item['name'] }}</span>
                                <span class="{{ $make === $item['slug'] ? 'bg-primary/10 text-primary' : 'bg-slate-100 text-slate-500' }} text-xs px-2 py-0.5 rounded-full">{{ $item['count'] }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>

                <div class="bg-surface rounded-2xl border border-outline-variant p-6 shadow-sm">
                    <h3 class="font-headline-sm text-sm uppercase tracking-wider font-bold text-on-surface border-b border-outline-variant/60 pb-3 mb-4">Repair Features</h3>
                    <form action="{{ route('services.index') }}" method="GET" class="space-y-3">
                        @foreach (request()->except(array_merge(array_keys($featureFields), ['page'])) as $key => $value)
                            @if (is_array($value))
                                @foreach ($value as $nestedValue)
                                    <input type="hidden" name="{{ $key }}[]" value="{{ $nestedValue }}">
                                @endforeach
                            @else
                                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                            @endif
                        @endforeach

                        @foreach ($featureFields as $field => $label)
                            <label class="flex items-center gap-3 cursor-pointer group">
                                <input type="checkbox" name="{{ $field }}" value="1" class="rounded border-outline-variant text-primary focus:ring-primary/20 w-4 h-4" @checked($features[$field]) onchange="this.form.submit()"/>
                                <span class="text-body-sm text-on-surface-variant group-hover:text-on-surface transition-colors">{{ $label }}</span>
                                <span class="ml-auto text-xs bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full">{{ $summary[$field] }}</span>
                            </label>
                        @endforeach

                        <noscript>
                            <button class="w-full bg-primary text-on-primary font-label-md text-label-md py-2 rounded-lg hover:bg-primary-container transition-all">Apply Features</button>
                        </noscript>
                    </form>
                </div>
            </aside>

            <div class="flex-1 space-y-6">
                <div class="bg-surface rounded-2xl border border-outline-variant p-4 flex flex-col md:flex-row items-center justify-between gap-4 shadow-sm">
                    <form action="{{ route('services.index') }}" method="GET" class="w-full md:w-96 flex items-center bg-surface-container-low px-4 py-2.5 rounded-xl border border-outline-variant focus-within:border-primary/50 transition-colors">
                        <input type="hidden" name="category" value="{{ $category }}">
                        <input type="hidden" name="make" value="{{ $make }}">
                        @foreach ($features as $field => $enabled)
                            @if ($enabled)
                                <input type="hidden" name="{{ $field }}" value="1">
                            @endif
                        @endforeach
                        <input type="hidden" name="per_page" value="{{ $summary['per_page'] }}">
                        <span class="material-symbols-outlined text-slate-400 mr-2 text-lg">search</span>
                        <input id="main-catalog-search" name="q" value="{{ $search }}" class="w-full bg-transparent border-none focus:ring-0 text-body-sm text-on-surface placeholder-on-surface-variant/50" placeholder="Search service models, makes, fault description..." type="text"/>
                    </form>

                    <div class="flex items-center gap-4 w-full md:w-auto justify-between md:justify-end">
                        <button id="mobile-filter-trigger" class="lg:hidden flex items-center gap-2 border border-outline-variant hover:border-primary px-4 py-2.5 rounded-xl bg-surface-container-low text-body-sm font-semibold transition-all">
                            <span class="material-symbols-outlined text-lg">filter_list</span>
                            Filters
                        </button>

                        <div class="text-body-sm text-on-surface-variant font-medium">
                            Showing <span id="results-count" class="font-bold text-on-surface">{{ $services->firstItem() ?? 0 }}-{{ $services->lastItem() ?? 0 }}</span> of <span class="font-bold text-on-surface">{{ $summary['services'] }}</span> services
                        </div>
                    </div>
                </div>

                <div id="active-tags-bar" class="flex flex-wrap items-center gap-2 {{ $hasActiveFilters ? '' : 'hidden' }}">
                    <span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Active Filters:</span>
                    <div id="active-tags-container" class="flex flex-wrap gap-2">
                        @foreach ($activeFilters as $filter)
                            <a href="{{ $filter['url'] }}" class="inline-flex items-center gap-1.5 bg-slate-100 text-slate-700 text-xs px-2.5 py-1 rounded-full border border-slate-200 font-medium hover:border-primary hover:text-primary transition-colors">
                                <span>{{ $filter['label'] }}</span>
                                <span class="material-symbols-outlined text-[10px] font-bold">close</span>
                            </a>
                        @endforeach
                    </div>
                    <a href="{{ route('services.index') }}" id="btn-clear-all-filters" class="text-xs text-primary font-bold hover:underline ml-2">Clear All</a>
                </div>

                @if ($services->count() > 0)
                    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-gutter" id="services-grid">
                        @foreach ($services as $service)
                            <x-storefront.service-card :service="$service" />
                        @endforeach
                    </div>
                @else
                    <div id="empty-state" class="bg-surface rounded-2xl border border-outline-variant p-16 text-center">
                        <span class="material-symbols-outlined text-slate-300 text-6xl mb-4">search_off</span>
                        <h4 class="font-headline-md text-on-surface font-bold mb-2">No Matching Services Found</h4>
                        <p class="text-body-sm text-on-surface-variant max-w-md mx-auto">Try updating your filters or search keywords to find the specific repair service you require.</p>
                        <a href="{{ route('services.index') }}" id="btn-empty-reset" class="inline-block bg-primary text-on-primary font-label-md text-label-md px-6 py-3 rounded-lg hover:bg-primary-container mt-6 transition-all glow-button">Reset Search & Filters</a>
                    </div>
                @endif

                @if ($services->hasPages() || $summary['per_page'] < $summary['services'])
                    <div class="pt-8 border-t border-outline-variant/60 flex flex-col sm:flex-row items-center justify-between gap-6" id="pagination-section">
                        @if ($services->hasPages())
                            <div class="flex items-center gap-1.5 flex-wrap justify-center">
                                @if ($services->onFirstPage())
                                    <span class="w-10 h-10 border border-outline-variant bg-surface-container-low text-slate-300 flex items-center justify-center rounded-lg">
                                        <span class="material-symbols-outlined text-lg">chevron_left</span>
                                    </span>
                                @else
                                    <a href="{{ $services->previousPageUrl() }}" class="w-10 h-10 border border-outline-variant bg-surface hover:border-primary text-on-surface flex items-center justify-center rounded-lg transition-colors" rel="prev">
                                        <span class="material-symbols-outlined text-lg">chevron_left</span>
                                    </a>
                                @endif

                                @php
                                    $currentPage = $services->currentPage();
                                    $lastPage = $services->lastPage();
                                    $startPage = max(1, $currentPage - 2);
                                    $endPage = min($lastPage, $currentPage + 2);
                                @endphp

                                @if ($startPage > 1)
                                    <a href="{{ $services->url(1) }}" class="w-10 h-10 border border-outline-variant bg-surface hover:border-primary text-on-surface flex items-center justify-center rounded-lg transition-colors">1</a>
                                    @if ($startPage > 2)
                                        <span class="w-10 h-10 text-slate-400 flex items-center justify-center">...</span>
                                    @endif
                                @endif

                                @for ($page = $startPage; $page <= $endPage; $page++)
                                    @if ($page === $currentPage)
                                        <span class="w-10 h-10 bg-primary text-on-primary flex items-center justify-center rounded-lg font-bold">{{ $page }}</span>
                                    @else
                                        <a href="{{ $services->url($page) }}" class="w-10 h-10 border border-outline-variant bg-surface hover:border-primary text-on-surface flex items-center justify-center rounded-lg transition-colors">{{ $page }}</a>
                                    @endif
                                @endfor

                                @if ($endPage < $lastPage)
                                    @if ($endPage < $lastPage - 1)
                                        <span class="w-10 h-10 text-slate-400 flex items-center justify-center">...</span>
                                    @endif
                                    <a href="{{ $services->url($lastPage) }}" class="w-10 h-10 border border-outline-variant bg-surface hover:border-primary text-on-surface flex items-center justify-center rounded-lg transition-colors">{{ $lastPage }}</a>
                                @endif

                                @if ($services->hasMorePages())
                                    <a href="{{ $services->nextPageUrl() }}" class="w-10 h-10 border border-outline-variant bg-surface hover:border-primary text-on-surface flex items-center justify-center rounded-lg transition-colors" rel="next">
                                        <span class="material-symbols-outlined text-lg">chevron_right</span>
                                    </a>
                                @else
                                    <span class="w-10 h-10 border border-outline-variant bg-surface-container-low text-slate-300 flex items-center justify-center rounded-lg">
                                        <span class="material-symbols-outlined text-lg">chevron_right</span>
                                    </span>
                                @endif
                            </div>
                        @endif

                        @if ($summary['per_page'] < $summary['services'])
                            <a id="btn-load-more" href="{{ route('services.index', array_merge(request()->except(['page', 'per_page']), ['per_page' => min($summary['per_page'] + 12, $summary['services'])])) }}" class="inline-flex items-center gap-2 border border-outline-variant hover:border-primary px-6 py-3 rounded-xl bg-surface hover:bg-surface-dim font-label-md text-label-md text-on-surface transition-all">
                                <span>Load More Services</span>
                            </a>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    </main>

    <div id="mobile-filter-drawer" class="fixed inset-0 z-50 transform -translate-x-full transition-transform duration-300 ease-in-out lg:hidden" aria-modal="true" role="dialog">
        <div id="mobile-filter-backdrop" class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm opacity-0 transition-opacity duration-300"></div>

        <form action="{{ route('services.index') }}" method="GET" class="absolute inset-y-0 left-0 w-80 max-w-[85vw] bg-surface flex flex-col h-full shadow-2xl relative z-10">
            <div class="p-6 border-b border-outline-variant/60 flex items-center justify-between">
                <h3 class="font-headline-sm text-lg font-bold text-on-surface">Filters</h3>
                <button type="button" id="mobile-filter-close" class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 hover:text-on-surface">
                    <span class="material-symbols-outlined text-lg">close</span>
                </button>
            </div>

            <div class="flex-1 overflow-y-auto p-6 space-y-8">
                <input type="hidden" name="q" value="{{ $search }}">
                <input type="hidden" name="per_page" value="{{ $summary['per_page'] }}">

                <div class="space-y-4">
                    <h4 class="font-label-md text-xs uppercase font-bold text-slate-500 tracking-wider">Categories</h4>
                    <div class="space-y-2">
                        <label class="flex items-center justify-between text-body-sm py-2 px-3 rounded-lg {{ $category === '' ? 'bg-primary/10 text-primary font-semibold' : 'text-on-surface-variant' }}">
                            <span>All Components</span>
                            <input type="radio" name="category" value="" class="text-primary focus:ring-primary/20" @checked($category === '')>
                        </label>
                        @foreach ($categories as $item)
                            <label class="flex items-center justify-between text-body-sm py-2 px-3 rounded-lg {{ $category === $item['slug'] ? 'bg-primary/10 text-primary font-semibold' : 'text-on-surface-variant' }}">
                                <span>{{ $item['name'] }}</span>
                                <input type="radio" name="category" value="{{ $item['slug'] }}" class="text-primary focus:ring-primary/20" @checked($category === $item['slug'])>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div class="space-y-4">
                    <h4 class="font-label-md text-xs uppercase font-bold text-slate-500 tracking-wider">Vehicle Makes</h4>
                    <div class="space-y-2">
                        <label class="flex items-center justify-between text-body-sm py-2 px-3 rounded-lg {{ $make === '' ? 'bg-primary/10 text-primary font-semibold' : 'text-on-surface-variant' }}">
                            <span>All Makes</span>
                            <input type="radio" name="make" value="" class="text-primary focus:ring-primary/20" @checked($make === '')>
                        </label>
                        @foreach ($makes as $item)
                            <label class="flex items-center justify-between text-body-sm py-2 px-3 rounded-lg {{ $make === $item['slug'] ? 'bg-primary/10 text-primary font-semibold' : 'text-on-surface-variant' }}">
                                <span>{{ $item['name'] }}</span>
                                <input type="radio" name="make" value="{{ $item['slug'] }}" class="text-primary focus:ring-primary/20" @checked($make === $item['slug'])>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div class="space-y-4">
                    <h4 class="font-label-md text-xs uppercase font-bold text-slate-500 tracking-wider">Repair Features</h4>
                    <div class="space-y-3">
                        @foreach ($featureFields as $field => $label)
                            <label class="flex items-center gap-3 cursor-pointer group">
                                <input type="checkbox" name="{{ $field }}" value="1" class="rounded border-outline-variant text-primary focus:ring-primary/20 w-4 h-4" @checked($features[$field])>
                                <span class="text-body-sm text-on-surface-variant">{{ $label }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="p-6 border-t border-outline-variant/60 bg-surface-container-low flex gap-3">
                <button id="mobile-btn-apply" class="flex-1 bg-primary text-on-primary font-label-md text-label-md py-3 rounded-lg hover:bg-primary-container text-center font-semibold">Apply Filters</button>
                <a href="{{ route('services.index') }}" id="mobile-btn-reset" class="px-4 py-3 border border-outline-variant rounded-lg hover:bg-slate-100 font-label-md text-label-md text-on-surface-variant">Reset</a>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const drawer = document.getElementById('mobile-filter-drawer');
            const backdrop = document.getElementById('mobile-filter-backdrop');
            const trigger = document.getElementById('mobile-filter-trigger');
            const close = document.getElementById('mobile-filter-close');

            if (!drawer || !backdrop || !trigger || !close) {
                return;
            }

            const openDrawer = () => {
                drawer.classList.remove('-translate-x-full');
                backdrop.classList.remove('opacity-0');
            };

            const closeDrawer = () => {
                drawer.classList.add('-translate-x-full');
                backdrop.classList.add('opacity-0');
            };

            trigger.addEventListener('click', openDrawer);
            close.addEventListener('click', closeDrawer);
            backdrop.addEventListener('click', closeDrawer);
        });
    </script>
@endpush