<x-layouts.portal title="New Area" page-title="Create Area">

<div class="max-w-xl mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <a href="{{ route('portal.table-areas.index') }}" class="flex items-center text-[10px] font-bold text-zinc-500 uppercase tracking-widest hover:text-amber-600 transition-colors">
            <svg class="w-3 h-3 mr-1" 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"></path></svg>
            Back to Areas
        </a>
    </div>

    <x-card title="Area Details">
        <form action="{{ route('portal.table-areas.store') }}" method="POST" class="space-y-4">
            @csrf
            
            <x-input name="name" label="Area Name" placeholder="e.g., Main Hall, Outdoor Patio" required autofocus />

            <x-select name="is_active" label="Status">
                <option value="1">Active</option>
                <option value="0">Hidden/Closed</option>
            </x-select>

            <div class="pt-4 flex justify-end">
                <x-button type="submit">
                    Create Area
                </x-button>
            </div>
        </form>
    </x-card>
</div>

</x-layouts.portal>
