@extends('layouts.app')

@section('meta')
    <meta name="description" content="Faça login em seu conta para acessar todos os recursos e serviços disponíveis em nosso site. Proteja sua conta com uma senha segura e aproveite todas as vantagens que temos a oferecer.">
    <meta name="author" content="Cote Frete">
    <link rel="canonical" href="{{ url('login-empresa') }}" />
@endsection

@section('content')
<div class="pg-heading-padrao bg-n-rep bs-cover pg-heading2" style="background-image: url({{ asset('assets/img/empresas.webp') }}); background-position-y: -65px">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="white txt-left">
                    <h6 class='fs15 fw500 txt-upper'>Digite Seus Dados para Fazer Login</h6>
                    <h1>Entre na Conta da Sua Empresa</h1>
                </div>
            </div>
        </div>
    </div>
</div>

<div class='mt30'>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="ovf-hd br7">
                    <div class="row mb50 bg-white">
                        <div class="col-lg-2"></div>
                        <div class="col-lg-8 align-self-center">
                            <form id="form_geral" action="javascript:void(0)" method="POST" enctype="multipart/form-data" style="text-align:center" class="pj">
                                @csrf
                                <div class="row" style='justify-content: center'>
                                    <div class="col-lg-8">
                                        <label class="fs20 fw600">Usuário</label>
                                        <fieldset>
                                            <input type="text" name="email" id="email" placeholder="E-mail" required>
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-8">
                                        <label class="fs20 fw600">Senha</label>
                                        <fieldset>
                                            <input type="password" name="senha" id="senha" placeholder="*******" required>
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-12 mt20 mb20" style='display: flex; justify-content: center;'>
                                        <fieldset>
                                            <button type="submit" id="form-submit" class="main-button df-ac-jc fs15" style='display: flex'>
                                                <div style='width: 30px; height: 30px; border-radius: 15px; margin-right: 8px' class='df-ac-jc bg-white'><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" class="bi bi-send" viewBox="0 0 16 16">
                                                        <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z" />
                                                    </svg></div>Entrar
                                            </button>
                                        </fieldset>
                                    </div>
                                    <div class='col-lg-12'>
                                        <a href="{{ route('cadastro.empresa') }}" class="hover-voltar fwb">Não tenho conta</a>
                                    </div>
                                    <div class='col-lg-12'>
                                        <a href="#" id='btn_esqueci' class="hover-voltar fwb">Esqueci minha senha</a>
                                    </div>
                            </form>
                        </div>
                        <div class="col-lg-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Esqueci minha senha -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Esqueci minha senha</h5>
                <button id="close_modal1" type="button" class="close b-none" data-dismiss="modal" aria-label="Close" style='background: transparent;'>
                    <span aria-hidden="true" style='font-size: 30px'>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="javascript:void(0)" id="form_senha" method="post">
                    @csrf
                    <div class="col-md-12 mb-3">
                        <label for="email_usuario">Digite seu e-mail para recuperar sua senha.</label>
                        <input type="email" class="form-control" id="email_usuario" placeholder="Email" required>
                    </div>
                    <div class="modal-footer" style="justify-content: center!important">
                        <button type="submit" class="bg-blue b-none btn btn-primary">Recuperar senha</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal Email enviado -->
<div class="modal fade" id="email-enviado" tabindex="-1" aria-labelledby="email-enviadoLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="email-enviadoLabel">Email enviado!</h5>
                <button id='btn_close' type="button" class="close b-none" data-dismiss="modal" aria-label="Close" style='background: transparent;'>
                    <span aria-hidden="true" style='font-size: 30px'>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="javascript:void(0)" id="form_reset" method="post">
                    @csrf
                    <div class="col-md-12 mb-3">
                        <label for="email_usuario">Enviamos um código para a recuperação da senha, verifique seu email.</label>
                        <input type="text" class="form-control" id="codigo" placeholder="Código" required style='margin-bottom: .5rem;'>
                        <input type="password" class="form-control" id="nova_senha" placeholder="Nova Senha" required style='margin-bottom: .5rem;'>
                        <input type="password" class="form-control" id="conf_nova_senha" placeholder="Confirmar nova senha" required style='margin-bottom: .5rem;'>
                    </div>
                    <div class="modal-footer" style="justify-content: center!important">
                        <button type="submit" class="bg-blue b-none btn btn-primary">Alterar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal Confirmar e-mail -->
