@extends('layouts.tropa', ['title' => 'Tropa do FiniN | Conexao MySQL', 'page' => 'mysql-connection'])

@section('content')
    <main class="screen screen-admin">
        <section class="home-hero admin-hero">
            <div class="home-brand admin-brand">
                <img src="{{ asset('images/tropa-do-finin-logo.png') }}" alt="Logo Tropa do FiniN">
                <div>
                    <span class="eyebrow">Infra do banco</span>
                    <h1>Conexao MySQL</h1>
                    <p id="admin-subtitle">
                        Salve as credenciais no ambiente e valide na hora se o Laravel consegue falar com o servidor MySQL.
                    </p>
                </div>
            </div>

            <div class="hero-actions">
                <a href="{{ route('landing') }}" class="secondary-button">Entrada</a>
                <a href="{{ route('admin') }}" class="ghost-link">Area admin</a>
                <form method="POST" action="{{ route('logout') }}" class="logout-form">
                    @csrf
                    <button type="submit" class="ghost-button">Sair</button>
                </form>
            </div>
        </section>

        <section class="admin-grid mysql-grid">
            <article class="dashboard-card admin-panel">
                <div class="card-heading">
                    <div>
                        <span class="card-label">Credenciais</span>
                        <h2>Salvar e testar</h2>
                    </div>
                </div>

                <form method="POST" action="{{ route('mysql.connection.update') }}" class="admin-form" novalidate>
                    @csrf

                    <div class="form-grid">
                        <label class="input-group">
                            <span>Servidor / host</span>
                            <input type="text" name="host" value="{{ old('host', $connection['host']) }}" placeholder="187.33.241.52">
                        </label>

                        <label class="input-group">
                            <span>Porta</span>
                            <input type="number" name="port" value="{{ old('port', $connection['port']) }}" placeholder="3306" min="1" max="65535">
                        </label>

                        <label class="input-group">
                            <span>Banco de dados</span>
                            <input type="text" name="database" value="{{ old('database', $connection['database']) }}" placeholder="site4cyber_tropa_finin">
                        </label>

                        <label class="input-group">
                            <span>Usuario</span>
                            <input type="text" name="username" value="{{ old('username', $connection['username']) }}" placeholder="site4cyber_dba_tropa_finin">
                        </label>

                        <label class="input-group input-group-full">
                            <span>Senha</span>
                            <input type="password" name="password" value="{{ old('password', $connection['password']) }}" placeholder="Digite a senha do banco">
                        </label>
                    </div>

                    @if ($errors->any())
                        <div class="form-feedback" aria-live="polite">{{ $errors->first() }}</div>
                    @else
                        <div class="form-feedback" aria-live="polite"></div>
                    @endif

                    <div class="form-actions">
                        <a href="{{ route('landing') }}" class="ghost-button">Cancelar</a>
                        <button type="submit" class="primary-button">Salvar e testar conexao</button>
                    </div>
                </form>
            </article>

            <article class="dashboard-card admin-panel mysql-status-panel">
                <div class="card-heading">
                    <div>
                        <span class="card-label">Status</span>
                        <h2>Resultado atual</h2>
                    </div>
                </div>

                @php
                    $status = $result['status'] ?? 'idle';
                    $statusLabel = [
                        'success' => 'Conectado',
                        'error' => 'Falhou',
                        'idle' => 'Aguardando teste',
                    ][$status] ?? 'Aguardando teste';
                @endphp

                <div class="mysql-status-card mysql-status-{{ $status }}">
                    <span class="status-badge">{{ $statusLabel }}</span>
                    <p>{{ $result['message'] ?? 'Preencha os dados ao lado para salvar no .env e validar a conexao com o MySQL.' }}</p>
                </div>

                <div class="mysql-meta-list">
                    <div class="info-chip">
                        <strong>Host atual</strong>
                        <span>{{ $connection['host'] ?: '-' }}</span>
                    </div>
                    <div class="info-chip">
                        <strong>Porta</strong>
                        <span>{{ $connection['port'] ?: '-' }}</span>
                    </div>
                    <div class="info-chip">
                        <strong>Banco</strong>
                        <span>{{ $result['database'] ?? ($connection['database'] ?: '-') }}</span>
                    </div>
                    <div class="info-chip">
                        <strong>Versao MySQL</strong>
                        <span>{{ $result['server_version'] ?? 'Nao validada ainda' }}</span>
                    </div>
                </div>
            </article>
        </section>
    </main>
@endsection