<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Started — Register your Restaurant | RestPO</title>
    <meta name="description" content="Join RestPO today. Register your restaurant, setup your admin account, and select a plan to streamline your POS operations.">
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        *{font-family:'Outfit',sans-serif;margin:0;padding:0;box-sizing:border-box}
        body{background:#f8fafc;color:#475569;overflow-x:hidden}
        
        h1, h2, h3, h4, h5, h6 { color: #0f172a !important; }
        .text-slate-300, .text-slate-400 { color: #64748b !important; }
        
        .mesh{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0}
        .mesh-1{width:500px;height:500px;background:radial-gradient(circle,rgba(139,92,246,.12),transparent 70%);top:-100px;left:-100px;animation:drift1 15s ease-in-out infinite alternate}
        .mesh-2{width:500px;height:500px;background:radial-gradient(circle,rgba(6,182,212,.1),transparent 70%);bottom:-100px;right:-100px;animation:drift2 18s ease-in-out infinite alternate}
        @keyframes drift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,30px) scale(1.1)}}
        @keyframes drift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-30px,40px) scale(1.15)}}

        .glass{background:rgba(255,255,255,0.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,0.06);box-shadow:0 10px 30px -10px rgba(0,0,0,0.04)}
        .glass-card{background:rgba(255,255,255,0.85);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid rgba(0,0,0,0.06);box-shadow:0 20px 50px -15px rgba(0,0,0,0.08)}
        
        .form-input{background:rgba(0,0,0,0.02) !important;border:1px solid rgba(0,0,0,0.08) !important;border-radius:12px;padding:12px 16px;color:#0f172a !important;width:100%;font-size:14px;transition:all 0.3s ease;outline:none}
        .form-input:focus{border-color:#8b5cf6 !important;background:rgba(255,255,255,1) !important;box-shadow:0 0 0 3px rgba(139,92,246,0.1) !important;}
        .form-input::placeholder{color:#94a3b8 !important;}
        
        .btn-submit{background:linear-gradient(135deg,#8b5cf6,#6d28d9);transition:all .3s ease;position:relative;overflow:hidden;color:white !important;}
        .btn-submit::after{content:'';position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:rotate(25deg);transition:left .6s ease}
        .btn-submit:hover::after{left:120%}
        .btn-submit:hover{transform:translateY(-1px);box-shadow:0 10px 25px rgba(139,92,246,0.2)}
    </style>
</head>
<body class="min-h-screen flex flex-col justify-between relative">
    <!-- Gradient Meshes -->
    <div class="mesh mesh-1"></div>
    <div class="mesh mesh-2"></div>

    <!-- Top Navigation -->
    <header class="w-full max-w-7xl mx-auto px-6 py-6 flex justify-between items-center relative z-10">
        <a href="/restpo" class="flex items-center gap-2.5 text-2xl font-extrabold tracking-tight text-slate-900 animate-fade-in">
            <?php if (!empty($websiteLogo)): ?>
                <img src="<?php echo htmlspecialchars($websiteLogo); ?>" alt="Logo" class="h-9 object-contain rounded-lg">
            <?php else: ?>
                <span class="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">Rest</span>PO
            <?php endif; ?>
        </a>
        <a href="/restpo" class="flex items-center gap-2 text-sm text-slate-500 hover:text-slate-900 transition duration-200">
            <i class="fas fa-arrow-left"></i> Back to Home
        </a>
    </header>

    <!-- Main Registration Container -->
    <main class="w-full max-w-5xl mx-auto px-6 py-6 relative z-10 flex-1 flex flex-col justify-center">
        <div class="glass-card rounded-3xl overflow-hidden shadow-2xl p-8 md:p-10">
            <!-- Header Section -->
            <div class="text-center max-w-2xl mx-auto mb-10">
                <span class="px-3.5 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-violet-600/10 text-violet-600 border border-violet-500/20">Restaurant Registration</span>
                <h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 mt-4 tracking-tight">Launch Your Digital Restaurant</h1>
                <p class="text-slate-650 mt-2 text-sm md:text-base">Provide details below to create your restaurant workspace and administrative account.</p>
            </div>

            <!-- Error / Success Notification -->
            <?php if (isset($error) && $error): ?>
                <div class="mb-8 p-4 rounded-xl bg-rose-500/10 border border-rose-500/25 text-rose-400 text-sm flex items-start gap-3">
                    <i class="fas fa-exclamation-circle mt-0.5 flex-shrink-0 text-base"></i>
                    <div>
                        <span class="font-bold">Registration Error:</span> <?php echo htmlspecialchars(urldecode($error)); ?>
                    </div>
                </div>
            <?php endif; ?>

            <?php if (isset($success) && $success): ?>
                <div class="mb-8 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/25 text-emerald-400 text-sm flex items-start gap-3">
                    <i class="fas fa-check-circle mt-0.5 flex-shrink-0 text-base"></i>
                    <div>
                        <span class="font-bold">Success:</span> <?php echo htmlspecialchars(urldecode($success)); ?>
                    </div>
                </div>
            <?php endif; ?>

            <!-- Form -->
            <form action="/register" method="POST" x-data="registerForm(<?php echo htmlspecialchars(json_encode($packages)); ?>)">
                <!-- STEP INDICATORS -->
                <div class="flex items-center justify-center gap-4 mb-8">
                    <button type="button" @click="step = 1" class="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition" :class="step === 1 ? 'bg-violet-600 text-white' : 'bg-white/5 text-slate-400 hover:bg-white/10'">
                    <button type="button" @click="step = 1" class="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition" :class="step === 1 ? 'bg-violet-600 text-white' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'">
                        <span class="w-5 h-5 rounded-full flex items-center justify-center text-xs" :class="step === 1 ? 'bg-white text-violet-600' : 'bg-slate-300 text-white'">1</span> Restaurant Info
                    </button>
                    <div class="h-[1px] w-8 bg-slate-200"></div>
                    <button type="button" @click="step = 2" class="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition" :class="step === 2 ? 'bg-violet-600 text-white' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'" :disabled="!validateStep1()">
                        <span class="w-5 h-5 rounded-full flex items-center justify-center text-xs" :class="step === 2 ? 'bg-white text-violet-600' : 'bg-slate-300 text-white'">2</span> Plan & Admin
                    </button>
                </div>

                <!-- STEP 1: Restaurant Info -->
                <div x-show="step === 1" class="space-y-6" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Restaurant Name -->
                        <div class="space-y-2">
                            <label class="block text-sm font-semibold text-slate-700">Restaurant Name <span class="text-rose-500">*</span></label>
                            <div class="relative">
                                <i class="fas fa-utensils absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                                <input type="text" name="restaurant_name" required x-model="restaurantName" @input="suggestSlug" class="form-input pl-12" placeholder="e.g. Spice Fusion">
                            </div>
                        </div>



                        <!-- Restaurant Email -->
                        <div class="space-y-2">
                            <label class="block text-sm font-semibold text-slate-700">Restaurant Contact Email</label>
                            <div class="relative">
                                <i class="fas fa-envelope absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                                <input type="email" name="restaurant_email" class="form-input pl-12" placeholder="e.g. contact@spicefusion.com">
                            </div>
                        </div>

                        <!-- Restaurant Phone -->
                        <div class="space-y-2">
                            <label class="block text-sm font-semibold text-slate-700">Restaurant Contact Phone</label>
                            <div class="relative">
                                <i class="fas fa-phone absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                                <input type="tel" name="restaurant_phone" class="form-input pl-12" placeholder="e.g. +1 234 567 8900">
                            </div>
                        </div>
                    </div>

                    <!-- Restaurant Address -->
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-slate-700">Restaurant Address</label>
                        <div class="relative">
                            <i class="fas fa-map-marker-alt absolute left-4 top-4 text-slate-400"></i>
                            <textarea name="restaurant_address" rows="3" class="form-input pl-12 resize-none" placeholder="e.g. 123 Gourmet Street, Food District"></textarea>
                        </div>
                    </div>

                    <div class="flex justify-end pt-4">
                        <button type="button" @click="step = 2" :disabled="!validateStep1()" class="px-6 py-3 rounded-xl font-bold bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50 disabled:cursor-not-allowed transition duration-200 flex items-center gap-2">
                            Next Step: Choose Plan & Account <i class="fas fa-arrow-right"></i>
                        </button>
                    </div>
                </div>

                <!-- STEP 2: Choose Plan & Admin User -->
                <div x-show="step === 2" class="space-y-8" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-4" x-transition:enter-end="opacity-100 transform translate-x-0">
                    
                    <!-- Choose Package -->
                    <div class="space-y-4">
                        <label class="block text-sm font-semibold text-slate-700 mb-2">Select Your Location & Subscription Plan <span class="text-rose-500">*</span></label>
                        
                        <!-- Location/Region Selector -->
                        <div class="flex gap-4 mb-6">
                            <button type="button" @click="location = 'bangladesh'; selectFirstPackage()" 
                                    class="flex-1 py-3.5 px-4 rounded-xl border font-bold text-sm transition flex items-center justify-center gap-2"
                                    :class="location === 'bangladesh' ? 'bg-violet-600 text-white border-violet-500 shadow-md' : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'">
                                🇧🇩 Bangladesh (BDT)
                            </button>
                            <button type="button" @click="location = 'global'; selectFirstPackage()" 
                                    class="flex-1 py-3.5 px-4 rounded-xl border font-bold text-sm transition flex items-center justify-center gap-2"
                                    :class="location === 'global' ? 'bg-violet-600 text-white border-violet-500 shadow-md' : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'">
                                🌍 Global (USD)
                            </button>
                        </div>

                        <input type="hidden" name="package_id" :value="selectedPackage">
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <!-- Package Cards -->
                            <template x-for="pkg in filteredPackages()" :key="pkg.id">
                                <div @click="selectedPackage = pkg.id" 
                                     class="p-5 rounded-2xl cursor-pointer transition-all duration-300 flex flex-col justify-between relative overflow-hidden"
                                     :class="selectedPackage == pkg.id ? 'bg-violet-600/10 border-2 border-violet-500 shadow-[0_0_20px_rgba(139,92,246,0.1)]' : 'bg-white border border-slate-200/80 hover:border-slate-300 hover:bg-slate-50/50'">
                                    
                                    <div class="absolute -right-6 -top-6 w-16 h-16 rounded-full bg-violet-500/10 flex items-center justify-center transition-transform duration-300" :class="selectedPackage == pkg.id ? 'scale-110 bg-violet-500/20' : ''">
                                        <i class="fas fa-check text-xs text-violet-600 absolute right-8 top-8" x-show="selectedPackage == pkg.id"></i>
                                    </div>

                                    <div>
                                        <h3 class="text-lg font-bold text-slate-900" x-text="pkg.name"></h3>
                                        <p class="text-slate-500 text-xs mt-1" x-text="pkg.duration_days + ' Days Access'"></p>
                                        
                                        <!-- Price -->
                                        <div class="mt-4 flex items-baseline gap-1">
                                            <span class="text-3xl font-extrabold text-slate-900" x-text="(pkg.currency || '$') + parseFloat(pkg.price).toFixed(0)"></span>
                                            <span class="text-slate-500 text-xs font-medium" x-text="'/ ' + pkg.duration_days + ' Days'"></span>
                                        </div>

                                        <!-- Features List -->
                                        <ul class="mt-6 space-y-2.5 mb-2">
                                            <template x-for="(value, feature) in pkg.features_decoded" :key="feature">
                                                <li class="flex items-start gap-2.5 text-sm text-slate-600">
                                                    <div class="mt-0.5 w-4 h-4 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0">
                                                        <i class="fas fa-check text-emerald-600" style="font-size:8px;"></i>
                                                    </div>
                                                    <span class="leading-tight">
                                                        <strong x-show="value !== true && value !== 'true' && value !== 'yes' && value !== '1' && value !== 1" x-text="value + ' '"></strong>
                                                        <span x-text="feature.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())"></span>
                                                    </span>
                                                </li>
                                            </template>
                                        </ul>
                                    </div>

                                    <!-- Hidden radio option -->
                                    <div class="mt-4 pt-4 border-t border-slate-100 flex items-center justify-between">
                                        <span class="text-xs text-slate-400">Select this plan</span>
                                        <div class="w-4 h-4 rounded-full border flex items-center justify-center" :class="selectedPackage == pkg.id ? 'border-violet-600' : 'border-slate-300'">
                                            <div class="w-2 h-2 rounded-full bg-violet-600" x-show="selectedPackage == pkg.id"></div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <!-- Admin User Info -->
                    <div class="border-t border-slate-200 pt-6 space-y-6">
                        <h3 class="text-base font-bold text-slate-900"><i class="fas fa-user-shield text-violet-600 mr-2"></i>Administrator Account</h3>
                        <p class="text-xs text-slate-500 -mt-4">This account will be used to login as owner/administrator of the restaurant POS dashboard.</p>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <!-- Admin Name -->
                            <div class="space-y-2">
                                <label class="block text-sm font-semibold text-slate-700">Admin Name <span class="text-rose-500">*</span></label>
                                <div class="relative">
                                    <i class="fas fa-user absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                                    <input type="text" name="admin_name" required x-model="adminName" class="form-input pl-12" placeholder="e.g. John Doe">
                                </div>
                            </div>

                            <!-- Admin Email -->
                            <div class="space-y-2">
                                <label class="block text-sm font-semibold text-slate-700">Admin Login Email <span class="text-rose-500">*</span></label>
                                <div class="relative">
                                    <i class="fas fa-envelope absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                                    <input type="email" name="admin_email" required x-model="adminEmail" class="form-input pl-12" placeholder="e.g. owner@example.com">
                                </div>
                            </div>

                            <!-- Phone -->
                            <div class="space-y-2">
                                <label class="block text-sm font-semibold text-slate-700">Admin Phone</label>
                                <div class="relative">
                                    <i class="fas fa-phone absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                                    <input type="tel" name="admin_phone" class="form-input pl-12" placeholder="e.g. +1 234 567 8900">
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Password -->
                            <div class="space-y-2">
                                <label class="block text-sm font-semibold text-slate-700">Password <span class="text-rose-500">*</span></label>
                                <div class="relative">
                                    <i class="fas fa-lock absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                                    <input type="password" name="admin_password" required x-model="adminPassword" class="form-input pl-12" placeholder="Min. 6 characters">
                                </div>
                            </div>

                            <!-- Confirm Password -->
                            <div class="space-y-2">
                                <label class="block text-sm font-semibold text-slate-700">Confirm Password <span class="text-rose-500">*</span></label>
                                <div class="relative">
                                    <i class="fas fa-lock absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                                    <input type="password" name="confirm_password" required x-model="confirmPassword" class="form-input pl-12" placeholder="Repeat password">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Message / Comments -->
                    <div class="space-y-2">
                        <label class="block text-sm font-semibold text-slate-700">Special Notes or Messages for Approval</label>
                        <div class="relative">
                            <i class="fas fa-comment absolute left-4 top-4 text-slate-400"></i>
                            <textarea name="message" rows="2" class="form-input pl-12 resize-none" placeholder="Let us know if you have any questions or customization needs."></textarea>
                        </div>
                    </div>

                    <!-- Navigation buttons -->
                    <div class="flex justify-between items-center pt-4">
                        <button type="button" @click="step = 1" class="px-6 py-3 rounded-xl font-bold bg-slate-100 text-slate-600 hover:bg-slate-200 transition duration-200 flex items-center gap-2">
                            <i class="fas fa-arrow-left"></i> Previous Step
                        </button>
                        
                        <button type="submit" :disabled="!validateStep2()" class="btn-submit px-8 py-3 rounded-xl font-bold text-white disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2">
                            Submit Registration <i class="fas fa-check-circle"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </main>

    <!-- Footer -->
    <footer class="w-full max-w-7xl mx-auto px-6 py-6 text-center text-xs text-slate-600 relative z-10">
        &copy; <?php echo date('Y'); ?> RestPO. All Rights Reserved.
    </footer>

    <!-- Alpine.js logic -->
    <script>
        function registerForm(packagesList) {
            return {
                step: 1,
                restaurantName: '',
                adminName: '',
                adminEmail: '',
                adminPassword: '',
                confirmPassword: '',
                location: 'bangladesh',
                packages: packagesList || [],
                selectedPackage: null,
                
                init() {
                    this.selectFirstPackage();
                },

                filteredPackages() {
                    return this.packages.filter(pkg => {
                        if (this.location === 'bangladesh') {
                            return pkg.currency === '৳';
                        } else {
                            return pkg.currency !== '৳';
                        }
                    });
                },

                selectFirstPackage() {
                    const filtered = this.filteredPackages();
                    if (filtered.length > 0) {
                        this.selectedPackage = filtered[0].id;
                    } else {
                        this.selectedPackage = null;
                    }
                },
                validateStep1() {
                    return this.restaurantName.trim().length > 0;
                },
                
                validateStep2() {
                    return this.adminName.trim().length > 0 &&
                           this.adminEmail.trim().length > 0 &&
                           this.adminPassword.length >= 6 &&
                           this.adminPassword === this.confirmPassword &&
                           this.selectedPackage !== null;
                }
            }
        }
    </script>
</body>
</html>