<div class="modal fade" id="confirmMailModal" tabindex="-1" aria-labelledby="confirmMailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmMailModalLabel">Confirmar e-mail</h5>
                <button id="close_modal1" type="button" class="close b-none" data-dismiss="modal" aria-label="Close" style='background: transparent;'>
                    <span aria-hidden="true" style='font-size: 30px'>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="javascript:void(0)" id="form_codigo" method="post">
                    @csrf
                    <div class="col-md-12 mb-3">
                        <label for="codigo_confirmacao">Digite o código enviado para o e-mail informado.</label>
                        <input type="text" class="form-control" id="codigo_confirmacao" placeholder="Código" required>
                    </div>
                    <div class="modal-footer" style="justify-content: center!important">
                        <button type="button" id="confirma_email" class="bg-blue b-none btn btn-primary codigo_conf">Confirmar e-mail</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    $("#form_geral").submit(function(e) {
        if ($("#email").val() == "") {
            alert("Digite o email cadastrado.");
        } else {
            var email = $("#email").val();
            var senha = $("#senha").val();
            
            $.post("{{ route('login.empresa') }}", {
                email: email,
                senha: senha,
                _token: '{{ csrf_token() }}'
            }, function(data) {
                switch (data) {
                    case 'ok':
                        window.location.href = "{{ route('adm.empresa.perfil') }}";
                        break;
                    case 'erro':
                        alert("Email ou senha estão incorretos! Confira os dados inseridos e tente novamente.");
                        break;
                    default:
                        let codigoMail = "";
                        $('#confirmMailModal').modal('show');
                        let info = data.split("-");
                        let nome = info[0];
                        let lastId = info[1];

                        let email = $("#email").val();
                        let option = "send";
                        $.ajax({
                            type: "POST",
                            url: "{{ route('confirmar.email.transportadora') }}",
                            data: {
                                nome: nome,
                                email: email,
                                option: option,
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                if (response !== "") {
                                    codigoMail = response;

                                    $("#confirma_email").click(function(e) {
                                        e.preventDefault();
                                        let codigo = $("#codigo_confirmacao").val();

                                        if (codigo === codigoMail) {
                                            let email_confirmado = "sim";
                                            let tipo = "parceiras";
                                            let option = "update";

                                            $.ajax({
                                                type: "POST",
                                                url: "{{ route('confirmar.email.transportadora') }}",
                                                data: {
                                                    email_confirmado: email_confirmado,
                                                    tipo: tipo,
                                                    lastId: lastId,
                                                    option: option,
                                                    _token: '{{ csrf_token() }}'
                                                },
                                                success: function(response) {
                                                    if (response == "ok") {
                                                        window.location.href = "{{ route('adm.empresa.perfil') }}";
                                                    } else {
                                                        alert("O código enviado não confere por favor tente novamente.")
                                                    }
                                                }
                                            });
                                        } else {
                                            alert("Verifique o seu e-mail cadastrado e insira o código corretamente.");
                                        }
                                    });
                                } else {
                                    alert("Algo de errado aconteceu, o código não pode ser gerado. Tente novamente mais tarde.");
                                    $('#confirmMailModal').modal('hide');
                                }
                            }
                        });
                        break;
                }
            });
        }
    });
    
    $("#btn_esqueci").click(function(e) {
        $("#exampleModal").modal('show');
    });
    
    $("#close_modal1").click(function(e) {
        $("#exampleModal").modal('hide');
    });
    
    $("#btn_close").click(function(e) {
        $("#email-enviado").modal('hide');
    });

    let senha_aleatoria = "";
    let email_user = "";
    
    $("#form_senha").submit(async function(e) {
        email_user = $("#email_usuario").val();

        var dadosForm = {
            option: 'verificar_email',
            email: email_user
        };

        const dados = new FormData();
        dados.append('dados', JSON.stringify(dadosForm));

        try {
            const data = await fetchAndHandle("{{ route('esqueceu.senha.empresa') }}", dados);
            senha_aleatoria = data['dados']['senha_aleatoria'];
            $("#exampleModal").modal('hide');
            $("#email-enviado").modal('show');
        } catch (error) {
            handleFormError(error, $(this));
        }
    });

    $("#form_reset").submit(async function(e) {
        e.preventDefault();

        $(this).find("button[type='submit']").css("pointer-events", "none");

        var senha = $("#nova_senha").val();
        var conf_senha = $("#conf_nova_senha").val();
        var codigo = $("#codigo").val();

        if (codigo != senha_aleatoria) {
            alert("Código errado. Confira o email e tente novamente!");
            resetFormState($(this));
            return;
        }

        if (senha != conf_senha) {
            alert("As senhas não são iguais. Confira e tente novamente!");
            resetFormState($(this));
            return;
        }

        var dadosForm = {
            option: 'alterar_senha',
            email: email_user,
            nova_senha: senha
        };

        const dados = new FormData();
        dados.append('dados', JSON.stringify(dadosForm));

        try {
            const data = await fetchAndHandle("{{ route('esqueceu.senha.empresa') }}", dados);
            alert(data.message);
            location.reload();
        } catch (error) {
            handleFormError(error, $(this));
        }
    });

    function resetFormState(form) {
        form.find("button[type='submit']").css("pointer-events", "auto");
    }

    async function fetchAndHandle(url, data) {
        if (typeof url !== 'string' || !(data instanceof FormData)) {
            throw new TypeError('Dados do parametro inválidos.');
        }

        const response = await fetch(url, {
            method: "POST",
            body: data,
        });

        if (!response.ok) {
            throw new Error(`Um erro ocorreu ao tentar acessar a plataforma.`);
        }

        let jsonData;
        try {
            jsonData = await response.clone().json();
        } catch (error) {
            jsonData = await response.text();
            throw new Error(jsonData);
        }

        if (jsonData.status == 'erro_tratavel') {
            throw new TypeError(jsonData.message);
        } else if (jsonData.status !== 'sucesso') {
            throw new Error(jsonData.message);
        }

        return jsonData;
    }

    function handleFormError(error, form) {
        form.find("button[type='submit']").css("pointer-events", "auto");
        if (error instanceof TypeError) { //Erro previsto que pode ser tratado pelo usuário
            alert(error.message);
        } else { //Erro de backend não tratavel pelo usuário
            alert(`Algum erro ocorreu. Tente novamente.`);
        }
    }
});
</script>
@endpush
@endsection