@extends('layouts.transparencia.visitante')
@section('content')
    <div class="page-header">
        <h2><a href="{{route('transparencia')}}" title="Voltar ao início" style="color:#0099cc"><i class="fa fa-home fa-2x" aria-hidden="true"></i></a> Busca Rápida
            <small>(Estrutura Organizacional)</small>
        </h2>
    </div>

    {{--    <div class="panel panel-default">--}}
    {{--        <div class="panel-heading">--}}
    {{--            <h3 class="panel-title">Panel title</h3>--}}
    {{--        </div>--}}
    {{--        <div class="panel-body">--}}
    {{--            Panel body--}}
    {{--        </div>--}}
    {{--    </div>--}}

    <div class="panel panel-default" style="margin-top: 40px">
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-hover data-table">
                    <thead>
                    <tr>
                        <th width="25%">ENTIDADE / DEPARTAMENTO</th>
                        <th width="30%">LOGRADOURO</th>
                        <th width="10%">TELEFONE</th>
                        <th width="25%">RESPONSÁVEL</th>
                        <th width="10%">DETALHAR</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <!--Modal Detalhes-->
    <div class="modal fade" tabindex="-1" role="dialog" id="modal-msg">
        <div class="modal-dialog modal-lg" role="document">
            <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">Saiba Mais</h4>
                </div>
                <div class="modal-body"></div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        $(document).ready(function () {
            let oTable = $('.data-table').DataTable({
                "dom": '<"wrapper"flipt>',//por a pagimação no top da tabela
                responsive: true,
                searching: false,
                lengthChange: false,
                iDisplayLength: 25,
                processing: true,
                serverSide: true,
                ordering: false,
                ajax: {
                    //url: 'não precisar do url, por esta chamando o script DataTable na mesma pagina dos dados'
                    data: function (d) {
                        // d.data_ida = $('input[name=data_ida]').val();
                    }
                },
                columns: [
                    {data: 'ent_nome', name: 'ent_nome'},
                    {data: 'ent_logradouro', name: 'ent_logradouro'},
                    {data: 'ent_telefone', name: 'ent_telefone'},
                    {data: 'ent_responsavel', name: 'ent_responsavel'},
                    {data: 'detalhar', name: 'detalhar', orderable: false, searchable: false},
                ],
                language: {
                    "sEmptyTable": "Nenhum registro encontrado",
                    "sInfo": "Exibindo resultados de _START_ a _END_ de _TOTAL_ encontrados.",
                    "sInfoEmpty": "Exibindo 0 a 0 de 0 encontrados",
                    "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"
                    }
                }
            });

            $('#servidor,#destino').keyup(function () {
                oTable.draw();
            });

            $('#data_ida').change(function () {
                oTable.draw();
            }).mask('99/99/9999').datepicker();

            $('#todos').click(function () {
                oTable.draw();
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            let detalhamento = $('.modal-body');
            let modal = $('#modal-msg');

            let loading = '<img src="{{url('interface/load-img/ajax-loader.gif')}}"> &nbsp;um momento...';

            // incluir no modal
            detalhar = function (codigo) {
                modal.modal('show');
                $.post(urlBase + '/transparencia/estrutura-organizacional-show/' + codigo,
                    function (data) {
                        let row = data;
                        let html = '';
                        html += '<div class="panel panel-default">';
                        html += '<div class="panel-heading">';
                        html += '<h3 class="panel-title">' + row.ent_nome + '</h3>';
                        html += '</div>';
                        html += '<div class="panel-body">';
                        html += '<p class="text-justify">' + row.ent_competencia + '</p>';
                        html += '<p><b>Local:</b> ' + row.ent_logradouro + ', Nº ' + row.ent_numero + ', ' + row.ent_bairro + '</p>';
                        html += '<ul class="list-unstyled">';
                        html += '<li><b>Horário de funcionamento: </b>' + row.ent_dias_atedimento + ', das ' + row.ent_hora_atendto_manha_inicio + ' às ' + row.ent_hora_atendto_manha_final + ' h</li>';
                        html += '<li><b>E-mail: </b><a href="mailTo:' + row.ent_email + '"></a>' + row.ent_email + '</li>';
                        html += '</ul>';
                        html += '</div>';
                        html += '</div>';
                        detalhamento.empty().append(html);
                    }, 'json');
            }
        });
    </script>
@endpush