@extends('layouts.app')
@section('content')

<section class="conteudo-internas">
    <div class="centraliza">
        <div class="conteudo-esquerda">

            <h1 class="titulo-pagina">
                Contato
            </h1>

            <form class="formContato" id="contato" name="contato" {{url('contato')}}" method="POST"">

                {{ csrf_field() }}

                @if (session('success'))
                    <div class=" alert alert-success">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <strong>{{ session('success') }}</strong>
                    </div>
                @endif
                <fieldset>

                    <legend>
                        <p><strong>Perguntas, sugestões e reclamações</strong> <br>
                            Envie um e-mail e entraremos em contato</p>
                    </legend>

                    <div class="form-group">
                        <label for="uf">UF<strong class="lead text-danger">*</strong>:</label>
                        <select name="sigla_uf" id="estado" required="" placeholder="UF" class="form-control">
                            <option value="">Escolha o Estado</option>
                            @foreach($estados as $estado)
                            <option data-id="{{$estado->id}}" value="AC">{{$estado->uf}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="municipio">Município<strong class="lead text-danger">*</strong>: </label>
                        <span id="exibe_cidade">
                            <select name="municipio" id="cidade" required="" placeholder="Município" class="form-control">
                                <option value="">Selecione o município</option>
                            </select>
                            <input type="hidden" name="municipio_id" id="municipio_id">
                        </span>
                    </div>

                    <div class="form-group">
                        <label for="nome">Nome<strong class="lead text-danger">*</strong>:</label>
                        <input type="text" class="form-control" id="txtNome" name="nome" placeholder="Seu nome:" required=""
                            value="">
                    </div>

                    <div class="form-group">
                        <label for="orgaoEmpresa">Órgão ou Empresa<strong class="lead text-danger">*</strong>:</label>
                        <input type="text" class="form-control" id="txtEntidade" name="entidade"
                            placeholder="Informe o nome do órgão ou empresa" required="" value="">
                    </div>

                    <div class="form-group">
                        <label for="cargo">Cargo:</label>
                        <input type="text" class="form-control" id="txtCargo" name="cargo" placeholder="Informe seu cargo"
                            value="">
                    </div>

                    <div class="form-group">
                        <label for="email">E-mail<strong class="lead text-danger">*</strong>:</label>
                        <input type="email" class="form-control" id="txtEmail" name="email" placeholder="Informe seu e-mail"
                            required="" value="">
                    </div>

                    <div class="form-group">
                        <label for="ddd">Telefone:</label>
                        <div class="englobaTel">
                            <input type="text" class="form-control" id="txtFone" name="telefone" placeholder="(00) 00000-0000"
                                value="" maxlength="15">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="mensagem">Mensagem<strong class="lead text-danger">*</strong>:</label>
                        <textarea name="mensagem" id="txtMsg" class="form-control" placeholder="Digite sua Mensagem"
                            required=""></textarea>
                    </div>

                    <button class="submit">Enviar</button>

                </fieldset>
        </form>
    </div>

    <aside class="conteudo-direita">

        @include('layouts.conteudo-direita')

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

@endsection

@push('scripts')
<script src="{{ asset('assets/js/jquery.mask.min.js') }}"></script>
<script type="text/javascript">
    var getMunicipios = function (event) {
        var estado_id = $("#estado option:selected").data('id');
        if (!estado_id || estado_id == undefined) return false;

        $.ajax({
            type: "GET",
            url: "/contato/" + estado_id + "/municipios",
            dataType: 'json',
        })
            .done(function (data) {
                var option;
                $('#cidade').html('<option value="">Selecione o município</option>')
                for (d in data) {
                    option = '<option data-id="' + data[d].id + '" value="' + data[d].nome + '">' + data[d].nome + '</option>'
                    $('#cidade').append(option)
                }
            })
            .fail(function () {
                alert('Falha ao localizar os municípios')
            })
    }

    $("#estado").change(getMunicipios);

    $("#cidade").change(function (event) {
        var option = $(event.target).find(":selected")
        $('#municipio_id').val(option.data('id'))
    });

    $(document).ready(function () {
        $('#txtFone').mask('(00) 00000-0000');
        getMunicipios();
    });
</script>
@endpush