@php
    $inputClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 border-gray-300 dark:border-gray-700';
    $inputErrorClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700';
@endphp

<div>
    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Menu Name <span
            class="text-error-500">*</span></label>
    <input type="text" name="menu_name" value="{{ old('menu_name', $menu?->menu_name) }}" placeholder="e.g. About Us"
        class="{{ $errors->has('menu_name') ? $inputErrorClass : $inputClass }}" required>
    @error('menu_name')<p class="text-theme-xs mt-1.5 text-error-500">{{ $message }}</p>@enderror
</div>

<div>
    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Parent Menu</label>
    <select name="menu_parent_id" class="{{ $errors->has('menu_parent_id') ? $inputErrorClass : $inputClass }}">
        <option value="0">-- None (Top Level) --</option>
        @foreach($parentMenus ?? [] as $parentId => $parentName)
            <option value="{{ $parentId }}" @selected(old('menu_parent_id', $menu?->menu_parent_id ?? 0) == $parentId)>
                {{ $parentName }}
            </option>
        @endforeach
    </select>
    <p class="mt-1.5 text-theme-xs text-gray-500 dark:text-gray-400">Select a parent menu to create a submenu.</p>
    @error('menu_parent_id')<p class="text-theme-xs mt-1.5 text-error-500">{{ $message }}</p>@enderror
</div>

<div>
    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Menu Link</label>
    <input type="text" name="menu_link" value="{{ old('menu_link', $menu?->menu_link) }}"
        placeholder="e.g. /the-slug-url" class="{{ $errors->has('menu_link') ? $inputErrorClass : $inputClass }}">
    <p class="mt-1.5 text-theme-xs text-gray-500 dark:text-gray-400">Use slug format: /page-name</p>
    @error('menu_link')<p class="text-theme-xs mt-1.5 text-error-500">{{ $message }}</p>@enderror
</div>

<div>
    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Status</label>
    <label
        class="flex h-11 items-center gap-2 rounded-lg border border-gray-300 px-4 text-sm text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">
        <input type="checkbox" name="menu_status" value="1" @checked(old('menu_status', $menu?->menu_status ?? true))>
        Active
    </label>
    <p class="mt-1.5 text-theme-xs text-gray-500 dark:text-gray-400">Inactive menus will not appear on the frontend.</p>
    @error('menu_status')<p class="text-theme-xs mt-1.5 text-error-500">{{ $message }}</p>@enderror
</div>

<div>
    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Menu Icon</label>
    <input type="text" name="menu_icon" value="{{ old('menu_icon', $menu?->menu_icon) }}"
        placeholder="e.g. &lt;i class='fa fa-home'&gt;&lt;/i&gt;"
        class="{{ $errors->has('menu_icon') ? $inputErrorClass : $inputClass }}">
    @error('menu_icon')<p class="text-theme-xs mt-1.5 text-error-500">{{ $message }}</p>@enderror
</div>

<div>
    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Menu Class</label>
    <input type="text" name="menu_class" value="{{ old('menu_class', $menu?->menu_class) }}"
        placeholder="e.g. fa fa-home" class="{{ $errors->has('menu_class') ? $inputErrorClass : $inputClass }}">
    <p class="mt-1.5 text-theme-xs text-gray-500 dark:text-gray-400">CSS class for icon. Uses FontAwesome.</p>
    @error('menu_class')<p class="text-theme-xs mt-1.5 text-error-500">{{ $message }}</p>@enderror
</div>