@extends('installer.layout')
@section('title', 'Database Configuration')
@section('content')
<div class="inst-card">
    <div class="inst-progress">
        <div class="s done"></div><div class="s done"></div><div class="s active"></div><div class="s"></div>
        <div class="s"></div><div class="s"></div><div class="s"></div><div class="s"></div>
    </div>
    <div class="inst-badge">Step 3 of 8</div>
    <h2>Database Configuration</h2>
    <p class="inst-subtitle">Enter your MySQL database credentials. The connection will be tested before proceeding.</p>
    <div id="dbTestResult" style="display:none; margin-bottom:14px; padding:10px 14px; border-radius:10px; font-size:12px;"></div>
    <div id="dbExisting" class="notice" style="display:none;"></div>
    <form id="dbForm">
        @csrf
        <div class="field-row">
            <div class="field">
                <label>Database Driver</label>
                <select name="db_connection" disabled><option value="mysql">MySQL</option></select>
            </div>
            <div class="field">
                <label>Database Port</label>
                <input type="number" name="db_port" value="3306" required>
            </div>
        </div>
        <div class="field-row">
            <div class="field">
                <label>Database Host</label>
                <input type="text" name="db_host" value="localhost" required>
            </div>
            <div class="field">
                <label>Database Name</label>
                <input type="text" name="db_database" required placeholder="e.g. izone_app">
            </div>
        </div>
        <div class="field-row">
            <div class="field">
                <label>Database Username</label>
                <input type="text" name="db_username" required placeholder="e.g. root">
            </div>
            <div class="field">
                <label>Database Password</label>
                <input type="password" name="db_password" placeholder="Leave empty if no password">
            </div>
        </div>
        <div style="display:flex; gap:10px; margin-top:8px;">
            <button type="button" id="testDbBtn" class="btn btn-secondary">Test Database Connection</button>
            <button type="button" id="continueDbBtn" class="btn btn-primary" disabled style="flex:1;">Continue →</button>
        </div>
    </form>
</div>
<script>
(function(){
    var csrf = document.querySelector('#dbForm input[name="_token"]').value;
    var headers = { 'Content-Type':'application/json', 'X-CSRF-TOKEN':csrf, 'Accept':'application/json' };

    document.getElementById('testDbBtn').addEventListener('click', function(){
        var btn = this;
        var form = document.getElementById('dbForm');
        var data = Object.fromEntries(new FormData(form));
        btn.textContent = 'Testing...';
        btn.disabled = true;
        var result = document.getElementById('dbTestResult');
        result.style.display = 'none';

        fetch('{{ route("install.test-database") }}', { method:'POST', headers:headers, body:JSON.stringify(data) })
        .then(function(r){ return r.json(); })
        .then(function(json){
            result.style.display = 'block';
            if(json.success){
                result.style.background = 'rgba(34,197,94,.1)';
                result.style.border = '1px solid rgba(34,197,94,.2)';
                result.style.color = '#22c55e';
                result.textContent = '✓ ' + json.message;
                document.getElementById('continueDbBtn').disabled = false;
            } else {
                result.style.background = 'rgba(239,68,68,.1)';
                result.style.border = '1px solid rgba(239,68,68,.2)';
                result.style.color = '#ef4444';
                result.textContent = '✗ ' + json.message;
                document.getElementById('continueDbBtn').disabled = true;
            }
            btn.textContent = 'Test Database Connection';
            btn.disabled = false;
        })
        .catch(function(err){
            result.style.display = 'block';
            result.style.background = 'rgba(239,68,68,.1)';
            result.style.border = '1px solid rgba(239,68,68,.2)';
            result.style.color = '#ef4444';
            result.textContent = '✗ Network error: ' + err.message;
            btn.textContent = 'Test Database Connection';
            btn.disabled = false;
        });
    });

    document.getElementById('continueDbBtn').addEventListener('click', function(){
        var form = document.getElementById('dbForm');
        var data = Object.fromEntries(new FormData(form));
        fetch('{{ route("install.store-data") }}', { method:'POST', headers:headers, body:JSON.stringify({ step:3, data:data }) })
        .then(function(){ window.location.href = '{{ route("install.application") }}'; });
    });
})();
</script>
@endsection