<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Installation - Al-Runan Fitment Centre</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .step-active {
            @apply bg-blue-600 text-white;
        }
        .step-completed {
            @apply bg-green-600 text-white;
        }
        .step-pending {
            @apply bg-gray-300 text-gray-600;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- Header -->
    <header class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                        <i class="fas fa-car text-white text-lg"></i>
                    </div>
                    <div class="ml-3">
                        <h1 class="text-xl font-bold text-gray-900">Al-Runan Fitment Centre</h1>
                        <p class="text-sm text-gray-500">Installation Wizard</p>
                    </div>
                </div>
                <div class="text-sm text-gray-500">
                    Step {{ $currentStep }} of 6
                </div>
            </div>
        </div>
    </header>

    <!-- Progress Bar -->
    <div class="bg-white border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="py-4">
                <div class="flex items-center justify-between">
                    @php
                        $steps = [
                            ['number' => 1, 'title' => 'Welcome', 'route' => 'install.welcome'],
                            ['number' => 2, 'title' => 'Requirements', 'route' => 'install.requirements'],
                            ['number' => 3, 'title' => 'Database', 'route' => 'install.database'],
                            ['number' => 4, 'title' => 'Admin', 'route' => 'install.admin'],
                            ['number' => 5, 'title' => 'Company', 'route' => 'install.company'],
                            ['number' => 6, 'title' => 'API Keys', 'route' => 'install.api-keys'],
                        ];
                    @endphp

                    @foreach($steps as $step)
                        <div class="flex flex-col items-center flex-1">
                            <div class="flex items-center w-full">
                                @if(!$loop->first)
                                    <div class="flex-1 h-1 {{ $currentStep > $step['number'] ? 'bg-green-600' : 'bg-gray-300' }}"></div>
                                @endif
                                
                                <div class="relative">
                                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium
                                        {{ $currentStep == $step['number'] ? 'step-active' : 
                                           ($currentStep > $step['number'] ? 'step-completed' : 'step-pending') }}">
                                        @if($currentStep > $step['number'])
                                            <i class="fas fa-check text-xs"></i>
                                        @else
                                            {{ $step['number'] }}
                                        @endif
                                    </div>
                                </div>

                                @if(!$loop->last)
                                    <div class="flex-1 h-1 {{ $currentStep > $step['number'] ? 'bg-green-600' : 'bg-gray-300' }}"></div>
                                @endif
                            </div>
                            <div class="mt-2 text-xs text-center text-gray-600">{{ $step['title'] }}</div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <main class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        @yield('content')
    </main>

    <!-- Footer -->
    <footer class="bg-white border-t mt-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <div class="flex justify-between items-center">
                <div class="text-sm text-gray-500">
                    &copy; {{ date('Y') }} Al-Runan Fitment Centre. All rights reserved.
                </div>
                <div class="flex space-x-4">
                    @if($currentStep > 1)
                        <a href="{{ route($steps[$currentStep-2]['route']) }}" 
                           class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Previous
                        </a>
                    @endif

                    @if(isset($showNext) && $showNext)
                        <a href="{{ route($steps[$currentStep]['route']) }}" 
                           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                            Next
                            <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script>
        // Simple form validation and AJAX handling
        document.addEventListener('DOMContentLoaded', function() {
            // Handle database test
            const testDbButton = document.getElementById('test-database');
            if (testDbButton) {
                testDbButton.addEventListener('click', function() {
                    const form = document.getElementById('database-form');
                    const formData = new FormData(form);
                    
                    fetch('{{ route("install.test-database") }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        const messageDiv = document.getElementById('db-test-message');
                        if (data.success) {
                            messageDiv.className = 'p-4 rounded-md bg-green-50 text-green-700';
                            messageDiv.innerHTML = '<i class="fas fa-check-circle mr-2"></i>' + data.message;
                        } else {
                            messageDiv.className = 'p-4 rounded-md bg-red-50 text-red-700';
                            messageDiv.innerHTML = '<i class="fas fa-exclamation-circle mr-2"></i>' + data.message;
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
                });
            }

            // Handle installation process
            const installForm = document.getElementById('install-form');
            if (installForm) {
                installForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    const submitButton = installForm.querySelector('button[type="submit"]');
                    const originalText = submitButton.innerHTML;
                    
                    submitButton.disabled = true;
                    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Installing...';
                    
                    const formData = new FormData(installForm);
                    
                    fetch('{{ route("install.process") }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            const messageDiv = document.getElementById('install-message');
                            messageDiv.className = 'p-4 rounded-md bg-green-50 text-green-700';
                            messageDiv.innerHTML = '<i class="fas fa-check-circle mr-2"></i>' + data.message;
                            
                            setTimeout(() => {
                                window.location.href = data.redirect;
                            }, 2000);
                        } else {
                            const messageDiv = document.getElementById('install-message');
                            messageDiv.className = 'p-4 rounded-md bg-red-50 text-red-700';
                            messageDiv.innerHTML = '<i class="fas fa-exclamation-circle mr-2"></i>' + data.message;
                            
                            submitButton.disabled = false;
                            submitButton.innerHTML = originalText;
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        const messageDiv = document.getElementById('install-message');
                        messageDiv.className = 'p-4 rounded-md bg-red-50 text-red-700';
                        messageDiv.innerHTML = '<i class="fas fa-exclamation-circle mr-2"></i>Installation failed. Please try again.';
                        
                        submitButton.disabled = false;
                        submitButton.innerHTML = originalText;
                    });
                });
            }
        });
    </script>
</body>
</html>