@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>(Salários Subsidios)</small>
        </h2>
    </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-4">
                    <label for="">Nome do servidor:</label>
                    <input type="text" name="servidor" id="servidor" class="form-control" maxlength="50">
                </div>
                {{--                <div class="col-md-2">--}}
                {{--                    <label for="">Por CPF:</label>--}}
                {{--                    <input type="text" name="cpf" id="cpf" class="form-control" maxlength="50">--}}
                {{--                </div>--}}
                <div class="col-md-4">
                    <label for="">Cargo / função:</label>
                    <select class="form-control" name="cargo" id="cargo">
                        <option selected></option>
                        @foreach(\App\Models\Painel\Transparencia\Cargo::orderBy('cargo')->get() as $cg)
                            <option value="{{$cg->cod_cargo}}">{{$cg->cargo}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 col-md-offset-1">
                    <label for="">Exercício:</label>
                    <div class="row">
                        <div class="col-md-7">
                            <select class="form-control" name="mes" id="mes">
                                @php $im = 1; @endphp
                                <option value=""></option>
                                @foreach(mesesDoAno() as $mes)
                                    {{--                                        <option value="{{str_pad($im,2,0,STR_PAD_LEFT)}}" {{$im == date('m') ? " selected" : ""}}>{{$mes}}</option>--}}
                                    <option value="{{str_pad($im,2,0,STR_PAD_LEFT)}}">{{$mes}}</option>
                                    @php $im++; @endphp
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-5">
                            <select class="form-control" name="ano" id="ano">
                                @for($i = 2015; $i <= date('Y'); $i++)
                                    <option value="{{$i}}" {{$i == date('Y') ? " selected" : ""}}>{{$i}}</option>
                                @endfor
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <small>
                <h3>Informações de Servidores</h3>
                Aqui você poderá consultar informações dos servidores municipais, pesquisando por nome, cargo/função ou exercício.
            </small>
            {{--            Aqui você poderá consultar informações dos servidores municipais, pesquisando por nome, órgão ou entidade e cargo/função. Os nomes são apresentados na forma cadastrada no sistema. Assim, para encontrar uma pessoa de nome “Maria”, digite “maria” ou “mari”.--}}
            <hr>
            <div class="table-responsive" style="min-height: 120px">
                <div id="MessageContainer"></div>
                <table class="table table-hover data-table">
                    <thead>
                    <tr>
                        <th width="8%">CPF</th>
                        <th width="8%">MATRÍCULA</th>
                        <th width="25%">SERVIDOR</th>
                        <th width="29%">CARGO/FUNÇÃO</th>
                        {{--                        <th width="10%">SAL. BRUTO</th>--}}
                        {{--                        <th width="10%">DESCONTOS</th>--}}
                        <th width="10%">VLR. LÍQUIDO</th>
                        <th width="10%">COMPETÊNCA</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">Detalhamento do Servidor</h4>
                </div>
                <div class="modal-body">
                    <div id="detalhamento">
                    </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 type="text/javascript">
        $(document).ready(function () {
            var oTable = $('.data-table')
                // .on('draw.dt', function () {
                //     console.log('Loading');
                //     //Here show the loader.
                //     $("#MessageContainer").html("Your Message while loading");
                // })
                // .on('init.dt', function () {
                //     console.log('Loaded');
                //     //Here hide the loader.
                //     $("#MessageContainer").html("Your Message while load Complete");
                // })
                //https://datatables.net/examples/basic_init/dom.html
                .DataTable({
                    //dom: '<"top"i>rt<"bottom"flp><"clear">',
                    //dom: 'lrtip',
                    dom: '<"wrapper"fliptr>',//por a pagimação no top da tabela
                    searching: false,
                    lengthChange: false,
                    iDisplayLength: 20,
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    ordering: false,
                    //order: [[2, "asc"]],
                    ajax: {
                        data: function (d) {
                            d.servidor = $('input[name=servidor]').val();
                            d.cargo = $('select[name=cargo]').val();
                            d.mes = $('select[name=mes]').val();
                            d.ano = $('select[name=ano]').val();
                        }
                    },
                    columns: [
                        {data: 'cpf', name: 'cpf'},
                        {data: 'matricula', name: 'matricula'},
                        {data: 'nome', name: 'nome'},
                        {data: 'cargo', name: 'cargo'},
                        // {data: 'valor_bruto', name: 'valor_bruto'},
                        // {data: 'valor_desconto', name: 'valor_desconto'},
                        {data: 'valor_liquido', name: 'valor_liquido'},
                        {data: 'competencia', name: 'competencia'},
                        {data: 'detalhar', name: 'detalhar', 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...",
                        "sProcessing": '<div style="background-color: rgba(10,10,10,0.40); color: #f6f6f6; padding: 25px"><img src="{{url('img/gif/loader.gif')}}" /> Carregando...</div>',
                        "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').keyup(function () {
                oTable.draw();
            });

            $('#cargo, #mes, #ano').change(function () {
                oTable.draw();
            });

            $('#cpf').mask('999.999.999-99');

            // $('form[name=filterCompetencia]').on('submit', function (e) {
            //     e.preventDefault();
            //     let fields = $(this).serialize();
            //     console.log(fields)
            // });

            // $("form[name=filterCompetencia]").submit(function () {
            //     // let fields = $(this).serialize();
            //     // //console.log(fields)
            //     oTable.draw();
            //     return false;
            // })

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

            let detalhamento_anexos = $('#detalhamento-anexos');
            let detalhamento = $('#detalhamento');
            let modal = $('#modal-msg');

            detalhar = function (codigo) {
                modal.modal('show');
                $.post(urlBase + '/transparencia/salarios-subsidios/' + codigo, function (data) {
                    row = data[0];
                    let html = '';
                    html += '<table class="table table-condensed table-bordered table-striped">';
                    html += '<tbody>';

                    html += '<tr>';
                    html += '<td class="text-right"><strong>Mês/ano:</strong></td>';
                    html += '<td>' + row.mes + '/' + row.ano + '</td>';
                    html += '<td class="text-right"><strong>CPF:</strong></td>';
                    html += '<td>***.' + row.cpf + '-**</td>';
                    html += '<td class="text-right"><strong>Matrícula:</strong></td>';
                    html += '<td>' + row.matricula + '</td>';
                    html += '<td class="text-right"><strong>Admissão:</strong></td>';
                    html += '<td>' + row.dt_admissao + '</td>';
                    html += '</tr>';

                    html += '<tr>';
                    html += '<td class="col-md-2 text-right"><strong>Servidor:</strong></td>';
                    html += '<td colspan="7">' + row.nome + '</td>';
                    html += '</tr>';

                    html += '<tr>';
                    html += '<td class="col-md-2 text-right"><strong>Cargo/Função:</strong></td>';
                    html += '<td colspan="7">' + row.cargo + '</td>';
                    html += '</tr>';

                    html += '<tr>';
                    html += '<td class="col-md-2 text-right"><strong>Proventos:</strong></td>';
                    html += '<td colspan="2">R$ ' + row.valor_bruto + '</td>';
                    html += '</tr>';

                    html += '<tr>';
                    html += '<td class="col-md-2 text-right"><strong>Desconto:</strong></td>';
                    html += '<td colspan="2">R$ ' + row.valor_desconto + '</td>';
                    html += '</tr>';

                    html += '<tr>';
                    html += '<td class="col-md-2 text-right"><strong>Remuneração após descontos:</strong></td>';
                    html += '<td colspan="2">R$ ' + row.valor_liquido + '</td>';
                    html += '</tr>';

                    html += '<tr>';
                    html += '<td class="col-md-2" colspan="8" style="padding: 10px">' +
                        'Proventos (Salário Bruto): Corresponde a remuneração total, incluindo: vencimento base, gratificações, adicionais, auxílios, benefícios e demais vantagens de qualquer espécie recebidas e registradas em folha de pagamento.' +
                        '</br><small style="color: red">Este documento não substitui o contra-cheque do servidor.</small>' +
                        '</td>';
                    html += '</tr>';

                    html += '</tbody>';
                    html += '</table>';
                    detalhamento.empty().append(html);
                }, 'json');
            }
        });
    </script>
@endpush