@extends('web.master.master')

@section('content')
    <div class="wrapper">
        <div class="content">
            <div class="container">

                <!-- START: PAGE CONTENT -->
                <section class="row animate-up post-margin">
                    <div class="col-sm-12">
                        <main class="post-single">
                            <article class="post-content section-box">
                                <div class="post-media">
                                    <img title="Faça sua inscrição para participar com Erika e Débora"
                                         alt="[Faça sua inscrição para participar com Erika e Débora]"
                                         src="{{ url('frontend/img/debora-erika-campinas.jpg') }}"/>
                                </div><!-- .post-media -->

                                <div class="post-inner" id="ouvidoria">
                                    <header class="post-header">
                                        <div class="post-data">
                                            <div class="post-title-wrap">
                                                <h1 class="post-title" style="padding-left: 0;text-align: center;">
                                                    Vem construir a derrota do Bolsonaro!</h1>
                                            </div>
                                        </div>
                                    </header>
                                    <div class="post-editor" id="manifesto">
                                        <script type="text/javascript"
                                                src="//m.deborapsol.com.br/form/generate.js?id=2"></script>
                                    </div>
                                </div><!-- .post-inner -->
                            </article><!-- .post-content -->
                        </main>

                        <section class="post-single">
                            <article class="post-content section-box">
                                <div class="post-inner">
                                    <header class="post-header">
                                        <h3>Vem construir a derrota do Bolsonaro!</h3>
                                    </header>
                                    <p>Estamos vivendo diante da barbárie! O Bolsonaro, o bolsonarismo e seus aliados
                                        estão impondo a política do matar pela bala, ou deixar morrer de fome.
                                        O Brasil se tornou uma grande zona de guerra em que, a luta contra a miséria, a
                                        fome e o desemprego, é uma dura realidade.</p>
                                    <p>As mulheres negras, periféricas, LGBTQIA+ e toda a classe trabalhadora são os
                                        principais alvos dos ataques, do ódio, intolerância e da falta de políticas
                                        públicas que promovam a justiça social.</p>
                                    <p>É preciso coragem e disposição na luta para mudar esse cenário! Chegou a hora
                                        das populações historicamente marginalizadas ocuparem a política!</p>

                                    <p>Faça parte dessa tarefa histórica e ajude a construir a luta Feminista,
                                        antirracista, por Direitos e pela diversidade!</p>
                                </div>
                            </article>
                        </section>

                        <section class="post-single">
                            <article class="post-content section-box">
                                <div class="post-media">
                                    <img title="Participe com Erika e Débora" alt="[Participe com Erika e Débora]"
                                         src="{{ url('frontend/img/debora-erika-campinas-atividade.jpg') }}"/>

                                </div>
                            </article>
                        </section>

                    </div>
                </section>
            </div><!-- .container -->
        </div><!-- .content -->
    </div><!-- .wrapper -->

    <div id="estado" data-route-estado="{{ route('web.campinasEstado') }}"></div>
    <div id="cidade" data-route-cidade="{{ route('web.campinasCidade') }}"></div>
@endsection

@section('js')
    <script>
        $(document).ready(function () {
            var urlEstado = $('#estado').attr('data-route-estado');
            var urlCidade = $('#cidade').attr('data-route-cidade');
            var selectEstado = $("#mauticform_input_deboraeerikaemcampinas_estado");
            var selectCidade = $("#mauticform_input_deboraeerikaemcampinas_cidade");
            selectEstado.replaceWith('<select id="mauticform_input_deboraeerikaemcampinas_estado" name="mauticform[estado]" data-validate="estado" class="mauticform-selectbox select2"><option value="">Selecione</option></select>');
            $.post(urlEstado, function (response) {
                $.each(response.estados, function (key, value) {
                    $("#mauticform_input_deboraeerikaemcampinas_estado").append('<option value="' + value.uf + '" data-estado-id="' + value.id + '">' + value.nome + '</option>');
                });
            });
            $("#mauticform_input_deboraeerikaemcampinas_estado").select2();
            selectCidade.replaceWith('<select id="mauticform_input_deboraeerikaemcampinas_cidade" name="mauticform[cidade]" data-validate="cidade" class="mauticform-selectbox select2"><option value="">Selecione primeiro o seu Estado</option></select>');
            $("#mauticform_input_deboraeerikaemcampinas_estado").on('change', function () {
                $("#mauticform_input_deboraeerikaemcampinas_cidade").empty();
                $("#mauticform_input_deboraeerikaemcampinas_cidade").append('<option value="">Selecione sua cidade</option>');
                var estado = $(this).val();
                $.post(urlCidade, {id: estado}, function (response) {
                    if (response.cidades) {
                        $.each(response.cidades, function (key, value) {
                            $("#mauticform_input_deboraeerikaemcampinas_cidade").append('<option value="' + value.nome + '">' + value.nome + '</option>');
                        });
                    }
                });
            });
            $("#mauticform_input_deboraeerikaemcampinas_cidade").select2();
        });

        $(document).ready(function () {
            var input = document.getElementById('mauticform_input_deboraeerikaemcampinas_celularwhatsapp');
            input.setAttribute('onkeypress', 'mask(this, mphone);');
            input.setAttribute('onblur', 'mask(this, mphone);');
        });
    </script>
@endsection