@extends('install.layout')

@section('title', 'Database Configuration')

@section('content')
<div class="text-center mb-6">
    <h2 class="text-2xl font-bold text-gray-800">Database Configuration</h2>
    <p class="text-gray-600 mt-2">Enter your MySQL database connection details</p>
</div>

<form action="{{ route('install.database.process') }}" method="POST" class="max-w-lg mx-auto space-y-6">
    @csrf

    <div class="grid grid-cols-3 gap-4">
        <div class="col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-1">Database Host *</label>
            <input type="text" name="db_host" value="{{ old('db_host', '127.0.0.1') }}" required
                class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Port *</label>
            <input type="number" name="db_port" value="{{ old('db_port', '3306') }}" required
                class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
        </div>
    </div>

    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Database Name *</label>
        <input type="text" name="db_database" value="{{ old('db_database') }}" required
            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            placeholder="autoparts">
        <p class="text-xs text-gray-500 mt-1">The database must already exist</p>
    </div>

    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Database Username *</label>
        <input type="text" name="db_username" value="{{ old('db_username', 'root') }}" required
            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
    </div>

    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Database Password</label>
        <input type="password" name="db_password" value="{{ old('db_password') }}"
            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            placeholder="Leave blank if no password">
    </div>

    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <div class="flex items-start">
            <i class="fas fa-info-circle text-blue-500 mt-0.5 mr-2"></i>
            <div class="text-sm text-blue-700">
                <p class="font-medium">MySQL Requirements:</p>
                <ul class="list-disc ml-4 mt-1 space-y-1">
                    <li>MySQL 5.7+ or MariaDB 10.3+</li>
                    <li>Database must be created before installation</li>
                    >li>User must have CREATE, ALTER, DROP, INSERT, UPDATE, DELETE, SELECT privileges</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="flex justify-between">
        <a href="{{ route('install.welcome') }}" class="inline-flex items-center text-gray-600 hover:text-gray-800 px-4 py-2">
            <i class="fas fa-arrow-left mr-2"></i>Back
        </a>
        
        <button type="submit" class="inline-flex items-center bg-purple-600 text-white px-8 py-2 rounded-lg font-semibold hover:bg-purple-700 transition">
            Test Connection
            <i class="fas fa-arrow-right ml-2"></i>
        </button>
    </div>
</form>
@endsection
