<div class="row col-xs-12 col-sm-12 col-md-12">
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="form-group">
            <label class="control-label">Selecione o gráfico</label>
            <select id="chart-type" class="form-control">
                <option value="">Selecione o gráfico...</option>
                <optgroup label="Caracterização do Processo">
                    <option value="0">Número total de processos</option>
                    <option value="1">Tipo de processo</option>
                    <option value="2">Distribuição de processos por estado</option>
                    <option value="3">Distribuição de processos por tipo de réu</option>
                    <option value="4">Distribuição de tipo de Representante</option>
                    <option value="14">Total de Processos por Região</option>
                    <option value="5">Densidade de deslocamento na formação do processo judicial</option>
                    <option value="13">Comprovação de efetivação da demanda</option>
                    <option value="26">Distribuição dos processos por autoria</option>
                    <option value="27">Gênero do autor</option>
                </optgroup>
                <optgroup label="Das solicitações">
                    <option value="6">Emissão de Liminares ou Antecipação de Tutela</option>
                    <option value="7">Solicitações feitas</option>
                    <option value="8">Medicamentos solicitados por lista oficial</option>
                    <option value="9">Densidade de deslocamento na formação do pedido médico</option>
                    <option value="10">Pedidos apoiados em nota técnica</option>
                    <option value="15">Materialidade da motivação do pedido judicial</option>
                    <option value="16">Argumentos para solicitação judicial</option>
                    <option value="17">Provas que suportam o pedido judicial</option>
                    <option value="18">Materialidade que sustenta o pedido</option>
                    <option value="19">Embasamento legal do réu</option>
                    <option value="24">Caracterização das motivações originais</option>
                    <option value="25">Caracterização do embasamento legal do autor</option>
                </optgroup>
                <optgroup label="Da decisão">
                    <option value="11">Caracterização da decisão do juiz</option>
                    <option value="12">Total de processos por bloqueio de verba</option>
                    <option value="20">Bloqueio de verbas</option>
                    <option value="23">Pena por multa</option>
                    <option value="21">Argumentos do Juiz</option>
                    <option value="22">Embasamento legal do juiz</option>
                </optgroup>
            </select>
        </div>
    </div>
</div>

$(document).ready(function () {
    $("#chart-type").change(function () {
        var value = $(this).val();
        var text = $(this).find(":selected").text();

        $("#chart-content").html("");

        switch (value) {
            case "0":
                {
                    $.ajax({
                        method: "POST",
                        url: "/Graficos/GetTotalProcessos",
                        data: "",
                        beforeSend: function () {
                            showLoader();
                        },
                        success: function (data) {
                            var html = "<p><h4>Total de processos: " + data + "</h4></h</p>";
                            $("#chart-content").html(html);
                            $("#chart-type").val("");
                        },
                        complete: function () {
                            hideLoader();
                        }
                    });
                }

                break;

            case "1":
                Post("GetProcessosByTipo", "", text);
                break;

            case "2":
                Post("GetProcessosByEstado", "", text);
                break;

            case "3":
                PostMuitosDados("GetProcessosByTipoReu", "", text);
                break;

            case "4":
                Post("GetProcessosByTipoRep", "", text);
                break;

            case "5":
                Post("GetProcessosByDensidadeProcessoJudicial", "", text);
                break;

            case "6":
                PostVertical("GetProcessosByAntecipacaoTutela", "", text);
                break;

            case "7":
                Post("GetProcessosByDistribuicaoSolicitacoes", "", text, "Média");
                break;

            case "8":
                PostMuitosDados("GetProcessosByMedicamentosSolicitados", "", text);
                break;

            case "9":
                Post("GetProcessosByDeslocamentoPedidoMedico", "", text);
                break;

            case "10":
                Post("GetProcessosByNovaTecnica", "", text);
                break;

            case "11":
                Post("GetProcessosByCaracterizacaoJuiz", "", text);
                break;

            case "12":
                Post("GetProcessosByBloqueioVerba", "", text);
                break;

            case "13":
                Post("GetProcessosByEfetivacaoDemanda", "", text);
                break;

            case "14":
                Post("GetProcessosByProcessosPorRegiao", "", text);
                break;

            case "15":
                PostMuitosDados("GetProcessosByMaterialidade", "", text);
                break;

            case "16":
                PostMuitosDados("GetProcessosByArgumentosJudicial", "", text);
                break;

            case "17":
                Post("GetProcessosByPedidoJudicial", "", text);
                break;

            case "18":
                Post("GetProcessosByMaterialidadeSustentaPedido", "", text);
                break;

            case "19":
                Post("GetProcessosByEmbasamentoLegaldoReu", "", text);
                break;

            case "20":
                PostVertical("GetProcessosByBloqueiodeVerbas", "", text);
                break;

            case "21":
                PostMuitosDados("GetProcessosByArgumentodoJuiz", "", text);
                break;

            case "22":
                Post("GetProcessosByEmbasamentodoJuiz", "", text);
                break;

            case "23":
                PostVertical("GetProcessosByPenaPorMulta", "", text);
                break;

            case "24":
                PostMuitosDados("GetProcessosByMotivacoesOriginais", "", text);
                break;

            case "25":
                Post("GetProcessosByEmbasamentoLegaldoAutor", "", text);
                break;

            case "26":
                PostMuitosDados("GetProcessosByDistribuicaoDosProcessosPorAutoria", "", text);
                break;

            case "27":
                Post("GetProcessosByGenerodoAutor", "", text);
                break;
        }
    });
});

function Post(url, param, title, totalText) {
    totalText = totalText || "Total";

    $.ajax({
        method: "POST",
        url: "/Graficos/" + url,
        data: param,
        beforeSend: function () {
            showLoader();
        },
        success: function (data) {
            ChartConstructor(title, JSON.stringify(data), totalText);
        },
        complete: function () {
            hideLoader();
        }
    });
}

function ChartConstructor(title, dados, totalText) {
    window.google.charts.load('current', { 'packages': ['bar'] });
    window.google.charts.setOnLoadCallback(drawStuff);

    function drawStuff() {
        var table = JSON.parse(dados);
        var rows = "";

        var array = [["", "Total"]];

        for (var i = 0; i < table.length; i++) {
            array.push([table[i].Title, table[i].Count]);
        }

        var data = new google.visualization.arrayToDataTable(array);

        var options = {
            width: '100%',
            height: 400,
            chart: {
                title: title,
            },
            bar: { groupWidth: '95%' },
            bars: 'horizontal',
            hAxis: { format: 'decimal' },
            series: {
                0: { axis: 'distance' },
            }
        };

        var chart = new google.charts.Bar(document.getElementById("chart-content"));
        chart.draw(data, google.charts.Bar.convertOptions(options));

        $("#chart-type").val("");
    }
}