@extends('templates.layout')

@section('title', 'Fale Conosco')

@section('description', '')

@section('content')

    <main class="c-main-content">

        {{-- Banner --}}
        @include('partials.common-banner', [
            'image' => asset('../img/banner-top.jpg'),
            'title' => 'FALE CONOSCO'
        ])
        {{-- End: Banner --}}

        {{-- Block --}}
        <div class="c-bg js-animated-start">
            <div class="o-content-block o-content-block--1066 appear-in appear-in-top">
                <div class="o-content-block--left o-content-block--right">
                    <h2 class="o-ttl--40 o-ttl--brand-secondary o-ttl--mb-40">Quer ser Parceiro ou Associado da <br> ABIPAG? Entre em contato com a gente!</h2>

                    <div class="o-grid o-grid__col-3 o-grid__gap-40">
                        <div class="c-card c-card--contact">
                            <picture class="c-card__svg">
                                <svg width="50" height="60">
                                    <use xlink:href="#pin"/>
                                </svg>
                            </picture>
                            <h3 class="o-ttl--18 o-ttl--brand-secondary o-ttl--center">Onde estamos</h3>
                            <p class="o-ttl--center o-ttl--18">
                                São Paulo, SP <br>
                                Rio de Janeiro, RJ
                            </p>
                        </div>

                        <div class="c-card c-card--contact">
                            <picture class="c-card__svg">
                                <svg width="60" height="60">
                                    <use xlink:href="#phone-2"/>
                                </svg>
                            </picture>
                            <h3 class="o-ttl--18 o-ttl--brand-secondary o-ttl--center">Telefone</h3>
                            <p class="o-ttl--center o-ttl--18"><a href="tel:1198910-4877">(11) 98910-4877</a></p>
                        </div>

                        <div class="c-card c-card--contact">
                            <picture class="c-card__svg">
                                <svg width="67" height="60">
                                    <use xlink:href="#mail-2"/>
                                </svg>
                            </picture>
                            <h3 class="o-ttl--18 o-ttl--brand-secondary o-ttl--center">E-mail</h3>
                            <p class="o-ttl--center o-ttl--18"><a href="mailto:contato@abipag.com.br">contato@abipag.com.br</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- End: Block --}}

        {{-- Block --}}
        <div class="c-bg c-bg--ice js-animated">
            <div class="o-content-block o-content-block--523 appear-in appear-in-top">
                <h2 class="o-ttl-title o-ttl-title--center">Vamos conversar?</h2>
                <p class="o-ttl--center o-ttl--mb-40">Preencha o formulário abaixo. Entraremos em contato o mais breve possível.</p>

                <form method="POST" data-grecaptcha-action="contact" action="{{ route('pages.sendEmail') }}" class="c-form js-contact-form">
                    @csrf
                    <div class="c-form__control c-form--mb-10">
                        <input class="o-input js-name" name="name" type="text" placeholder="*Seu nome" maxlength="255" required>
                    </div>

                    <div class="c-form__control c-form--mb-10">
                        <input class="o-input js-company" name="company" type="text" placeholder="*Empresa" required>
                    </div>

                    <div class="c-form__control c-form--mb-10">
                        <input class="o-input js-email" name="email" type="email" placeholder="*E-mail" required>
                    </div>

                    <div class="c-form__control c-form--mb-10">
                        <input class="o-input js-phone" name="phone" type="text" placeholder="*Telefone" required>
                    </div>

                    <div class="c-form__control c-form__control--select c-form--mb-10">
                        <select name="subject" class="o-input o-input--select" required>
                            <option disabled selected>*Selecione o assunto</option>
                            <option value="Quero me associar">Quero me associar</option>
                            <option value="Informações sobre eventos">Informações sobre eventos</option>
                            <option value="Informações sobre GTs, Comitês e Fóruns">Informações sobre GTs, Comitês e Fóruns</option>
                            <option value="Reclamações, sugestões ou elogios">Reclamações, sugestões ou elogios</option>
                            <option value="Outros assuntos">Outros assuntos</option>
                        </select>
                    </div>


                    <div class="c-form__control c-form__control--textarea c-form--mb-20">
                        <textarea class="o-input o-input--textarea js-message" name="message" placeholder="*Mensagem" required></textarea>
                    </div>

                    <div class="c-form__control c-form--mb-30">
                        <label id="check" class="c-form__checkbox">
                            <input for="check" type="checkbox" name="check" value="1" class="js-check">
                            <span class="o-ttl--14">
                                Eu autorizo a ABIPAG a coletar meus dados pessoais para fins de comunicação e serviços (mensagens, telefone, e-mail) de acordo com a <a href="{{ url(route('pages.policy-privacy')) }}" target="_blank">Política de Privacidade</a>.
                            </span>
                        </label>
                    </div>

                    <div class="c-form__control">
                        <button type="submit" class="o-btn o-btn--primary o-btn--center js-send-contact" disabled>Enviar</button>
                    </div>

                    <div class="c-form__menssage c-form__menssage--error form-msg-error js-missing-form">
                        <span class="c-form__close js-close-msg"></span>
                        <p class="o-ttl--center o-ttl--semibold o-ttl--white">
                            Um ou mais campos não foram preenchidos corretamente. <br>
                            Verifique e tente novamente.
                        </p>
                    </div>

                    <div class="c-form__menssage c-form__menssage--error form-msg-error js-error-form">
                        <span class="c-form__close js-close-msg"></span>
                        <p class="o-ttl--center o-ttl--semibold o-ttl--white">
                            Ocorreu um erro ao enviar o formulário. <br>
                            Tente novamente.
                        </p>
                    </div>

                    <div class="c-form__menssage form-msg-success">
                        <span class="c-form__close js-close-msg"></span>
                        <p class="o-ttl--center o-ttl--semibold o-ttl--white">
                            Mensagem enviada com sucesso!
                        </p>
                    </div>
                </form>
            </div>
        </div>
        {{-- End: Block --}}
    </main>

@stop