@extends('install.layout')

@section('content')
<div class="text-center mb-4">
    <h3>Database Configuration</h3>
    <p>Set up your database connection details.</p>
</div>

<form action="{{ route('install.database.store') }}" method="POST">
    @csrf
    
    <div class="card mb-4">
        <div class="card-body">
            <div class="mb-3">
                <label for="database_connection" class="form-label">Database Type</label>
                <select name="database_connection" id="database_connection" class="form-select @error('database_connection') is-invalid @enderror" required>
                    <option value="mysql" {{ old('database_connection') == 'mysql' ? 'selected' : '' }}>MySQL</option>
                    <option value="sqlite" {{ old('database_connection') == 'sqlite' ? 'selected' : '' }}>SQLite</option>
                </select>
                @error('database_connection')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            
            <div id="mysql-fields">
                <div class="mb-3">
                    <label for="database_hostname" class="form-label">Database Host</label>
                    <input type="text" name="database_hostname" id="database_hostname" class="form-control @error('database_hostname') is-invalid @enderror" value="{{ old('database_hostname', 'localhost') }}">
                    @error('database_hostname')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="mb-3">
                    <label for="database_port" class="form-label">Database Port</label>
                    <input type="text" name="database_port" id="database_port" class="form-control @error('database_port') is-invalid @enderror" value="{{ old('database_port', '3306') }}">
                    @error('database_port')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="mb-3">
                    <label for="database_name" class="form-label">Database Name</label>
                    <input type="text" name="database_name" id="database_name" class="form-control @error('database_name') is-invalid @enderror" value="{{ old('database_name') }}" required>
                    @error('database_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="mb-3">
                    <label for="database_username" class="form-label">Database Username</label>
                    <input type="text" name="database_username" id="database_username" class="form-control @error('database_username') is-invalid @enderror" value="{{ old('database_username') }}">
                    @error('database_username')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="mb-3">
                    <label for="database_password" class="form-label">Database Password</label>
                    <input type="password" name="database_password" id="database_password" class="form-control @error('database_password') is-invalid @enderror" value="{{ old('database_password') }}">
                    @error('database_password')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <div id="sqlite-fields" style="display: none;">
                <div class="mb-3">
                    <label for="database_name_sqlite" class="form-label">Database Name</label>
                    <input type="text" name="database_name_sqlite" id="database_name_sqlite" class="form-control" value="{{ old('database_name_sqlite', 'database') }}">
                    <small class="form-text text-muted">This will create a SQLite database file in the database directory.</small>
                </div>
            </div>
        </div>
    </div>
    
    <div class="d-flex justify-content-between">
        <a href="{{ route('install.requirements') }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Back</a>
        <button type="submit" class="btn btn-primary">Continue <i class="fas fa-arrow-right"></i></button>
    </div>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const databaseConnection = document.getElementById('database_connection');
        const mysqlFields = document.getElementById('mysql-fields');
        const sqliteFields = document.getElementById('sqlite-fields');
        const databaseName = document.getElementById('database_name');
        const databaseNameSqlite = document.getElementById('database_name_sqlite');
        
        function toggleDatabaseFields() {
            if (databaseConnection.value === 'mysql') {
                mysqlFields.style.display = 'block';
                sqliteFields.style.display = 'none';
                databaseName.name = 'database_name';
                databaseNameSqlite.name = 'database_name_sqlite';
            } else {
                mysqlFields.style.display = 'none';
                sqliteFields.style.display = 'block';
                databaseName.name = 'database_name_mysql';
                databaseNameSqlite.name = 'database_name';
            }
        }
        
        toggleDatabaseFields();
        
        databaseConnection.addEventListener('change', toggleDatabaseFields);
    });
</script>
@endsection