@extends('crm.layouts.app')

@section('title', 'New Appointment')

@section('content')
<div class="min-h-screen bg-gray-50">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="sm:flex sm:items-center sm:justify-between">
            <div>
                <nav class="flex mb-4" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="{{ route('crm.appointments.index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
                                </svg>
                                Appointments
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                </svg>
                                <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">New Appointment</span>
                            </div>
                        </li>
                    </ol>
                </nav>
                <h1 class="text-3xl font-bold text-gray-900">Book New Appointment</h1>
                <p class="mt-2 text-sm text-gray-600">Schedule a new tattoo session for your client</p>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <div class="overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg">
        <form method="POST" action="{{ route('crm.appointments.store') }}" enctype="multipart/form-data" class="p-6 sm:p-8">
            @csrf

            <div class="space-y-8">
                <!-- Client Information Section -->
                <div>
                    <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-2 border-b border-gray-200">Client Information</h2>

                    <div class="grid grid-cols-1 gap-6">
                        <!-- Client -->
                        <div x-data="{
                            open: false,
                            selected: {{ old('client_id', 'null') }},
                            search: '',
                            clients: {{ Js::from($clients->map(fn($c) => ['id' => $c->id, 'name' => $c->name])) }},
                            get filteredClients() {
                                if (this.search === '') return this.clients;
                                return this.clients.filter(client =>
                                    client.name.toLowerCase().includes(this.search.toLowerCase())
                                );
                            },
                            getLabel() {
                                if (!this.selected) return 'Select a client...';
                                const client = this.clients.find(c => c.id == this.selected);
                                return client ? client.name : 'Select a client...';
                            },
                            selectClient(clientId) {
                                this.selected = clientId;
                                this.open = false;
                                this.search = '';
                            }
                        }">
                            <label for="client_id" class="block text-sm font-medium text-gray-700">
                                Client <span class="text-red-500">*</span>
                            </label>
                            <div class="mt-1 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 hover:bg-gray-50 {{ $errors->has('client_id') ? 'inset-ring-red-300' : 'inset-ring-gray-300' }}">
                                    <span x-text="getLabel()" :class="{ 'text-gray-400': !selected }"></span>
                                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" 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" clip-rule="evenodd" fill-rule="evenodd" />
                                    </svg>
                                </button>

                                <div x-show="open"
                                     x-transition:enter="transition ease-out duration-100"
                                     x-transition:enter-start="transform opacity-0 scale-95"
                                     x-transition:enter-end="transform opacity-100 scale-100"
                                     x-transition:leave="transition ease-in duration-75"
                                     x-transition:leave-start="transform opacity-100 scale-100"
                                     x-transition:leave-end="transform opacity-0 scale-95"
                                     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;">
                                    <!-- Search input -->
                                    <div class="p-2 border-b border-gray-100">
                                        <input type="text"
                                               x-model="search"
                                               placeholder="Search clients..."
                                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
                                               @click.stop>
                                    </div>

                                    <!-- Client list -->
                                    <div class="py-1 max-h-60 overflow-y-auto">
                                        <template x-for="client in filteredClients" :key="client.id">
                                            <button type="button"
                                                    @click="selectClient(client.id)"
                                                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden"
                                                    :class="{ 'bg-gray-100': selected == client.id }">
                                                <span x-text="client.name"></span>
                                            </button>
                                        </template>

                                        <!-- No results message -->
                                        <div x-show="filteredClients.length === 0" class="px-4 py-2 text-sm text-gray-500">
                                            No clients found
                                        </div>
                                    </div>
                                </div>

                                <!-- Hidden input for form submission -->
                                <input type="hidden" name="client_id" :value="selected" required>
                            </div>
                            @error('client_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Appointment Details Section -->
                <div>
                    <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-2 border-b border-gray-200">Appointment Details</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Date -->
                        <div x-data="{
                            open: false,
                            selectedDate: '{{ old('scheduled_date', date('Y-m-d')) }}',
                            currentMonth: new Date('{{ old('scheduled_date', date('Y-m-d')) }}'),
                            today: new Date(),

                            get formattedDate() {
                                if (!this.selectedDate) return 'Select date';
                                const d = new Date(this.selectedDate);
                                return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
                            },

                            get monthYear() {
                                return this.currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
                            },

                            get daysInMonth() {
                                const year = this.currentMonth.getFullYear();
                                const month = this.currentMonth.getMonth();
                                const firstDay = new Date(year, month, 1);
                                const lastDay = new Date(year, month + 1, 0);
                                const daysInMonth = lastDay.getDate();
                                const startingDayOfWeek = firstDay.getDay();

                                const days = [];

                                // Previous month days
                                const prevMonthLastDay = new Date(year, month, 0).getDate();
                                for (let i = startingDayOfWeek - 1; i >= 0; i--) {
                                    days.push({
                                        day: prevMonthLastDay - i,
                                        isCurrentMonth: false,
                                        date: new Date(year, month - 1, prevMonthLastDay - i)
                                    });
                                }

                                // Current month days
                                for (let i = 1; i <= daysInMonth; i++) {
                                    days.push({
                                        day: i,
                                        isCurrentMonth: true,
                                        date: new Date(year, month, i)
                                    });
                                }

                                // Next month days
                                const remainingDays = 42 - days.length;
                                for (let i = 1; i <= remainingDays; i++) {
                                    days.push({
                                        day: i,
                                        isCurrentMonth: false,
                                        date: new Date(year, month + 1, i)
                                    });
                                }

                                return days;
                            },

                            isToday(date) {
                                return date.toDateString() === this.today.toDateString();
                            },

                            isSelected(date) {
                                if (!this.selectedDate) return false;
                                return date.toDateString() === new Date(this.selectedDate).toDateString();
                            },

                            selectDate(date) {
                                const year = date.getFullYear();
                                const month = String(date.getMonth() + 1).padStart(2, '0');
                                const day = String(date.getDate()).padStart(2, '0');
                                this.selectedDate = `${year}-${month}-${day}`;
                                this.open = false;
                            },

                            previousMonth() {
                                this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1);
                            },

                            nextMonth() {
                                this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1);
                            }
                        }">
                            <label for="scheduled_date" class="block text-sm font-medium text-gray-700">
                                Scheduled Date <span class="text-red-500">*</span>
                            </label>
                            <div class="mt-1 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 hover:bg-gray-50 {{ $errors->has('scheduled_date') ? 'inset-ring-red-300' : 'inset-ring-gray-300' }}">
                                    <div class="flex items-center gap-2">
                                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                        </svg>
                                        <span x-text="formattedDate"></span>
                                    </div>
                                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" 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" clip-rule="evenodd" fill-rule="evenodd" />
                                    </svg>
                                </button>

                                <!-- Calendar Dropdown -->
                                <div x-show="open"
                                     x-transition:enter="transition ease-out duration-100"
                                     x-transition:enter-start="transform opacity-0 scale-95"
                                     x-transition:enter-end="transform opacity-100 scale-100"
                                     x-transition:leave="transition ease-in duration-75"
                                     x-transition:leave-start="transform opacity-100 scale-100"
                                     x-transition:leave-end="transform opacity-0 scale-95"
                                     class="absolute right-0 z-10 mt-2 w-80 origin-top-right rounded-lg bg-white shadow-lg outline-1 outline-black/5 p-4"
                                     style="display: none;">

                                    <!-- Month Navigation -->
                                    <div class="flex items-center justify-between mb-4">
                                        <button type="button" @click.stop="previousMonth()" class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
                                            <span class="sr-only">Previous month</span>
                                            <svg viewBox="0 0 20 20" fill="currentColor" class="size-5">
                                                <path 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" fill-rule="evenodd" />
                                            </svg>
                                        </button>
                                        <div class="flex-auto text-center text-sm font-semibold text-gray-900" x-text="monthYear"></div>
                                        <button type="button" @click.stop="nextMonth()" class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
                                            <span class="sr-only">Next month</span>
                                            <svg viewBox="0 0 20 20" fill="currentColor" class="size-5">
                                                <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                                            </svg>
                                        </button>
                                    </div>

                                    <!-- Day Headers -->
                                    <div class="grid grid-cols-7 text-center text-xs/6 text-gray-500 mb-2">
                                        <div>S</div>
                                        <div>M</div>
                                        <div>T</div>
                                        <div>W</div>
                                        <div>T</div>
                                        <div>F</div>
                                        <div>S</div>
                                    </div>

                                    <!-- Calendar Grid -->
                                    <div class="grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow-sm ring-1 ring-gray-200">
                                        <template x-for="(dayObj, index) in daysInMonth" :key="index">
                                            <button type="button"
                                                    @click="selectDate(dayObj.date)"
                                                    class="py-1.5 hover:bg-gray-100 focus:z-10"
                                                    :class="{
                                                        'bg-gray-50': !dayObj.isCurrentMonth,
                                                        'bg-white': dayObj.isCurrentMonth,
                                                        'text-gray-400': !dayObj.isCurrentMonth,
                                                        'text-gray-900': dayObj.isCurrentMonth && !isSelected(dayObj.date) && !isToday(dayObj.date),
                                                        'font-semibold': isSelected(dayObj.date) || isToday(dayObj.date),
                                                        'first:rounded-tl-lg': index === 0,
                                                        'nth-7:rounded-tr-lg': index === 6,
                                                        'nth-36:rounded-bl-lg': index === 35,
                                                        'last:rounded-br-lg': index === 41
                                                    }">
                                                <time :datetime="dayObj.date.toISOString().split('T')[0]"
                                                      class="mx-auto flex size-7 items-center justify-center rounded-full"
                                                      :class="{
                                                          'bg-gray-900 text-white': isSelected(dayObj.date) && !isToday(dayObj.date),
                                                          'bg-indigo-600 text-white': isSelected(dayObj.date) && isToday(dayObj.date),
                                                          'text-indigo-600': isToday(dayObj.date) && !isSelected(dayObj.date)
                                                      }"
                                                      x-text="dayObj.day"></time>
                                            </button>
                                        </template>
                                    </div>
                                </div>

                                <!-- Hidden input for form submission -->
                                <input type="hidden" name="scheduled_date" :value="selectedDate" required>
                            </div>
                            @error('scheduled_date')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Time -->
                        <div>
                            <label for="scheduled_time" class="block text-sm font-medium text-gray-700">
                                Scheduled Time <span class="text-red-500">*</span>
                            </label>
                            <div class="mt-1 relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                </div>
                                <input type="time"
                                       name="scheduled_time"
                                       id="scheduled_time"
                                       value="{{ old('scheduled_time', '10:00') }}"
                                       required
                                       class="block w-full pl-10 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 hover:bg-gray-50 focus:inset-ring-2 focus:inset-ring-indigo-600 {{ $errors->has('scheduled_time') ? 'inset-ring-red-300' : 'inset-ring-gray-300' }}">
                            </div>
                            @error('scheduled_time')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Status -->
                        <div x-data="{
                            open: false,
                            selected: '{{ old('status', 'confirmed') }}',
                            options: {
                                'pending': 'Pending',
                                'confirmed': 'Confirmed',
                                'completed': 'Completed',
                                'cancelled': 'Cancelled'
                            },
                            getLabel() {
                                return this.options[this.selected] || 'Select status';
                            }
                        }">
                            <label for="status" class="block text-sm font-medium text-gray-700">
                                Status <span class="text-red-500">*</span>
                            </label>
                            <div class="mt-1 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 hover:bg-gray-50 {{ $errors->has('status') ? 'inset-ring-red-300' : 'inset-ring-gray-300' }}">
                                    <span x-text="getLabel()"></span>
                                    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" 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" clip-rule="evenodd" fill-rule="evenodd" />
                                    </svg>
                                </button>

                                <div x-show="open"
                                     x-transition:enter="transition ease-out duration-100"
                                     x-transition:enter-start="transform opacity-0 scale-95"
                                     x-transition:enter-end="transform opacity-100 scale-100"
                                     x-transition:leave="transition ease-in duration-75"
                                     x-transition:leave-start="transform opacity-100 scale-100"
                                     x-transition:leave-end="transform opacity-0 scale-95"
                                     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="selected = 'pending'; open = false"
                                                class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden"
                                                :class="{ 'bg-gray-100': selected === 'pending' }">
                                            Pending
                                        </button>
                                        <button type="button"
                                                @click="selected = 'confirmed'; open = false"
                                                class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden"
                                                :class="{ 'bg-gray-100': selected === 'confirmed' }">
                                            Confirmed
                                        </button>
                                        <button type="button"
                                                @click="selected = 'completed'; open = false"
                                                class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden"
                                                :class="{ 'bg-gray-100': selected === 'completed' }">
                                            Completed
                                        </button>
                                        <button type="button"
                                                @click="selected = 'cancelled'; open = false"
                                                class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden"
                                                :class="{ 'bg-gray-100': selected === 'cancelled' }">
                                            Cancelled
                                        </button>
                                    </div>
                                </div>

                                <!-- Hidden input for form submission -->
                                <input type="hidden" name="status" :value="selected" required>
                            </div>
                            @error('status')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Price -->
                        <div>
                            <label for="price" class="block text-sm/6 font-medium text-gray-900">Price</label>
                            <div class="mt-2">
                                <div class="flex items-center rounded-md bg-white px-3 outline-1 -outline-offset-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600 {{ $errors->has('price') ? 'outline-red-300' : 'outline-gray-300' }}">
                                    <div class="shrink-0 text-base text-gray-500 select-none sm:text-sm/6">$</div>
                                    <input id="price" type="text" name="price" value="{{ old('price') }}" placeholder="0.00" class="block min-w-0 grow bg-white py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6" />
                                    <div class="shrink-0 text-base text-gray-500 select-none sm:text-sm/6">USD</div>
                                </div>
                                @error('price')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- Tip -->
                        <div>
                            <label for="tip_amount" class="block text-sm/6 font-medium text-gray-900">Tip Amount</label>
                            <div class="mt-2">
                                <div class="flex items-center rounded-md bg-white px-3 outline-1 -outline-offset-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600 {{ $errors->has('tip_amount') ? 'outline-red-300' : 'outline-gray-300' }}">
                                    <div class="shrink-0 text-base text-gray-500 select-none sm:text-sm/6">$</div>
                                    <input id="tip_amount" type="text" name="tip_amount" value="{{ old('tip_amount') }}" placeholder="0.00" class="block min-w-0 grow bg-white py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6" />
                                    <div class="shrink-0 text-base text-gray-500 select-none sm:text-sm/6">USD</div>
                                </div>
                                @error('tip_amount')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Notes -->
                    <div class="mt-6">
                        <label for="notes" class="block text-sm/6 font-medium text-gray-900">
                            Appointment Notes
                        </label>
                        <div class="mt-2">
                            <textarea name="notes"
                                      id="notes"
                                      rows="4"
                                      placeholder="Add any special notes, requirements, or instructions for this appointment..."
                                      class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 placeholder:text-gray-400 shadow-xs inset-ring-1 hover:bg-gray-50 focus:inset-ring-2 focus:inset-ring-indigo-600 focus:outline-none sm:text-sm/6 {{ $errors->has('notes') ? 'inset-ring-red-300' : 'inset-ring-gray-300' }}">{{ old('notes') }}</textarea>
                        </div>
                        @error('notes')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Body Parts Section -->
                <div>
                    <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-2 border-b border-gray-200">Tattoo Placement</h2>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-3">Body Parts (select all that apply)</label>
                        <p class="text-sm text-gray-500 mb-4">Select the body areas for this tattoo</p>

                        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
                            @foreach($bodyParts as $part)
                                <label class="relative flex items-start cursor-pointer group">
                                    <div class="flex h-6 items-center">
                                        <input
                                            type="checkbox"
                                            name="body_parts[]"
                                            value="{{ $part->id }}"
                                            {{ in_array($part->id, old('body_parts', [])) ? 'checked' : '' }}
                                            class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
                                        />
                                    </div>
                                    <div class="ml-3 text-sm/6">
                                        <span class="font-medium text-gray-900 group-hover:text-indigo-600">{{ $part->label }}</span>
                                    </div>
                                </label>
                            @endforeach
                        </div>

                        @error('body_parts')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Files Section -->
                <div>
                    <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-2 border-b border-gray-200">Files & Images</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Reference Images -->
                        <div>
                            <label for="reference_images" class="block text-sm font-medium text-gray-700">
                                Reference Images
                            </label>
                            <div class="mt-1">
                                <input type="file"
                                       name="reference_images[]"
                                       id="reference_images"
                                       multiple
                                       accept="image/*"
                                       class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
                            </div>
                            <p class="mt-1 text-xs text-gray-500">Upload images of the desired tattoo design</p>
                            @error('reference_images')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Session Images -->
                        <div>
                            <label for="session_images" class="block text-sm font-medium text-gray-700">
                                Session Images
                            </label>
                            <div class="mt-1">
                                <input type="file"
                                       name="session_images[]"
                                       id="session_images"
                                       multiple
                                       accept="image/*"
                                       class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
                            </div>
                            <p class="mt-1 text-xs text-gray-500">Upload photos taken during the session</p>
                            @error('session_images')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Consent Form -->
                        <div class="md:col-span-2">
                            <label for="consent_form" class="block text-sm font-medium text-gray-700">
                                Consent Form
                            </label>
                            <div class="mt-1">
                                <input type="file"
                                       name="consent_form"
                                       id="consent_form"
                                       accept=".pdf,image/*"
                                       class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
                            </div>
                            <p class="mt-1 text-xs text-gray-500">Upload signed consent form (PDF or image)</p>
                            @error('consent_form')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="mt-8 flex items-center justify-end gap-x-4 pt-6 border-t border-gray-200">
                <a href="{{ route('crm.appointments.index') }}"
                   class="rounded-md bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                    <svg class="w-4 h-4 inline-block mr-1.5 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                    Cancel
                </a>
                <button type="submit"
                        class="rounded-md bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                    <svg class="w-4 h-4 inline-block mr-1.5 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    Create Appointment
                </button>
            </div>
        </form>
    </div>
</div>
@endsection