@extends('admin.layouts.app')
@section('title', 'New Menu')
@section('page-title', 'New Menu')

@section('content')
<div class="max-w-lg">
    <form method="POST" action="{{ route('admin.menus.store') }}"
          x-data="postForm()" @submit.prevent="submit($event)"
          class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 space-y-4">
        @csrf
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
            <input type="text" name="name" required
                   class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            <p x-show="hasError('name')" x-text="getError('name')" class="text-xs text-red-500 mt-1"></p>
        </div>
        <div x-data="{ location: '' }">
            <input type="hidden" name="location" :value="location">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Location</label>
            <div class="grid grid-cols-2 gap-1 p-1 bg-gray-100 dark:bg-gray-700 rounded-lg">
                @foreach(['' => 'None', 'primary' => 'Primary', 'footer' => 'Footer', 'sidebar' => 'Sidebar'] as $val => $label)
                <button type="button" @click="location = '{{ $val }}'"
                        :class="location === '{{ $val }}' ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700'"
                        class="py-1.5 rounded-md text-xs font-medium transition-all text-center">{{ $label }}</button>
                @endforeach
            </div>
        </div>
        <div x-show="message" x-text="message"
             :class="saved ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300' : 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-300'"
             class="text-xs p-2 rounded border" style="display:none"></div>
        <div class="flex gap-3 pt-2">
            <button type="submit" :disabled="saving"
                    class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white rounded-lg text-sm font-medium flex items-center gap-2">
                <svg x-show="saving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                </svg>
                <span x-text="saving ? 'Creating...' : 'Create'"></span>
            </button>
            <a href="{{ route('admin.menus.index') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium">Cancel</a>
        </div>
    </form>
</div>
@endsection
