<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sawdabazar — Installation Wizard</title>
    <!-- Google Fonts: Open Sans -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Tailwind CSS (Direct from CDN for standalone view) -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Open Sans', 'sans-serif'],
                        outfit: ['Open Sans', 'sans-serif'],
                    },
                    colors: {
                        primary: '#059669', // Emerald
                        secondary: '#0d9488', // Teal
                    }
                }
            }
        }
    </script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        body {
            background: radial-gradient(circle at 50% 50%, #f8fafc 0%, #e2e8f0 100%);
            min-height: 100vh;
        }
        .light-panel {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.6);
        }
        .step-transition {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Shimmer Wave animation for Progress Bar */
        @keyframes progressShimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        .animated-progress {
            background: linear-gradient(90deg, #10b981 0%, #34d399 25%, #0d9488 50%, #10b981 75%, #34d399 100%);
            background-size: 400% 100%;
            animation: progressShimmer 8s infinite linear;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Micro-animations for buttons */
        .btn-animate {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-animate:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px -8px rgba(5, 150, 105, 0.4);
        }
        .btn-animate:active {
            transform: translateY(1px) scale(0.98);
            box-shadow: 0 4px 10px -4px rgba(5, 150, 105, 0.3);
        }
    </style>
</head>
<body class="text-slate-800 flex items-center justify-center p-4 md:p-8 font-sans selection:bg-emerald-100 selection:text-emerald-950">

    <div class="w-full max-w-5xl light-panel rounded-3xl overflow-hidden shadow-2xl flex flex-col md:flex-row min-h-[600px]">
        
        <!-- Left Panel: Sidebar -->
        <div class="w-full md:w-80 bg-slate-50/80 p-8 border-r border-slate-200/50 flex flex-col justify-between shrink-0">
            <div>
                <!-- Brand Logo / Title -->
                <div class="flex items-center gap-3 mb-8">
                    <div class="h-10 w-10 bg-gradient-to-tr from-emerald-500 to-teal-600 rounded-xl flex items-center justify-center shadow-lg shadow-emerald-500/25">
                        <svg class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                        </svg>
                    </div>
                    <div>
                        <h1 class="text-xl font-semibold tracking-wide bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">Sawdabazar</h1>
                        <p class="text-[10px] text-slate-400 font-semibold tracking-wider uppercase">Setup Wizard</p>
                    </div>
                </div>

                <!-- Navigation Steps -->
                <div class="space-y-6">
                    <div class="step-nav-item flex items-center gap-4 group" data-step="1">
                        <div class="step-num w-8 h-8 rounded-full border-2 border-emerald-600 bg-emerald-50 text-emerald-600 flex items-center justify-center font-semibold text-xs transition-all duration-300">1</div>
                        <span class="step-text text-sm font-semibold text-slate-800 transition-colors">Welcome</span>
                    </div>
                    <div class="step-nav-item flex items-center gap-4 group" data-step="2">
                        <div class="step-num w-8 h-8 rounded-full border-2 border-slate-200 text-slate-400 flex items-center justify-center font-semibold text-xs transition-all duration-300">2</div>
                        <span class="step-text text-sm font-medium text-slate-450 group-hover:text-slate-600 transition-colors">Requirements</span>
                    </div>
                    <div class="step-nav-item flex items-center gap-4 group" data-step="3">
                        <div class="step-num w-8 h-8 rounded-full border-2 border-slate-200 text-slate-400 flex items-center justify-center font-semibold text-xs transition-all duration-300">3</div>
                        <span class="step-text text-sm font-medium text-slate-455 group-hover:text-slate-600 transition-colors">Database</span>
                    </div>
                    <div class="step-nav-item flex items-center gap-4 group" data-step="4">
                        <div class="step-num w-8 h-8 rounded-full border-2 border-slate-200 text-slate-400 flex items-center justify-center font-semibold text-xs transition-all duration-300">4</div>
                        <span class="step-text text-sm font-medium text-slate-455 group-hover:text-slate-600 transition-colors">Application</span>
                    </div>
                    <div class="step-nav-item flex items-center gap-4 group" data-step="5">
                        <div class="step-num w-8 h-8 rounded-full border-2 border-slate-200 text-slate-400 flex items-center justify-center font-semibold text-xs transition-all duration-300">5</div>
                        <span class="step-text text-sm font-medium text-slate-455 group-hover:text-slate-600 transition-colors">Administrator</span>
                    </div>
                    <div class="step-nav-item flex items-center gap-4 group" data-step="6">
                        <div class="step-num w-8 h-8 rounded-full border-2 border-slate-200 text-slate-400 flex items-center justify-center font-semibold text-xs transition-all duration-300">6</div>
                        <span class="step-text text-sm font-medium text-slate-455 group-hover:text-slate-600 transition-colors">Ready!</span>
                    </div>
                </div>
            </div>

            <!-- Footer Meta -->
            <div class="pt-8 border-t border-slate-200/60 hidden md:block">
                <span class="text-xs text-slate-400 font-medium block">Installer v1.0.0</span>
            </div>
        </div>

        <!-- Right Panel: Step Content Area -->
        <div class="flex-1 p-8 md:p-12 flex flex-col justify-between bg-white/40">
            
            <!-- Progress Bar at the top -->
            <div class="w-full bg-slate-200 rounded-full h-1.5 mb-8 overflow-hidden">
                <div id="progressBar" class="animated-progress h-full w-[16.6%]"></div>
            </div>

            <!-- Content Step Containers -->
            <div class="flex-1 flex flex-col justify-center">
                
                <!-- STEP 1: WELCOME -->
                <div id="stepContainer1" class="step-transition space-y-6">
                    <h2 class="text-3xl font-semibold text-slate-900 leading-tight">Welcome to Sawdabazar!</h2>
                    <p class="text-slate-600 text-sm leading-relaxed font-medium">
                        Thank you for choosing Sawdabazar. This wizard will guide you through configuring your database, base app variables, and your primary administrator account in just a few minutes.
                    </p>
                    <div class="bg-emerald-50 border border-emerald-100 p-4 rounded-2xl flex items-start gap-3">
                        <svg class="h-5 w-5 text-emerald-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <p class="text-xs text-emerald-800 leading-normal font-medium">
                            Please ensure your MySQL server is running and you have created an empty database before proceeding to the Database configuration step.
                        </p>
                    </div>
                    <div class="pt-4 flex justify-end">
                        <button onclick="goToStep(2)" class="btn-animate px-6 py-3 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-xl font-semibold shadow-lg shadow-emerald-500/10 cursor-pointer">
                            Begin Installation &rarr;
                        </button>
                    </div>
                </div>

                <!-- STEP 2: REQUIREMENTS -->
                <div id="stepContainer2" class="step-transition hidden space-y-6">
                    <h2 class="text-2xl font-semibold text-slate-900">System Requirements Check</h2>
                    <p class="text-slate-555 text-xs font-medium">Checking system settings and file write permissions.</p>
                    
                    <div class="space-y-4">
                        <!-- PHP version -->
                        <div class="flex items-center justify-between p-3.5 bg-slate-50 border border-slate-100 rounded-xl">
                            <div class="flex items-center gap-3">
                                <span class="text-xs font-medium text-slate-700">PHP Version (>= 8.3)</span>
                            </div>
                            <span id="phpCheckStatus" class="text-xs font-semibold text-slate-400">Checking...</span>
                        </div>
                        
                        <!-- PHP Extensions list -->
                        <div class="p-4 bg-slate-50 border border-slate-100 rounded-xl space-y-2.5">
                            <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Required Extensions</h3>
                            <div id="extensionsGrid" class="grid grid-cols-2 gap-2 text-xs">
                                <!-- Loaded via JS -->
                            </div>
                        </div>

                        <!-- Write permissions list -->
                        <div class="p-4 bg-slate-50 border border-slate-100 rounded-xl space-y-2.5">
                            <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider">File & Folder Permissions</h3>
                            <div id="permissionsGrid" class="space-y-2 text-xs">
                                <!-- Loaded via JS -->
                            </div>
                        </div>
                    </div>

                    <div class="pt-4 flex justify-between items-center">
                        <button onclick="goToStep(1)" class="btn-animate px-5 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-xl font-semibold border border-slate-200 transition-colors cursor-pointer">&larr; Back</button>
                        <button id="reqNextBtn" onclick="goToStep(3)" disabled class="px-6 py-3 bg-slate-200 text-slate-400 rounded-xl font-semibold cursor-not-allowed transition-all duration-200">Next Step &rarr;</button>
                    </div>
                </div>

                <!-- STEP 3: DATABASE -->
                <div id="stepContainer3" class="step-transition hidden space-y-6">
                    <h2 class="text-2xl font-semibold text-slate-900">Database Settings</h2>
                    <p class="text-slate-555 text-xs font-medium">Configure your MySQL database parameters.</p>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="space-y-1">
                            <label class="text-[11px] font-semibold text-slate-500 uppercase">Database Host</label>
                            <input type="text" id="dbHost" value="127.0.0.1" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                        </div>
                        <div class="space-y-1">
                            <label class="text-[11px] font-semibold text-slate-500 uppercase">Database Port</label>
                            <input type="text" id="dbPort" value="3306" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                        </div>
                        <div class="space-y-1">
                            <label class="text-[11px] font-semibold text-slate-500 uppercase">Database Name</label>
                            <input type="text" id="dbName" value="sawdabazar" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                        </div>
                        <div class="space-y-1">
                            <label class="text-[11px] font-semibold text-slate-500 uppercase">Database Username</label>
                            <input type="text" id="dbUser" value="root" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                        </div>
                        <div class="space-y-1 md:col-span-2">
                            <label class="text-[11px] font-semibold text-slate-500 uppercase">Database Password</label>
                            <input type="password" id="dbPass" placeholder="Leave blank if none" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                        </div>
                    </div>

                    <div id="dbAlert" class="hidden p-3.5 rounded-xl text-xs font-medium"></div>

                    <div class="pt-4 flex justify-between items-center">
                        <button onclick="goToStep(2)" class="btn-animate px-5 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-xl font-semibold border border-slate-200 transition-colors cursor-pointer">&larr; Back</button>
                        <div class="flex gap-2">
                            <button id="testDbBtn" onclick="testDatabaseConnection()" class="btn-animate px-5 py-2.5 bg-slate-50 hover:bg-slate-100 text-slate-700 border border-slate-200 rounded-xl font-semibold transition-colors cursor-pointer">Test Connection</button>
                            <button id="dbNextBtn" onclick="saveDatabaseConfig()" disabled class="px-6 py-3 bg-slate-200 text-slate-400 rounded-xl font-semibold cursor-not-allowed transition-all duration-200">Next Step &rarr;</button>
                        </div>
                    </div>
                </div>

                <!-- STEP 4: APPLICATION -->
                <div id="stepContainer4" class="step-transition hidden space-y-6">
                    <h2 class="text-2xl font-semibold text-slate-900">Application Configuration</h2>
                    <p class="text-slate-555 text-xs font-medium">Define site meta configuration parameters.</p>

                    <div class="space-y-4">
                        <div class="space-y-1">
                            <label class="text-[11px] font-semibold text-slate-500 uppercase">App Name</label>
                            <input type="text" id="appName" value="Sawdabazar" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                        </div>
                        <div class="space-y-1">
                            <label class="text-[11px] font-semibold text-slate-500 uppercase">App URL (Backend)</label>
                            <input type="text" id="appUrl" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                        </div>
                        <div class="space-y-1">
                            <label class="text-[11px] font-semibold text-slate-500 uppercase">Next.js Frontend URL</label>
                            <input type="text" id="nextjsFrontendUrl" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="space-y-1">
                                <label class="text-[11px] font-semibold text-slate-500 uppercase">App Environment</label>
                                <select id="appEnv" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-755 font-medium appearance-none cursor-pointer">
                                    <option value="local">Development (local)</option>
                                    <option value="production">Production</option>
                                </select>
                            </div>
                            <div class="space-y-1">
                                <label class="text-[11px] font-semibold text-slate-500 uppercase">Encryption Key</label>
                                <button onclick="generateAppKey()" class="btn-animate w-full px-4 py-2.5 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-lg text-xs font-semibold transition-colors cursor-pointer shadow-md shadow-emerald-500/10">Generate Key (APP_KEY)</button>
                            </div>
                        </div>

                        <!-- Cache & Queue Driver Selector -->
                        <div class="space-y-2 pt-1">
                            <label class="text-[11px] font-semibold text-slate-500 uppercase">Cache &amp; Queue Driver</label>
                            <div class="grid grid-cols-3 gap-2">
                                <label class="driver-option cursor-pointer">
                                    <input type="radio" name="cacheDriver" id="driverFile" value="file" checked class="sr-only" onchange="onDriverChange()">
                                    <div class="driver-card border-2 border-emerald-500 bg-emerald-50 rounded-xl p-3 text-center transition-all">
                                        <div class="text-lg mb-1">📁</div>
                                        <div class="text-[11px] font-bold text-slate-700">File</div>
                                        <div class="text-[10px] text-slate-500">Shared Hosting</div>
                                    </div>
                                </label>
                                <label class="driver-option cursor-pointer">
                                    <input type="radio" name="cacheDriver" id="driverDatabase" value="database" class="sr-only" onchange="onDriverChange()">
                                    <div class="driver-card border-2 border-slate-200 bg-slate-50 rounded-xl p-3 text-center transition-all">
                                        <div class="text-lg mb-1">🗄️</div>
                                        <div class="text-[11px] font-bold text-slate-700">Database</div>
                                        <div class="text-[10px] text-slate-500">MySQL based</div>
                                    </div>
                                </label>
                                <label class="driver-option cursor-pointer">
                                    <input type="radio" name="cacheDriver" id="driverRedis" value="redis" class="sr-only" onchange="onDriverChange()">
                                    <div class="driver-card border-2 border-slate-200 bg-slate-50 rounded-xl p-3 text-center transition-all">
                                        <div class="text-lg mb-1">⚡</div>
                                        <div class="text-[11px] font-bold text-slate-700">Redis</div>
                                        <div class="text-[10px] text-slate-500">VPS / Fast</div>
                                    </div>
                                </label>
                            </div>
                            <!-- Redis fields (hidden by default) -->
                            <div id="redisFields" class="hidden grid grid-cols-1 md:grid-cols-3 gap-3 mt-2">
                                <div class="space-y-1">
                                    <label class="text-[11px] font-semibold text-slate-500 uppercase">Redis Host</label>
                                    <input type="text" id="redisHost" value="127.0.0.1" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                                </div>
                                <div class="space-y-1">
                                    <label class="text-[11px] font-semibold text-slate-500 uppercase">Redis Port</label>
                                    <input type="text" id="redisPort" value="6379" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                                </div>
                                <div class="space-y-1">
                                    <label class="text-[11px] font-semibold text-slate-500 uppercase">Redis Password</label>
                                    <input type="password" id="redisPassword" placeholder="Leave blank if none" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="appAlert" class="hidden p-3.5 rounded-xl text-xs font-medium"></div>

                    <div class="pt-4 flex justify-between items-center">
                        <button onclick="goToStep(3)" class="btn-animate px-5 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-xl font-semibold border border-slate-200 transition-colors cursor-pointer">&larr; Back</button>
                        <button id="appNextBtn" onclick="saveAppConfig()" class="btn-animate px-6 py-3 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-xl font-semibold shadow-lg shadow-emerald-500/10 hover:shadow-emerald-500/20 transition-all duration-200 cursor-pointer">Next Step &rarr;</button>
                    </div>
                </div>

                <!-- STEP 5: ADMINISTRATOR -->
                <div id="stepContainer5" class="step-transition hidden space-y-6">
                    <h2 class="text-2xl font-semibold text-slate-900">Administrator Account</h2>
                    <p class="text-slate-555 text-xs font-medium">Create the primary superadmin credentials for the admin dashboard.</p>

                    <div class="space-y-4">
                        <div class="space-y-1">
                            <label class="text-[11px] font-semibold text-slate-500 uppercase">Full Name</label>
                            <input type="text" id="adminName" placeholder="John Doe" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                        </div>
                        <div class="space-y-1">
                            <label class="text-[11px] font-semibold text-slate-500 uppercase">Email Address</label>
                            <input type="email" id="adminEmail" placeholder="admin@sawdabazar.com" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="space-y-1">
                                <label class="text-[11px] font-semibold text-slate-500 uppercase">Password</label>
                                <input type="password" id="adminPass" placeholder="Minimum 8 characters" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                            </div>
                            <div class="space-y-1">
                                <label class="text-[11px] font-semibold text-slate-500 uppercase">Confirm Password</label>
                                <input type="password" id="adminPassConfirm" placeholder="Re-enter password" class="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg px-3.5 py-2.5 focus:border-emerald-500 focus:bg-white focus:outline-none transition-all text-slate-800 font-medium" />
                            </div>
                        </div>
                    </div>

                    <div id="adminAlert" class="hidden p-3.5 rounded-xl text-xs font-medium"></div>

                    <div class="pt-4 flex justify-between items-center">
                        <button onclick="goToStep(4)" class="btn-animate px-5 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-xl font-semibold border border-slate-200 transition-colors cursor-pointer">&larr; Back</button>
                        <button id="installBtn" onclick="runInstallation()" class="btn-animate px-6 py-3 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-xl font-semibold shadow-lg shadow-emerald-500/10 hover:shadow-emerald-500/20 transition-all duration-200 cursor-pointer">Install Now &rarr;</button>
                    </div>
                </div>

                <!-- STEP 6: FINISH -->
                <div id="stepContainer6" class="step-transition hidden space-y-6">
                    <div class="text-center space-y-3">
                        <div class="h-16 w-16 bg-emerald-100 border border-emerald-200 rounded-full flex items-center justify-center mx-auto shadow-lg shadow-emerald-500/5">
                            <svg class="h-8 w-8 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                        <h2 class="text-3xl font-semibold text-slate-900">Installation Complete!</h2>
                        <p class="text-slate-500 text-sm font-medium">Sawdabazar backend configuration has been set up successfully.</p>
                    </div>

                    <!-- Next steps manual guide -->
                    <div class="p-5 bg-slate-50 border border-slate-200 rounded-2xl space-y-3">
                        <h3 class="text-xs font-semibold text-slate-700 uppercase tracking-wide flex items-center gap-2">
                            <svg class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                            </svg>
                            Manual Action Required for Frontend
                        </h3>
                        <p class="text-xs text-slate-505 leading-normal font-medium">
                            Please configure your Next.js frontend by editing or creating a <code class="bg-slate-250 px-1 py-0.5 rounded text-emerald-700 border border-slate-300 font-mono">.env.local</code> file in your frontend root folder and inserting:
                        </p>
                        <div class="relative bg-slate-100 border border-slate-200 p-3 rounded-xl font-mono text-[11px] text-slate-700 flex justify-between items-center group">
                            <span id="envSnippet">NEXT_PUBLIC_API_URL=<span class="text-emerald-600 font-semibold" id="envUrlPlaceholder">http://your-backend-domain</span></span>
                            <button onclick="copyEnvSnippet()" class="text-xs text-emerald-600 font-semibold hover:text-emerald-500 focus:outline-none transition-colors cursor-pointer select-none">Copy</button>
                        </div>
                    </div>

                    <div class="pt-4 flex justify-center">
                        <a href="/admin" class="btn-animate px-8 py-3.5 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-xl font-bold text-sm shadow-xl shadow-emerald-500/10 hover:shadow-emerald-500/20 transition-all duration-200">
                            Launch Admin Dashboard &rarr;
                        </a>
                    </div>
                </div>

            </div>

        </div>

    </div>

    <!-- Installer Wizard Javascript Business Logic -->
    <script>
        let currentStep = 1;
        const totalSteps = 6;

        document.addEventListener('DOMContentLoaded', () => {
            const currentOrigin = window.location.origin;
            // Pre-fill App URL with current browser host
            document.getElementById('appUrl').value = currentOrigin;
            document.getElementById('envUrlPlaceholder').innerText = currentOrigin;

            // Guess Next.js frontend URL based on current host name
            let frontendUrl = currentOrigin;
            if (window.location.hostname.startsWith('api.')) {
                frontendUrl = currentOrigin.replace('api.', '');
            } else if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
                frontendUrl = 'http://localhost:3000';
            }
            document.getElementById('nextjsFrontendUrl').value = frontendUrl;
        });

        function onDriverChange() {
            const selected = document.querySelector('input[name="cacheDriver"]:checked').value;
            // Update visual card styles
            document.querySelectorAll('.driver-option').forEach(opt => {
                const radio = opt.querySelector('input[type="radio"]');
                const card = opt.querySelector('.driver-card');
                if (radio.checked) {
                    card.classList.add('border-emerald-500', 'bg-emerald-50');
                    card.classList.remove('border-slate-200', 'bg-slate-50');
                } else {
                    card.classList.remove('border-emerald-500', 'bg-emerald-50');
                    card.classList.add('border-slate-200', 'bg-slate-50');
                }
            });
            // Show/hide Redis fields
            const redisFields = document.getElementById('redisFields');
            if (selected === 'redis') {
                redisFields.classList.remove('hidden');
            } else {
                redisFields.classList.add('hidden');
            }
        }

        function getHeaders() {
            const tokenMeta = document.querySelector('meta[name="csrf-token"]');
            return {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': tokenMeta ? tokenMeta.getAttribute('content') : ''
            };
        }

        function goToStep(step) {
            if (step < 1 || step > totalSteps) return;

            // Fade out current step
            document.getElementById(`stepContainer${currentStep}`).classList.add('hidden');
            
            // Fade in target step
            document.getElementById(`stepContainer${step}`).classList.remove('hidden');

            currentStep = step;
            updateSidebarAndProgress();

            // Run actions when stepping into specific steps
            if (step === 2) {
                runRequirementsCheck();
            }
        }

        function updateSidebarAndProgress() {
            // Update Progress Bar
            const percent = (currentStep / totalSteps) * 100;
            document.getElementById('progressBar').style.width = `${percent}%`;

            // Update Left Sidebar Navigation icons
            document.querySelectorAll('.step-nav-item').forEach(item => {
                const stepNum = parseInt(item.getAttribute('data-step'));
                const icon = item.querySelector('.step-num');
                const text = item.querySelector('.step-text');

                if (stepNum === currentStep) {
                    icon.className = 'step-num w-8 h-8 rounded-full border-2 border-emerald-600 bg-emerald-50 text-emerald-600 flex items-center justify-center font-semibold text-xs transition-all duration-300';
                    text.className = 'step-text text-sm font-semibold text-slate-800 transition-colors';
                } else if (stepNum < currentStep) {
                    icon.className = 'step-num w-8 h-8 rounded-full border-2 border-emerald-500 bg-emerald-50 text-emerald-600 flex items-center justify-center font-semibold text-xs transition-all duration-300';
                    icon.innerHTML = `<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>`;
                    text.className = 'step-text text-sm font-medium text-slate-500 transition-colors';
                } else {
                    icon.className = 'step-num w-8 h-8 rounded-full border-2 border-slate-200 text-slate-400 flex items-center justify-center font-semibold text-xs transition-all duration-300';
                    icon.innerText = stepNum;
                    text.className = 'step-text text-sm font-medium text-slate-455 transition-colors';
                }
            });
        }

        // Requirements Checking Logic
        async function runRequirementsCheck() {
            const grid = document.getElementById('extensionsGrid');
            const permGrid = document.getElementById('permissionsGrid');
            const phpStatus = document.getElementById('phpCheckStatus');
            const nextBtn = document.getElementById('reqNextBtn');

            grid.innerHTML = '<div class="col-span-2 text-slate-400 font-medium">Checking extensions...</div>';
            permGrid.innerHTML = '<div class="text-slate-400 font-medium">Checking permissions...</div>';

            try {
                const response = await fetch('/install/requirements', { headers: getHeaders() });
                const data = await response.json();

                // PHP Version output
                phpStatus.innerText = `${data.php_version} (${data.php_pass ? 'Passed' : 'Failed'})`;
                phpStatus.className = `text-xs font-semibold ${data.php_pass ? 'text-emerald-600' : 'text-rose-600'}`;

                // Extensions grid
                grid.innerHTML = '';
                Object.entries(data.extensions).forEach(([ext, loaded]) => {
                    grid.innerHTML += `
                        <div class="flex items-center justify-between p-2 bg-white border border-slate-200 rounded-lg">
                            <span class="text-slate-600 font-medium">${ext}</span>
                            <span class="${loaded ? 'text-emerald-600 font-bold' : 'text-rose-500 font-bold'}">${loaded ? '✓' : '✗'}</span>
                        </div>
                    `;
                });

                // Permissions grid
                permGrid.innerHTML = '';
                Object.entries(data.permissions).forEach(([path, writable]) => {
                    const label = path === 'env' ? '.env file' : `${path}/ folder`;
                    permGrid.innerHTML += `
                        <div class="flex items-center justify-between p-2 bg-white border border-slate-200 rounded-lg">
                            <span class="text-slate-600 font-medium">${label}</span>
                            <span class="${writable ? 'text-emerald-600 font-bold' : 'text-rose-500 font-bold'}">${writable ? 'Writable' : 'Unwritable'}</span>
                        </div>
                    `;
                });

                if (data.all_pass) {
                    nextBtn.disabled = false;
                    nextBtn.className = 'btn-animate px-6 py-3 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-xl font-semibold shadow-lg shadow-emerald-500/10 hover:shadow-emerald-500/20 transition-all duration-200 cursor-pointer';
                } else {
                    nextBtn.disabled = true;
                    nextBtn.className = 'px-6 py-3 bg-rose-100 text-rose-600 border border-rose-200 rounded-xl font-semibold cursor-not-allowed';
                    nextBtn.innerText = 'Requirements Failed';
                }
            } catch (err) {
                console.error(err);
                grid.innerHTML = '<div class="col-span-2 text-rose-550 font-medium">Failed to run checks. Check Laravel logs.</div>';
            }
        }

        // Database test connection
        async function testDatabaseConnection() {
            const btn = document.getElementById('testDbBtn');
            const alert = document.getElementById('dbAlert');
            const nextBtn = document.getElementById('dbNextBtn');
            
            btn.disabled = true;
            btn.innerText = 'Testing...';
            alert.className = 'hidden';

            const payload = {
                host: document.getElementById('dbHost').value,
                port: document.getElementById('dbPort').value,
                database: document.getElementById('dbName').value,
                username: document.getElementById('dbUser').value,
                password: document.getElementById('dbPass').value,
            };

            try {
                const response = await fetch('/install/database/test', {
                    method: 'POST',
                    headers: getHeaders(),
                    body: JSON.stringify(payload)
                });
                const data = await response.json();

                btn.disabled = false;
                btn.innerText = 'Test Connection';

                if (data.success) {
                    alert.className = 'p-3.5 rounded-xl text-xs bg-emerald-55 border border-emerald-200 text-emerald-700 font-medium';
                    alert.innerText = data.message;
                    
                    nextBtn.disabled = false;
                    nextBtn.className = 'btn-animate px-6 py-3 bg-gradient-to-r from-emerald-500 to-teal-600 text-white rounded-xl font-semibold shadow-lg shadow-emerald-500/10 hover:shadow-emerald-500/20 transition-all duration-200 cursor-pointer';
                } else {
                    alert.className = 'p-3.5 rounded-xl text-xs bg-rose-50 border border-rose-200 text-rose-700 font-medium';
                    alert.innerText = data.message;
                    
                    nextBtn.disabled = true;
                    nextBtn.className = 'px-6 py-3 bg-slate-200 text-slate-400 rounded-xl font-semibold cursor-not-allowed';
                }
            } catch (err) {
                btn.disabled = false;
                btn.innerText = 'Test Connection';
                alert.className = 'p-3.5 rounded-xl text-xs bg-rose-50 border border-rose-200 text-rose-700 font-medium';
                alert.innerText = 'Request failed. Ensure values are filled and valid.';
            }
        }

        // Save database configurations to .env
        async function saveDatabaseConfig() {
            const nextBtn = document.getElementById('dbNextBtn');
            const alert = document.getElementById('dbAlert');

            nextBtn.disabled = true;
            nextBtn.innerText = 'Saving...';

            const selectedDriver = document.querySelector('input[name="cacheDriver"]:checked');
            const payload = {
                db_host: document.getElementById('dbHost').value,
                db_port: document.getElementById('dbPort').value,
                db_database: document.getElementById('dbName').value,
                db_username: document.getElementById('dbUser').value,
                db_password: document.getElementById('dbPass').value,
                app_name: document.getElementById('appName').value,
                app_url: document.getElementById('appUrl').value,
                nextjs_frontend_url: document.getElementById('nextjsFrontendUrl') ? document.getElementById('nextjsFrontendUrl').value : window.location.origin.replace('api.', ''),
                app_env: document.getElementById('appEnv').value,
                cache_driver: selectedDriver ? selectedDriver.value : 'file',
                redis_host: document.getElementById('redisHost') ? document.getElementById('redisHost').value : '127.0.0.1',
                redis_port: document.getElementById('redisPort') ? document.getElementById('redisPort').value : '6379',
                redis_password: document.getElementById('redisPassword') ? document.getElementById('redisPassword').value : '',
            };

            try {
                const response = await fetch('/install/database/save', {
                    method: 'POST',
                    headers: getHeaders(),
                    body: JSON.stringify(payload)
                });
                const data = await response.json();

                nextBtn.disabled = false;
                nextBtn.innerText = 'Next Step \u2192';

                if (data.success) {
                    goToStep(4);
                } else {
                    alert.className = 'p-3.5 rounded-xl text-xs bg-rose-50 border border-rose-200 text-rose-700 font-medium';
                    alert.innerText = data.message;
                }
            } catch (err) {
                nextBtn.disabled = false;
                nextBtn.innerText = 'Next Step \u2192';
                alert.className = 'p-3.5 rounded-xl text-xs bg-rose-50 border border-rose-200 text-rose-700 font-medium';
                alert.innerText = 'Server error saving database settings.';
            }
        }

        // Save application meta configurations
        async function saveAppConfig() {
            const nextBtn = document.getElementById('appNextBtn');
            const alert = document.getElementById('appAlert');

            nextBtn.disabled = true;
            nextBtn.innerText = 'Saving...';

            // Sync instructions URL placeholder
            document.getElementById('envUrlPlaceholder').innerText = document.getElementById('appUrl').value;

            const selectedDriver2 = document.querySelector('input[name="cacheDriver"]:checked');
            const payload = {
                db_host: document.getElementById('dbHost').value,
                db_port: document.getElementById('dbPort').value,
                db_database: document.getElementById('dbName').value,
                db_username: document.getElementById('dbUser').value,
                db_password: document.getElementById('dbPass').value,
                app_name: document.getElementById('appName').value,
                app_url: document.getElementById('appUrl').value,
                nextjs_frontend_url: document.getElementById('nextjsFrontendUrl') ? document.getElementById('nextjsFrontendUrl').value : window.location.origin.replace('api.', ''),
                app_env: document.getElementById('appEnv').value,
                cache_driver: selectedDriver2 ? selectedDriver2.value : 'file',
                redis_host: document.getElementById('redisHost') ? document.getElementById('redisHost').value : '127.0.0.1',
                redis_port: document.getElementById('redisPort') ? document.getElementById('redisPort').value : '6379',
                redis_password: document.getElementById('redisPassword') ? document.getElementById('redisPassword').value : '',
            };

            try {
                const response = await fetch('/install/database/save', {
                    method: 'POST',
                    headers: getHeaders(),
                    body: JSON.stringify(payload)
                });
                const data = await response.json();

                nextBtn.disabled = false;
                nextBtn.innerText = 'Next Step \u2192';

                if (data.success) {
                    goToStep(5);
                } else {
                    alert.className = 'p-3.5 rounded-xl text-xs bg-rose-50 border border-rose-200 text-rose-700 font-medium';
                    alert.innerText = data.message;
                }
            } catch (err) {
                nextBtn.disabled = false;
                nextBtn.innerText = 'Next Step \u2192';
                alert.className = 'p-3.5 rounded-xl text-xs bg-rose-50 border border-rose-200 text-rose-700 font-medium';
                alert.innerText = 'Server error saving app configurations.';
            }
        }

        // Generate app encryption key via artisan
        async function generateAppKey() {
            const alert = document.getElementById('appAlert');
            alert.className = 'hidden';

            try {
                const response = await fetch('/install/key/generate', {
                    method: 'POST',
                    headers: getHeaders()
                });
                const data = await response.json();

                if (data.success) {
                    alert.className = 'p-3.5 rounded-xl text-xs bg-emerald-50 border border-emerald-200 text-emerald-700 font-medium';
                    alert.innerText = data.message;
                } else {
                    alert.className = 'p-3.5 rounded-xl text-xs bg-rose-50 border border-rose-200 text-rose-700 font-medium';
                    alert.innerText = data.message;
                }
            } catch (err) {
                alert.className = 'p-3.5 rounded-xl text-xs bg-rose-50 border border-rose-200 text-rose-700 font-medium';
                alert.innerText = 'Failed to request app key generation.';
            }
        }

        // Run migrations & seeding, create admin account
        async function runInstallation() {
            const btn = document.getElementById('installBtn');
            const alert = document.getElementById('adminAlert');

            const name = document.getElementById('adminName').value.trim();
            const email = document.getElementById('adminEmail').value.trim();
            const password = document.getElementById('adminPass').value;
            const confirm = document.getElementById('adminPassConfirm').value;

            if (!name || !email || !password) {
                alert.className = 'p-3.5 rounded-xl text-xs bg-rose-50 border border-rose-200 text-rose-700 font-medium';
                alert.innerText = 'All fields are required.';
                return;
            }

            if (password.length < 8) {
                alert.className = 'p-3.5 rounded-xl text-xs bg-rose-50 border border-rose-200 text-rose-700 font-medium';
                alert.innerText = 'Password must be at least 8 characters long.';
                return;
            }

            if (password !== confirm) {
                alert.className = 'p-3.5 rounded-xl text-xs bg-rose-50 border border-rose-200 text-rose-700 font-medium';
                alert.innerText = 'Passwords do not match.';
                return;
            }

            btn.disabled = true;
            btn.innerText = 'Migrating & Seeding database, please wait...';
            alert.className = 'hidden';

            const payload = {
                admin_name: name,
                admin_email: email,
                admin_password: password,
            };

            try {
                const response = await fetch('/install/run', {
                    method: 'POST',
                    headers: getHeaders(),
                    body: JSON.stringify(payload)
                });
                const data = await response.json();

                btn.disabled = false;
                btn.innerText = 'Install Now \u2192';

                if (data.success) {
                    goToStep(6);
                } else {
                    alert.className = 'p-3.5 rounded-xl text-xs bg-rose-50 border border-rose-200 text-rose-700 font-medium';
                    alert.innerText = data.message;
                }
            } catch (err) {
                btn.disabled = false;
                btn.innerText = 'Install Now \u2192';
                alert.className = 'p-3.5 rounded-xl text-xs bg-rose-50 border border-rose-200 text-rose-700 font-medium';
                alert.innerText = 'Server error during installation. Verify database config or check Laravel logs.';
            }
        }

        function copyEnvSnippet() {
            const text = document.getElementById('envSnippet').innerText;
            navigator.clipboard.writeText(text).then(() => {
                alert('Copied to clipboard!');
            }).catch(err => {
                console.error('Could not copy text: ', err);
            });
        }
    </script>

</body>
</html>
