@extends('layouts.auth')

@section('title', 'Verificar E-mail')

@section('content')
    <div class="welcome-message fade-in-delay-2">
        <p>
            Obrigado por se cadastrar! Antes de começar, você poderia <span class="magic-text">verificar seu endereço de
                e-mail</span>
            clicando no link que acabamos de enviar? Se você não recebeu o e-mail, teremos prazer em enviar outro.
        </p>
    </div>

    @if (session('status') == 'verification-link-sent')
        <div class="session-status fade-in-delay-3">
            <i class="bi bi-check-circle-fill"></i>
            <p>Um novo link de verificação foi enviado para o seu e-mail!</p>
        </div>
    @endif

    <form method="POST" action="{{ route('verification.send') }}" id="verifyForm">
        @csrf

        <button type="submit" class="btn-primary fade-in-delay-4" id="verifyBtn">
            <span class="btn-content">
                <span class="spinner"></span>
                <i class="bi bi-envelope-check btn-icon btn-text"></i>
                <span class="btn-text">Reenviar E-mail de Verificação</span>
            </span>
        </button>
    </form>

    <div class="form-options fade-in-delay-5" style="justify-content: space-between; margin-top: 20px; margin-bottom: 0;">
        <a href="{{ route('profile.show') }}" class="forgot-link">
            <i class="bi bi-person-circle" style="margin-right: 4px;"></i>
            Editar Perfil
        </a>

        <form method="POST" action="{{ route('logout') }}" style="display: inline;">
            @csrf
            <button type="submit" class="forgot-link"
                style="background: none; border: none; cursor: pointer; padding: 4px 0;">
                <i class="bi bi-box-arrow-right" style="margin-right: 4px;"></i>
                Sair
            </button>
        </form>
    </div>
@endsection

@section('scripts')
    <script>
        (function() {
            'use strict';

            var DOM = {};

            function initDOM() {
                DOM.verifyForm = document.getElementById('verifyForm');
                DOM.verifyBtn = document.getElementById('verifyBtn');
            }

            var VerifyForm = {
                isSubmitting: false,

                init: function() {
                    if (!DOM.verifyForm) return;
                    this.bindEvents();
                },

                bindEvents: function() {
                    var self = this;
                    DOM.verifyForm.addEventListener('submit', function(e) {
                        self.handleSubmit(e);
                    });
                },

                handleSubmit: function(e) {
                    if (this.isSubmitting) {
                        e.preventDefault();
                        return;
                    }

                    this.isSubmitting = true;
                    if (DOM.verifyBtn) {
                        DOM.verifyBtn.classList.add('loading');
                        DOM.verifyBtn.disabled = true;
                    }
                }
            };

            function init() {
                initDOM();
                VerifyForm.init();
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', init);
            } else {
                init();
            }
        })();
    </script>
@endsection