@extends('installer.layout')
@section('title', 'Administrator Account')
@section('content')
<div class="inst-card">
    <div class="inst-progress">
        <div class="s done"></div><div class="s done"></div><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>
    <div class="inst-badge">Step 5 of 8</div>
    <h2>Administrator Account</h2>
    <p class="inst-subtitle">Create the super administrator account for the admin panel.</p>
    <div id="adminErrors" class="form-errors" style="display:none;"></div>
    <form id="adminForm">
        @csrf
        <div class="field">
            <label>Administrator Name</label>
            <input type="text" name="admin_name" required placeholder="e.g. Super Admin">
        </div>
        <div class="field">
            <label>Administrator Email</label>
            <input type="email" name="admin_email" required placeholder="e.g. admin@example.com">
        </div>
        <div class="field">
            <label>Password</label>
            <input type="password" name="admin_password" id="adminPassword" required minlength="8">
            <div class="field-hint">Minimum 8 characters.</div>
        </div>
        <div class="field">
            <label>Confirm Password</label>
            <input type="password" name="admin_password_confirm" id="adminPasswordConfirm" required>
        </div>
        <div style="display:flex; gap:10px;">
            <a href="{{ route('install.application') }}" class="btn btn-secondary">← Back</a>
            <button type="button" id="continueAdminBtn" class="btn btn-primary" style="flex:1;">Continue →</button>
        </div>
    </form>
</div>
<script>
(function(){
    var csrf = document.querySelector('#adminForm input[name="_token"]').value;
    var headers = { 'Content-Type':'application/json', 'X-CSRF-TOKEN':csrf, 'Accept':'application/json' };

    document.getElementById('continueAdminBtn').addEventListener('click', function(){
        var form = document.getElementById('adminForm');
        var pw = document.getElementById('adminPassword').value;
        var pw2 = document.getElementById('adminPasswordConfirm').value;
        var errs = document.getElementById('adminErrors');

        if(pw.length < 8){ errs.textContent = 'Password must be at least 8 characters.'; errs.style.display = 'block'; return; }
        if(pw !== pw2){ errs.textContent = 'Passwords do not match.'; errs.style.display = 'block'; return; }
        errs.style.display = 'none';

        var data = Object.fromEntries(new FormData(form));
        delete data.admin_password_confirm;

        fetch('{{ route("install.store-data") }}', { method:'POST', headers:headers, body:JSON.stringify({ step:5, data:data }) })
        .then(function(){ window.location.href = '{{ route("install.summary") }}'; });
    });
})();
</script>
@endsection