@extends('adminlte::page')
@section('title', 'BI - Médico')

@section('content_header')
    <h1><b>Business intelligence (BI) - Médico</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('BiMedico.index') }}" id="extratoDetalhadoGerar" method="GET">
                <div class="row" >
                    <div class="col-md-2">
                        <label class="col-form-label">Tipo</label>
                        <select class="form-control" name="tipo" id="tipo">
                            <option value="geral">Geral</option>
                            <option value="particular">Particular</option>
                            <option value="convenio">Convênio</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">Convênio</label>
                        <select class="form-control select2-prestador" name="id_cv" id="convenio">
                            <option value="">Todos</option>
                            @foreach ($select_convenio as $convenio)
                                <option value="{{ $convenio->id_cv }}">{{ $convenio->id_cv }} - {{ $convenio->cv_nome}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="col-form-label">Hospital</label>
                        <select class="form-control select2-prestador" name="id_hp" id="id_hp">
                            <option value="">Todos</option>
                            @foreach ($select_hospital as $hospital)
                                <option value="{{ $hospital->id_hp }}">{{ $hospital->id_hp }} - {{ $hospital->hp_nome}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="col-form-label">Procedimento</label>
                        <select class="form-control select2-prestador" name="id_proc" id="id_proc">
                            <option value="">Todos</option>
                            @foreach ($select_procedimento as $procedimento)
                                <option value="{{ $procedimento->id_proc }}">{{ $procedimento->id_proc }} - {{ $procedimento->proc_nome}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="col-form-label">Prestador</label>
                        <select class="form-control select2-prestador" name="id_cg_pre" id="cg_pre"  >
                            @foreach ($select_prestadores as $prestador)
                                <option value="{{ $prestador->id_cg_codificado }}">{{ $prestador->id_cg }} - {{ $prestador->cg_nome}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row" style="margin-top: 30px;">
                    <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>
            @if ($filtros)
                <div class="row">
                    <!-- INICIO INDICADOR-->
                    <div class="col-lg-2 col-2">
                        <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>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-2 col-2">
                        <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 (CONVÊNIO -> AUTORIZADA, PRÉ CIRURGIA, CIRURGIA, PÓS CIRURGIA, FINALIZADA) + (PARTICULAR VENDIDO, PRÉ CIRURGIA, CIRURGIA, PÓS CIRURGIA E FINALIZADA)
                                ">
                                <i class="fas fa-question-circle"></i>
                            </a>
                            <div class="inner">
                                <h3>{{ $total_cirurgias_vendidas_geral }}<sup style="font-size: 20px"></sup></h3>
                                <b>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-2 col-2">
                        <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 (CONVÊNIO -> AUTORIZADA, PRÉ CIRURGIA, CIRURGIA, PÓS CIRURGIA, FINALIZADA) + (PARTICULAR VENDIDO, PRÉ CIRURGIA, CIRURGIA, PÓS CIRURGIA E FINALIZADA)
                                ">
                                <i class="fas fa-question-circle"></i>
                            </a>
                            <div class="inner">
                                <h3>{{ $total_cirurgias_realizadas }}<sup style="font-size: 20px"></sup></h3>
                                <b>CIRURGIAS REALIZADAS </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>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>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">
                    @if($filtros['tipo'] == 'geral' || $filtros['tipo'] == 'particular')
                        <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>
                    @else
                        <div class="col-md-9">
                        </div>
                    @endif
                    <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)">
                                        <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 das vendas onde o campo status seja vendido e que tenha o campo data da venda preenchido (Soma o campo Valor do Médico)">
                                        <i class="fas fa-question-circle"></i>
                                    </a>
                                    <div class="inner">

                                        <h3>R$ {{ number_format($ifin_total_medico_vendas, 2, ',', '.') }}<sup style="font-size: 20px"></sup></h3>
                                        <b>TOTAL MÉDICO VENDIDO </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-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)">
                                        <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-12">
                                <div class="small-box bg-info">
                                    <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title=">
                                        <i class="fas fa-question-circle"></i>
                                    </a>
                                    <div class="inner">

                                        <h3>R$ {{ number_format($ifin_total_cirurgias_negociacao_geral, 2, ',', '.') }}<sup style="font-size: 20px"></sup></h3>
                                        <b>TOTAL 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-md-12">
                                <div class="small-box bg-info">
                                    <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title=">
                                        <i class="fas fa-question-circle"></i>
                                    </a>
                                    <div class="inner">

                                        <h3>R$ {{ number_format($ifin_total_vendas_opme_convenio + $ifin_total_vendas_opme_particular, 2, ',', '.') }}<sup style="font-size: 20px"></sup></h3>
                                        <b>TOTAL OPME </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>
                </div>
            @endif

        </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>

        var id_cg_pre = null;
        var id_cv = null;
        var id_hp = null;
        var id_proc = null;
        var tipo = null;

        if (id_cg_pre) {
            var cg_pre = $('#cg_pre');
            cg_pre.val(id_cg_pre);
            cg_pre.trigger('change');
        }

        if (id_cv) {
            var convenio = $('#convenio');
            convenio.val(id_cv);
            convenio.trigger('change');
        }

        if (id_proc) {
            var procedimento = $('#id_proc');
            procedimento.val(id_proc);
            procedimento.trigger('change');
        }

        if (id_hp) {
            var hospital = $('#id_hp');
            hospital.val(id_hp);
            hospital.trigger('change');
        }


        $('.select2-prestador').select2();

        $('[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_orcado_perdido_vendido = @json($grafico_orcado_perdido_vendido);

        // 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);
        }

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

        grafico_orcado_perdido_vendido(dados_grafico_orcado_perdido_vendido);


        // Função para criar o gráfico
        function grafico_orcado_perdido_vendido(dados) {
            // Dados do gráfico
            var data = {
                labels: dados.meses,
                datasets: [
                    {
                        label: "Vendido",
                        data: dados.dados_vendido,
                        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: "Orçado",
                        data: dados.dados_orcado,
                        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: "Perdido",
                    //     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)",
                    // },
                ],
            };

            // 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 DE VENDIDOS E ORÇADOS(PARTICULAR)',
                        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