@extends('frontend.layouts.app')

@section('title', t('frontend.designer.index_title'))

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8" x-data="{ activeCategory: null }">
    <h1 class="text-3xl font-bold text-gray-800 mb-2">@t('frontend.designer.choose_model')</h1>
    <p class="text-gray-500 mb-8">@t('frontend.designer.choose_model_desc')</p>

    {{-- Category filter --}}
    @if($categories->count() > 1)
    <div class="flex flex-wrap gap-2 mb-8">
        <button
            @click="activeCategory = null"
            :class="activeCategory === null ? 'bg-gray-800 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'"
            class="px-4 py-2 rounded-full text-sm font-medium border border-gray-300 transition-colors">
            @t('frontend.designer.all_categories')
        </button>
        @foreach($categories as $category)
        <button
            @click="activeCategory = {{ $category->id }}"
            :class="activeCategory === {{ $category->id }} ? 'bg-gray-800 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'"
            class="px-4 py-2 rounded-full text-sm font-medium border border-gray-300 transition-colors">
            {{ $category->name }}
        </button>
        @endforeach
    </div>
    @endif

    {{-- Model cards grouped by category --}}
    @foreach($categories as $category)
    <div x-show="activeCategory === null || activeCategory === {{ $category->id }}" x-cloak>
        <h2 class="text-xl font-semibold text-gray-700 mb-4">{{ $category->name }}</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-10">
            @foreach($category->models as $model)
            <a href="{{ route('frontend.designer.show', $model) }}"
               class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow group">
                {{-- Model image --}}
                <div class="aspect-square bg-gray-100 flex items-center justify-center">
                    @if($model->image)
                        <img src="{{ asset('storage/' . $model->image) }}"
                             alt="{{ $model->name }}"
                             class="w-full h-full object-cover group-hover:scale-105 transition-transform">
                    @else
                        <svg class="w-16 h-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                  d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                        </svg>
                    @endif
                </div>

                {{-- Model info --}}
                <div class="p-4">
                    <span class="text-xs text-gray-400 uppercase tracking-wide">{{ $category->name }}</span>
                    <h3 class="text-lg font-semibold text-gray-800 mt-1">{{ $model->name }}</h3>
                    <p class="text-sm text-gray-500 mt-1">
                        @t('frontend.designer.starting_from')
                        <span class="font-semibold text-gray-800">{{ number_format($model->base_price, 2) }} ₺</span>
                    </p>
                </div>
            </a>
            @endforeach
        </div>
    </div>
    @endforeach

    {{-- Empty state --}}
    @if($categories->isEmpty())
    <div class="text-center py-16 text-gray-400">
        <p class="text-lg">@t('frontend.designer.no_models')</p>
    </div>
    @endif
</div>
@endsection