@extends('install.layout')

@section('content')
@php
    $currentStep = 3;
    $showNext = false;
@endphp

<div class="bg-white rounded-lg shadow-sm border">
    <div class="px-6 py-8">
        <!-- Header -->
        <div class="text-center mb-8">
            <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-database text-blue-600 text-2xl"></i>
            </div>
            <h2 class="text-3xl font-bold text-gray-900 mb-2">Database Configuration</h2>
            <p class="text-lg text-gray-600">
                Configure your MySQL database connection settings.
            </p>
        </div>

        <!-- Database Form -->
        <form id="database-form" class="space-y-6">
            @csrf
            <div class="grid md:grid-cols-2 gap-6">
                <!-- Database Host -->
                <div>
                    <label for="host" class="block text-sm font-medium text-gray-700 mb-2">
                        Database Host *
                    </label>
                    <input type="text" id="host" name="host" value="localhost" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                           required>
                </div>

                <!-- Database Port -->
                <div>
                    <label for="port" class="block text-sm font-medium text-gray-700 mb-2">
                        Database Port *
                    </label>
                    <input type="number" id="port" name="port" value="3306" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                           required>
                </div>

                <!-- Database Name -->
                <div>
                    <label for="database" class="block text-sm font-medium text-gray-700 mb-2">
                        Database Name *
                    </label>
                    <input type="text" id="database" name="database" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                           placeholder="al_runan_fitment" required>
                </div>

                <!-- Database Username -->
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-2">
                        Database Username *
                    </label>
                    <input type="text" id="username" name="username" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                           placeholder="root" required>
                </div>

                <!-- Database Password -->
                <div class="md:col-span-2">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                        Database Password
                    </label>
                    <input type="password" id="password" name="password" 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                           placeholder="Leave empty if no password">
                </div>
            </div>

            <!-- Test Connection Button -->
            <div class="flex justify-center">
                <button type="button" id="test-database" 
                        class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                    <i class="fas fa-plug mr-2"></i>
                    Test Database Connection
                </button>
            </div>

            <!-- Test Result Message -->
            <div id="db-test-message" class="hidden"></div>
        </form>

        <!-- Help Information -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mt-8">
            <h3 class="text-lg font-semibold text-blue-800 mb-3">
                <i class="fas fa-info-circle mr-2"></i>
                Database Configuration Help
            </h3>
            <div class="grid md:grid-cols-2 gap-4 text-sm text-blue-700">
                <div>
                    <h4 class="font-semibold mb-2">Common Settings:</h4>
                    <ul class="space-y-1">
                        <li><strong>Host:</strong> Usually "localhost" or "127.0.0.1"</li>
                        <li><strong>Port:</strong> MySQL default is 3306</li>
                        <li><strong>Username:</strong> Often "root" for local development</li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold mb-2">Requirements:</h4>
                    <ul class="space-y-1">
                        <li>MySQL 5.7+ or MariaDB 10.2+</li>
                        <li>Empty database with proper permissions</li>
                        <li>Database user with create/read/write access</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="border-t pt-6 flex justify-between">
            <a href="{{ route('install.requirements') }}" 
               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>
                Back
            </a>

            <a href="{{ route('install.admin') }}" 
               class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                Continue to Admin Setup
                <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const testButton = document.getElementById('test-database');
    const messageDiv = document.getElementById('db-test-message');
    
    testButton.addEventListener('click', function() {
        const form = document.getElementById('database-form');
        const formData = new FormData(form);
        
        // Show loading state
        testButton.disabled = true;
        testButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Testing Connection...';
        
        fetch('{{ route("install.test-database") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                messageDiv.className = 'p-4 rounded-md bg-green-50 text-green-700 border border-green-200';
                messageDiv.innerHTML = '<i class="fas fa-check-circle mr-2"></i>' + data.message;
                
                // Store database settings for final installation
                localStorage.setItem('db_host', document.getElementById('host').value);
                localStorage.setItem('db_port', document.getElementById('port').value);
                localStorage.setItem('db_database', document.getElementById('database').value);
                localStorage.setItem('db_username', document.getElementById('username').value);
                localStorage.setItem('db_password', document.getElementById('password').value);
            } else {
                messageDiv.className = 'p-4 rounded-md bg-red-50 text-red-700 border border-red-200';
                messageDiv.innerHTML = '<i class="fas fa-exclamation-circle mr-2"></i>' + data.message;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            messageDiv.className = 'p-4 rounded-md bg-red-50 text-red-700 border border-red-200';
            messageDiv.innerHTML = '<i class="fas fa-exclamation-circle mr-2"></i>Connection test failed. Please try again.';
        })
        .finally(() => {
            // Reset button state
            testButton.disabled = false;
            testButton.innerHTML = '<i class="fas fa-plug mr-2"></i>Test Database Connection';
        });
    });
});
</script>
@endsection