@extends('layouts.admin', ['title' => 'Add New Business - Booklio', 'pageTitle' => $pageTitle ?? 'Add New Business', 'active' => $active ?? 'settings'])

@section('content')
    <div class="mx-auto max-w-3xl space-y-5">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <p class="text-sm font-semibold text-booklio-muted">Create another business workspace under your owner account.</p>
            <x-ui.button variant="secondary" href="{{ route('admin.businesses.index') }}">
                <x-ui.icon name="arrow-left" class="h-4 w-4" />
                Back to businesses
            </x-ui.button>
        </div>

        <x-ui.card title="Business Details" description="Backend-ready fields for multi-business SaaS ownership.">
            <form method="POST" action="{{ route('admin.businesses.store') }}" class="space-y-5">
                @csrf

                <div class="grid gap-4 sm:grid-cols-2">
                    <label class="block">
                        <span class="text-sm font-bold text-slate-700">Business name <span class="text-booklio-danger">*</span></span>
                        <input name="name" value="{{ old('name') }}" required class="mt-2 h-11 w-full rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-booklio-dark outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                        @error('name') <span class="mt-1 block text-xs font-bold text-booklio-danger">{{ $message }}</span> @enderror
                    </label>

                    <label class="block">
                        <span class="text-sm font-bold text-slate-700">Booking slug</span>
                        <input name="slug" value="{{ old('slug') }}" placeholder="glow-beauty-salon" class="mt-2 h-11 w-full rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-booklio-dark outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                        <span class="mt-1 block text-xs font-medium text-booklio-muted">Leave blank to generate from the business name.</span>
                        @error('slug') <span class="mt-1 block text-xs font-bold text-booklio-danger">{{ $message }}</span> @enderror
                    </label>
                </div>

                <div class="grid gap-4 sm:grid-cols-2">
                    <label class="block">
                        <span class="text-sm font-bold text-slate-700">Business email</span>
                        <input type="email" name="email" value="{{ old('email') }}" class="mt-2 h-11 w-full rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-booklio-dark outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                        @error('email') <span class="mt-1 block text-xs font-bold text-booklio-danger">{{ $message }}</span> @enderror
                    </label>

                    <label class="block">
                        <span class="text-sm font-bold text-slate-700">Phone</span>
                        <input name="phone" value="{{ old('phone') }}" class="mt-2 h-11 w-full rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-booklio-dark outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                        @error('phone') <span class="mt-1 block text-xs font-bold text-booklio-danger">{{ $message }}</span> @enderror
                    </label>
                </div>

                <label class="block">
                    <span class="text-sm font-bold text-slate-700">Address</span>
                    <input name="address" value="{{ old('address') }}" class="mt-2 h-11 w-full rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-booklio-dark outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                    @error('address') <span class="mt-1 block text-xs font-bold text-booklio-danger">{{ $message }}</span> @enderror
                </label>

                <label class="block">
                    <span class="text-sm font-bold text-slate-700">Description</span>
                    <textarea name="description" rows="4" class="mt-2 w-full rounded-lg border border-booklio-border bg-white px-3 py-3 text-sm font-semibold text-booklio-dark outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">{{ old('description') }}</textarea>
                    @error('description') <span class="mt-1 block text-xs font-bold text-booklio-danger">{{ $message }}</span> @enderror
                </label>

                <div class="flex flex-col-reverse gap-3 border-t border-booklio-border pt-5 sm:flex-row sm:justify-end">
                    <x-ui.button variant="secondary" href="{{ route('admin.businesses.index') }}">Cancel</x-ui.button>
                    <x-ui.button type="submit">
                        <x-ui.icon name="check" class="h-4 w-4" />
                        Create Business
                    </x-ui.button>
                </div>
            </form>
        </x-ui.card>
    </div>
@endsection