@extends('layouts.admin')
@section('title', 'Add Restaurant')
@section('role-label', 'Super Admin')
@section('page-title', 'Add Restaurant')
@section('page-subtitle', 'Create a new restaurant account')
@section('sidebar-nav')
@include('super-admin.partials.sidebar')
@endsection

@section('content')
<div class="max-w-2xl">
    <form method="POST" action="{{ route('super-admin.restaurants.store') }}" enctype="multipart/form-data">
        @csrf

        {{-- Status: top-left --}}
        <div class="mb-4">
            <span class="badge badge-success text-sm px-4 py-2">Status: Active (auto-set on creation)</span>
        </div>

        <div class="card p-6 mb-4">
            <h3 class="text-sm font-bold text-gray-500 uppercase tracking-wider mb-4 pb-3 border-b border-gray-100">Restaurant Info</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div class="sm:col-span-2">
                    <label class="form-label">Restaurant Name *</label>
                    <input type="text" name="name" class="form-input" value="{{ old('name') }}" required>
                    @error('name')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="form-label">Admin Email *</label>
                    <input type="email" name="email" class="form-input" value="{{ old('email') }}" required>
                    @error('email')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="form-label">Username * <span class="text-xs text-gray-400 font-normal">(lowercase, no spaces)</span></label>
                    <input type="text" name="username" class="form-input" value="{{ old('username') }}" required pattern="[a-z0-9_\-]+" placeholder="e.g. spicegarden_owner">
                    @error('username')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="form-label">Phone *</label>
                    <input type="text" name="phone" class="form-input" value="{{ old('phone') }}" required>
                </div>
                <div>
                    <label class="form-label">WhatsApp Number</label>
                    <input type="text" name="whatsapp_number" class="form-input" value="{{ old('whatsapp_number') }}" placeholder="91XXXXXXXXXX">
                </div>
                <div>
                    <label class="form-label">Theme Color</label>
                    <input type="color" name="theme_color" class="form-input h-11 p-1" value="{{ old('theme_color', '#F59E0B') }}">
                </div>
                <div>
                    <label class="form-label">City</label>
                    <input type="text" name="city" class="form-input" value="{{ old('city') }}">
                </div>
                <div>
                    <label class="form-label">State</label>
                    <input type="text" name="state" class="form-input" value="{{ old('state') }}">
                </div>
                <div class="sm:col-span-2">
                    <label class="form-label">Address</label>
                    <textarea name="address" class="form-input" rows="2">{{ old('address') }}</textarea>
                </div>
                <div class="sm:col-span-2">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-input" rows="2">{{ old('description') }}</textarea>
                </div>
                <div class="sm:col-span-2">
                    <label class="form-label">Logo</label>
                    <input type="file" name="logo" class="form-input" accept="image/jpg,image/jpeg,image/png,image/webp">
                </div>
                <div class="sm:col-span-2">
                    <label class="form-label">Cover Image</label>
                    <input type="file" name="cover_image" class="form-input" accept="image/jpg,image/jpeg,image/png,image/webp">
                </div>
            </div>
        </div>

        <div class="card p-6 mb-4">
            <h3 class="text-sm font-bold text-gray-500 uppercase tracking-wider mb-4 pb-3 border-b border-gray-100">Dates & Subscription</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="form-label">Restaurant Opening Date</label>
                    <input type="date" name="opening_date" class="form-input" value="{{ old('opening_date') }}">
                </div>
                <div>
                    <label class="form-label">Subscription End Date</label>
                    <input type="date" name="subscription_end_date" class="form-input" value="{{ old('subscription_end_date') }}">
                </div>
                <div class="sm:col-span-2">
                    <p class="text-xs text-gray-400">Registration date and day will be auto-generated when you save.</p>
                </div>
            </div>
        </div>

        <div class="card p-6 mb-4">
            <h3 class="text-sm font-bold text-gray-500 uppercase tracking-wider mb-4 pb-3 border-b border-gray-100">Admin Account Password</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="form-label">Password *</label>
                    <input type="password" name="password" class="form-input" required minlength="10">
                    <p class="text-gray-400 text-xs mt-1">Min. 10 characters, upper+lowercase, a number</p>
                    @error('password')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="form-label">Confirm Password *</label>
                    <input type="password" name="password_confirmation" class="form-input" required>
                </div>
            </div>
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ route('super-admin.restaurants.index') }}" class="btn btn-secondary">Cancel</a>
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
    </form>
</div>
@endsection