@extends('layouts.admin')

@section('title', $mode === 'create' ? 'Add Service Area' : 'Edit Service Area')
@section('eyebrow', 'Content Modules')
@section('heading', $mode === 'create' ? 'Add Service Area' : 'Edit Service Area')

@section('header_actions')
    <div class="flex flex-wrap gap-3">
        <a href="{{ route('admin.service-areas.index') }}" class="lunara-button-secondary">Back to Service Areas</a>
        @if ($mode === 'edit')
            <a href="{{ route('pages.show', ['slug' => 'service-areas']) }}" target="_blank" class="lunara-button-primary">Preview Page</a>
        @endif
    </div>
@endsection

@section('content')
    <form method="POST" action="{{ $mode === 'create' ? route('admin.service-areas.store') : route('admin.service-areas.update', $serviceArea) }}" class="space-y-8">
        @csrf
        @if ($mode === 'edit')
            @method('PUT')
        @endif

        <section class="lunara-card p-7">
            <div class="grid gap-6 md:grid-cols-2">
                <div>
                    <label class="lunara-label" for="name">Area name</label>
                    <input id="name" name="name" value="{{ old('name', $serviceArea->name) }}" class="lunara-admin-input" required>
                </div>
                <div>
                    <label class="lunara-label" for="slug">Slug</label>
                    <input id="slug" name="slug" value="{{ old('slug', $serviceArea->slug) }}" class="lunara-admin-input" placeholder="Auto-generated if blank">
                </div>
                <div>
                    <label class="lunara-label" for="tag">Tag</label>
                    <input id="tag" name="tag" value="{{ old('tag', $serviceArea->tag) }}" class="lunara-admin-input" placeholder="High demand">
                </div>
                <div>
                    <label class="lunara-label" for="sort_order">Sort order</label>
                    <input id="sort_order" type="number" min="0" name="sort_order" value="{{ old('sort_order', $serviceArea->sort_order) }}" class="lunara-admin-input">
                </div>
                <div class="md:col-span-2">
                    <label class="lunara-label" for="description">Description</label>
                    <textarea id="description" name="description" class="lunara-admin-textarea min-h-48">{{ old('description', $serviceArea->description) }}</textarea>
                </div>
                <div class="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-4">
                    <input type="hidden" name="is_featured" value="0">
                    <input id="is_featured" type="checkbox" name="is_featured" value="1" @checked(old('is_featured', $serviceArea->is_featured)) class="h-5 w-5 rounded border-white/20 bg-transparent text-accent focus:ring-accent/20">
                    <label for="is_featured" class="lunara-label">Featured on public pages</label>
                </div>
                <div class="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-4">
                    <input type="hidden" name="is_published" value="0">
                    <input id="is_published" type="checkbox" name="is_published" value="1" @checked(old('is_published', $serviceArea->is_published)) class="h-5 w-5 rounded border-white/20 bg-transparent text-accent focus:ring-accent/20">
                    <label for="is_published" class="lunara-label">Published</label>
                </div>
            </div>
        </section>

        <div class="flex flex-wrap gap-3">
            <button type="submit" class="lunara-button-primary">{{ $mode === 'create' ? 'Create Service Area' : 'Save Service Area' }}</button>
            <a href="{{ route('admin.service-areas.index') }}" class="lunara-button-secondary">Cancel</a>
        </div>
    </form>
@endsection