@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">
                @if($type === 'designs')
                    Flash Designs
                @elseif($type === 'portfolio')
                    Artist Portfolio
                @else
                    Gallery
                @endif
            </h1>
            <p class="text-gray-600 mt-2">
                @if($type === 'designs')
                    Browse our collection of bookable flash designs
                @elseif($type === 'portfolio')
                    Discover our artists' completed work and styles
                @else
                    Explore our designs and completed work
                @endif
            </p>
        </div>
    </div>

    <!-- Type Tabs -->
    <div class="border-b border-gray-200 mb-6">
        <nav class="-mb-px flex space-x-8">
            <a href="{{ route('gallery.index') }}"
               class="{{ !$type ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                All
            </a>
            <a href="{{ route('gallery.designs') }}"
               class="{{ $type === 'designs' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                Flash Designs
            </a>
            <a href="{{ route('gallery.portfolio') }}"
               class="{{ $type === 'portfolio' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                Portfolio
            </a>
        </nav>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
        <form method="GET" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Search -->
                <div>
                    <label for="search" class="block text-sm font-medium text-gray-700">Search</label>
                    <input type="text" name="search" id="search" value="{{ request('search') }}"
                           placeholder="Search gallery..."
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                </div>

                <!-- Artist Filter -->
                <div>
                    <label for="artist" class="block text-sm font-medium text-gray-700">Artist</label>
                    <select name="artist" id="artist" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                        <option value="">All Artists</option>
                        @foreach($artists as $artist)
                            <option value="{{ $artist->id }}" {{ request('artist') == $artist->id ? 'selected' : '' }}>
                                {{ $artist->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Style Filter -->
                <div>
                    <label for="style" class="block text-sm font-medium text-gray-700">Style</label>
                    <select name="style" id="style" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                        <option value="">All Styles</option>
                        @foreach($styles as $style)
                            <option value="{{ $style }}" {{ request('style') == $style ? 'selected' : '' }}>
                                {{ ucfirst($style) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Body Part Filter -->
                <div>
                    <label for="body_part" class="block text-sm font-medium text-gray-700">Body Part</label>
                    <select name="body_part" id="body_part" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                        <option value="">All Body Parts</option>
                        @foreach($bodyParts as $bodyPart)
                            <option value="{{ $bodyPart }}" {{ request('body_part') == $bodyPart ? 'selected' : '' }}>
                                {{ ucfirst($bodyPart) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Design-specific filters -->
                @if($type === 'designs' || !$type)
                    <div>
                        <label for="size" class="block text-sm font-medium text-gray-700">Size</label>
                        <select name="size" id="size" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                            <option value="">All Sizes</option>
                            @foreach($sizes as $size)
                                <option value="{{ $size }}" {{ request('size') == $size ? 'selected' : '' }}>
                                    {{ ucfirst(str_replace('_', ' ', $size)) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label for="difficulty" class="block text-sm font-medium text-gray-700">Difficulty</label>
                        <select name="difficulty" id="difficulty" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                            <option value="">All Levels</option>
                            @foreach($difficulties as $difficulty)
                                <option value="{{ $difficulty }}" {{ request('difficulty') == $difficulty ? 'selected' : '' }}>
                                    {{ ucfirst($difficulty) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label for="filter" class="block text-sm font-medium text-gray-700">Filter</label>
                        <select name="filter" id="filter" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                            <option value="">All</option>
                            <option value="popular" {{ request('filter') == 'popular' ? 'selected' : '' }}>Popular</option>
                            <option value="trending" {{ request('filter') == 'trending' ? 'selected' : '' }}>Trending</option>
                            <option value="customizable" {{ request('filter') == 'customizable' ? 'selected' : '' }}>Customizable</option>
                        </select>
                    </div>
                @endif
            </div>

            <div class="flex items-center gap-4">
                @if($type === 'portfolio' || !$type)
                    <div class="flex items-center">
                        <input type="checkbox" name="featured" id="featured" value="1"
                               {{ request('featured') ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="featured" class="ml-2 block text-sm text-gray-700">Featured only</label>
                    </div>
                @endif

                <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
                    Apply Filters
                </button>

                <a href="{{ $type ? route('gallery.' . $type) : route('gallery.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    Clear Filters
                </a>
            </div>
        </form>
    </div>

    <!-- Gallery Grid -->
    @if($items->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @foreach($items as $item)
                @if($item->isDesign())
                    @include('gallery.partials.design-card', ['design' => $item])
                @else
                    @include('gallery.partials.portfolio-card', ['portfolio' => $item])
                @endif
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="mt-8">
            {{ $items->links() }}
        </div>
    @else
        <div class="text-center py-12">
            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900">No items found</h3>
            <p class="mt-1 text-sm text-gray-500">Try adjusting your filters.</p>
        </div>
    @endif
</div>
@endsection