@extends('front.principal')
@section('content')
    <section class="cabecalho-internas">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h2 class="titulo-padrao">Fazer Login</h2>
                </div>
            </div>
        </div>
    </section>

    {{-- <section class="conteudo-internas">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 offset-sm-3">
                    <div class="text-center mb-5">
                        <img src="{{ asset('front/img/login.png') }}" alt="">
                    </div>
                    <p><b>Faça seu login</b></p>
                    <p>Já cadastrou uma senha <a href="{{ route('autenticar') }}" class="link">Autentique</a></p>

                    <form id="emailForm" class="formulario">
                        @csrf
                        <div class="form-group mb-2">
                            <label for="email">E-mail</label>
                            <input type="email" class="form-control" id="email" name="email"
                                placeholder="Ex: nome@email.com" required>
                        </div>

                        <div class="d-grid">
                            <button type="button" class="btn btn-padrao btn-lg"
                                onclick="verificarEmail()">Verificar</button>
                        </div>
                    </form>

                    <!-- Formulário para definir a senha (inicialmente oculto) -->
                    <form id="senhaForm" class="formulario" action="{{ route('definir.senha') }}" method="POST"
                        style="display: none; margin-top: 20px;">
                        @csrf
                        <input type="hidden" id="hiddenEmail" name="email">

                        <div class="form-group mb-2">
                            <label for="password">Nova Senha</label>
                            <input type="password" class="form-control" name="password" placeholder="Digite sua nova senha"
                                required>
                        </div>

                        <div class="form-group mb-2">
                            <label for="password_confirmation">Confirme a Senha</label>
                            <input type="password" class="form-control" name="password_confirmation"
                                placeholder="Confirme sua senha" required>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-padrao btn-lg">Salvar Senha</button>
                        </div>
                    </form>

                    <script>
                        function verificarEmail() {
                            let email = document.getElementById('email').value.trim();

                            if (!email) {
                                alert("Por favor, insira um e-mail válido.");
                                return;
                            }

                            console.log("Verificando e-mail:", email);

                            fetch("{{ route('verificar.email') }}", {
                                    method: "POST",
                                    headers: {
                                        "Content-Type": "application/json",
                                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                                    },
                                    body: JSON.stringify({
                                        email: email
                                    })
                                })
                                .then(response => {
                                    if (!response.ok) throw new Error("Erro na requisição");
                                    return response.json();
                                })
                                .then(data => {
                                    console.log("Resposta do servidor:", data);

                                    if (data.exists) {
                                        window.location.href = `/criar-senha/${encodeURIComponent(email)}`;
                                    } else {
                                        alert("E-mail não encontrado.");
                                    }
                                })
                                .catch(error => {
                                    console.error("Erro:", error);
                                    alert("Ocorreu um erro ao verificar o e-mail.");
                                });
                        }
                    </script>

                </div>
            </div>
        </div>
    </section> --}}
    <section class="conteudo-internas">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 offset-sm-3">
                    <div class="text-center mb-5">
                        <img src="{{ asset('front/img/login.png') }}" alt="">
                    </div>
                    @if (session('success'))
                    <div class="alert alert-success" role="alert">
                        {{ session('success') }}
                    </div>
                @endif

                <!-- Exibir erros de validação -->
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                    <p><b>Crie sua conta</b></p>
                    <p>Já possui uma conta? <a href="{{ route('autenticar') }}" class="link">Faça login</a></p>

                    <!-- Formulário para verificar o email -->
                    <form id="emailForm" class="formulario">
                        @csrf
                        <div class="form-group mb-2">
                            <label for="email">E-mail</label>
                            <input type="email" class="form-control" id="email" name="email"
                                placeholder="Ex: nome@email.com" required>
                        </div>

                        <div class="d-grid">
                            <button type="button" class="btn btn-padrao btn-lg"
                                onclick="verificarEmail()">Verificar E-mail</button>
                        </div>
                    </form>

                    <!-- Formulário para criar conta (inicialmente oculto) -->
                    <form id="senhaForm" class="formulario" action="{{ route('register') }}" method="POST"
                        style="display: none; margin-top: 20px;">
                        @csrf
                        <input type="hidden" id="hiddenEmail" name="email">

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="form-group mb-2">
                            <label for="name">Nome completo</label>
                            <input type="text" class="form-control" name="name" id="name"
                                placeholder="Nome completo" required>
                        </div>

                        {{-- <div class="form-group mb-2">
                            <label for="group">Grupo</label>
                            <select name="group" id="group" class="form-control" required>
                                <option value="" disabled selected hidden>Selecione uma área de atuação</option>
                                <option value="leader">Liderança</option>
                                <option value="sales">Vendas</option>
                            </select>
                        </div> --}}
                        <input type="hidden" id="group" name="group" value="leader">

                        <div class="form-group mb-2">
                            <label for="password">Senha</label>
                            <input type="password" class="form-control" name="password" id="password"
                                placeholder="Digite sua senha" required>
                        </div>

                        <div class="form-group mb-2">
                            <label for="password_confirmation">Confirme a Senha</label>
                            <input type="password" class="form-control" name="password_confirmation"
                                id="password_confirmation" placeholder="Confirme sua senha" required>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-padrao btn-lg">Cadastrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <style>
        select:invalid {
            color: rgb(196, 196, 196);
        }
        option[value=""] {
            color: rgb(223, 223, 223);
        }
    </style>

    <script>
        function verificarEmail() {
            let email = document.getElementById('email').value.trim();

            if (!email) {
                alert("Por favor, insira um e-mail válido.");
                return;
            }

            console.log("Verificando e-mail:", email);

            fetch("{{ route('verificar.email') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({
                    email: email
                })
            })
            .then(response => {
                if (!response.ok) throw new Error("Erro na requisição");
                return response.json();
            })
            .then(data => {
                console.log("Resposta do servidor:", data);

                if (data.exists) {
                    alert("Este e-mail já está cadastrado. Tente fazer login.");
                    window.location.href = "{{ route('autenticar') }}";
                } else {
                    // Mostra o formulário de cadastro
                    document.getElementById('emailForm').style.display = 'none';
                    document.getElementById('senhaForm').style.display = 'block';
                    document.getElementById('hiddenEmail').value = email;
                }
            })
            .catch(error => {
                console.error("Erro:", error);
                alert("Ocorreu um erro ao verificar o e-mail.");
            });
        }
    </script>



    {{-- <section class="cabecalho-internas">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h2 class="titulo-padrao">Fazer Login</h2>
            </div>
        </div>
    </div>
</section>

<section class="conteudo-internas">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 offset-sm-3">
                <div class="text-center mb-5">
                    <img src="./assets/img/login.png" alt="">
                </div>
                <p><b>Faça seu login</b></p>
                <p>Ainda não cadastro? <a href="{{ route('cadastro.front') }}" >Crie sua conta agora</a></p>

                <form action="{{ route('login') }}" method="POST" class="formulario">
                    @csrf
                    <div class="form-group mb-2">
                        <label for="email">E-mail</label>
                        <input type="email" class="form-control" name="email" id="email" placeholder="Ex: nome@email.com">
                    </div>

                    <div class="form-group mb-3">
                        <label for="senha">Senha</label>
                        <input type="password" class="form-control" name="password" id="senha" placeholder="********">
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-padrao btn-lg">acessar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section> --}}
@endsection