@extends('crm.layouts.app')

@section('title', 'Create Tattoo Project')

@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">Create New Tattoo Project</h1>
        <p class="mt-2 text-sm text-gray-700">Set up a multi-session tattoo project for your client.</p>
    </div>
    <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
        <a href="{{ route('crm.tattoo-projects.index') }}" 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.tattoo-projects.store') }}" enctype="multipart/form-data" class="mt-8">
    @csrf

    <div class="space-y-8">
        <!-- Project Details 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">
                <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <!-- Project Title -->
                    <div class="col-span-full">
                        <label for="title" class="block text-sm font-medium text-gray-900">Project 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="e.g., Full Sleeve Dragon Design">
                        </div>
                        @error('title')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Client -->
                    <div class="sm:col-span-3">
                        <label for="client_id" class="block text-sm font-medium text-gray-900">Client</label>
                        <div class="mt-2">
                            <select name="client_id" id="client_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 a client</option>
                                @foreach($clients as $client)
                                    <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>
                                        {{ $client->name }} ({{ $client->email }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @error('client_id')
                            <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>

                    <!-- Style -->
                    <div class="sm:col-span-3">
                        <label for="style" class="block text-sm font-medium text-gray-900">Style</label>
                        <div class="mt-2">
                            <select name="style" id="style" 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 a style</option>
                                <option value="traditional" {{ old('style') === 'traditional' ? 'selected' : '' }}>Traditional</option>
                                <option value="realism" {{ old('style') === 'realism' ? 'selected' : '' }}>Realism</option>
                                <option value="japanese" {{ old('style') === 'japanese' ? 'selected' : '' }}>Japanese</option>
                                <option value="neo-traditional" {{ old('style') === 'neo-traditional' ? 'selected' : '' }}>Neo-Traditional</option>
                                <option value="watercolor" {{ old('style') === 'watercolor' ? 'selected' : '' }}>Watercolor</option>
                                <option value="geometric" {{ old('style') === 'geometric' ? 'selected' : '' }}>Geometric</option>
                                <option value="tribal" {{ old('style') === 'tribal' ? 'selected' : '' }}>Tribal</option>
                                <option value="blackwork" {{ old('style') === 'blackwork' ? 'selected' : '' }}>Blackwork</option>
                            </select>
                        </div>
                        @error('style')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- 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">
                            <input type="text" name="body_part" id="body_part" value="{{ old('body_part') }}" 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="e.g., Right Arm, Back, Leg">
                        </div>
                        @error('body_part')
                            <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 tattoo project...">{{ old('description') }}</textarea>
                        </div>
                        @error('description')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Design Notes -->
                    <div class="col-span-full">
                        <label for="design_notes" class="block text-sm font-medium text-gray-900">Design Notes</label>
                        <div class="mt-2">
                            <textarea name="design_notes" id="design_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" placeholder="Any specific design requirements, colors, modifications...">{{ old('design_notes') }}</textarea>
                        </div>
                        @error('design_notes')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Reference Images -->
                    <div class="col-span-full">
                        <label for="reference_images" class="block text-sm font-medium text-gray-900">Reference Images</label>
                        <div class="mt-2">
                            <input type="file" name="reference_images[]" id="reference_images" multiple 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">Upload reference images for the tattoo design (max 10MB each)</p>
                        @error('reference_images.*')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Project Planning 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">Project Planning</h2>
                <p class="mt-1 text-sm text-gray-500">Estimate the scope and timeline of the project.</p>

                <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <!-- Estimated Cost -->
                    <div class="sm:col-span-2">
                        <label for="estimated_total_cost" class="block text-sm font-medium text-gray-900">Estimated Total Cost</label>
                        <div class="relative mt-2">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                <span class="text-gray-500 sm:text-sm">$</span>
                            </div>
                            <input type="number" name="estimated_total_cost" id="estimated_total_cost" value="{{ old('estimated_total_cost') }}" step="0.01" min="0" class="block w-full rounded-md bg-white pl-7 pr-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="0.00">
                        </div>
                        @error('estimated_total_cost')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

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

                    <!-- Estimated Sessions -->
                    <div class="sm:col-span-2">
                        <label for="estimated_sessions" class="block text-sm font-medium text-gray-900">Estimated Sessions</label>
                        <div class="mt-2">
                            <input type="number" name="estimated_sessions" id="estimated_sessions" value="{{ old('estimated_sessions') }}" min="1" 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="e.g., 3">
                        </div>
                        <p class="mt-2 text-sm text-gray-500">Sessions will be automatically created based on this number</p>
                        @error('estimated_sessions')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

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

    <!-- Form Actions -->
    <div class="mt-6 flex items-center justify-end gap-x-3">
        <a href="{{ route('crm.tattoo-projects.index') }}" class="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">
            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 Project
        </button>
    </div>
</form>
@endsection