@extends('installer.layout')

@section('title', 'Installer: Demo Data')

@section('content')
<div class="relative flex h-auto min-h-screen w-full flex-col bg-background-light dark:bg-background-dark overflow-x-hidden font-display transition-colors duration-200">
    <!-- Main Layout Container -->
    <div class="layout-container flex h-full grow flex-col items-center justify-center p-4 sm:p-6">
        <!-- Installer Content Wrapper -->
        <div class="w-full max-w-[640px] flex flex-col gap-6">
            <!-- Header Section -->
            <div class="flex flex-col gap-2 text-center sm:text-left">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <h1 class="text-slate-900 dark:text-white text-3xl font-bold leading-tight tracking-tight">Installer Wizard</h1>
                    <span class="inline-flex items-center rounded-full bg-slate-200 dark:bg-slate-700 px-3 py-1 text-xs font-semibold text-slate-700 dark:text-slate-300">
                        Step {{ $step }} of {{ $totalSteps }}
                    </span>
                </div>
                <p class="text-slate-500 dark:text-slate-400 text-sm font-normal">Final Configuration & Data Setup</p>
            </div>
            
            <!-- Progress Bar -->
            <div class="w-full flex flex-col gap-2">
                <div class="flex justify-between text-xs font-medium text-slate-500 dark:text-slate-400">
                    <span>Progress</span>
                    <span>{{ round(($step / $totalSteps) * 100) }}%</span>
                </div>
                <div class="h-2 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700">
                    <div class="h-full bg-primary transition-all duration-500 ease-out" style="width: {{ ($step / $totalSteps) * 100 }}%"></div>
                </div>
            </div>
            
            <!-- Main Card -->
            <div class="flex flex-col overflow-hidden rounded-xl bg-white dark:bg-[#1A2633] shadow-sm border border-slate-200 dark:border-slate-700">
                <!-- Hero Visual / Illustration -->
                <div class="relative h-48 w-full overflow-hidden bg-slate-50 dark:bg-[#15202b] flex items-center justify-center border-b border-slate-100 dark:border-slate-700">
                    <!-- Subtle pattern background -->
                    <div class="absolute inset-0 opacity-10 dark:opacity-5" style="background-image: radial-gradient(#137fec 1px, transparent 1px); background-size: 20px 20px;"></div>
                    <div class="relative z-10 flex flex-col items-center gap-3">
                        <img src="{{ asset('Proinvest.png') }}" alt="ProInvoice Logo" class="h-24 w-auto object-contain">
                    </div>
                </div>
                
                <!-- Content Area -->
                <div class="flex flex-col p-6 sm:p-8 gap-6">
                    <div class="flex flex-col gap-3">
                        <h2 class="text-slate-900 dark:text-white text-2xl font-bold leading-tight">Populate with Demo Data?</h2>
                        <p class="text-slate-600 dark:text-slate-300 text-base leading-relaxed">
                            To help you get familiar with the application features, we can populate your database with sample data including clients, invoices, and recurring payments. This is highly recommended for trial purposes to explore the full dashboard capabilities.
                        </p>
                    </div>
                    
                    <!-- Warning Alert -->
                    <div class="flex gap-4 rounded-lg bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-800/30 p-4">
                        <span class="material-symbols-outlined text-amber-600 dark:text-amber-500 shrink-0">warning</span>
                        <div class="flex flex-col gap-1">
                            <p class="text-sm font-bold text-amber-800 dark:text-amber-400">Important Note</p>
                            <p class="text-sm text-amber-700 dark:text-amber-300/80 leading-normal">
                                Do not import demo data if you intend to use this installation for real production accounting immediately. This data will need to be manually deleted later.
                            </p>
                        </div>
                    </div>
                    
                    <!-- Admin Credentials Form -->
                    <div class="flex flex-col gap-4 p-4 bg-slate-50 dark:bg-slate-800/50 rounded-lg border border-slate-200 dark:border-slate-700">
                        <h3 class="text-slate-900 dark:text-white font-semibold">Admin Account Setup</h3>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Admin Email</label>
                                <input type="email" name="admin_email" id="admin_email" class="w-full rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-2 text-sm text-slate-900 dark:text-white focus:border-primary focus:ring-1 focus:ring-primary outline-none" placeholder="admin@example.com" required/>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Admin Password</label>
                                <input type="password" name="admin_password" id="admin_password" class="w-full rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-2 text-sm text-slate-900 dark:text-white focus:border-primary focus:ring-1 focus:ring-primary outline-none" placeholder="Min. 8 characters" required minlength="8"/>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Actions -->
                    <div class="mt-2 flex flex-col-reverse sm:flex-row gap-3 sm:justify-end border-t border-slate-100 dark:border-slate-700 pt-6">
                        <button type="button" id="skipBtn" class="group flex items-center justify-center gap-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-transparent px-6 py-2.5 text-sm font-bold text-slate-700 dark:text-slate-200 transition-colors hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
                            <span>Skip & Finish</span>
                            <span class="material-symbols-outlined text-[20px] transition-transform group-hover:translate-x-1">arrow_forward</span>
                        </button>
                        <button type="button" id="importDemoBtn" class="flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-2.5 text-sm font-bold text-white shadow-md shadow-blue-500/20 transition-all hover:bg-primary/90 hover:shadow-lg hover:shadow-blue-500/30 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-slate-900">
                            <span class="material-symbols-outlined text-[20px]">cloud_download</span>
                            <span>Import Demo Data</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Footer Help Text -->
            <div class="text-center">
                <p class="text-xs text-slate-400 dark:text-slate-500">
                    Need help? <a class="text-primary hover:underline" href="#">Read the installation guide</a> or contact support.
                </p>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
