@extends('layouts.installer')

@section('title', 'Database Setup')
@section('subtitle', 'Configure your MySQL database connection.')

@section('content')
<div class="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 mb-8 text-sm text-blue-300 flex items-start gap-3">
    <i data-lucide="info" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
    <p>Please make sure you have created a database before proceeding. If you are using cPanel, create a database and a user, then assign all privileges to the user.</p>
</div>

<form action="{{ route('install.database.post') }}" method="POST" class="space-y-6">
    @csrf
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <label class="block text-sm font-medium text-text-dim mb-2">Database Host</label>
            <input type="text" name="database_host" required class="form-input" value="{{ old('database_host', $data['database_host']) }}">
        </div>
        
        <div>
            <label class="block text-sm font-medium text-text-dim mb-2">Database Port</label>
            <input type="number" name="database_port" required class="form-input" value="{{ old('database_port', $data['database_port']) }}">
        </div>
    </div>

    <div>
        <label class="block text-sm font-medium text-text-dim mb-2">Database Name</label>
        <input type="text" name="database_name" required class="form-input" value="{{ old('database_name', $data['database_name']) }}">
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <label class="block text-sm font-medium text-text-dim mb-2">Database Username</label>
            <input type="text" name="database_username" required class="form-input" autocomplete="off" value="{{ old('database_username', $data['database_username']) }}">
        </div>
        
        <div>
            <label class="block text-sm font-medium text-text-dim mb-2">Database Password</label>
            <input type="password" name="database_password" class="form-input" autocomplete="new-password" value="{{ old('database_password', $data['database_password']) }}">
            <p class="mt-1 text-xs text-text-dim">Leave blank if your local dev environment has no password.</p>
        </div>
    </div>

    <div class="pt-6 border-t border-white/5 flex justify-between items-center">
        <a href="{{ route('install.requirements') }}" class="text-sm text-text-dim hover:text-white transition-colors">
            &larr; Back
        </a>
        <button type="submit" class="btn-primary">
            Test Connection & Save
            <i data-lucide="arrow-right" class="w-4 h-4"></i>
        </button>
    </div>
</form>
@endsection