@extends('installer.layout')

@section('title', 'Step 2: Database Configuration')
@section('step_1_class', 'completed')
@section('step_2_class', 'active')

@section('content')
    <h2 style="font-size: 1.1rem; font-weight: 700; color: #FFFFFF; margin-bottom: 0.5rem;">Database Configuration</h2>
    <p style="font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 1.5rem;">
        Enter your MySQL database details. The installer will test the connection, update <code style="color: #34D399;">.env</code>, and auto-initialize all tables.
    </p>

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

        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1rem;">
            <div class="form-group">
                <label class="form-label">Database Host</label>
                <input type="text" name="db_host" class="form-control" value="{{ old('db_host', '127.0.0.1') }}" required placeholder="127.0.0.1 or localhost">
            </div>

            <div class="form-group">
                <label class="form-label">Port</label>
                <input type="number" name="db_port" class="form-control" value="{{ old('db_port', '3306') }}" required>
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Database Name</label>
            <input type="text" name="db_name" class="form-control" value="{{ old('db_name') }}" required placeholder="e.g. payment_db">
            <div class="form-helper">Make sure the database is already created in your hosting panel / phpMyAdmin.</div>
        </div>

        <div class="form-group">
            <label class="form-label">Database Username</label>
            <input type="text" name="db_user" class="form-control" value="{{ old('db_user', 'root') }}" required placeholder="e.g. payment_user">
        </div>

        <div class="form-group">
            <label class="form-label">Database Password</label>
            <input type="password" name="db_pass" class="form-control" value="{{ old('db_pass') }}" placeholder="Leave blank if no password">
        </div>

        <div class="form-group">
            <label class="form-label">Application URL</label>
            <input type="url" name="app_url" class="form-control" value="{{ old('app_url', url('/')) }}" required placeholder="https://yourdomain.com">
            <div class="form-helper">Your website primary URL (including https://)</div>
        </div>

        <div style="margin-top: 2rem;">
            <button type="submit" class="btn" id="btnSubmit">
                <span>Save Database & Initialize</span>
                <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
            </button>
        </div>
    </form>
@endsection