@extends('layout.page')

@section('content')

<style>
    body {
        background: #D6EDF3;
    }

    .inscrever-evento {
        width: 638px;
        height: 80px;
        display: inline-block;
        background: url(img/evento/ASC_03.jpg) bottom;
        text-indent: -99999px;
    }

    .inscrever-evento:hover {
        filter: saturate(2);
    }
</style>

<!-- Begin Services -->
<section id="sistema" class="text-center" style="padding: 10px 0 !important">

    <div class="">

        <div class="container" id="">
            <div class="row">
                <div class="col-md-7 col-md-offset-2">
                    <img src="img/evento/evento2-_01.jpg" width="768" height="795" alt=""
                        style="vertical-align: -webkit-baseline-middle !important;">
                </div>
            </div>
            <div class="row">
                <div class="col-md-7 col-md-offset-2" style="display: inline-flex">
                    <div class="">
                        <img src="img/evento/evento2-_02.jpg" width="76" height="274" alt=""
                            style="vertical-align: -webkit-baseline-middle !important;">
                    </div>

                    <div class="row">

                    <a href="#" data-toggle="modal" data-target="#modalInscreverEvento">
                        <div class="" style="display: inline-block" data-target="#modalInscreverEvento">
                            <img src="img/evento/evento2-_03.jpg" width="287" height="115" alt=""
                                style="vertical-align: -webkit-baseline-middle !important;">
                        </div>
                        </a>
                        <div class="" style="display: inline-block">
                            <img src="img/evento/evento2-_05.jpg" width="287" height="159" alt=""
                                style="vertical-align: -webkit-baseline-middle !important;">
                        </div>
                    </div>

                    <div class="col-md-7 col-md-offset-0" style="display: inline-block">
                        <img src="img/evento/evento2-_04.jpg" width="420" height="274" alt=""
                            style="vertical-align: -webkit-baseline-middle !important;">
                    </div>
                </div>
            </div>

        </div>
    </div>

</section>

<section id="sistema" class="text-center" style="padding: 10px 0 !important" hidden>

    <div class="">

        <div class="container" id="">

            <div class="col-md-2 col-sm-2">
            </div>

            <div class="col-md-9 col-sm-9">
            <table id="Tabela_01" width="768" height="1069" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="3">
                        <img src="img/evento/evento2-_01.jpg" width="768" height="795" alt=""></td>
                </tr>
                <tr>
                    <td rowspan="2">
                        <img src="img/evento/evento2-_02.jpg" width="61" height="274" alt=""></td>
                    <td>
                        <img src="img/evento/evento2-_03.jpg" width="287" height="115" alt=""></td>
                    <td rowspan="2">
                        <img src="img/evento/evento2-_04.jpg" width="420" height="274" alt=""></td>
                </tr>
                <tr>
                    <td>
                        <img src="img/evento/evento2-_05.jpg" width="287" height="159" alt=""></td>
                </tr>
            </table>


            </div>

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



<!-- Modal -->
<div class="modal fade" id="modalInscreverEvento" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Inscrição</h4>
            </div>

            <div class="modal-body">

                <div id="msg"></div>

                <form class="form-horizontal" name="frmInscreverEvento" id="frmInscreverEvento" method="post">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">Nome</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="NOME" id="NOME" placeholder="Nome" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Condomínio</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="CONDOMINIO" id="CONDOMINIO"
                                placeholder="Condomínio" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" name="EMAIL" id="EMAIL" placeholder="Email"
                                required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Telefone</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="TELEFONE" id="TELEFONE" placeholder="Telefone"
                                required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Função</label>
                        <div class="col-sm-10">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="FUNCAO" id="optionsRadios1" value="Síndico" checked>
                                    Síndico
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="FUNCAO" id="optionsRadios1" value="Subsíndico">
                                    Subsíndico
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="FUNCAO" id="optionsRadios1" value="Conselho Fiscal">
                                    Conselho Fiscal
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="FUNCAO" id="optionsRadios1" value="Morador">
                                    Morador
                                </label>
                            </div>
                        </div>
                    </div>
                </form>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                <button type="submit" form="frmInscreverEvento" class="btn btn-primary">Inscrever</button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<!-- Plugins JS -->
<script src="inc/jquery/jquery-1.11.1.min.js"></script>
<script src="inc/bootstrap/js/bootstrap.min.js"></script>
<script src="inc/owlcarousel/owl.carousel.js"></script>
<script src="inc/stellar/js/jquery.stellar.min.js"></script>
<script src="inc/animations/js/wow.min.js"></script>
<script src="inc/waypoints.min.js"></script>
<script src="inc/isotope.pkgd.min.js"></script>
<script src="inc/classie.js"></script>
<script src="inc/jquery.easing.min.js"></script>
<script src="inc/jquery.counterup.min.js"></script>
<script src="inc/smoothscroll.js"></script>
<script src="inc/moment/moment.js"></script>

<!-- Theme JS -->
<script src="js/theme.js?v=CACHE_VERSION_SITE"></script>
<script src="js/basicFunctions.js?v=CACHE_VERSION_SITE"></script>
<script src="js/custom.js?v=CACHE_VERSION_SITE"></script>
<script src="inc/jquery.mask.js"></script>

<script type="text/javascript">

    $(document).ready(function(){
        $("#modalInscreverEvento").modal(function(){
            modal.show;
        });
    });

    var inscreverEvento = (function () {

        var service = "iIndex",
            $modal = $("#modalInscreverEvento"),
            $msg = $modal.find("#msg"),
            $form = $modal.find("#frmInscreverEvento");

        $form.find("#TELEFONE").mask('(00) 00000-0000', { placeholder: "(82) 91234-5678" });

        $form.submit(function (e) {
            e.preventDefault();

            $msg.loading().show('fast');

            $.post(service, $.extend($form.serializeObject(), { acao: "inscreverEvento" }), function (data) {
                if (data.toString().indexOf('sucesso') >= 0)
                    $form.cleanForm();

                $msg.html(data).show('fast');
            });
        });

    })();


</script>

@endsection