@extends('crm.layouts.app')

@section('title', 'Add Equipment')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Page Header -->
    <div class="sm:flex sm:items-center sm:justify-between mb-8">
        <div class="min-w-0 flex-1">
            <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.equipment-maintenance.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="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd"></path>
                            </svg>
                            Equipment Maintenance
                        </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">Add Equipment</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <h1 class="text-2xl font-semibold text-gray-900">Add Equipment</h1>
            <p class="mt-2 text-sm text-gray-700">Add new equipment to your inventory</p>
        </div>
        <div class="mt-4 sm:ml-16 sm:mt-0">
            <a href="{{ route('crm.equipment-maintenance.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 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5 text-gray-400">
                    <path fill-rule="evenodd" d="M17 10a.75.75 0 0 1-.75.75H5.612l4.158 3.96a.75.75 0 1 1-1.04 1.08l-5.5-5.25a.75.75 0 0 1 0-1.08l5.5-5.25a.75.75 0 1 1 1.04 1.08L5.612 9.25H16.25A.75.75 0 0 1 17 10Z" clip-rule="evenodd" />
                </svg>
                Back to Equipment
            </a>
        </div>
    </div>

    <form action="{{ route('crm.equipment-maintenance.store') }}" method="POST" x-data="{
        purchaseDatePicker: {
            open: false,
            selectedDate: '{{ old('purchase_date', '') }}',
            currentMonth: new Date('{{ old('purchase_date', date('Y-m-d')) }}'),
            today: new Date(),
            formattedDate() {
                if (!this.selectedDate) return 'Select date';
                const d = new Date(this.selectedDate);
                return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            },
            monthYear() {
                return this.currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
            },
            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 = [];
                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) });
                }
                for (let i = 1; i <= daysInMonth; i++) {
                    days.push({ day: i, isCurrentMonth: true, date: new Date(year, month, i) });
                }
                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) {
                this.selectedDate = date.toISOString().split('T')[0];
                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);
            }
        },
        warrantyDatePicker: {
            open: false,
            selectedDate: '{{ old('warranty_expiry', '') }}',
            currentMonth: new Date('{{ old('warranty_expiry', date('Y-m-d')) }}'),
            today: new Date(),
            formattedDate() {
                if (!this.selectedDate) return 'Select date';
                const d = new Date(this.selectedDate);
                return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            },
            monthYear() {
                return this.currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
            },
            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 = [];
                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) });
                }
                for (let i = 1; i <= daysInMonth; i++) {
                    days.push({ day: i, isCurrentMonth: true, date: new Date(year, month, i) });
                }
                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) {
                this.selectedDate = date.toISOString().split('T')[0];
                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);
            }
        }
    }">
        @csrf

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <div class="lg:col-span-2">
                <div class="overflow-visible rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
                    <div class="px-4 py-5 sm:p-6">
                        <h3 class="text-base font-semibold text-gray-900 mb-6">Equipment Information</h3>

                        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                            <div>
                                <label for="equipment_name" class="block text-sm font-medium text-gray-900 mb-2">Equipment Name *</label>
                                <input type="text" id="equipment_name" name="equipment_name" value="{{ old('equipment_name') }}" required class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 placeholder:text-gray-400 focus:inset-ring-2 focus:inset-ring-indigo-600">
                                @error('equipment_name')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div x-data="{
                                open: false,
                                selected: '{{ old('equipment_type') }}',
                                options: {
                                    'autoclave': 'Autoclave',
                                    'tattoo_machine': 'Tattoo Machine',
                                    'power_supply': 'Power Supply',
                                    'furniture': 'Furniture',
                                    'lighting': 'Lighting',
                                    'ventilation': 'Ventilation',
                                    'other': 'Other'
                                },
                                getLabel() {
                                    return this.selected && this.options[this.selected] ? this.options[this.selected] : 'Select Category';
                                }
                            }">
                                <label class="block text-sm font-medium text-gray-900 mb-2">Category *</label>
                                <input type="hidden" id="equipment_type" name="equipment_type" :value="selected" required>

                                <div class="relative">
                                    <button type="button" @click="open = !open" @click.away="open = false"
                                            class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50"
                                            :class="{ 'text-gray-400': !selected }">
                                        <span x-text="getLabel()"></span>
                                        <svg class="-mr-1 size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" 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" />
                                        </svg>
                                    </button>

                                    <div x-show="open" x-transition
                                         class="absolute right-0 z-50 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg outline-1 -outline-offset-1 outline-black/5"
                                         style="display: none;">
                                        <div class="py-1">
                                            <button type="button" @click="selected = 'autoclave'; 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">Autoclave</button>
                                            <button type="button" @click="selected = 'tattoo_machine'; 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">Tattoo Machine</button>
                                            <button type="button" @click="selected = 'power_supply'; 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">Power Supply</button>
                                            <button type="button" @click="selected = 'furniture'; 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">Furniture</button>
                                            <button type="button" @click="selected = 'lighting'; 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">Lighting</button>
                                            <button type="button" @click="selected = 'ventilation'; 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">Ventilation</button>
                                            <button type="button" @click="selected = 'other'; 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">Other</button>
                                        </div>
                                    </div>
                                </div>
                                @error('equipment_type')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="manufacturer" class="block text-sm font-medium text-gray-900 mb-2">Manufacturer</label>
                                <input type="text" id="manufacturer" name="manufacturer" value="{{ old('manufacturer') }}" class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 placeholder:text-gray-400 focus:inset-ring-2 focus:inset-ring-indigo-600">
                                @error('manufacturer')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="model" class="block text-sm font-medium text-gray-900 mb-2">Model</label>
                                <input type="text" id="model" name="model" value="{{ old('model') }}" class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 placeholder:text-gray-400 focus:inset-ring-2 focus:inset-ring-indigo-600">
                                @error('model')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="serial_number" class="block text-sm font-medium text-gray-900 mb-2">Serial Number</label>
                                <input type="text" id="serial_number" name="serial_number" value="{{ old('serial_number') }}" class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 placeholder:text-gray-400 focus:inset-ring-2 focus:inset-ring-indigo-600">
                                @error('serial_number')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="location" class="block text-sm font-medium text-gray-900 mb-2">Location</label>
                                <input type="text" id="location" name="location" value="{{ old('location') }}" class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 placeholder:text-gray-400 focus:inset-ring-2 focus:inset-ring-indigo-600">
                                @error('location')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

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

                                    <div x-show="purchaseDatePicker.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 z-[100] mt-2 w-80 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                                        <div class="p-4">
                                            <div class="flex items-center justify-between mb-4">
                                                <button @click.stop="purchaseDatePicker.previousMonth()" type="button" class="p-1 hover:bg-gray-100 rounded">
                                                    <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                                                    </svg>
                                                </button>
                                                <span class="text-sm font-semibold text-gray-900" x-text="purchaseDatePicker.monthYear()"></span>
                                                <button @click.stop="purchaseDatePicker.nextMonth()" type="button" class="p-1 hover:bg-gray-100 rounded">
                                                    <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                                    </svg>
                                                </button>
                                            </div>
                                            <div class="grid grid-cols-7 gap-1 text-center text-xs mb-2">
                                                <div class="text-gray-500 font-medium">Su</div>
                                                <div class="text-gray-500 font-medium">Mo</div>
                                                <div class="text-gray-500 font-medium">Tu</div>
                                                <div class="text-gray-500 font-medium">We</div>
                                                <div class="text-gray-500 font-medium">Th</div>
                                                <div class="text-gray-500 font-medium">Fr</div>
                                                <div class="text-gray-500 font-medium">Sa</div>
                                            </div>
                                            <div class="grid grid-cols-7 gap-1">
                                                <template x-for="day in purchaseDatePicker.daysInMonth()" :key="day.date">
                                                    <button type="button"
                                                            @click="purchaseDatePicker.selectDate(day.date)"
                                                            class="aspect-square p-1 text-sm rounded hover:bg-gray-100"
                                                            :class="{
                                                                'text-gray-400': !day.isCurrentMonth,
                                                                'text-gray-900': day.isCurrentMonth,
                                                                'bg-indigo-600 text-white hover:bg-indigo-700': purchaseDatePicker.isSelected(day.date),
                                                                'ring-2 ring-indigo-600': purchaseDatePicker.isToday(day.date) && !purchaseDatePicker.isSelected(day.date)
                                                            }"
                                                            x-text="day.day">
                                                    </button>
                                                </template>
                                            </div>
                                        </div>
                                    </div>

                                    <input type="hidden" id="purchase_date" name="purchase_date" :value="purchaseDatePicker.selectedDate">
                                </div>
                                @error('purchase_date')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

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

                                    <div x-show="warrantyDatePicker.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 z-[100] mt-2 w-80 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                                        <div class="p-4">
                                            <div class="flex items-center justify-between mb-4">
                                                <button @click.stop="warrantyDatePicker.previousMonth()" type="button" class="p-1 hover:bg-gray-100 rounded">
                                                    <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                                                    </svg>
                                                </button>
                                                <span class="text-sm font-semibold text-gray-900" x-text="warrantyDatePicker.monthYear()"></span>
                                                <button @click.stop="warrantyDatePicker.nextMonth()" type="button" class="p-1 hover:bg-gray-100 rounded">
                                                    <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                                    </svg>
                                                </button>
                                            </div>
                                            <div class="grid grid-cols-7 gap-1 text-center text-xs mb-2">
                                                <div class="text-gray-500 font-medium">Su</div>
                                                <div class="text-gray-500 font-medium">Mo</div>
                                                <div class="text-gray-500 font-medium">Tu</div>
                                                <div class="text-gray-500 font-medium">We</div>
                                                <div class="text-gray-500 font-medium">Th</div>
                                                <div class="text-gray-500 font-medium">Fr</div>
                                                <div class="text-gray-500 font-medium">Sa</div>
                                            </div>
                                            <div class="grid grid-cols-7 gap-1">
                                                <template x-for="day in warrantyDatePicker.daysInMonth()" :key="day.date">
                                                    <button type="button"
                                                            @click="warrantyDatePicker.selectDate(day.date)"
                                                            class="aspect-square p-1 text-sm rounded hover:bg-gray-100"
                                                            :class="{
                                                                'text-gray-400': !day.isCurrentMonth,
                                                                'text-gray-900': day.isCurrentMonth,
                                                                'bg-indigo-600 text-white hover:bg-indigo-700': warrantyDatePicker.isSelected(day.date),
                                                                'ring-2 ring-indigo-600': warrantyDatePicker.isToday(day.date) && !warrantyDatePicker.isSelected(day.date)
                                                            }"
                                                            x-text="day.day">
                                                    </button>
                                                </template>
                                            </div>
                                        </div>
                                    </div>

                                    <input type="hidden" id="warranty_expiry" name="warranty_expiry" :value="warrantyDatePicker.selectedDate">
                                </div>
                                @error('warranty_expiry')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="mt-6">
                            <label for="notes" class="block text-sm font-medium text-gray-900 mb-2">Notes</label>
                            <textarea id="notes" name="notes" rows="3" class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 placeholder:text-gray-400 focus:inset-ring-2 focus:inset-ring-indigo-600">{{ old('notes') }}</textarea>
                            @error('notes')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div class="overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
                    <div class="px-4 py-5 sm:p-6">
                        <h3 class="text-base font-semibold text-gray-900 mb-6">Settings</h3>

                        <div x-data="{
                            open: false,
                            selected: '{{ old('status', 'active') }}',
                            options: {
                                'active': 'Active',
                                'maintenance': 'Maintenance',
                                'broken': 'Broken',
                                'retired': 'Retired'
                            },
                            getLabel() {
                                return this.selected && this.options[this.selected] ? this.options[this.selected] : 'Select Status';
                            }
                        }">
                            <label class="block text-sm font-medium text-gray-900 mb-2">Status *</label>
                            <input type="hidden" id="status" name="status" :value="selected" required>

                            <div class="relative">
                                <button type="button" @click="open = !open" @click.away="open = false"
                                        class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50"
                                        :class="{ 'text-gray-400': !selected }">
                                    <span x-text="getLabel()"></span>
                                    <svg class="-mr-1 size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" 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" />
                                    </svg>
                                </button>

                                <div x-show="open" x-transition
                                     class="absolute right-0 z-50 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg outline-1 -outline-offset-1 outline-black/5"
                                     style="display: none;">
                                    <div class="py-1">
                                        <button type="button" @click="selected = 'active'; 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">Active</button>
                                        <button type="button" @click="selected = 'maintenance'; 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">Maintenance</button>
                                        <button type="button" @click="selected = 'broken'; 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">Broken</button>
                                        <button type="button" @click="selected = 'retired'; 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">Retired</button>
                                    </div>
                                </div>
                            </div>
                            @error('status')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mt-6">
                            <button type="submit" class="w-full inline-flex justify-center items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                                    <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                                </svg>
                                Add Equipment
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection