@extends('adminlte::page')
@section('title', 'BI - Geral')

@section('content_header')
    <h1><b>Business intelligence (BI) - Geral</b></h1>
@endsection
@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .select2-selection--single {
            height: 38px !important;

        }

        .select2-container {
            width: 100% !important;
        }

        /* Estilo para o container do bloco de legenda */
        .legenda-bloco {
            display: flex;
            flex-direction: column; /* Alinha itens verticalmente */
            align-items: center; /* Centraliza horizontalmente */
            margin-bottom: 16px; /* Espaçamento entre as legendas */
        }

        /* Estilo para o quadrado colorido da legenda */
        .legenda-cor {
            width: 30px; /* Tamanho do quadrado */
            height: 30px; /* Tamanho do quadrado */
            border-radius: 5px; /* Borda arredondada */
            margin-bottom: 5px; /* Espaçamento entre o quadrado e o texto/valor */
        }

        /* Estilo para o texto da legenda */
        .legenda-texto {
            font-size: 14px;
            font-weight: bold; /* Destaca o texto */
        }

        /* Estilo para o valor do dataset */
        .legenda-valor {
            font-size: 12px;
            color: gray; /* Cor do texto do valor */
        }


        .tooltip-bi-card-custom {
            float: right;
            padding-top: 7px;
            padding-right: 11px;
            /* margin: 20px; */
            font-size: 20px;
        }

        .bg-info{
            background-color: #6c6c6c !important;
            color: #fff !important;
        }

        #grQtdSolicitacaoMensal{
            /* background-color: #d4d4d4 !important; */
            background-color: #343a40 !important;


            /* color: #6e6e6e !important; */
        }




    </style>
