@extends('layouts.tributos')
@section('content')
    <style>
        .ui-autocomplete-loading {
            background: white url({{url('img/gif/ajax-loader.gif')}}) right center no-repeat;
        }
    </style>
    <h3 class="page-header"><span class="glyphicon glyphicon-file" aria-hidden="true"></span> Logradouro <small>(Formulário para Incluir Novo Registro)</small></h3>
    <form name="FrmIncluirLogradouro" action="{{route('logradouro.store')}}" method="post" autocomplete="off">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <label for=""><i style="color: grey">* Campo de Preenchimento Obrigatório</i></label>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <label for="">* Nome logradouro</label>
                <input type="text" name="LOGRADOURO" class="form-control">
            </div>
            <div class="col-md-4">
                <label for="">* Bairro</label>
                <div class="input-group">
                    <input type="text" name="BAIRRO" class="form-control">
                    <input type="hidden" name="CODBAIRRO" id="BAICODIGO">
                    <span class="input-group-btn"><button class="btn btn-default" type="button" title="Incluir Bairro" id="btnIncluirBairro"><span class="glyphicon glyphicon-file" aria-hidden="true"></span></button>
                </div>
                {{--                <div class="input-group">--}}
                {{--                    <select name="CODBAIRRO" id="comboBairros" class="form-control">--}}
                {{--                        <!-- Populado tambem via ajax la em logradouro-->--}}
                {{--                        <option value="" selected></option>--}}
                {{--                        @foreach($bairro as $b)--}}
                {{--                            <option value="{{$b->BAICODIGO}}">{{$b->BAINOME}}</option>--}}
                {{--                        @endforeach--}}
                {{--                    </select>--}}
                {{--                    <span class="input-group-btn">--}}
                {{--                    <button class="btn btn-default" type="button" title="Incluir Bairro" id="btnIncluirBairro"><span class="glyphicon glyphicon-file" aria-hidden="true"></span></button>--}}
                {{--                </span>--}}
            </div>
            <div class="col-md-2">
                <label for="">CEP</label>
                <input type="text" name="CEP" class="form-control" id="cep">
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <label for="">Valor Terreno</label>
                <div class="input-group">
                    <span class="input-group-addon">R$</span>
                    <input type="text" name="VRL_TERRENO" id="VRL_TERRENO" value="0,00" class="form-control" maxlength="6">
                    <span class="input-group-addon">m²</span>
                </div>
            </div>
            <div class="col-md-2">
                <label for="">Valor Construído</label>
                <div class="input-group">
                    <span class="input-group-addon">R$</span>
                    <input type="text" name="VRL_CONSTRUCAO" id="VRL_CONSTRUCAO" value="0,00" class="form-control" maxlength="6">
                    <span class="input-group-addon">m²</span>
                </div>
            </div>
            <div class="col-md-2">
                <label for="">Pavimentada</label>
                <select name="PAVIMENTADO" class="form-control">
                    <option value="" selected></option>
                    <option value="S">Sim</option>
                    <option value="N">Não</option>
                </select>
            </div>
        </div>
        <div class="page-header"></div>
        <div class="row">
            <div class="col-md-12">
                <button type="submit" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> Salvar</button>
                <button type="reset" class="btn btn-default"><span class="glyphicon glyphicon-erase" aria-hidden="true"></span> Limpar</button>
                <a href="{{route('tributo')}}" class="btn btn-default"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Voltar</a>
            </div>
        </div>
        <hr>
    </form>


    <div class="row" style="margin-top: 50px; margin-bottom: 20px">
        <div class="col-md-4 col-md-offset-5">
            <form id="search-logradouro" role="form">
                <input type="text" class="form-control" name="logradouro" id="logradouro" placeholder="Buscar por logradouro">
                {{--                <div class="input-group">--}}
                {{--                    <input type="text" class="form-control" name="logradouro" id="logradouro" placeholder="Logradouro">--}}
                {{--                    <span class="input-group-btn">--}}
                {{--                        <button type="submit" class="btn btn-primary">Filtrar</button>--}}
                {{--                      </span>--}}
                {{--                </div>--}}
            </form>
        </div>
        <div class="col-md-3">
            <form id="search-bairro" role="form">
                <input type="text" class="form-control" name="bairro" id="bairro" placeholder="Buscar por bairro">
                {{--                <div class="input-group">--}}
                {{--                    <input type="text" class="form-control" name="bairro" id="bairro" placeholder="Bairro">--}}
                {{--                    <span class="input-group-btn">--}}
                {{--                        <button type="submit" class="btn btn-primary">Filtrar</button>--}}
                {{--                      </span>--}}
                {{--                </div>--}}
            </form>
        </div>
    </div>

    <table class="table table-hover data-table" width="100%">
        <thead>
        <tr>
            <th width="5%">Código</th>
            <th width="35%">Nome</th>
            <th width="25%">Bairro</th>
            <th width="10%">CEP</th>
            <th width="10%">Vlr. Terreno</th>
            <th width="10%">Vlr. Construído</th>
            <th width="5%">Ação</th>
        </tr>
        </thead>
    </table>
    <hr>

    <!--Modal Incluir Bairro-->
    <div class="modal fade" tabindex="-1" role="dialog" id="modalBairro">
        <div class="retorno"></div>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="modalLista">
        <div class="retorno"></div>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="modalUpdate">
        <div class="retorno"></div>
    </div>

    <div id="delete-dialog" title="Exclusão">
        <p><span class="ui-icon ui-icon-alert"></span> Deseja excluir este logradouro</p>
    </div>
