@extends('installer.layout')

@section('step_content')
    <div class="border-b border-slate-800 pb-4">
        <h2 class="text-lg sm:text-xl font-extrabold text-white flex items-center gap-2">
            <i class="fa-solid fa-database text-amber-400"></i>
            <span>Step 2: Environment & Database Credentials</span>
        </h2>
        <p class="text-xs text-slate-400 mt-1">Configure your MySQL database server connection and application URL.</p>
    </div>

    <form action="{{ route('install.database.submit') }}" method="POST" class="space-y-5">
        @csrf

        <div>
            <label class="block text-xs font-bold text-slate-300 mb-1.5">Application Public URL</label>
            <input type="url" name="app_url" value="{{ old('app_url', $defaultConfig['app_url']) }}" required class="w-full bg-slate-950 border border-slate-800 rounded-2xl px-4 py-3 text-xs text-white font-mono focus:outline-none focus:border-amber-400">
            <p class="text-[11px] text-slate-500 mt-1">Full URL of your application installation (e.g. https://yourdomain.com).</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div class="sm:col-span-2">
                <label class="block text-xs font-bold text-slate-300 mb-1.5">Database Host</label>
                <input type="text" name="db_host" value="{{ old('db_host', $defaultConfig['db_host']) }}" required class="w-full bg-slate-950 border border-slate-800 rounded-2xl px-4 py-3 text-xs text-white font-mono focus:outline-none focus:border-amber-400">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-300 mb-1.5">Database Port</label>
                <input type="number" name="db_port" value="{{ old('db_port', $defaultConfig['db_port']) }}" required class="w-full bg-slate-950 border border-slate-800 rounded-2xl px-4 py-3 text-xs text-white font-mono focus:outline-none focus:border-amber-400">
            </div>

            <div class="sm:col-span-3">
                <label class="block text-xs font-bold text-slate-300 mb-1.5">Database Name</label>
                <input type="text" name="db_name" value="{{ old('db_name', $defaultConfig['db_name']) }}" required class="w-full bg-slate-950 border border-slate-800 rounded-2xl px-4 py-3 text-xs text-white font-mono focus:outline-none focus:border-amber-400">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-300 mb-1.5">Database Username</label>
                <input type="text" name="db_username" value="{{ old('db_username', $defaultConfig['db_username']) }}" required class="w-full bg-slate-950 border border-slate-800 rounded-2xl px-4 py-3 text-xs text-white font-mono focus:outline-none focus:border-amber-400">
            </div>

            <div class="sm:col-span-2">
                <label class="block text-xs font-bold text-slate-300 mb-1.5">Database Password</label>
                <input type="password" name="db_password" value="{{ old('db_password', $defaultConfig['db_password']) }}" class="w-full bg-slate-950 border border-slate-800 rounded-2xl px-4 py-3 text-xs text-white font-mono focus:outline-none focus:border-amber-400">
            </div>
        </div>

        <div class="pt-4 border-t border-slate-800 flex flex-col-reverse sm:flex-row items-center justify-between gap-3">
            <a href="{{ route('install.index') }}" class="w-full sm:w-auto text-center py-2.5 text-xs font-bold text-slate-400 hover:text-white transition-colors">
                <i class="fa-solid fa-arrow-left mr-1"></i> Back
            </a>

            <button type="submit" class="w-full sm:w-auto px-8 py-3.5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs shadow-xl shadow-amber-500/20 transition-all flex items-center justify-center gap-2">
                <span>Test Connection & Save</span>
                <i class="fa-solid fa-arrow-right"></i>
            </button>
        </div>
    </form>
@endsection