@stop
@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{ route('BiGeral.index') }}" id="extratoDetalhadoGerar" method="GET">
                <div class="row" style="padding-left: 50px;">
                    <input type="hidden" name="tipo" value="geral">
                    <div class="col-md-2">
                        <label for="data_inicial" class="col-form-label">Data inicial</label>
                        <input required type="date" name="data_inicial" id="data_inicial" class="form-control" >
                    </div>
                    <div class="col-md-2">
                        <label for="data_final" class="col-form-label">Data final</label>
                        <input required type="date" name="data_final" id="data_final" class="form-control">
                    </div>
                    <div class="col-md-2" style="margin-top: 37px;">
                        <input type="submit" class="btn btn-primary" value="Pesquisar" id="pesquisar">
                    </div>
                </div>
            </form>
            <br>
            <br>
            <hr>
            <div class="row">
                <!-- INICIO INDICADOR-->
                <div class="col-lg-3 col-3">
                    <div class="small-box bg-info">
                        <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total de cirurgias que foram cadastradas (solicitadas) no sistema, vendas do tipo convênio e particular ">
                            <i class="fas fa-question-circle"></i>
                        </a>
                        <div class="inner">
                            <h3>{{ $total_recebimento_lead_geral }}<sup style="font-size: 20px"></sup></h3>
                            <b>TOTAL DE RECEBIMENTO DE LEAD </b>

                        </div>
                        <div class="icon">
                            <i class="fa fa-chart-line"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                            Mais informações <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
                <!-- FIM INDICADOR-->
                <!-- INICIO INDICADOR-->
                <div class="col-lg-3 col-3">
                    <div class="small-box bg-info">
                        <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="TOTAL DE CIRURGIAS VENDIDAS COM O STATUS (CONVÊNIO -> AUTORIZADA, PRÉ CIRURGIA, CIRURGIA, PÓS CIRURGIA, FINALIZADA) + (PARTICULAR VENDIDO, PRÉ CIRURGIA, CIRURGIA, PÓS CIRURGIA E FINALIZADA) E DATA DA VENDA PREENCHIDO
                            ">
                            <i class="fas fa-question-circle"></i>
                        </a>
                        <div class="inner">
                            <h3>{{ $total_cirurgias_vendidas_geral }}<sup style="font-size: 20px"></sup></h3>
                            <b>TOTAL DE CIRURGIAS VENDIDAS </b>

                        </div>
                        <div class="icon">
                            <i class="fa fa-chart-line"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                            Mais informações <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
                <!-- FIM INDICADOR-->
                <!-- INICIO INDICADOR-->
                <div class="col-lg-3 col-3">
                    <div class="small-box bg-info">
                        <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="TOTAL DE CIRURGIA EM NEGOCIAÇÃO PARTICULAR + TOTAL DE RECEBIMENTO DE LEAD (CONVENIO) + TOTAL DE CIRURGIA EM ANÁLISE(CONVENIO) + TOTAL DE CIRURGIA NÃO AUTORIZADO (CONVENIO)
                        ">
                            <i class="fas fa-question-circle"></i>
                        </a>
                        <div class="inner">
                            <h3>{{ $total_cirurgias_negociacao_geral }}<sup style="font-size: 20px"></sup></h3>
                            <b>TOTAL DE CIRURGIAS EM NEGOCIAÇÃO </b>

                        </div>
                        <div class="icon">
                            <i class="fa fa-chart-line"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                            Mais informações <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
                <!-- FIM INDICADOR-->
                <!-- INICIO INDICADOR-->
                <div class="col-lg-3 col-3">
                    <div class="small-box bg-info">
                        <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="TOTAL CIRURGIA PERDIDA (CONVÊNIO) + TOTAL CIRURGIA PERDIDA (PARTICULAR)">
                            <i class="fas fa-question-circle"></i>
                        </a>
                        <div class="inner">
                            <h3>{{ $total_cirurgias_perdida_geral }}<sup style="font-size: 20px"></sup></h3>
                            <b>TOTAL DE CIRURGIAS PERDIDAS </b>

                        </div>
                        <div class="icon">
                            <i class="fa fa-chart-line"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                            Mais informações <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
                <!-- FIM INDICADOR-->
            </div>
            {{-- <div class="row">

                <!-- INICIO INDICADOR-->
                <div class=" col-md-3">
                    <div class="small-box bg-info">
                        <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total de vendas (Particular)">
                            <i class="fas fa-question-circle"></i>
                        </a>
                        <div class="inner">
                            <h3>R$ {{ number_format($ifin_total_vendas, 2, ',', '.') }}<sup style="font-size: 20px"></sup></h3>
                            <b>TOTAL DE VENDAS </b>

                        </div>
                        <div class="icon">
                            <i class="fa fa-chart-line"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                            Mais informações <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
                <!-- FIM INDICADOR-->
                <!-- INICIO INDICADOR-->
                <div class=" col-md-3">
                    <div class="small-box bg-info">
                        <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total orçado (Particular)">
                            <i class="fas fa-question-circle"></i>
                        </a>
                        <div class="inner">
                            <h3>R$ {{ number_format($ifin_total_orcado_vendas, 2, ',', '.') }}<sup style="font-size: 20px"></sup></h3>
                            <b>TOTAL ORÇADO </b>

                        </div>
                        <div class="icon">
                            <i class="fa fa-chart-line"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                            Mais informações <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
                <!-- FIM INDICADOR-->
                <!-- INICIO INDICADOR-->
                <div class=" col-md-3">
                    <div class="small-box bg-info">
                        <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total perdido (Particular)">
                            <i class="fas fa-question-circle"></i>
                        </a>
                        <div class="inner">
                            <h3>R$ {{ number_format($ifin_total_perdido, 2, ',', '.') }}<sup style="font-size: 20px"></sup></h3>
                            <b>TOTAL PERDIDO </b>

                        </div>
                        <div class="icon">
                            <i class="fa fa-chart-line"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                            Mais informações <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
                <!-- FIM INDICADOR-->

            </div> --}}

            <div class="row">

                <div class="col-md-9">
                    <div class="row">
                        <div class="embed-responsive embed-responsive-16by9" >
                            <canvas id="grQtdSolicitacaoMensal" class="embed-responsive-item"></canvas>
                        </div>
                    </div>

                </div>
                <div class="col-md-3" style="text-align: center; margin-right: -18.5%;">
                    <div class="row">
                        <!-- INICIO INDICADOR-->
                        <div class=" col-md-12">
                            <div class="small-box bg-info">
                                <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total de vendas (Particular) e o total de vendas(Convênio) com honorário médico (Diferente de zero) particular com status (Autorizado, Pré Cirugia, Cirurgia, Pós Cirurgia e Finalizado)">
                                    <i class="fas fa-question-circle"></i>
                                </a>
                                <div class="inner">
                                    <h3>R$ {{ number_format($ifin_total_vendas, 2, ',', '.') }}<sup style="font-size: 20px"></sup></h3>
                                    <b>TOTAL DE VENDAS </b>

                                </div>
                                <div class="icon">
                                    <i class="fa fa-chart-line"></i>
                                </div>
                                <a href="#" class="small-box-footer">
                                    Mais informações <i class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <!-- FIM INDICADOR-->
                    </div>
                    <div class="row">
                        <!-- INICIO INDICADOR-->
                        <div class=" col-md-12">
                            <div class="small-box bg-info">
                                <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total orçado (Particular)  e o total de vendas (Convênio) com honorário médico (Diferente de zero) particular">
                                    <i class="fas fa-question-circle"></i>
                                </a>
                                <div class="inner">
                                    <h3>R$ {{ number_format($ifin_total_orcado_vendas, 2, ',', '.') }}<sup style="font-size: 20px"></sup></h3>
                                    <b>TOTAL ORÇADO </b>

                                </div>
                                <div class="icon">
                                    <i class="fa fa-chart-line"></i>
                                </div>
                                <a href="#" class="small-box-footer">
                                    Mais informações <i class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <!-- FIM INDICADOR-->
                    </div>
                    <div class="row">
                        <!-- INICIO INDICADOR-->
                        <div class=" col-md-12">
                            <div class="small-box bg-info">
                                <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total perdido (Particular)">
                                    <i class="fas fa-question-circle"></i>
                                </a>
                                <div class="inner">
                                    <h3>R$ {{ number_format($ifin_total_perdido, 2, ',', '.') }}<sup style="font-size: 20px"></sup></h3>
                                    <b>TOTAL PERDIDO </b>

                                </div>
                                <div class="icon">
                                    <i class="fa fa-chart-line"></i>
                                </div>
                                <a href="#" class="small-box-footer">
                                    Mais informações <i class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <!-- FIM INDICADOR-->
                    </div>
                    {{-- <div class="row" id="legendas-grQtdSolicitacaoMensal">
                        <div class="card">
                            <div class="card-header">
                              <h3 class="card-title">LEGENDA</h3>

                              <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                  <i class="fas fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-tool" data-card-widget="remove">
                                  <i class="fas fa-times"></i>
                                </button>
                              </div>
                            </div>

                            <div class="row">
                                <b>Junho</b>
                            </div>
                            <div class="card-footer text-center">

                            </div>
                            <!-- /.card-footer -->
                          </div>
                    </div> --}}

                </div>
            </div>
        </div>
    </div>

