@section('title', "ZEINER | Verificar conta")
<div>
    <div class="min-h-screen flex flex-col">    
    <x-home.header />

    <div class="w-full flex flex-col items-center py-10 px-4 md:px-0">

    <!-- TÍTULO E BREADCRUMB -->
    <h1 class="text-4xl font-bold text-wgite mb-2">Verifique o seu e-mail</h1>

    <nav class="text-sm text-gray-400 mb-8">
        <a href="#" class="hover:underline">Página Inicial</a>
        <span class="mx-1">/</span>
        <span class="text-gray-400">Verifique o seu e-mail</span>
    </nav>

    <!-- CARD PRINCIPAL -->
    <div class="w-full max-w-5xl bg-white shadow rounded-md border">
        
        <!-- HEADER DO CARD -->
        <div class="bg-gray-100 border-b px-6 py-4 rounded-t-md">
            <h2 class="text-lg font-semibold text-gray-700">Verifique o seu e-mail</h2>
        </div>

       
        <div class=" {{!$verificationCodeAlert ? 'hidden' : '' }} mx-4 my-3 text-black cursor-pointer py-5 flex items-center justify-between rounded bg-green-200 w-md">
            <h6 class="flex-1 text-center">Consulte o seu e-mail para poder obter o seu código de verificação!</h6>
            <span wire:click='hideVerificationCodeAlert' class="px-2 text-3xl mt-[-1rem] cursor-pointer">&times;</span>
        </div>
     

        <!-- CONTEÚDO -->
        <div class="px-6 py-10 flex flex-col items-center">
            <label class="text-gray-700 text-lg mb-3">
                O seu endereço de e-mail:
            </label>

        <form class="w-full max-w-2xl" wire:submit='sendVerificationCode'>
            <div class="flex flex-col gap-2">
                <input 
                 id='userEmail'
                 type="email"
                 placeholder="Digite o seu email"
                 wire:model='email'
                 class="w-full max-w-2xl border border-gray-300 text-black rounded-md px-4 py-3 
                  focus:ring-1 focus:ring-blue-400 outline-none
                 transition-all duration-200 ease-in-out"
                 required
                />

                <input               
                 type="number"
                 min="1"
                 placeholder="Digite o código de verificação"
                 wire:model='confirmVerificationCode'
                 class="w-full {{!$verificationCodeInput ? 'hidden' : ''}} max-w-2xl border border-gray-300 text-black rounded-md px-4 py-3 
                  focus:ring-1 focus:ring-blue-400 outline-none
                 transition-all duration-200 ease-in-out"
                  {{ $verificationCodeInput ? 'required' : ''}}                
                />

            </div>

            <div class="text-center my-2">
                <a wire:click='sendVerificationCode' class="text-black hover:underline" >Enviar código de verificação novamente</a>
            </div>

            <!-- BOTÕES -->
            <div class="flex flex-col sm:flex-row flex-wrap justify-center gap-2 mt-6">
                <button  
                  id='userEmailVerificarionButton'
                  class="opacity-50 cursor-not-allowed  px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-md">
                    Iniciar verificação
                </button>

                <button  
                  id='finishVerificationCode'
                  wire:click='finishVerificationCode'
                  class="px-6 py-3 {{!$finishVerificatonCodeButton ? 'hidden' : ''}} bg-green-400 hover:bg-gree-500 text-white rounded-md">
                    Concluir verificação
                </button>             
             

                <button id='userAlreadyAccountButton' class="px-6 py-3 bg-yellow-500 hover:bg-yellow-600 text-white rounded-md">
                    Já possui uma conta?
                </button>
            </div>
            </form>
        </div>

        <!-- FOOTER -->
        <div class="bg-gray-100 border-t px-6 py-6 text-gray-700 text-sm leading-relaxed rounded-b-md">
            Para garantir uma experiência de compra segura, pedimos que você verifique o seu endereço de e-mail  
            antes de prosseguir com o pedido. A verificação do e-mail é essencial para manter a segurança da conta  
            e proteger contra acesso não autorizado. O seu e-mail verificado será usado para comunicações importantes  
            sobre o seu pedido.
        </div>

    </div>
</div>


    </div>
</div>

@push('user-scripts')
<script>
   document.getElementById('userEmail').addEventListener('input', function () {
    const btn = document.getElementById('userEmailVerificarionButton');    
    if (this.value.trim() !== "") {
        btn.classList.remove('opacity-50', 'cursor-not-allowed');
        btn.disabled = false;
    } else {
        btn.classList.add('opacity-50', 'cursor-not-allowed');
        btn.disabled = true;
    }
});


    let alreadyAccountBtn = document.getElementById('userAlreadyAccountButton');
    alreadyAccountBtn.addEventListener('click', () => {
        window.location = "{{ route('app.login') }}";
    });

</script>
@endpush