@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>(Prestação de Contas)</small>
        </h2>
        <small>As informações de execução orçamentária e financeira detalham as receitas e despesas da governo municipal, permitindo ao cidadão acompanhar os gastos com diárias e passagens, os empenhos realizados, entre outras informações orçamentárias e financeiras do órgão.</small>
    </div>

    <div class="panel panel-default" style="margin-top: 30px">
        <div class="panel-heading">
            <h3 class="panel-title"><b>Pesquisa simplificada</b> <br><small>Informe pelo menos um dos argumentos de pesquisa abaixo:</small></h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-2">
                    <label for="">Por Data de Publicação:</label>
                    <div class="input-group">
                        <input type="text" name="d_publicacao" id="d_publicacao" class="form-control">
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                    </span>
                    </div>
                </div>
                <div class="col-md-4">
                    <label for="">Por Título:</label>
                    <input type="text" name="titulo" id="titulo" class="form-control" maxlength="50">
                </div>
                <div class="col-md-2 col-md-offset-4">
                    <a href="#" class="btn btn-primary btn-block" id="todos" style="margin-top: 26px"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> Listar Todos</a>
                </div>
            </div>
        </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="20%">DATA PUBLICAÇÃO</th>
                        <th width="30%">TÍTULO</th>
                        <th width="40%">DESCRIÇÃO</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">Prestação de Contas</h4>
                </div>
                <div class="modal-body">
                    <div id="detalhamento">
                    </div>
                    <div id="detalhamento-anexos">
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn btn-default"><i class="fa fa-times"></i> Fechar</a>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="{{url(mix('modulos/transparencia/visitante/contas_publicas/index.js'))}}"></script>
    <script>
        $(document).ready(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            let detalhamento_anexos = $('#detalhamento-anexos');
            let detalhamento = $('#detalhamento');
            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');
                let modulo_dir = '/ContasPublicas/';
                $.post(urlBase + '/transparencia/contas-publicas/' + codigo,
                    function (data) {
                        let row = data.data;
                        let pubicacaoId = row.ctb_id;
                        let moduloId = moduloIdTransparencia[modulo_dir];

                        let html = '';
                        let htmlAnexo = '';

                        html += '<table class="table table-condensed table-bordered table-striped box">';
                        html += '<tbody>';

                        html += '<tr>';
                        html += '<td class="col-md-2 text-right"><strong>Título:</strong></td>';
                        html += '<td>' + row.ctb_titulo + '</td>';
                        html += '</tr>';

                        html += '<tr>';
                        html += '<td class="col-md-2 text-right"><strong>Decsrição:</strong></td>';
                        html += '<td>' + row.ctb_descricao + '</td>';
                        html += '</tr>';

                        html += '</tbody>';
                        html += '</table>';
                        detalhamento_anexos.empty();// para limpar dados abaixo

                        $.post(urlBase + '/transparencia/uploads-show', {publicacao_id: pubicacaoId, modulo_id: moduloId},
                            function (response) {
                                htmlAnexo += '<table class="table table-condensed table-bordered table-striped box">';
                                htmlAnexo += '<tbody>';
                                htmlAnexo += '<tr>';
                                htmlAnexo += '<td colspan="2"><strong>Documento(s) em anexo</strong></td>';
                                htmlAnexo += '</tr>';
                                htmlAnexo += '<tr>';
                                htmlAnexo += '<th class="col-md-10">Nome</th>';
                                htmlAnexo += '<th class="col-md-2 text-center">Documento(s)</th>';
                                htmlAnexo += '</tr>';
                                $.each(response.attachments, function (key, item) {
                                    htmlAnexo += '<tr>';
                                    htmlAnexo += '<td>' + item.upd_nome_original + '</td>';
                                    htmlAnexo += '<td align="center"><a href="' + item.uri_anexo + modulo_dir + item.upd_nome_encrypt + '" target="_blank" class="btn btn-success btn-xs" title="Baixar Anexo">';
                                    htmlAnexo += '<span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span></a></td>';
                                    htmlAnexo += '</tr>';
                                });
                                htmlAnexo += '</tbody>';
                                htmlAnexo += '</table>';
                                detalhamento_anexos.empty().append(htmlAnexo);
                            }, 'json');
                        detalhamento.empty().append(html);
                    }, 'json');
            }
        });
    </script>
@endpush