@extends('crm.layouts.app')

@section('title', 'Edit Gallery Item')

@section('content')
<!-- 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">Edit {{ $gallery->isDesign() ? 'Flash Design' : 'Portfolio Piece' }}</h1>
        <p class="mt-2 text-sm text-gray-700">Update your {{ $gallery->isDesign() ? 'design' : 'portfolio piece' }} details.</p>
    </div>
    <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
        <a href="{{ route('crm.gallery.manage', ['type' => $gallery->isDesign() ? 'designs' : 'portfolio']) }}"
           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">
            <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
            </svg>
            Back
        </a>
    </div>
</div>

<!-- Form -->
<form method="POST" action="{{ route('crm.gallery.update', $gallery) }}" enctype="multipart/form-data" class="mt-8">
    @csrf
    @method('PUT')

    <div class="space-y-8">
        <!-- Current Image Preview -->
        <div class="bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                <h2 class="text-base font-semibold text-gray-900 mb-4">Current Image</h2>
                <div class="aspect-video bg-gray-200 rounded-lg overflow-hidden max-w-md">
                    <img src="{{ $gallery->getImageUrl() }}" alt="{{ $gallery->title }}" class="w-full h-full object-cover">
                </div>
            </div>
        </div>

        <!-- Basic Information Card -->
        <div class="bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                <h2 class="text-base font-semibold text-gray-900 mb-6">Basic Information</h2>

                <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <!-- Title -->
                    <div class="col-span-full">
                        <label for="title" class="block text-sm font-medium text-gray-900">Title</label>
                        <div class="mt-2">
                            <input type="text" name="title" id="title" value="{{ old('title', $gallery->title) }}" required
                                   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">
                        </div>
                        @error('title')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Artist -->
                    <div class="sm:col-span-3">
                        <label for="user_id" class="block text-sm font-medium text-gray-900">Artist</label>
                        <div class="mt-2">
                            <select name="user_id" id="user_id" required
                                    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 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                <option value="">Select an artist</option>
                                @foreach($artists as $artist)
                                    <option value="{{ $artist->id }}" {{ old('user_id', $gallery->user_id) == $artist->id ? 'selected' : '' }}>
                                        {{ $artist->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @error('user_id')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Styles -->
                    <div class="sm:col-span-3">
                        <label for="styles" class="block text-sm font-medium text-gray-900">Styles</label>
                        <div class="mt-2">
                            <select name="styles[]" id="styles" multiple required
                                    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 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
                                    size="5">
                                @foreach($styles as $style)
                                    <option value="{{ $style }}" {{ in_array($style, old('styles', $gallery->styles ?? [])) ? 'selected' : '' }}>
                                        {{ ucfirst($style) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <p class="mt-2 text-sm text-gray-500">Hold Ctrl/Cmd to select multiple styles</p>
                        @error('styles')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Description -->
                    <div class="col-span-full">
                        <label for="description" class="block text-sm font-medium text-gray-900">Description</label>
                        <div class="mt-2">
                            <textarea name="description" id="description" rows="3"
                                      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">{{ old('description', $gallery->description) }}</textarea>
                        </div>
                        @error('description')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Image Upload (Optional for edit) -->
                    <div class="col-span-full">
                        <label for="image" class="block text-sm font-medium text-gray-900">Replace Image (Optional)</label>
                        <div class="mt-2">
                            <input type="file" name="image" id="image" accept="image/*"
                                   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 file:mr-4 file:rounded-md file:border-0 file:bg-indigo-50 file:px-3 file:py-1.5 file:text-sm file:font-semibold file:text-indigo-600 hover:file:bg-indigo-100 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                        </div>
                        <p class="mt-2 text-sm text-gray-500">Leave empty to keep current image</p>
                        @error('image')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Tags -->
                    <div class="col-span-full">
                        <label for="tags" class="block text-sm font-medium text-gray-900">Tags</label>
                        <div class="mt-2">
                            <input type="text" name="tags" id="tags" value="{{ old('tags', is_array($gallery->tags) ? implode(', ', $gallery->tags) : '') }}"
                                   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"
                                   placeholder="dragon, sleeve, color, japanese (comma-separated)">
                        </div>
                        @error('tags')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Estimated Hours -->
                    <div class="sm:col-span-3">
                        <label for="estimated_hours" class="block text-sm font-medium text-gray-900">Estimated Hours</label>
                        <div class="mt-2">
                            <input type="number" name="estimated_hours" id="estimated_hours" step="0.5" min="0" value="{{ old('estimated_hours', $gallery->estimated_hours) }}"
                                   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">
                        </div>
                        @error('estimated_hours')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Design-Specific Fields -->
        @if($gallery->isDesign())
            <div class="bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 sm:rounded-xl">
                <div class="px-4 py-6 sm:p-8">
                    <h2 class="text-base font-semibold text-gray-900 mb-6">Design Details</h2>

                    <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                        <!-- Body Parts -->
                        <div class="sm:col-span-3">
                            <label for="body_parts" class="block text-sm font-medium text-gray-900">Body Parts</label>
                            <div class="mt-2">
                                <select name="body_parts[]" id="body_parts" multiple required
                                        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 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
                                        size="5">
                                    @foreach($bodyParts as $bodyPart)
                                        <option value="{{ $bodyPart }}" {{ in_array($bodyPart, old('body_parts', $gallery->body_parts ?? [])) ? 'selected' : '' }}>
                                            {{ ucfirst($bodyPart) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">Hold Ctrl/Cmd to select multiple</p>
                            @error('body_parts')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Size Category -->
                        <div class="sm:col-span-3">
                            <label for="size_category" class="block text-sm font-medium text-gray-900">Size Category</label>
                            <div class="mt-2">
                                <select name="size_category" id="size_category" required
                                        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 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                    @foreach($sizes as $size)
                                        <option value="{{ $size }}" {{ old('size_category', $gallery->size_category) == $size ? 'selected' : '' }}>
                                            {{ ucfirst(str_replace('_', ' ', $size)) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            @error('size_category')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Base Price -->
                        <div class="sm:col-span-3">
                            <label for="base_price" class="block text-sm font-medium text-gray-900">Base Price ($)</label>
                            <div class="mt-2">
                                <input type="number" name="base_price" id="base_price" step="0.01" min="0" value="{{ old('base_price', $gallery->base_price) }}"
                                       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">
                            </div>
                            @error('base_price')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Difficulty Level -->
                        <div class="sm:col-span-3">
                            <label for="difficulty_level" class="block text-sm font-medium text-gray-900">Difficulty Level</label>
                            <div class="mt-2">
                                <select name="difficulty_level" id="difficulty_level" required
                                        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 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                    @foreach($difficulties as $difficulty)
                                        <option value="{{ $difficulty }}" {{ old('difficulty_level', $gallery->difficulty_level) == $difficulty ? 'selected' : '' }}>
                                            {{ ucfirst($difficulty) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            @error('difficulty_level')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Color Palette -->
                        <div class="col-span-full">
                            <label for="color_palette" class="block text-sm font-medium text-gray-900">Color Palette</label>
                            <div class="mt-2">
                                <input type="text" name="color_palette" id="color_palette" value="{{ old('color_palette', is_array($gallery->color_palette) ? implode(', ', $gallery->color_palette) : '') }}"
                                       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"
                                       placeholder="black, red, blue (comma-separated)">
                            </div>
                            <p class="mt-2 text-sm text-gray-500">Leave empty for black & gray</p>
                            @error('color_palette')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Artist Notes -->
                        <div class="col-span-full">
                            <label for="artist_notes" class="block text-sm font-medium text-gray-900">Artist Notes</label>
                            <div class="mt-2">
                                <textarea name="artist_notes" id="artist_notes" rows="3"
                                          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">{{ old('artist_notes', $gallery->artist_notes) }}</textarea>
                            </div>
                            @error('artist_notes')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Options -->
                        <div class="col-span-full">
                            <div class="space-y-4">
                                <div class="flex items-center">
                                    <input type="checkbox" name="is_customizable" id="is_customizable" value="1"
                                           {{ old('is_customizable', $gallery->is_customizable) ? 'checked' : '' }}
                                           class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                    <label for="is_customizable" class="ml-3 block text-sm font-medium text-gray-900">
                                        Customizable
                                    </label>
                                </div>

                                <div class="flex items-center">
                                    <input type="checkbox" name="is_available" id="is_available" value="1"
                                           {{ old('is_available', $gallery->is_available) ? 'checked' : '' }}
                                           class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                    <label for="is_available" class="ml-3 block text-sm font-medium text-gray-900">
                                        Available for booking
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Analytics (Read-only) -->
                        <div class="col-span-full">
                            <div class="grid grid-cols-2 gap-4">
                                <div class="bg-gray-50 rounded-lg p-4">
                                    <p class="text-sm text-gray-500">Views</p>
                                    <p class="text-2xl font-semibold text-gray-900">{{ $gallery->view_count }}</p>
                                </div>
                                <div class="bg-gray-50 rounded-lg p-4">
                                    <p class="text-sm text-gray-500">Bookings</p>
                                    <p class="text-2xl font-semibold text-gray-900">{{ $gallery->booking_count }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Portfolio-Specific Fields -->
        @if($gallery->isPortfolio())
            <div class="bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 sm:rounded-xl">
                <div class="px-4 py-6 sm:p-8">
                    <h2 class="text-base font-semibold text-gray-900 mb-6">Portfolio Details</h2>

                    <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                        <!-- Body Part -->
                        <div class="sm:col-span-3">
                            <label for="body_part" class="block text-sm font-medium text-gray-900">Body Part</label>
                            <div class="mt-2">
                                <select name="body_part" id="body_part" required
                                        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 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                    @foreach($bodyParts as $bodyPart)
                                        <option value="{{ $bodyPart }}" {{ old('body_part', $gallery->body_part) == $bodyPart ? 'selected' : '' }}>
                                            {{ ucfirst($bodyPart) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            @error('body_part')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Session Count -->
                        <div class="sm:col-span-3">
                            <label for="session_count" class="block text-sm font-medium text-gray-900">Number of Sessions</label>
                            <div class="mt-2">
                                <input type="number" name="session_count" id="session_count" min="1" value="{{ old('session_count', $gallery->session_count) }}" required
                                       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">
                            </div>
                            @error('session_count')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Estimated Cost -->
                        <div class="sm:col-span-3">
                            <label for="estimated_cost" class="block text-sm font-medium text-gray-900">Estimated Cost ($)</label>
                            <div class="mt-2">
                                <input type="number" name="estimated_cost" id="estimated_cost" step="0.01" min="0" value="{{ old('estimated_cost', $gallery->estimated_cost) }}"
                                       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">
                            </div>
                            @error('estimated_cost')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Completed Date -->
                        <div class="sm:col-span-3">
                            <label for="completed_date" class="block text-sm font-medium text-gray-900">Completed Date</label>
                            <div class="mt-2">
                                <input type="date" name="completed_date" id="completed_date" value="{{ old('completed_date', $gallery->completed_date?->format('Y-m-d')) }}"
                                       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">
                            </div>
                            @error('completed_date')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Display Order -->
                        <div class="sm:col-span-3">
                            <label for="display_order" class="block text-sm font-medium text-gray-900">Display Order</label>
                            <div class="mt-2">
                                <input type="number" name="display_order" id="display_order" min="0" value="{{ old('display_order', $gallery->display_order) }}"
                                       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">
                            </div>
                            <p class="mt-2 text-sm text-gray-500">Lower numbers appear first</p>
                            @error('display_order')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Client Testimonial -->
                        <div class="col-span-full">
                            <label for="client_testimonial" class="block text-sm font-medium text-gray-900">Client Testimonial</label>
                            <div class="mt-2">
                                <textarea name="client_testimonial" id="client_testimonial" rows="3"
                                          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">{{ old('client_testimonial', $gallery->client_testimonial) }}</textarea>
                            </div>
                            @error('client_testimonial')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Client Rating -->
                        <div class="sm:col-span-3">
                            <label for="client_rating" class="block text-sm font-medium text-gray-900">Client Rating</label>
                            <div class="mt-2">
                                <select name="client_rating" id="client_rating"
                                        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 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                    <option value="">No rating</option>
                                    <option value="5" {{ old('client_rating', $gallery->client_rating) == 5 ? 'selected' : '' }}>⭐⭐⭐⭐⭐ (5 stars)</option>
                                    <option value="4" {{ old('client_rating', $gallery->client_rating) == 4 ? 'selected' : '' }}>⭐⭐⭐⭐ (4 stars)</option>
                                    <option value="3" {{ old('client_rating', $gallery->client_rating) == 3 ? 'selected' : '' }}>⭐⭐⭐ (3 stars)</option>
                                    <option value="2" {{ old('client_rating', $gallery->client_rating) == 2 ? 'selected' : '' }}>⭐⭐ (2 stars)</option>
                                    <option value="1" {{ old('client_rating', $gallery->client_rating) == 1 ? 'selected' : '' }}>⭐ (1 star)</option>
                                </select>
                            </div>
                            @error('client_rating')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Options -->
                        <div class="col-span-full">
                            <div class="space-y-4">
                                <div class="flex items-center">
                                    <input type="checkbox" name="is_featured" id="is_featured" value="1"
                                           {{ old('is_featured', $gallery->is_featured) ? 'checked' : '' }}
                                           class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                    <label for="is_featured" class="ml-3 block text-sm font-medium text-gray-900">
                                        Featured piece
                                    </label>
                                </div>

                                <div class="flex items-center">
                                    <input type="checkbox" name="is_public" id="is_public" value="1"
                                           {{ old('is_public', $gallery->is_public) ? 'checked' : '' }}
                                           class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
                                    <label for="is_public" class="ml-3 block text-sm font-medium text-gray-900">
                                        Publicly visible
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Submit Buttons -->
        <div class="flex items-center justify-end gap-x-6">
            <a href="{{ route('crm.gallery.manage', ['type' => $gallery->isDesign() ? 'designs' : 'portfolio']) }}"
               class="text-sm font-semibold text-gray-900">Cancel</a>
            <button type="submit"
                    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 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                Save Changes
            </button>
        </div>
    </div>
</form>
@endsection