@extends('install.layout')

@section('content')
<h2>Database Configuration</h2>
<p class="subtitle">Enter your MySQL database credentials from your cPanel account.</p>

@if($errors->any())
    <div class="error-box">
        <ul>@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
    </div>
@endif

<form method="POST" action="{{ route('install.process', 2) }}">
    @csrf

    <div class="input-row">
        <div class="form-row">
            <label for="db_host">Database Host</label>
            <input type="text" id="db_host" name="db_host" value="{{ old('db_host', 'localhost') }}" placeholder="localhost" required>
        </div>
        <div class="form-row">
            <label for="db_port">Port</label>
            <input type="number" id="db_port" name="db_port" value="{{ old('db_port', '3306') }}" placeholder="3306" required>
        </div>
    </div>

    <div class="form-row">
        <label for="db_database">Database Name</label>
        <input type="text" id="db_database" name="db_database" value="{{ old('db_database') }}" placeholder="e.g. cpanelusername_medaid" required>
        <div class="input-hint">Create this database in cPanel → MySQL Databases first.</div>
    </div>

    <div class="form-row">
        <label for="db_username">Database Username</label>
        <input type="text" id="db_username" name="db_username" value="{{ old('db_username') }}" placeholder="e.g. cpanelusername_medaid" required>
    </div>

    <div class="form-row">
        <label for="db_password">Database Password</label>
        <input type="password" id="db_password" name="db_password" placeholder="Database user password">
        <div class="input-hint">Leave blank only if your database user has no password (not recommended).</div>
    </div>

    <div class="actions">
        <a href="{{ route('install.step', 1) }}" class="btn btn-secondary">← Back</a>
        <button type="submit" class="btn btn-primary">
            Test &amp; Continue
            <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
        </button>
    </div>
</form>
@endsection