@extends('layouts.installer')

@section('content')
<div class="card-body">
    <div class="steps">
        <div class="step-item completed">1</div>
        <div class="step-item completed">2</div>
        <div class="step-item active">3</div>
        <div class="step-item">4</div>
        <div class="step-item">5</div>
    </div>

    <h2 class="text-white fw-bold mb-3 text-center">Database Configuration</h2>
    <p class="text-muted text-center mb-4">Please enter your MySQL database connection credentials below. The installer will test the connection and create the database if it doesn't already exist.</p>

    <form action="{{ route('install.database.save') }}" method="POST" id="db-form">
        @csrf

        @if($errors->has('error'))
            <div class="alert alert-danger bg-danger-lt border-danger mb-4" role="alert">
                <div class="d-flex">
                    <div><i class="ti ti-alert-triangle me-2 fs-3"></i></div>
                    <div>{{ $errors->first('error') }}</div>
                </div>
            </div>
        @endif

        <div class="mb-3">
            <label class="form-label text-white required">Database Host</label>
            <input type="text" name="db_host" class="form-control" value="{{ old('db_host', '127.0.0.1') }}" required>
        </div>

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

        <div class="mb-3">
            <label class="form-label text-white required">Database Name</label>
            <input type="text" name="db_database" class="form-control" value="{{ old('db_database', 'connect_db') }}" required>
        </div>

        <div class="mb-3">
            <label class="form-label text-white required">Database Username</label>
            <input type="text" name="db_username" class="form-control" value="{{ old('db_username', 'root') }}" required>
        </div>

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

        <div class="d-flex justify-content-between">
            <a href="{{ route('install.requirements') }}" class="btn btn-secondary"><i class="ti ti-arrow-left me-1"></i> Back</a>
            <button type="submit" class="btn btn-primary" id="submit-btn">
                <span id="btn-text">Test & Configure <i class="ti ti-arrow-right ms-1"></i></span>
                <span id="btn-spinner" style="display: none;"><span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Migrating database...</span>
            </button>
        </div>
    </form>
</div>

<script>
    document.getElementById('db-form').addEventListener('submit', function() {
        const submitBtn = document.getElementById('submit-btn');
        const btnText = document.getElementById('btn-text');
        const btnSpinner = document.getElementById('btn-spinner');
        
        submitBtn.disabled = true;
        btnText.style.display = 'none';
        btnSpinner.style.display = 'inline-block';
    });
</script>
@endsection