@endsection
@section('js')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <script>

        $('[data-toggle="tooltip"]').tooltip();


        $('.select2-psvCod').select2();
        $('body, nav').toggleClass('dark-mode');
        $('.small-box .bg-info').css({
            'background-color': '#343a40 !important',
            'color': '#fff !important'
        });



        var dados_grafico_bi_geral = @json($grafico_bi_geral);

        // Obtém os parâmetros da URL
        const urlParams = new URLSearchParams(window.location.search);

        // Obtém os valores dos parâmetros 'data_inicial' e 'data_final' da URL
        const dataInicial = urlParams.get('data_inicial');
        const dataFinal = urlParams.get('data_final');

        // Define os valores dos campos de entrada com os valores dos parâmetros da URL
        $('#data_inicial').val(dataInicial);
        $('#data_final').val(dataFinal);

        var filtro = null;

        if (filtro) {
            var select2filtro = $('#select2filtro');
            select2filtro.val(filtro);
            select2filtro.trigger('change');
        }

        var tipo_grafico = null;

        if (tipo_grafico) {
            $('#tipo_grafico').val(tipo_grafico);
        }


        var agrupamento = null;

        if (agrupamento) {
            $('#agrupamento').val(agrupamento);
        }

        grafico_bi_geral(dados_grafico_bi_geral);


        // Função para criar o gráfico
        function grafico_bi_geral(dados) {

            // Dados do gráfico
            var data = {
                labels: dados.meses,
                datasets: [
                    {
                        label: "Total de cirurgias vendidas",
                        data: dados.dados_cirurgias_vendidas,
                        backgroundColor: "rgba(0, 255, 0, 1)", // Cor de preenchimento
                        borderColor: "rgba(220,220,220,0.8)", // Cor da borda
                        // hoverBackgroundColor: "rgba(220,220,220,0.75)", // Cor ao passar o mouse
                        // hoverBorderColor: "rgba(220,220,220,1)", // Cor da borda ao passar o mouse
                    },
                    {
                        label: "Total de Leads",
                        data: dados.dados_total_leads,
                        backgroundColor: "rgba(255, 255, 0, 1)",
                        borderColor: "rgba(151,187,205,0.8)",
                        // hoverBackgroundColor: "rgba(151,187,205,0.75)",
                        // hoverBorderColor: "rgba(151,187,205,1)",
                    },
                    {
                        label: "Total de cirurgias em negociação",
                        data: dados.dados_negociacao,
                        backgroundColor: "rgba(0, 0, 255, 1)",
                        borderColor: "rgba(151,187,205,0.8)",
                        // hoverBackgroundColor: "rgba(151,187,205,0.75)",
                        // hoverBorderColor: "rgba(151,187,205,1)",
                    },
                    {
                        label: "Total de cirurgias perdidas",
                        data: dados.dados_perdido,

                        backgroundColor: "rgba(255, 0, 0, 1)",
                        borderColor: "rgba(151,187,205,0.8)",
                        // hoverBackgroundColor: "rgba(151,187,205,0.75)",
                        // hoverBorderColor: "rgba(151,187,205,1)",
                    },
                ],
            };



            console.log(data);

            // Configuração do gráfico
            var config = {
                type: "bar", // Tipo de gráfico
                data: data, // Dados do gráfico
                options: {
                    responsive: true, // Gráfico responsivo
                    plugins: {
                        legend: {
                            display: true, // Exibe a legenda
                            position: "top",
                        },
                        tooltip: {
                            enabled: true, // Habilita os tooltips
                        },
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                fontColor: 'white',
                                beginAtZero: true,
                                // callback: function(value) {
                                //     return value.toLocaleString('pt-BR', {
                                //         style: 'currency',
                                //         currency: 'BRL'
                                //     });
                                // }
                            }
                        }],
                        xAxes: [{
                            ticks: {
                                fontColor: 'white'
                            }
                        }]
                    },
                    tooltips: {
                        enabled: true, // Habilita tooltips
                        mode: 'nearest', // Exibe as tooltips no ponto mais próximo
                        intersect: false, // As tooltips aparecem mesmo sem passar o mouse
                        callbacks: {
                            // label: function(tooltipItem, data) {
                            //     var dataset = data.datasets[tooltipItem.datasetIndex];
                            //     var label = dataset.label || ''; // Preserva o label
                            //     var value = tooltipItem.yLabel; // Obtém o valor
                            //     return `${label}: ${value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}`;
                            // }
                        },
                        // custom: function(tooltip) {
                        //     if (!tooltip.opacity) {
                        //         return;
                        //     }
                        //     tooltip.displayColors = false; // Esconde as cores da borda se não forem necessárias
                        //     tooltip.yAlign = 'top'; // Ajusta a posição da tooltip para cima
                        // }
                    },
                    title: {
                        display: true,
                        text: 'GRÁFICO BI GERAL',
                        fontSize: 20,
                        padding: 20,
                        fontColor: 'white'
                    },
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            fontColor: 'white',
                            fontSize: 14
                        }
                    }
                },
            };

            // Obtendo o contexto do canvas e criando o gráfico
            var ctx = document.getElementById("grQtdSolicitacaoMensal").getContext("2d");
            var myBarChart = new Chart(ctx, config);

        }



    </script>
@endsection