@extends('layouts.admin')
@section('title', 'New QR Page')
@section('role-label', 'Business Panel')
@section('page-title', 'Create QR Page')
@section('sidebar-nav')@include('restaurant-admin.partials.sidebar')@endsection

@section('content')
<div class="max-w-lg">
    <div class="card p-6">
        <form method="POST" action="{{ route('business.qr-pages.store') }}">
            @csrf
            <div class="space-y-5">
                <div>
                    <label class="form-label">Page Title *</label>
                    <input type="text" name="title" value="{{ old('title') }}" class="form-input" required placeholder="e.g. Book an Appointment">
                    @error('title')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="form-label">Page Type *</label>
                    <select name="page_type" class="form-input" required>
                        @foreach(['menu'=>'🍽️ Menu','booking'=>'📅 Booking','catalog'=>'🛍️ Catalog','review'=>'⭐ Reviews','contact'=>'📞 Contact','hotel_room'=>'🏨 Hotel Room','event'=>'🎉 Event','gym_packages'=>'💪 Gym Packages','services'=>'✂️ Services'] as $key=>$label)
                        <option value="{{ $key }}" {{ old('page_type')===$key?'selected':'' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('page_type')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-input" rows="3" placeholder="Brief description shown on the page…">{{ old('description') }}</textarea>
                </div>
                <div>
                    <label class="form-label">CTA Button Text</label>
                    <input type="text" name="cta_text" value="{{ old('cta_text') }}" class="form-input" placeholder="e.g. Register Now">
                </div>
                <div>
                    <label class="form-label">CTA Button URL</label>
                    <input type="url" name="cta_url" value="{{ old('cta_url') }}" class="form-input" placeholder="https://…">
                </div>
                <div>
                    <label class="form-label">Theme Color</label>
                    <div class="flex gap-2">
                        <input type="color" name="theme_color" value="{{ old('theme_color', '#8B5CF6') }}" class="w-12 h-10 rounded-lg border border-white/10 cursor-pointer bg-transparent">
                        <input type="text" id="colorHex" class="form-input" value="{{ old('theme_color', '#8B5CF6') }}" readonly>
                    </div>
                </div>
                <div>
                    <label class="form-label">Status</label>
                    <select name="status" class="form-input">
                        <option value="active" {{ old('status','active')==='active'?'selected':'' }}>Active</option>
                        <option value="inactive" {{ old('status')==='inactive'?'selected':'' }}>Inactive</option>
                    </select>
                </div>
                <div class="flex gap-3 pt-2">
                    <button type="submit" class="btn btn-primary">Create Page</button>
                    <a href="{{ route('business.qr-pages.index') }}" class="btn btn-secondary">Cancel</a>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
<script>
document.querySelector('input[type=color]').addEventListener('input', function() {
    document.getElementById('colorHex').value = this.value;
});
</script>
@endsection