@model Site.Models.ContatoModel

@if (Model.NotIsNull() && Model.ConteudoPagina.NotIsNull() && Model.ConteudoFilhoPagina.NotIsNull() && Model.ConteudoFilhoPagina.Count > 2)
{
    <div class="content-container content-contato">
        <h1 id="titulo-interna" class="titulo-contato"><span class="sr-only">Entre em contato</span></h1>
        <div class="conteudo-site" style="overflow:hidden">
            <h2 class="sr-only">Nossos telefontes</h2>
            <div class="descricao-contato">
                @Html.Raw(Model.ConteudoPagina.Descricao)
            </div>

            @Html.Partial("PartialMensagem")

            @using (Html.BeginForm("Enviar", "Contato", FormMethod.Post, new { @class = "form-container" }))
            {
                <fieldset>
                    <legend class="sr-only">Formulário de contato.</legend>
                    <div>
                        @Html.LabelForRequired(x => x.Nome)
                        @Html.ValidationMessageFor(x => x.Nome)
                        <p>
                            @Html.TextBoxFor(x => x.Nome)
                        </p>
                    </div>
                    <div>
                        @Html.LabelForRequired(x => x.Email)
                        @Html.ValidationMessageFor(x => x.Email)
                        <p>@Html.TextBoxFor(x => x.Email)</p>
                    </div>
                    <div>
                        @Html.LabelForRequired(x => x.Telefone)
                        @Html.ValidationMessageFor(x => x.Telefone)
                        <p>@Html.TextBoxFor(x => x.Telefone, new { @class = "mask-fone" })</p>
                    </div>
                    <div>
                        @Html.LabelForRequired(x => x.Descricao)
                        @Html.ValidationMessageFor(x => x.Descricao)
                        <p>
                            @Html.TextAreaFor(x => x.Descricao)
                            <button type="submit" class="g-recaptcha" data-sitekey="6LeL7M4ZAAAAAE4arfFmmN1QdcnR53nH5mjZ4Nly" data-callback='onSubmit'>Enviar</button>
                        </p>
                    </div>
                </fieldset>
            }

            <div class="info-contato">
                <div>
                    <h2>@Model.ConteudoFilhoPagina[1].Assunto</h2>
                    @Html.Raw(Model.ConteudoFilhoPagina[1].Descricao)
                </div>
                <div>
                    <h2>@Model.ConteudoFilhoPagina[0].Assunto</h2>
                    @Html.Raw(Model.ConteudoFilhoPagina[0].Descricao)
                </div>
            </div>
        </div>

        <div class="mapa">
            <h2>Mapa de <strong>Localização</strong></h2>
            <div id="map"></div>
        </div>
    </div>
}

@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIXl0KwlT1k4Q07E9YaZe9borfKKDmp3I&callback=initMap" type="text/javascript"></script>
    <script type="text/javascript">
        function initMap() {
            var gps = '@Model.ConteudoFilhoPagina[2].Link';
            var coordenadas = gps.split(',');

            var pin = ROOT_URL + 'Content/img/map-icon.png';
            var latLgn = new google.maps.LatLng(coordenadas[0], coordenadas[1]);

            var map = new google.maps.Map(document.getElementById('map'), {
                scrollwheel: false,
                center: latLgn,
                zoom: 17,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                icon: pin,
            });
            var marker = new google.maps.Marker({
                position: latLgn,
                map: map,
                icon: pin,
                title: 'Concisa'
            });
        }
    </script>
    <script>
        function onSubmit() {
            document.querySelector(".form-container").submit();
        }
    </script>
}