async function completeInstallation(importDemo = false) {
    const adminEmail = document.getElementById('admin_email').value.trim();
    const adminPassword = document.getElementById('admin_password').value;
    
    if (!adminEmail || !adminPassword) {
        alert('Please fill in admin email and password');
        return;
    }
    
    if (adminPassword.length < 8) {
        alert('Password must be at least 8 characters');
        return;
    }
    
    // Validate email format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(adminEmail)) {
        alert('Please enter a valid email address');
        return;
    }
    
    const formData = new FormData();
    formData.append('admin_email', adminEmail);
    formData.append('admin_password', adminPassword);
    formData.append('import_demo_data', importDemo ? '1' : '0');
    formData.append('_token', '{{ csrf_token() }}');
    
    const btn = importDemo ? document.getElementById('importDemoBtn') : document.getElementById('skipBtn');
    const otherBtn = importDemo ? document.getElementById('skipBtn') : document.getElementById('importDemoBtn');
    const originalText = btn.innerHTML;
    
    // Disable both buttons
    btn.disabled = true;
    if (otherBtn) otherBtn.disabled = true;
    
    btn.innerHTML = '<span class="material-symbols-outlined animate-spin">sync</span> ' + (importDemo ? 'Installing with Demo Data...' : 'Installing...');
    
    // Show progress message
    const progressMsg = document.createElement('div');
    progressMsg.id = 'installProgress';
    progressMsg.className = 'mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg';
    progressMsg.innerHTML = '<div class="flex items-center gap-2 text-blue-700 dark:text-blue-300"><span class="material-symbols-outlined animate-spin">sync</span><span>Setting up your application. This may take a few moments...</span></div>';
    btn.parentElement.parentElement.appendChild(progressMsg);
    
    try {
        const response = await fetch('{{ route("installer.complete") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            progressMsg.className = 'mt-4 p-4 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-lg';
            progressMsg.innerHTML = '<div class="flex items-center gap-2 text-emerald-700 dark:text-emerald-300"><span class="material-symbols-outlined">check_circle</span><span>Installation completed successfully! Redirecting...</span></div>';
            
            setTimeout(() => {
                window.location.href = '{{ route("installer.success") }}?email=' + encodeURIComponent(data.admin.email) + '&password=' + encodeURIComponent(data.admin.password);
            }, 1500);
        } else {
            progressMsg.className = 'mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg';
            progressMsg.innerHTML = '<div class="flex items-center gap-2 text-red-700 dark:text-red-300"><span class="material-symbols-outlined">error</span><span>' + (data.message || 'Installation failed') + '</span></div>';
            
            btn.disabled = false;
            if (otherBtn) otherBtn.disabled = false;
            btn.innerHTML = originalText;
        }
    } catch (error) {
        progressMsg.className = 'mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg';
        progressMsg.innerHTML = '<div class="flex items-center gap-2 text-red-700 dark:text-red-300"><span class="material-symbols-outlined">error</span><span>Error: ' + error.message + '</span></div>';
        
        btn.disabled = false;
        if (otherBtn) otherBtn.disabled = false;
        btn.innerHTML = originalText;
    }
}

document.getElementById('skipBtn').addEventListener('click', () => completeInstallation(false));
document.getElementById('importDemoBtn').addEventListener('click', () => completeInstallation(true));
</script>
@endpush
@endsection