<x-instalador.layout titulo="Banco de dados e identificação" :passo="2"
                    subtitulo="Crie o banco em “MySQL Databases” no cPanel, conceda ALL PRIVILEGES ao usuário e informe os dados aqui.">

    <form method="POST" action="{{ route('instalador.banco.salvar') }}">
        @csrf

        <h2>Identificação</h2>

        <div class="grade">
            <div class="campo">
                <label for="app_name">Nome do sistema</label>
                <input id="app_name" name="app_name" required maxlength="60"
                       value="{{ old('app_name', $valores['app_name']) }}">
                <p class="dica">Pode ser trocado depois pelo painel master.</p>
            </div>

            <div class="campo">
                <label for="app_url">Endereço do site</label>
                <input id="app_url" name="app_url" type="url" required
                       value="{{ old('app_url', $valores['app_url']) }}">
                <p class="dica">Use https:// se o domínio já tiver certificado.</p>
            </div>
        </div>

        <h2>Conexão com o banco</h2>

        <div class="grade">
            <div class="campo">
                <label for="db_host">Servidor</label>
                <input id="db_host" name="db_host" required
                       value="{{ old('db_host', $valores['db_host']) }}">
                <p class="dica">Na maioria dos cPanel é <code>127.0.0.1</code>.</p>
            </div>

            <div class="campo">
                <label for="db_port">Porta</label>
                <input id="db_port" name="db_port" type="number" required
                       value="{{ old('db_port', $valores['db_port']) }}">
            </div>
        </div>

        <div class="campo">
            <label for="db_database">Nome do banco</label>
            <input id="db_database" name="db_database" required
                   placeholder="usuario_xmlmonitor"
                   value="{{ old('db_database', $valores['db_database']) }}">
            <p class="dica">O cPanel prefixa com o nome da sua conta — copie exatamente como aparece lá.</p>
        </div>

        <div class="grade">
            <div class="campo">
                <label for="db_username">Usuário do banco</label>
                <input id="db_username" name="db_username" required
                       value="{{ old('db_username', $valores['db_username']) }}">
            </div>

            <div class="campo">
                <label for="db_password">Senha do banco</label>
                <input id="db_password" name="db_password" type="password" autocomplete="off">
                <p class="dica">Pode conter <code>#</code> e espaços: o instalador trata as aspas.</p>
            </div>
        </div>

        <div class="alerta alerta-atencao">
            Ao continuar, o instalador testa a conexão, grava o arquivo <code>.env</code>,
            gera a chave de criptografia e cria as tabelas. Leva alguns segundos.
        </div>

        <div class="acoes">
            <button type="submit" class="btn">Testar conexão e criar tabelas</button>
            <a href="{{ route('instalador.requisitos') }}" class="btn btn-fantasma">Voltar</a>
        </div>
    </form>
</x-instalador.layout>