@endsection
@push('script')
    <script type="text/javascript">
        $(document).ready(function () {
            var oTable = $('.data-table').DataTable({
                searching: false,
                lengthChange: false,
                //iDisplayLength: 10,
                processing: true,
                ordering: false,
                //order: [[1, "asc"]],
                serverSide: true,
                ajax: {
                    url: '{{ route('logradouro.index') }}',
                    data: function (d) {
                        d.logradouro = $('input[name=logradouro]').val();
                        d.bairro = $('input[name=bairro]').val();
                    }
                },
                columns: [
                    {data: 'I_IDLOGRADOURO', name: 'I_IDLOGRADOURO'},
                    {data: 'LOGRADOURO', name: 'LOGRADOURO'},
                    {data: 'BAINOME', name: 'BAINOME'},
                    {data: 'CEP', name: 'CEP'},
                    {data: 'VRL_CONSTRUCAO', name: 'VRL_CONSTRUCAO'},
                    {data: 'VRL_TERRENO', name: 'VRL_TERRENO'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                language: {
                    "sEmptyTable": "Nenhum registro encontrado",
                    "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                    "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                    "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                    "sInfoPostFix": "",
                    "sInfoThousands": ".",
                    "sLengthMenu": "_MENU_ resultados por página",
                    "sLoadingRecords": "Carregando...",
                    "sProcessing": "Processando...",
                    "sZeroRecords": "Nenhum registro encontrado",
                    "sSearch": "Pesquisar",
                    "oPaginate": {
                        "sNext": "Próximo",
                        "sPrevious": "Anterior",
                        "sFirst": "Primeiro",
                        "sLast": "Último"
                    },
                    "oAria": {
                        "sSortAscending": ": Ordenar colunas de forma ascendente",
                        "sSortDescending": ": Ordenar colunas de forma descendente"
                    }
                }
            });

            // $('#search-logradouro, #search-bairro').on('submit', function (e) {
            //     oTable.draw();
            //     e.preventDefault();
            // });
            //
            // $('#btn-teste').click(function (){
            //     oTable.draw();
            // });


            $('#logradouro, #bairro').keyup(function () {
                oTable.draw();
            });

            {{--$('.data-table').DataTable({--}}
            {{--    iDisplayLength: 10,--}}
            {{--    processing: true,--}}
            {{--    serverSide: true,--}}
            {{--    order: [[1, "asc"]],--}}
            {{--    ajax: "{{ route('logradouro.index') }}",--}}
            {{--    columns: [--}}
            {{--        {data: 'I_IDLOGRADOURO', name: 'I_IDLOGRADOURO'},--}}
            {{--        {data: 'LOGRADOURO', name: 'LOGRADOURO'},--}}
            {{--        {data: 'BAINOME', name: 'BAINOME'},--}}
            {{--        {data: 'CEP', name: 'CEP'},--}}
            {{--        {data: 'VRL_CONSTRUCAO', name: 'VRL_CONSTRUCAO'},--}}
            {{--        {data: 'VRL_TERRENO', name: 'VRL_TERRENO'},--}}
            {{--        {data: 'action', name: 'action', orderable: false, searchable: false},--}}
            {{--    ],--}}
            {{--    language: {--}}
            {{--        "sEmptyTable": "Nenhum registro encontrado",--}}
            {{--        "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",--}}
            {{--        "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",--}}
            {{--        "sInfoFiltered": "(Filtrados de _MAX_ registros)",--}}
            {{--        "sInfoPostFix": "",--}}
            {{--        "sInfoThousands": ".",--}}
            {{--        "sLengthMenu": "_MENU_ resultados por página",--}}
            {{--        "sLoadingRecords": "Carregando...",--}}
            {{--        "sProcessing": "Processando...",--}}
            {{--        "sZeroRecords": "Nenhum registro encontrado",--}}
            {{--        "sSearch": "Pesquisar",--}}
            {{--        "oPaginate": {--}}
            {{--            "sNext": "Próximo",--}}
            {{--            "sPrevious": "Anterior",--}}
            {{--            "sFirst": "Primeiro",--}}
            {{--            "sLast": "Último"--}}
            {{--        },--}}
            {{--        "oAria": {--}}
            {{--            "sSortAscending": ": Ordenar colunas de forma ascendente",--}}
            {{--            "sSortDescending": ": Ordenar colunas de forma descendente"--}}
            {{--        }--}}
            {{--    },--}}
            {{--});--}}
        });

        $(function () {
            $('#cep').mask("99999-999");
            $('#VRL_TERRENO, #VRL_CONSTRUCAO').priceFormat({
                //prefix: 'R$ ',
                prefix: '',
                centsSeparator: ',',
                thousandsSeparator: '.',
                limit: 17,
                centsLimit: 2
            });
        })
    </script>
    <script src="{{url(mix('modulos/tributos/assets/js/auto-complete/auto-complete.js'))}}"></script>
    <script src="{{url(mix('modulos/tributos/assets/js/tributos/logradouro/list-create-logradouro.js'))}}"></script>
    <script src="{{url(mix('modulos/tributos/assets/js/tributos/logradouro/bairro/list-create-bairro.js'))}}"></script>
@endpush