<!-- Create Restaurant Content -->
<div class="max-w-3xl">
    <div class="mb-6">
        <a href="/restpo/superadmin/restaurants" class="text-slate-400 hover:text-white text-sm flex items-center gap-2">
            <i class="fas fa-arrow-left text-xs"></i> Back to Restaurants
        </a>
    </div>

    <div class="rounded-2xl overflow-hidden" style="background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08)">
        <div class="px-6 py-4 border-b border-white/5">
            <h2 class="text-lg font-semibold text-white">New Restaurant</h2>
            <p class="text-slate-400 text-sm mt-0.5">This creates a restaurant account and its admin user in one step.</p>
        </div>
        <form action="/restpo/superadmin/restaurants/store" method="POST" class="p-6 space-y-6">
            <div>
                <h3 class="text-sm font-semibold text-slate-300 uppercase tracking-wider mb-4">Restaurant Info</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-slate-400 mb-1.5">Restaurant Name *</label>
                        <input type="text" name="name" required class="w-full px-4 py-2.5 rounded-xl text-white text-sm outline-none focus:ring-2 focus:ring-purple-500 transition" style="background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1)">
                    </div>
                    <div>
                        <label class="block text-sm text-slate-400 mb-1.5">Email</label>
                        <input type="email" name="email" class="w-full px-4 py-2.5 rounded-xl text-white text-sm outline-none focus:ring-2 focus:ring-purple-500 transition" style="background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1)">
                    </div>
                    <div>
                        <label class="block text-sm text-slate-400 mb-1.5">Phone</label>
                        <input type="text" name="phone" class="w-full px-4 py-2.5 rounded-xl text-white text-sm outline-none focus:ring-2 focus:ring-purple-500 transition" style="background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1)">
                    </div>
                    <div>
                        <label class="block text-sm text-slate-400 mb-1.5">Currency</label>
                        <select name="currency" id="restaurant-currency" class="w-full px-4 py-2.5 rounded-xl text-white text-sm outline-none focus:ring-2 focus:ring-purple-500 transition" style="background:rgba(30,27,75,1); border:1px solid rgba(255,255,255,0.1)">
                            <option value="$" selected>$ (USD)</option>
                            <option value="৳">৳ (BDT)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm text-slate-400 mb-1.5">Assign Package</label>
                        <select name="package_id" id="restaurant-package" class="w-full px-4 py-2.5 rounded-xl text-white text-sm outline-none focus:ring-2 focus:ring-purple-500 transition" style="background:rgba(30,27,75,1); border:1px solid rgba(255,255,255,0.1)">
                            <option value="">No Package</option>
                            <?php foreach($packages as $pkg): ?>
                            <option value="<?php echo $pkg['id']; ?>" data-currency="<?php echo htmlspecialchars($pkg['currency'] ?? '$'); ?>"><?php echo htmlspecialchars($pkg['name']); ?> — <?php echo htmlspecialchars($pkg['currency'] ?? '$'); ?><?php echo number_format($pkg['price'], 2); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Custom Limits Override Section -->
            <div class="border-t border-white/5 pt-6">
                <h3 class="text-sm font-semibold text-slate-300 uppercase tracking-wider mb-4"><i class="fas fa-sliders mr-2 text-amber-400"></i>Custom Limits & Features Override (Optional)</h3>
                <p class="text-xs text-slate-500 mb-4">Set specific values here to override the limits of the selected subscription package for this restaurant.</p>
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                    <div>
                        <label class="block text-sm text-slate-400 mb-1.5">Max Floors</label>
                        <input type="number" name="override_max_floors" min="0" placeholder="Default package limit" class="w-full px-4 py-2.5 rounded-xl text-white text-sm outline-none focus:ring-2 focus:ring-purple-500 transition" style="background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1)">
                    </div>
                    <div>
                        <label class="block text-sm text-slate-400 mb-1.5">Max Tables</label>
                        <input type="number" name="override_max_tables" min="0" placeholder="Default package limit" class="w-full px-4 py-2.5 rounded-xl text-white text-sm outline-none focus:ring-2 focus:ring-purple-500 transition" style="background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1)">
                    </div>
                    <div>
                        <label class="block text-sm text-slate-400 mb-1.5">Max Cashiers</label>
                        <input type="number" name="override_max_cashiers" min="0" placeholder="Default package limit" class="w-full px-4 py-2.5 rounded-xl text-white text-sm outline-none focus:ring-2 focus:ring-purple-500 transition" style="background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1)">
                    </div>
                    <div>
                        <label class="block text-sm text-slate-400 mb-1.5">Max Waiters</label>
                        <input type="number" name="override_max_waiters" min="0" placeholder="Default package limit" class="w-full px-4 py-2.5 rounded-xl text-white text-sm outline-none focus:ring-2 focus:ring-purple-500 transition" style="background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1)">
                    </div>
                </div>
                <div class="flex flex-wrap gap-6 mt-4">
                    <label class="flex items-center gap-3 cursor-pointer group">
                        <input type="checkbox" name="override_qr_ordering" value="1" class="w-5 h-5 rounded-md text-purple-500 bg-white/5 border-white/10 focus:ring-purple-500 focus:ring-offset-0">
                        <span class="text-sm text-slate-300 group-hover:text-white transition">Force Enable QR Ordering</span>
                    </label>
                    <label class="flex items-center gap-3 cursor-pointer group">
                        <input type="checkbox" name="override_kitchen_display" value="1" class="w-5 h-5 rounded-md text-purple-500 bg-white/5 border-white/10 focus:ring-purple-500 focus:ring-offset-0">
                        <span class="text-sm text-slate-300 group-hover:text-white transition">Force Enable Kitchen Display</span>
                    </label>
                    <label class="flex items-center gap-3 cursor-pointer group">
                        <input type="checkbox" name="override_is_lifetime" value="1" class="w-5 h-5 rounded-md text-purple-500 bg-white/5 border-white/10 focus:ring-purple-500 focus:ring-offset-0">
                        <span class="text-sm text-slate-300 group-hover:text-white transition">Force Lifetime Expiry</span>
                    </label>
                </div>
            </div>

            <div class="border-t border-white/5 pt-6">
                <h3 class="text-sm font-semibold text-slate-300 uppercase tracking-wider mb-4">Admin Account</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-slate-400 mb-1.5">Admin Name *</label>
                        <input type="text" name="admin_name" required class="w-full px-4 py-2.5 rounded-xl text-white text-sm outline-none focus:ring-2 focus:ring-purple-500 transition" style="background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1)">
                    </div>
                    <div>
                        <label class="block text-sm text-slate-400 mb-1.5">Admin Email *</label>
                        <input type="email" name="admin_email" required class="w-full px-4 py-2.5 rounded-xl text-white text-sm outline-none focus:ring-2 focus:ring-purple-500 transition" style="background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1)">
                    </div>
                    <div>
                        <label class="block text-sm text-slate-400 mb-1.5">Password *</label>
                        <input type="password" name="admin_password" required class="w-full px-4 py-2.5 rounded-xl text-white text-sm outline-none focus:ring-2 focus:ring-purple-500 transition" style="background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1)">
                    </div>
                </div>
            </div>

            <div class="border-t border-white/5 pt-6">
                <label class="flex items-center gap-3 cursor-pointer group mb-4">
                    <input type="checkbox" name="send_welcome_email" value="1" checked class="w-5 h-5 rounded-md text-purple-500 bg-white/5 border-white/10 focus:ring-purple-500 focus:ring-offset-0">
                    <span class="text-sm text-slate-300 group-hover:text-white transition">Send welcome email with credentials to admin</span>
                </label>
                <button type="submit" class="px-8 py-3 rounded-xl font-semibold text-white transition shadow-lg" style="background:linear-gradient(135deg,#8b5cf6,#3b82f6)">
                    <i class="fas fa-plus-circle mr-2"></i> Create Restaurant & Admin
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const currencySelect = document.getElementById('restaurant-currency');
    const packageSelect = document.getElementById('restaurant-package');
    if (currencySelect && packageSelect) {
        const originalOptions = Array.from(packageSelect.options);
        
        function filterPackages() {
            const selectedCurrency = currencySelect.value;
            const currentSelectedValue = packageSelect.value;
            
            // clear options
            packageSelect.innerHTML = '';
            
            originalOptions.forEach(opt => {
                if (opt.value === '' || opt.getAttribute('data-currency') === selectedCurrency) {
                    packageSelect.appendChild(opt.cloneNode(true));
                }
            });
            
            // restore selected value if still valid
            if (Array.from(packageSelect.options).some(o => o.value === currentSelectedValue)) {
                packageSelect.value = currentSelectedValue;
            } else {
                packageSelect.value = '';
            }
        }
        
        currencySelect.addEventListener('change', filterPackages);
        filterPackages();
    }
});
</script>
