@extends('install.layout')

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

@section('content')
    <div style="margin-bottom: 1.5rem;">
        <h2 style="font-size: 1.5rem; margin-bottom: 0.3rem;">Step 2: Environment & Database Configuration</h2>
        <p style="color: var(--text-muted); font-size: 0.9rem;">Set up your application name, domain URL, and database connection credentials.</p>
    </div>

    <form id="dbForm" action="{{ route('install.admin') }}" method="GET">
        <!-- App Settings -->
        <h4 style="margin: 1rem 0 0.8rem; font-size: 0.9rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px;">Application Info</h4>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div>
                <label>Application Name *</label>
                <input type="text" name="app_name" id="app_name" value="MyOpticals" required>
            </div>
            <div>
                <label>Application URL *</label>
                <input type="url" name="app_url" id="app_url" value="{{ $defaultAppUrl }}" required>
            </div>
        </div>

        <!-- Database Settings -->
        <h4 style="margin: 1.5rem 0 0.8rem; font-size: 0.9rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px;">Database Connection</h4>

        <div>
            <label>Database Driver *</label>
            <select name="db_connection" id="db_connection" onchange="toggleDbFields()">
                <option value="sqlite">SQLite (Embedded / Zero-Configuration)</option>
                <option value="mysql" selected>MySQL / MariaDB</option>
                <option value="pgsql">PostgreSQL</option>
            </select>
        </div>

        <div id="remoteDbFields">
            <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1rem;">
                <div>
                    <label>Database Host *</label>
                    <input type="text" name="db_host" id="db_host" value="127.0.0.1">
                </div>
                <div>
                    <label>Port *</label>
                    <input type="text" name="db_port" id="db_port" value="3306">
                </div>
            </div>

            <div>
                <label>Database Name *</label>
                <input type="text" name="db_database" id="db_database" value="myopticals">
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                <div>
                    <label>Database Username *</label>
                    <input type="text" name="db_username" id="db_username" value="root">
                </div>
                <div>
                    <label>Database Password</label>
                    <input type="password" name="db_password" id="db_password" placeholder="Leave empty if none">
                </div>
            </div>

            <div style="margin-bottom: 1.5rem;">
                <button type="button" onclick="testConnection()" class="btn btn-secondary" style="font-size: 0.85rem; padding: 0.6rem 1.2rem;">
                    <i class="fa-solid fa-plug"></i> Test Connection
                </button>
                <span id="testResult" style="margin-left: 12px; font-size: 0.85rem; font-weight: 600;"></span>
            </div>
        </div>

        <div class="actions-row">
            <a href="{{ route('install.requirements') }}" class="btn btn-secondary">
                <i class="fa-solid fa-arrow-left"></i> Back
            </a>

            <button type="submit" class="btn btn-primary">
                Next: Admin Account <i class="fa-solid fa-arrow-right"></i>
            </button>
        </div>
    </form>

    <script>
        function toggleDbFields() {
            const driver = document.getElementById('db_connection').value;
            const remoteFields = document.getElementById('remoteDbFields');
            const portField = document.getElementById('db_port');

            if (driver === 'sqlite') {
                remoteFields.style.display = 'none';
            } else {
                remoteFields.style.display = 'block';
                portField.value = driver === 'pgsql' ? '5432' : '3306';
            }
        }

        function testConnection() {
            const resultSpan = document.getElementById('testResult');
            resultSpan.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Testing connection...';
            resultSpan.style.color = '#94A3B8';

            const payload = {
                db_connection: document.getElementById('db_connection').value,
                db_host: document.getElementById('db_host').value,
                db_port: document.getElementById('db_port').value,
                db_database: document.getElementById('db_database').value,
                db_username: document.getElementById('db_username').value,
                db_password: document.getElementById('db_password').value,
                _token: '{{ csrf_token() }}'
            };

            fetch('{{ route("install.database.test") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(payload)
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    resultSpan.innerHTML = '<i class="fa-solid fa-check-circle"></i> ' + data.message;
                    resultSpan.style.color = '#10B981';
                } else {
                    resultSpan.innerHTML = '<i class="fa-solid fa-circle-xmark"></i> ' + data.message;
                    resultSpan.style.color = '#EF4444';
                }
            })
            .catch(err => {
                resultSpan.innerHTML = '<i class="fa-solid fa-circle-xmark"></i> Connection error.';
                resultSpan.style.color = '#EF4444';
            });
        }
    </script>
@endsection
