@extends('crm.layouts.app')

@section('title', 'Add 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">Add {{ $type === 'design' ? 'Flash Design' : 'Portfolio Piece' }}</h1>
        <p class="mt-2 text-sm text-gray-700">
            {{ $type === 'design' ? 'Create a bookable flash design for clients.' : 'Showcase your completed work in your portfolio.' }}
        </p>
    </div>
    <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
        <a href="{{ route('crm.gallery.manage', ['type' => $type === 'design' ? '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.store') }}" enctype="multipart/form-data" class="mt-8">
    @csrf
    <input type="hidden" name="type" value="{{ $type }}">

    <div class="space-y-8">
        <!-- 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') }}" 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"
                                   placeholder="{{ $type === 'design' ? 'e.g., Dragon Sleeve Design' : 'e.g., Full Sleeve Portrait' }}">
                        </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') == $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', [])) ? '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"
                                      placeholder="Describe the {{ $type === 'design' ? 'design' : 'piece' }}...">{{ old('description') }}</textarea>
                        </div>
                        @error('description')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Image Upload -->
                    <div class="col-span-full">
                        <label for="image" class="block text-sm font-medium text-gray-900">Image</label>
                        <div class="mt-2">
                            <input type="file" name="image" id="image" accept="image/*" 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 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">Upload high-quality image (max 5MB)</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') }}"
                                   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') }}"
                                   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="3.5">
                        </div>
                        @error('estimated_hours')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Design-Specific Fields -->
        @if($type === 'design')
            @include('crm.gallery.partials.design-form-fields')
        @endif

        <!-- Portfolio-Specific Fields -->
        @if($type === 'portfolio')
            @include('crm.gallery.partials.portfolio-form-fields')
        @endif

        <!-- Submit Buttons -->
        <div class="flex items-center justify-end gap-x-6">
            <a href="{{ route('crm.gallery.manage', ['type' => $type === 'design' ? '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">
                <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>
                Create {{ $type === 'design' ? 'Design' : 'Portfolio Piece' }}
            </button>
        </div>
    </div>
</form>
@endsection