@extends('layouts.admin')
@section('title', 'Edit QR Page')
@section('role-label', 'Business Panel')
@section('page-title', 'Edit 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.update', $qrPage) }}">
            @csrf @method('PUT')
            <div class="space-y-5">
                <div>
                    <label class="form-label">Page Title *</label>
                    <input type="text" name="title" value="{{ old('title',$qrPage->title) }}" class="form-input" required>
                    @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',$qrPage->page_type)===$key?'selected':'' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-input" rows="3">{{ old('description',$qrPage->description) }}</textarea>
                </div>
                <div>
                    <label class="form-label">CTA Button Text</label>
                    <input type="text" name="cta_text" value="{{ old('cta_text',$qrPage->cta_text) }}" class="form-input">
                </div>
                <div>
                    <label class="form-label">CTA Button URL</label>
                    <input type="url" name="cta_url" value="{{ old('cta_url',$qrPage->cta_url) }}" class="form-input">
                </div>
                <div>
                    <label class="form-label">Theme Color</label>
                    <div class="flex gap-2">
                        <input type="color" name="theme_color" value="{{ old('theme_color',$qrPage->theme_color ?? '#8B5CF6') }}" class="w-12 h-10 rounded-lg border border-white/10 cursor-pointer bg-transparent" oninput="document.getElementById('colorHex2').value=this.value">
                        <input type="text" id="colorHex2" class="form-input" value="{{ old('theme_color',$qrPage->theme_color ?? '#8B5CF6') }}" readonly>
                    </div>
                </div>
                <div>
                    <label class="form-label">Status</label>
                    <select name="status" class="form-input">
                        <option value="active" {{ old('status',$qrPage->status)==='active'?'selected':'' }}>Active</option>
                        <option value="inactive" {{ old('status',$qrPage->status)==='inactive'?'selected':'' }}>Inactive</option>
                    </select>
                </div>

                <!-- Public URL display -->
                <div class="bg-white/5 rounded-xl p-3">
                    <div class="text-xs text-slate-500 mb-1">Public URL</div>
                    <div class="font-mono text-xs text-amber-400 break-all">{{ url('/q/'.$qrPage->restaurant->slug.'/page/'.$qrPage->slug) }}</div>
                </div>

                <div class="flex gap-3 pt-2">
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                    <a href="{{ route('business.qr-pages.index') }}" class="btn btn-secondary">Cancel</a>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection