@extends('site.layout')
@section('content')

@section('styles')
    <style>
        .boxed_wrapper {
            background: #fff none repeat scroll 0 0 !important;
        }
    </style>
@endsection

<section class="breadcrumb-area" style="background: #cac2c0;">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="inner-content clearfix">
                    <div class="title float-left">
                        <h2>Contato</h2>
                    </div>
                    <div class="breadcrumb-menu float-right">
                        <ul class="clearfix">
                            <li><a href="{{ route('site_index') }}">Home</a></li>
                            <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                            <li class="active">Contato</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End breadcrumb area-->

<!--Start Contact info map area-->
<section class="contact-info-map-area">
    <div class="container">
        <div class="sec-title max-width text-center">
            <h1>Entre em contato conosco.</h1>
        </div>
        <div class="row">
            <div class="col-xl-12">
                <div class="contact-info-map">
                    <div class="row">
                        <div class="col-12">
                            <div class="contact-title">
                                <h2>Envie-nos uma mensagem</h2>
                                <p>Entre em contato conosco ou se preferir, deixe uma mensagem através do formulário que iremos atendê-lo o mais breve possível.</p>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="contact-info-left">
                                <div class="state-select-box2">
                                    <div class="state-content">
                                        @foreach($contato as $c)
                                        <div class="state" id="value1">
                                            <ul>
                                                <li>
                                                    <div class="text">
                                                        <h5>Endereço</h5>
                                                        <p>{{ $c["endereco"] }}</p>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="text">
                                                        <h5>Telefone</h5>
                                                        <p>{{ $c["telefone"] }}</p>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="text">
                                                        <h5>Email</h5>
                                                        <p>{{ $c["email"] }}</p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-8">

                            <div class="contact-form">
                                <form id="contact-form" name="contact_form" class="default-form" action="{{ asset('site_assets/phpmailer/sendmail.php')}}" method="post" novalidate="novalidate">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="input-box">
                                                <input type="text" name="form_name" value="" placeholder="Seu Nome*" required="" aria-required="true">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-box">
                                                <input type="email" name="form_email" value="" placeholder="Seu Email*" required="" aria-required="true">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-box">
                                                <input type="text" class="telefone" name="form_phone" value="" placeholder="Telefone*">
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="input-box">
                                                <textarea name="form_message" placeholder="Digite sua mensagem.." required="" aria-required="true"></textarea>
                                            </div>
                                            <div class="button-box">
                                                <input id="form_botcheck" name="form_botcheck" class="form-control" type="hidden" value="">
                                                <button class="btn-one" type="submit" data-loading-text="Enviando...">Enviar</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End Contact info map area-->
<script>
    $(document).ready(function(){
        $(document).ready(function(){
            $('.telefone').mask('(99) 99999-9999');
        });
    });

    var endereco = document.getElementById("endereco");
    var telefone = document.getElementById("telefone");
    var email = document.getElementById("email");

    function validarForm() {
        if(endereco.value != "" && telefone.value != "" && email.value != ""){
            endereco.setCustomValidity("");
            telefone.setCustomValidity("");
            email.setCustomValidity("");
            return true;
        }
        else{
            if (endereco.value == ""){
                endereco.setCustomValidity("Informe um endereço");
                endereco.reportValidity();
                return false;
            }
            else{
                if (telefone.value == ""){
                    telefone.setCustomValidity("Informe um telefone");
                    telefone.reportValidity();
                    return false;
                }
                else{
                    if (email.value == ""){
                        email.setCustomValidity("Informe um e-mail!");
                        email.reportValidity();
                        return false;
                    }
                    else{
                        endereco.setCustomValidity("");
                        telefone.setCustomValidity("");
                        email.setCustomValidity("");
                        return true;
                    }
                }
            }
        }
    }
</script>

@endsection