@extends('install.layout')

@section('title', 'Database Configuration')

@section('content')
<h2 style="color: #333; margin-bottom: 20px;">Database Configuration</h2>
<p style="color: #6c757d; margin-bottom: 30px;">
    Enter your database credentials. Make sure the database already exists.
</p>

@if($errors->any())
<div class="alert alert-danger">
    @foreach($errors->all() as $error)
        {{ $error }}
    @endforeach
</div>
@endif

<div id="testResult" style="display: none;"></div>

<form method="POST" action="{{ route('install.database.save') }}" id="databaseForm">
    @csrf
    
    <div class="form-group">
        <label for="db_host">Database Host *</label>
        <input 
            type="text" 
            name="db_host" 
            id="db_host" 
            class="form-control" 
            value="{{ old('db_host', '127.0.0.1') }}"
            required
        >
    </div>

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

    <div class="form-group">
        <label for="db_name">Database Name *</label>
        <input 
            type="text" 
            name="db_name" 
            id="db_name" 
            class="form-control" 
            placeholder="e.g., cheque_writer"
            value="{{ old('db_name') }}"
            required
        >
    </div>

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

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

    <div class="mb-3">
        <button type="button" class="btn btn-secondary" onclick="testConnection()">
            Test Connection
        </button>
    </div>

    <div class="mt-3" style="display: flex; justify-content: space-between;">
        <a href="{{ route('install.purchase') }}" class="btn btn-secondary">← Back</a>
        <button type="submit" class="btn btn-primary" id="submitBtn">Save & Continue →</button>
    </div>
</form>
@endsection

@section('scripts')
<script>
function testConnection() {
    const resultDiv = document.getElementById('testResult');
    const submitBtn = document.getElementById('submitBtn');
    
    resultDiv.style.display = 'block';
    resultDiv.className = 'alert alert-info';
    resultDiv.innerHTML = 'Testing connection...';

    const formData = new FormData(document.getElementById('databaseForm'));

    fetch('{{ route('install.database.test') }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            resultDiv.className = 'alert alert-success';
            resultDiv.innerHTML = '<strong>Success!</strong> ' + data.message;
            submitBtn.disabled = false;
        } else {
            resultDiv.className = 'alert alert-danger';
            resultDiv.innerHTML = '<strong>Error!</strong> ' + data.message;
            submitBtn.disabled = true;
        }
    })
    .catch(error => {
        resultDiv.className = 'alert alert-danger';
        resultDiv.innerHTML = '<strong>Error!</strong> Failed to test connection.';
        submitBtn.disabled = true;
    });
}
</script>
@endsection