@extends('crm.layouts.app')

@section('title', 'Gallery Management')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Page Header -->
    <div class="sm:flex sm:items-center sm:justify-between">
        <div class="min-w-0 flex-1">
            <h1 class="text-2xl font-semibold text-gray-900">Gallery Management</h1>
            <p class="mt-2 text-sm text-gray-700">
                Manage your {{ $type === 'designs' ? 'flash designs' : 'portfolio pieces' }} and showcase your work.
            </p>
        </div>
        <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
            <a href="{{ route('crm.gallery.create', ['type' => $type === 'designs' ? 'design' : 'portfolio']) }}"
               class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                    <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                </svg>
                Add {{ $type === 'designs' ? 'Design' : 'Portfolio Piece' }}
            </a>
        </div>
    </div>

    <!-- Type Tabs -->
    <div class="mt-8 border-b border-gray-200">
        <nav class="-mb-px flex space-x-8">
            <a href="{{ route('crm.gallery.manage', ['type' => 'designs']) }}"
               class="@if($type === 'designs') border-indigo-500 text-indigo-600 @else border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 @endif whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium">
                Flash Designs
            </a>
            <a href="{{ route('crm.gallery.manage', ['type' => 'portfolio']) }}"
               class="@if($type === 'portfolio') border-indigo-500 text-indigo-600 @else border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 @endif whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium">
                Portfolio
            </a>
        </nav>
    </div>

    <!-- Filters -->
    <div class="mt-6">
        <div class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-4">
            <!-- Search -->
            <div>
                <label class="block text-sm font-medium text-gray-900">Search</label>
                <form method="GET" class="mt-2">
                    <input type="hidden" name="type" value="{{ $type }}">
                    <input type="hidden" name="artist" value="{{ request('artist') }}">
                    <input type="hidden" name="style" value="{{ request('style') }}">
                    <input type="hidden" name="status" value="{{ request('status') }}">
                    <input type="text"
                           name="search"
                           value="{{ request('search') }}"
                           placeholder="Search gallery..."
                           class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
                           onchange="this.form.submit()">
                </form>
            </div>

            <!-- Artist Filter (same as before) -->
            <div x-data="{
                open: false,
                selected: '{{ request('artist', '') }}',
                artists: {{ Illuminate\Support\Js::from($artists->map(fn ($a) => ['id' => $a->id, 'name' => $a->name])) }},
                getLabel() {
                    if (!this.selected) return 'All Artists';
                    const artist = this.artists.find(a => a.id == this.selected);
                    return artist ? artist.name : 'All Artists';
                },
                selectArtist(artistId) {
                    this.selected = artistId;
                    this.open = false;
                    this.$refs.form.submit();
                }
            }">
                <label class="block text-sm font-medium text-gray-900">Artist</label>
                <form x-ref="form" method="GET" class="mt-2">
                    <input type="hidden" name="type" value="{{ $type }}">
                    <input type="hidden" name="artist" :value="selected">
                    <input type="hidden" name="style" value="{{ request('style') }}">
                    <input type="hidden" name="status" value="{{ request('status') }}">
                    <input type="hidden" name="search" value="{{ request('search') }}">

                    <div class="relative">
                        <button type="button"
                                @click="open = !open"
                                @click.away="open = false"
                                class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                            <span x-text="getLabel()" :class="{ 'text-gray-400': !selected }"></span>
                            <svg viewBox="0 0 20 20" fill="currentColor" class="-mr-1 size-5 text-gray-400">
                                <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" />
                            </svg>
                        </button>

                        <div x-show="open"
                             x-transition
                             class="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg outline-1 outline-black/5"
                             style="display: none;">
                            <div class="py-1">
                                <button type="button"
                                        @click="selectArtist('')"
                                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                        :class="{ 'bg-gray-100': selected === '' }">
                                    All Artists
                                </button>
                                <template x-for="artist in artists" :key="artist.id">
                                    <button type="button"
                                            @click="selectArtist(artist.id)"
                                            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                            :class="{ 'bg-gray-100': selected == artist.id }">
                                        <span x-text="artist.name"></span>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Style Filter -->
            <div x-data="{
                open: false,
                selected: '{{ request('style', '') }}',
                options: {
                    '': 'All Styles',
                    'traditional': 'Traditional',
                    'realism': 'Realism',
                    'japanese': 'Japanese',
                    'neo-traditional': 'Neo-Traditional',
                    'watercolor': 'Watercolor',
                    'geometric': 'Geometric',
                    'tribal': 'Tribal',
                    'blackwork': 'Blackwork',
                    'dotwork': 'Dotwork',
                    'minimalist': 'Minimalist'
                },
                getLabel() {
                    return this.options[this.selected];
                },
                selectStyle(style) {
                    this.selected = style;
                    this.open = false;
                    this.$refs.form.submit();
                }
            }">
                <label class="block text-sm font-medium text-gray-900">Style</label>
                <form x-ref="form" method="GET" class="mt-2">
                    <input type="hidden" name="type" value="{{ $type }}">
                    <input type="hidden" name="artist" value="{{ request('artist') }}">
                    <input type="hidden" name="style" :value="selected">
                    <input type="hidden" name="status" value="{{ request('status') }}">
                    <input type="hidden" name="search" value="{{ request('search') }}">

                    <div class="relative">
                        <button type="button"
                                @click="open = !open"
                                @click.away="open = false"
                                class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                            <span x-text="getLabel()" :class="{ 'text-gray-400': !selected }"></span>
                            <svg viewBox="0 0 20 20" fill="currentColor" class="-mr-1 size-5 text-gray-400">
                                <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" />
                            </svg>
                        </button>

                        <div x-show="open"
                             x-transition
                             class="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg outline-1 outline-black/5"
                             style="display: none;">
                            <div class="py-1">
                                <template x-for="(label, value) in options" :key="value">
                                    <button type="button"
                                            @click="selectStyle(value)"
                                            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                            :class="{ 'bg-gray-100': selected === value }">
                                        <span x-text="label"></span>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Status Filter -->
            <div x-data="{
                open: false,
                selected: '{{ request('status', '') }}',
                options: {{ $type === 'designs' ? json_encode([''=>'All', 'available'=>'Available', 'unavailable'=>'Unavailable', 'customizable'=>'Customizable']) : json_encode([''=>'All', 'public'=>'Public', 'private'=>'Private', 'featured'=>'Featured']) }},
                getLabel() {
                    return this.options[this.selected];
                },
                selectStatus(status) {
                    this.selected = status;
                    this.open = false;
                    this.$refs.form.submit();
                }
            }">
                <label class="block text-sm font-medium text-gray-900">Status</label>
                <form x-ref="form" method="GET" class="mt-2">
                    <input type="hidden" name="type" value="{{ $type }}">
                    <input type="hidden" name="artist" value="{{ request('artist') }}">
                    <input type="hidden" name="style" value="{{ request('style') }}">
                    <input type="hidden" name="status" :value="selected">
                    <input type="hidden" name="search" value="{{ request('search') }}">

                    <div class="relative">
                        <button type="button"
                                @click="open = !open"
                                @click.away="open = false"
                                class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                            <span x-text="getLabel()" :class="{ 'text-gray-400': !selected }"></span>
                            <svg viewBox="0 0 20 20" fill="currentColor" class="-mr-1 size-5 text-gray-400">
                                <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" />
                            </svg>
                        </button>

                        <div x-show="open"
                             x-transition
                             class="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg outline-1 outline-black/5"
                             style="display: none;">
                            <div class="py-1">
                                <template x-for="(label, value) in options" :key="value">
                                    <button type="button"
                                            @click="selectStatus(value)"
                                            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                            :class="{ 'bg-gray-100': selected === value }">
                                        <span x-text="label"></span>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Clear Filters -->
        @if(request()->hasAny(['search', 'artist', 'style', 'status']))
            <div class="mt-4">
                <a href="{{ route('crm.gallery.manage', ['type' => $type]) }}"
                   class="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                    Clear Filters
                </a>
            </div>
        @endif
    </div>

    <!-- Gallery Grid -->
    @if($items->count() > 0)
        <div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            @foreach($items as $item)
                <div class="group relative bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow">
                    <!-- Image -->
                    <div class="aspect-square bg-gray-200">
                        <img src="{{ $item->getThumbnailUrl() }}"
                             alt="{{ $item->title }}"
                             class="h-full w-full object-cover">
                    </div>

                    <!-- Content -->
                    <div class="p-4">
                        <h3 class="text-sm font-semibold text-gray-900 truncate">{{ $item->title }}</h3>
                        <p class="mt-1 text-sm text-gray-500">{{ $item->artist->name }}</p>

                        @if($item->isDesign())
                            <div class="mt-2 flex items-center gap-2 text-xs text-gray-500">
                                <span>{{ $item->view_count }} views</span>
                                <span>•</span>
                                <span>{{ $item->booking_count }} bookings</span>
                            </div>
                        @endif

                        <!-- Actions -->
                        <div class="mt-4 flex gap-2">
                            <a href="{{ route('crm.gallery.edit', $item) }}"
                               class="flex-1 inline-flex justify-center items-center px-3 py-1.5 text-xs font-medium rounded-md text-gray-700 bg-white inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                                Edit
                            </a>

                            @if($item->isDesign())
                                <form action="{{ route('crm.gallery.toggle-availability', $item) }}" method="POST" class="flex-1">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit"
                                            class="w-full inline-flex justify-center items-center px-3 py-1.5 text-xs font-medium rounded-md {{ $item->is_available ? 'text-green-700 bg-green-50 inset-ring-1 inset-ring-green-600/20' : 'text-gray-700 bg-white inset-ring-1 inset-ring-gray-300' }} hover:bg-gray-50">
                                        {{ $item->is_available ? 'Available' : 'Unavailable' }}
                                    </button>
                                </form>
                            @else
                                <form action="{{ route('crm.gallery.toggle-public', $item) }}" method="POST" class="flex-1">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit"
                                            class="w-full inline-flex justify-center items-center px-3 py-1.5 text-xs font-medium rounded-md {{ $item->is_public ? 'text-blue-700 bg-blue-50 inset-ring-1 inset-ring-blue-600/20' : 'text-gray-700 bg-white inset-ring-1 inset-ring-gray-300' }} hover:bg-gray-50">
                                        {{ $item->is_public ? 'Public' : 'Private' }}
                                    </button>
                                </form>
                            @endif

                            <form action="{{ route('crm.gallery.destroy', $item) }}" method="POST"
                                  onsubmit="return confirm('Are you sure you want to delete this item?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        class="inline-flex justify-center items-center px-3 py-1.5 text-xs font-medium rounded-md text-red-700 bg-red-50 inset-ring-1 inset-ring-red-600/20 hover:bg-red-100">
                                    Delete
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="mt-8">
            {{ $items->appends(request()->query())->links() }}
        </div>
    @else
        <div class="mt-8 text-center py-12 bg-white rounded-lg shadow-sm">
            <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">Get started by creating a new {{ $type === 'designs' ? 'design' : 'portfolio piece' }}.</p>
            <div class="mt-6">
                <a href="{{ route('crm.gallery.create', ['type' => $type === 'designs' ? 'design' : 'portfolio']) }}"
                   class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                        <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                    </svg>
                    Add {{ $type === 'designs' ? 'Design' : 'Portfolio Piece' }}
                </a>
            </div>
        </div>
    @endif
</div>
@endsection