@extends('site.layouts.new.app')

@php
    $layoutTitle = 'Superlegis - Acesso Restrito';
    $searchAction = route('site.search', ['front_layout' => 'new']);
    $searchName = 'text';
    $searchValue = '';
    $siteMenuSection = null;
    $loginAction = route('login');
    $recaptchaEnabled = (bool) ($recaptchaEnabled ?? false);
    $recaptchaSiteKey = $recaptchaSiteKey ?? '';
@endphp

@section('site_content')
    <section class="sl-login-page">
        <div class="sl-login-shell">
            <div class="sl-login-frame">
                <div class="sl-login-card">
                    <div class="sl-login-welcome">
                        <div class="sl-login-welcome__copy">
                            <h1>Bem-vindo ao SuperLegis</h1>
                            <p>
                                Utilize suas credenciais para entrar no sistema. Em caso de dúvidas ou dificuldades de
                                acesso, entre em contato com o suporte técnico.
                            </p>
                        </div>

                        <article class="sl-login-welcome__notice">
                            <div class="sl-login-welcome__notice-icon">
                                <i class="fa fa-info" aria-hidden="true"></i>
                            </div>
                            <div>
                                <strong>Novidades</strong>
                                <p>Melhorias de desempenho</p>
                                <small>
                                    O sistema está mais rápido e estável, garantindo maior agilidade no acesso às
                                    informações e na execução das tarefas do dia a dia.
                                </small>
                            </div>
                        </article>

                        <div class="sl-login-welcome__footer">
                            <div class="sl-login-security-badge">
                                <img src="{{ asset('uploads/login/lgpd_2 1.png') }}" alt="LGPD">
                            </div>
                        </div>
                    </div>

                    <div class="sl-login-form-panel">
                        <div class="sl-login-brand">
                            <img src="{{ asset('uploads/logo/logo_nova_legis.png') }}" alt="Superlegis">
                        </div>

                        <div class="sl-login-form-shell">
                            @if ($errors->any())
                                <div class="sl-login-alert" role="alert">
                                    <strong>Não foi possível entrar.</strong>
                                    <span>{{ $errors->first('email') ?: $errors->first('recaptcha') ?: 'Email ou senha incorretos. Confira os dados e tente novamente.' }}</span>
                                </div>
                            @endif

                            <form action="{{ $loginAction }}" method="POST" class="sl-login-form">
                                @csrf
                                <div class="sl-login-field">
                                    <label for="email">Email</label>
                                    <input type="email" name="email" id="email" value="{{ old('email') }}"
                                        placeholder="superlegis@superlegis.com.br" required autofocus>
                                </div>

                                <div class="sl-login-field">
                                    <label for="password">Senha</label>
                                    <div class="sl-login-password">
                                        <input type="password" name="password" id="password" placeholder="Digite sua senha" required>
                                        <button type="button" class="sl-login-password__toggle" aria-label="Mostrar ou ocultar senha" data-login-password-toggle>
                                            <i class="fa fa-eye" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                </div>

                                <label class="sl-login-remember">
                                    <input type="checkbox" name="remember" value="1" {{ old('remember') ? 'checked' : '' }}>
                                    <span>
                                        <strong>Lembrar senha</strong>
                                        <small>Salve suas credenciais neste dispositivo</small>
                                    </span>
                                </label>

                                @if ($recaptchaEnabled)
                                    <div class="sl-login-field">
                                        <div class="g-recaptcha" data-sitekey="{{ $recaptchaSiteKey }}"></div>
                                    </div>
                                @endif

                                <button type="submit" class="sl-login-submit">Entrar</button>
                            </form>

                            <div class="sl-login-links">
                                <a href="/recovery">Esqueceu sua senha?</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="sl-login-meta">
                    <p>&copy; {{ date('Y') }} Digitar Informática. Todos os direitos reservados. Sistema SuperLegis.</p>
                    <img src="{{ asset('uploads/logo/logo_empresa.png') }}" alt="Logo da empresa">
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    @if ($recaptchaEnabled)
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    @endif
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const toggle = document.querySelector('[data-login-password-toggle]');
            const input = document.getElementById('password');

            if (!toggle || !input) {
                return;
            }

            toggle.addEventListener('click', function() {
                const isPassword = input.type === 'password';
                input.type = isPassword ? 'text' : 'password';

                const icon = toggle.querySelector('i');
                if (icon) {
                    icon.classList.toggle('fa-eye', !isPassword);
                    icon.classList.toggle('fa-eye-slash', isPassword);
                }
            });
        });
    </script>
@endpush