@extends('layouts.site')

@section('headerData')
    <link rel="stylesheet" href="{{ asset('css/modules/contato.css') }}">
@endsection

@section('titlepage', 'Contato')
@section('meta-title', 'Página Contato')
@section('meta-description', 'Entre e acesse o site da UDFE!')

@section('content')

    <div class="container">
        <div class="entrada">
            <div>
                <h2>Contato</h2>
            </div>
            <div class="entrada_pagina">
                <h6>Home</h6>
                <h6><b>Contato</b></h6>
            </div>
        </div>
        <div class="entrada_img">
            <div class="entrada_img_bg"></div>
        </div>
    </div>

    <div class="container">
        <div class="contato">
            <div class="contato_texto">
                <p>
                    Dúvidas sobre a UDFE, Cartão Estudantil, Planos de Saúde, ou qualquer outro benefício entre em contato.
                </p>

                <div class="contato_email">
                    <div class="contato_email_icones">
                        <div>
                            <img src="{{ 'img/site/icone8.png' }}">
                        </div>
                        <div>
                            <img src="{{ 'img/site/icone3.png' }}">
                        </div>
                    </div>
                    <img src="{{ 'img/site/icone9.png' }}">
                    <div class="contato_email_emails">
                        <p>cadastro@udfe.com.br</p>
                        <p>elenicampos@udfe.org.br</p>
                    </div>
                </div>
                <div class="contato_email_telefone">
                    <div class="contato_email_telefone_bg">
                        <div>
                            <div class="icone_telefone">
                                <img src="{{ 'img/site/icone6.png' }}">
                            </div>
                            <div class="contato_email_telefone_bg_link ">
                                <h6>(11) 2615-5424</h6>
                                <h6>(11) 2639-5886</h6>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img src="{{ 'img/site/icone10.png' }}">
                            </div>
                            <div class="contato_email_telefone_bg_link">
                                <a class="link_whats" href="https://wa.me/message/T5JDTGL2SH75F1">
                                    <h6>(11) 98515-7089</h6>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="contato_formulario">

                @if (Session::has('status'))
                    <div class="alert alert-success">
                        {{ Session::get('status') }}
                    </div>
                    @push('footerData')
                        <script>
                            $(document).ready(function() {
                                console.log("ready!");
                                document.querySelector("#formulario").scrollIntoView();
                            });
                        </script>
                    @endpush
                @endif

                @if (Session::has('error'))
                    <div class="alert alert-danger">
                        {{ Session::get('error') }}
                    </div>
                    @push('footerData')
                        <script>
                            $(document).ready(function() {
                                console.log("ready!");
                                document.querySelector("#formulario").scrollIntoView();
                            });
                        </script>
                    @endpush
                @endif

                <form action="{{ route('contato_email') }}" method="POST" id="formulario">
                    @csrf
                    <input type="text" class="form-control" placeholder="Nome" name="nome" id="nome" required>
                    <input type="text" class="form-control" placeholder="E-mail" name="email" id="email" onblur="valida()"
                        required>
                    <div class="alert alert-danger email-validation hide-self">
                        Digite um e-mail valido
                    </div>
                    <input type="text" class="form-control" placeholder="Assunto" name="assunto" id="nome" required>
                    <textarea required class="form-control" placeholder="Sua mensagem" rows="6" name="mensagem" id="text"
                        required></textarea>
                        <div class="h-captcha" data-sitekey="2c6c52a1-56b6-4184-91c6-3e2bb9e70ce3"></div>
                        <button type="submit" class="btn ">Enviar</button>
                </form>
            </div>
        </div>
    </div>


    <div class="endereco">
        <div class="endereco_iframe">

            <iframe class="endereco_iframe"
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3659.3065544653996!2d-46.606094285023616!3d-23.485465284720593!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cef611f41a0797%3A0x6149570b4850f8fa!2sR.%20Borges%20Lad%C3%A1rio%2C%208%20-%20Tucuruvi%2C%20S%C3%A3o%20Paulo%20-%20SP%2C%2002242-040!5e0!3m2!1spt-BR!2sbr!4v1629482259691!5m2!1spt-BR!2sbr"
                style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </div>
        <div class="endereco_texto">
            <div class="endereco_conteudo">
                <img src="{{ 'img/site/icone11.png' }}">
                <h6>UDFE</h6>
                <p>Rua: Borges Ladário, 08</p>
                <p>Bairro: parada inglesa, CEP: 02242-040</p>

            </div>
        </div>
    </div>


@endsection
@push('footerData')
    <script>
        $("#formulario").submit(function(event) {
            if (!isEmail($("#email").val())) {
                alert("Verifique o e-mail digitado e tente novamente!")
                event.preventDefault();
                return;
            }
            if ($("#name").val().length == 0) {
                alert("Verifique o nome e tente novamente!")
                event.preventDefault();
                return;
            }
            if ($("#text").val().length == 0) {
                alert("Verifique a mensagem e tente novamente")
                event.preventDefault();
                return;
            }

        });

        function valida() {
            inputEmail = document.querySelector('#email');

            if (!isEmail(inputEmail.value)) {

                //enquanto digita, checa se o valor está certo e se sim, remove o alert red
                $('#email').keypress(function() {
                    if (isEmail(inputEmail.value)) {
                        document.querySelector('.email-validation').classList.add('hide-self');
                        inputEmail.classList.remove('is-invalid');
                    }
                });

                //adiciona alert red caso email incorreto
                document.querySelector('.email-validation').classList.remove('hide-self');
                inputEmail.classList.add('is-invalid');

            } else {
                //remove o alert red caso email certo
                document.querySelector('.email-validation').classList.add('hide-self');
                inputEmail.classList.remove('is-invalid');
            }
        }

        function isEmail(email) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            return regex.test(email);
        }
    </script>
@endpush
<script src='https://www.hCaptcha.com/1/api.js' async defer></script>
<style>
    .hide-self {
        display: none;
    }

    .is-invalid {
        background-color: red;
        color: #737373;
    }

</style>