@extends('layouts.master')

@section('title', 'Auth')

@section('content')

<div class="bg-beige">
    <section class="section pb-0">
        <div class="container-custom">
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4 text-center">
                    <h4 class="font-kaftan-serif title-sm">Torne-se Membro</h4>  
                    <p>Torne-se membro - não perca as promoções e cupões bónus.</p>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4">
                    <form class="form" method="post" action="{{ Helper::route('register') }}">
                        @csrf
                        <label for="email">E-mail<i>*</i></label>
                        <input type="email" id="email" name="email" required>

                        <label for="password">Crie uma palavra-passe<i>*</i></label>
                        <div class="p-relative">
                            <input type="password" id="password" name="password" required>
                            <i class="bi bi-eye-slash" id="togglePassword"></i>
                        </div>

                        <label for="birth_date">Data de nascimento<i>*</i></label>
                        <input type="date" id="birth_date" name="birth_date" required>
                        <p><span>A {{ config('app.name') }} quer dar-lhe um presente especial no seu aniversário</span></p>

                        <label class="d-flex align-items-center mt-4">
                            <input type="checkbox" id="newsletter" name="newsletter" value="1" checked>
                            <p for="newsletter">Sim, quero receber promoções, novidades de moda e convites especiais para promoções e eventos por e-mail.</p>
                        </label>

                        <div class="form-accordion">
                            <div class="accordion accordion-flush" id="accordionExample">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingOne">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                            Preencha mais e receba mais
                                        </button>
                                    </h2>
                                    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <p>Sabia que, se adicionar mais informações abaixo, vai ganhar mais pontos e desfrutar de uma experiência mais personalizada? Parece-lhe bem?</p>
                                            <label for="name">Nome</label>
                                            <input type="text" id="name" name="name">

                                            <label for="surname">Apelido</label>
                                            <input type="text" id="surname" name="surname">

                                            <label for="gender">Género</label>
                                            <select name="gender" id="gender" name="gender">
                                                <option value="empty" selected>Escolha uma Opção</option>
                                                <option value="not_answered">Prefiro não indicar</option>
                                                <option value="masculine">Masculino</option>
                                                <option value="feminine">Feminino</option>
                                            </select>

                                            <!-- <label for="postalCode">Código Postal</label> -->
                                            <!-- <input type="text" id="postalCode" name="postalCode"> -->
                                        </div>
                                    </div>
                                </div>                            
                            </div>
                        </div>

                        <p>Ao clicar em 'Aderir', aceito os <a href="#" class="link">Termos e Condições</a> da {{ config('app.name') }}.</p>
                        <p>Para lhe proporcionar uma boa experiência como membro, vamos processar os seus dados pessoais de acordo com a nossa <a href="#" class="link">Política de Privacidade</a>.</p>

                        <button class="btn btn-block btn-solid-black">Torne-se Membro</button>
                    </form>                    
                </div>    
            </div> 
            <div class="row justify-content-center mt-4">
                <div class="col-md-6 col-lg-4 text-center">
                    <a href="{{ Helper::route('login') }}" class="link">Voltar ao Início de Sessão</a>
                </div>
            </div> 
        </div>
    </section> 
</div>

@endsection