@extends('adminlte::page')
@section('title', 'Gráfico de Produtividade de Atendentes')

@section('content_header')
    <h1><b>Business intelligence (BI) - Convênio</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;
        }


    </style>
@stop
@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{ route('BiConvenio.index') }}" id="extratoDetalhadoGerar" method="GET">
                <div class="row" style="padding-left: 50px;">
                    <input type="hidden" name="tipo" value="convenio">
                    <div class="col-md-2">
                        <label for="data_inicial" class="col-form-label">Data inicial</label>
                        <input 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 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" style="display: flex; justify-content: center;">
                <h4><b>INDICADORES</b></h4>
            </div>
            <br>
            <!-- INDICADORES DE PRODUTIVIDADE -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-info collapsed-card">
                        <div class="card-header">
                            <h3 class="card-title"><b>INDICADORES DE PRODUTIVIDADE</b></h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="maximize">
                                    <i class="fas fa-expand"></i>
                                </button>
                                <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="card-body">
                            <div class="row">
                                <!-- INICIO INDICADOR-->
                                <div class="col-lg-4 col-6">
                                    <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 no sistema">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprodc_total_cirurgia_solicitado }}<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-->
                                <div class="col-lg-4 col-6">
                                    <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 que estão com o campo solicitação de cirurgia preenchida e com o status ANALISE, AUTORIZADO, NÀO AUTORIZADO, PRÉ CIRURGIA, CIRURGIA, PÓS CIRURGIA E FINALIZADO">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprodc_total_cirurgia_solicitado_convenio }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE CIRURGIA SOLICTADAS AO CONVÊNIO </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-4 col-6">
                                    <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 onde o campo data da cirurgia esteja preenchido e o status esteja como pós cirurgico e finalizado">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprodc_total_cirurgia_realizado }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE CIRURGIA REALIZADA</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-lg-4 col-6">
                                    <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 onde o campo data da solicitação da cirurgia esteja preenchido e o status seja perdido">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprodc_total_cirurgia_perdida }}<sup style="font-size: 20px"></sup></h3>
                                            <b> TOTAL DE CIRURGIA PERDIDA</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-4 col-6">
                                    <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 onde o campo status seja em análise e que tenha a data de solicitação da cirurgia esteja preenchida">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprodc_total_cirurgia_em_analise }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE CIRURGIA EM ANÁLISE </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-4 col-6">
                                    <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 onde o campo status seja  AUTORIZADA, PRÉ CIRURGIA, CIRURGIA, PÓS CIRURGIA E FINALIZADO e que tenha a data de solicitação da cirurgia preenchida">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprodc_total_cirurgia_autorizado }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE CIRURGIA AUTORIZADA  </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>
                            <!-- FIM INDICADOR-->
                            <div class="row">
                                <!-- INICIO INDICADOR-->
                                <div class="col-lg-4 col-6">
                                    <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 onde o campo data da solicitação da cirurgia esteja preenchida e o status seja não autorizado">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprodc_total_cirurgia_nao_autorizado }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE CIRURGIA NÃO AUTORIZADO  </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-4 col-6">
                                    <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 onde o campo data da cirurgia esteja preenchida e o status seja diferente de perdido">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprodc_total_cirurgia_agendado }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE CIRURGIA AGENDADA  </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-4 col-6">
                                    <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 onde o campo status seja diferente de perdido, onde o campo cirurgia esteja preenchido, e que tenha o valor da UTI seja maior que de zero">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprodc_total_cirurgia_com_uti }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE CIRURGIA COM UTI </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-lg-4 col-6">
                                    <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 onde o campo status seja diferente de perdido, onde o campo cirurgia esteja preenchido, e que tenha o campo forcedor preenchido">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprodc_total_cirurgia_com_opme }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE CIRURGIA COM 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-->
                                <!-- INICIO INDICADOR-->
                                <div class="col-lg-4 col-6">
                                    <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 onde o campo status seja autorizado, pré cirurgia e a data da solicitação de cirurgia e o campo data da cirurgia estejam preenchidos">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprodc_total_pre_cirurgia }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE PRÉ CIRURGIA </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-4 col-6">
                                    <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 onde o campo data transformada em particular esteja foi preenchida">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprodc_cirurgia_transf_particular }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE CIRURGIAS TRANSF. PARTICULAR </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-lg-4 col-6">
                                    <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 onde o campo status seja diferente perdido e o campo data da solicitação da cirurgia estejam preenchidos">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprodc_cirurgia_solicitada_convenio }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE CIRURGIAS SOLICITADAS </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>
                    </div>
                </div>
            </div>
            <!-- INDICADORES DE FINANCEIROS -->
            {{-- <div class="row">
                <div class="col-md-12">
                    <div class="card card-success collapsed-card">
                        <div class="card-header">
                            <h3 class="card-title"><b>INDICADORES FINANCEIROS</b></h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="maximize">
                                    <i class="fas fa-expand"></i>
                                </button>
                                <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="card-body">
                            <!-- INICIO TOTALIZADORES VENDAS-->
                            <h4 style="text-align: center;"><b>TOTALIZADORES DE VENDAS</b></h4>
                            <h5 style="text-align: center;"><b>TOTAL: R$
                                    {{ number_format($ifin_total_vendas, 2, ',', '.') }}</b></h5>
                            <br>
                            <div class="row">
                                <!-- INICIO INDICADOR-->
                                <div class="col-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <div class="inner">
                                            <h3>R$ {{ number_format($ifin_total_hospital_vendas, 2, ',', '.') }}<sup
                                                    style="font-size: 20px"></sup></h3>
                                            <b>VALOR DO HOSPITAL 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-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <div class="inner">
                                            <h3>R$ {{ number_format($ifin_total_medico_vendas, 2, ',', '.') }}<sup
                                                    style="font-size: 20px"></sup></h3>
                                            <b> TOTAL DO 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-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <div class="inner">
                                            <h3>R${{ number_format($ifin_total_anestesia_vendas, 2, ',', '.') }} <sup
                                                    style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DO ANESTESIA 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-->
                            </div>
                            <div class="row">
                                <!-- INICIO INDICADOR-->
                                <div class="col-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <div class="inner">
                                            <h3>R$ {{ number_format($ifin_total_uti_vendas, 2, ',', '.') }} <sup
                                                    style="font-size: 20px"></sup></h3>
                                            <b>VALOR UTI 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-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <div class="inner">
                                            <h3>R$ {{ number_format($ifin_total_opme_vendas, 2, ',', '.') }} <sup
                                                    style="font-size: 20px"></sup></h3>
                                            <b> TOTAL DO OPME 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-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <div class="inner">
                                            <h3>R$ {{ number_format($ifin_total_bolsa_sangue_vendas, 2, ',', '.') }} <sup
                                                    style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DA BOLSA DE SANGUE 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-->
                            </div>
                            <!-- FIM TOTALIZADORES VENDAS-->
                            <!-- INICIO TOTALIZADORES ORÇADOS-->
                            <hr>
                            <h4 style="text-align: center;"><b>TOTALIZADORES DE ORÇAMENTOS</b></h4>
                            <h5 style="text-align: center;"><b>TOTAL: R$
                                    {{ number_format($ifin_total_orcado_vendas, 2, ',', '.') }}</b></h5>
                            <br>
                            <br>
                            <!-- TOTALIZADORES ORÇADOS -->
                            <div class="row">
                                <!-- INICIO INDICADOR-->
                                <div class="col-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <div class="inner">
                                            <h3>R$ {{ number_format($ifin_total_orcado_hospital_vendas, 2, ',', '.') }}<sup
                                                    style="font-size: 20px"></sup></h3>
                                            <b>VALOR DO HOSPITAL 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-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <div class="inner">
                                            <h3>R$ {{ number_format($ifin_total_orcado_medico_vendas, 2, ',', '.') }}<sup
                                                    style="font-size: 20px"></sup></h3>
                                            <b> TOTAL DO MÉDICO 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-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <div class="inner">
                                            <h3>R$ {{ number_format($ifin_total_orcado_anestesia_vendas, 2, ',', '.') }}<sup
                                                    style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DO ANESTESIA 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-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <div class="inner">
                                            <h3>R$ {{ number_format($ifin_total_orcado_uti_vendas, 2, ',', '.') }}<sup
                                                    style="font-size: 20px"></sup></h3>
                                            <b>VALOR UTI 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-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <div class="inner">
                                            <h3>R$ {{ number_format($ifin_total_orcado_opme_vendas, 2, ',', '.') }}<sup
                                                    style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DO OPME 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-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <div class="inner">
                                            <h3>R$
                                                {{ number_format($ifin_total_orcado_bolsa_sangue_vendas, 2, ',', '.') }}<sup
                                                    style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DA BOLSA DE SANGUE 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>
                            <!-- FIM TOTALIZADORES ORÇADOS-->
                        </div>
                    </div>
                </div>
            </div>
            <br> --}}
            <!-- INICIO GRÁFICO QUANTIDADE DE ORÇAMENTOS MENSAL-->
            <div class="row" style="padding-left:30px; padding-right:30px;">
                <div class="col-md-12">
                    <div class="card card-secondary collapsed-card">
                        <div class="card-header">
                            <h3 class="card-title"><b>GRÁFICO - QUANTIDADE DE SOLICITAÇÃO - MENSAL</b></h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="maximize">
                                    <i class="fas fa-expand"></i>
                                </button>
                                <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="card-body">
                            <h5 style="text-align: center;"><b>LEGENDA</b></h5>
                            <br>
                            <div class="row" id="legendas-grQtdSolicitacaoMensal">
                                <!-- As legendas serão geradas dinamicamente aqui -->
                            </div>
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="embed-responsive embed-responsive-16by9" style="left: 18%;">
                                        <canvas id="grQtdSolicitacaoMensal" class="embed-responsive-item"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- FIM GRÁFICO QUANTIDADE DE ORÇAMENTOS MENSAL-->
            <!-- INICIO GRÁFICO CIRURGIAS AGENDADADAS MENSAL-->
            <div class="row" style="padding-left:30px; padding-right:30px;">
                <div class="col-md-12">
                    <div class="card card-secondary collapsed-card">
                        <div class="card-header">
                            <h3 class="card-title"><b>GRÁFICO - QUANTIDADE DE AGENDADAS MENSAL</b></h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="maximize">
                                    <i class="fas fa-expand"></i>
                                </button>
                                <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="card-body">
                            <h5 style="text-align: center;"><b>LEGENDA</b></h5>
                            <br>
                            <div class="row" id="legendas-grConQtdCirurgiaAgendadoMensal">
                                <!-- As legendas serão geradas dinamicamente aqui -->
                            </div>
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="embed-responsive embed-responsive-16by9" style="left: 18%;">
                                        <canvas id="grConQtdCirurgiaAgendadoMensal" class="embed-responsive-item"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- FIM GRÁFICO QUANTIDADE DE ORÇAMENTOS MENSAL-->
            <!-- INICIO GRÁFICO RECEBIDOS MENSAL-->
            <div class="row" style="padding-left:30px; padding-right:30px;">
                <div class="col-md-12">
                    <div class="card card-secondary collapsed-card">
                        <div class="card-header">
                            <h3 class="card-title"><b>GRÁFICO - QUANTIDADE DE SOLICITAÇÃO DE CIRURGIA POR CONVÊNIO</b></h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="maximize">
                                    <i class="fas fa-expand"></i>
                                </button>
                                <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="card-body">
                            <h5 style="text-align: center;"><b>LEGENDA</b></h5>
                            <br>
                            <div class="row" id="legendas-grConQtdSolicitacaoCirurgiaAgrupConvenio">
                                <!-- As legendas serão geradas dinamicamente aqui -->
                            </div>
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="embed-responsive embed-responsive-16by9" style="left: 18%;">
                                        <canvas id="grConQtdSolicitacaoCirurgiaAgrupConvenio" class="embed-responsive-item"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- FIM GRÁFICO RECEBIDOS MENSAL-->

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

        // $('#pesquisar').click(function() {
        //     var dataInicial = moment($('#data_inicial').val());
        //     var dataFinal = moment($('#data_final').val());

        //     // Calcular a diferença em meses entre as duas datas
        //     var meses = dataFinal.diff(dataInicial, 'months');

        //     if (meses >= 6) {
        //         alert('Pesquise um período inferior a 6 meses');
        //         return false; // Interromper o evento de clique padrão
        //     } else {
        //         $('#modal-carregamento').modal('show');
        //     }
        // });

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


        var dadosGrQtdSolicitacaoMensal = @json($grQtdSolicitacaoMensal);
        var dadosGrConQtdCirurgiaAgendadoMensal = @json($grConQtdCirurgiaAgendadoMensal);
        var dadosGrConQtdSolicitacaoCirurgiaAgrupConvenio = @json($grConQtdSolicitacaoCirurgiaAgrupConvenio);

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

        grQtdSolicitacaoMensal(dadosGrQtdSolicitacaoMensal);
        grConQtdCirurgiaAgendadoMensal(dadosGrConQtdCirurgiaAgendadoMensal);
        grConQtdSolicitacaoCirurgiaAgrupConvenio(dadosGrConQtdSolicitacaoCirurgiaAgrupConvenio);


        function grQtdSolicitacaoMensal(dados) {
            var tipo_grafico = 'bar';

            // Obtendo o contexto do canvas para o gráfico
            var ctx = document.getElementById('grQtdSolicitacaoMensal').getContext('2d');

            var datasets = [];

            // Loop para criar cada conjunto de dados (dataset) individualmente
            for (var i = 0; i < dados.labels.length; i++) {
                var r = Math.floor(Math.random() * 256); // Componente vermelho (0-255)
                var g = Math.floor(Math.random() * 256); // Componente verde (0-255)
                var b = Math.floor(Math.random() * 256); // Componente azul (0-255)
                var rgba = 'rgba(' + r + ',' + g + ',' + b + ', 0.7)'; // Cria uma cor RGBA com transparência
                var borderColor = 'rgba(' + (r * 0.7) + ',' + (g * 0.7) + ',' + (b * 0.7) +
                ', 1)'; // Cria uma cor RGBA mais escura

                datasets.push({
                    label: dados.labels[i], // Nome da legenda será o rótulo do mês
                    data: [dados.data[i]], // Dados correspondentes ao mês
                    backgroundColor: rgba,
                    borderColor: borderColor,
                    borderWidth: 1
                });
            }

            var data = {
                labels: [''], // Um rótulo genérico para o eixo X, pois cada mês será um dataset
                datasets: datasets
            };

            gerarLegendasGrQtdSolicitacaoMensal(datasets);

            var options = {
                title: {
                    display: true, // Exibe o título
                    text: 'QUANTIDADE DE SOLICITAÇÕES', // Título do gráfico
                    fontSize: 20, // Tamanho da fonte do título
                    padding: 20 // Espaço entre o título e o gráfico
                },
                legend: {
                    display: false, // Define a legenda como visível
                    position: 'bottom', // Move a legenda para a parte inferior
                    labels: {
                        fontColor: 'black', // Cor do texto da legenda
                        fontSize: 12 // Tamanho da fonte da legenda
                    }
                },
                hover: {
                    mode: 'index' // Permite o efeito de hover em múltiplos elementos simultaneamente
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true // Inicia o eixo Y a partir de zero
                        }
                    }]
                }
            };

            // Criando o gráfico
            var myChart = new Chart(ctx, {
                type: tipo_grafico,
                data: data,
                options: options
            });
        }

        function gerarLegendasGrQtdSolicitacaoMensal(dados) {
            var legendaContainer = document.getElementById('legendas-grQtdSolicitacaoMensal');
            legendaContainer.innerHTML = ''; // Limpa as legendas anteriores, se houver

            dados.forEach(function(label, index) {
                // Criando um bloco de legenda para cada dataset
                var blocoLegenda = `
                        <div class="legenda-bloco" style="margin-left: 22px;">
                            <div class="legenda-cor" style="background-color: ${dados[index].backgroundColor};"></div>
                            <div class="legenda-texto">${dados[index].label}</div>
                            <div class="legenda-valor">${dados[index].data}</div>
                        </div>
                `;
                legendaContainer.innerHTML += blocoLegenda; // Adiciona o bloco de legenda ao container
            });
        }

        function grConQtdCirurgiaAgendadoMensal(dados) {
            var tipo_grafico = 'bar';

            // Obtendo o contexto do canvas para o gráfico
            var ctx = document.getElementById('grConQtdCirurgiaAgendadoMensal').getContext('2d');

            var datasets = [];

            // Loop para criar cada conjunto de dados (dataset) individualmente
            for (var i = 0; i < dados.labels.length; i++) {
                var r = Math.floor(Math.random() * 256); // Componente vermelho (0-255)
                var g = Math.floor(Math.random() * 256); // Componente verde (0-255)
                var b = Math.floor(Math.random() * 256); // Componente azul (0-255)
                var rgba = 'rgba(' + r + ',' + g + ',' + b + ', 0.7)'; // Cria uma cor RGBA com transparência
                var borderColor = 'rgba(' + (r * 0.7) + ',' + (g * 0.7) + ',' + (b * 0.7) +
                ', 1)'; // Cria uma cor RGBA mais escura

                datasets.push({
                    label: dados.labels[i], // Nome da legenda será o rótulo do mês
                    data: [dados.data[i]], // Dados correspondentes ao mês
                    backgroundColor: rgba,
                    borderColor: borderColor,
                    borderWidth: 1
                });
            }

            var data = {
                labels: [''], // Um rótulo genérico para o eixo X, pois cada mês será um dataset
                datasets: datasets
            };

            gerarLegendasGrConQtdCirurgiaAgendadoMensal(datasets);

            var options = {
                title: {
                    display: true, // Exibe o título
                    text: 'QUANTIDADE DE CIRURGIAS AGENDADAS POR MÊS', // Título do gráfico
                    fontSize: 20, // Tamanho da fonte do título
                    padding: 20 // Espaço entre o título e o gráfico
                },
                legend: {
                    display: false, // Define a legenda como visível
                    position: 'bottom', // Move a legenda para a parte inferior
                    labels: {
                        fontColor: 'black', // Cor do texto da legenda
                        fontSize: 12 // Tamanho da fonte da legenda
                    }
                },
                hover: {
                    mode: 'index' // Permite o efeito de hover em múltiplos elementos simultaneamente
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true // Inicia o eixo Y a partir de zero
                        }
                    }]
                }
            };

            // Criando o gráfico
            var myChart = new Chart(ctx, {
                type: tipo_grafico,
                data: data,
                options: options
            });
        }

        function gerarLegendasGrConQtdCirurgiaAgendadoMensal(dados) {
            var legendaContainer = document.getElementById('legendas-grConQtdCirurgiaAgendadoMensal');
            legendaContainer.innerHTML = ''; // Limpa as legendas anteriores, se houver

            dados.forEach(function(label, index) {
                // Criando um bloco de legenda para cada dataset
                var blocoLegenda = `
                        <div class="legenda-bloco" style="margin-left: 22px;">
                            <div class="legenda-cor" style="background-color: ${dados[index].backgroundColor};"></div>
                            <div class="legenda-texto">${dados[index].label}</div>
                            <div class="legenda-valor">${dados[index].data}</div>
                        </div>
                `;
                legendaContainer.innerHTML += blocoLegenda; // Adiciona o bloco de legenda ao container
            });
        }

        function grConQtdSolicitacaoCirurgiaAgrupConvenio(dados) {
            var tipo_grafico = 'bar';

            // Obtendo o contexto do canvas para o gráfico
            var ctx = document.getElementById('grConQtdSolicitacaoCirurgiaAgrupConvenio').getContext('2d');

            var datasets = [];

            // Loop para criar cada conjunto de dados (dataset) individualmente
            for (var i = 0; i < dados.labels.length; i++) {
                var r = Math.floor(Math.random() * 256); // Componente vermelho (0-255)
                var g = Math.floor(Math.random() * 256); // Componente verde (0-255)
                var b = Math.floor(Math.random() * 256); // Componente azul (0-255)
                var rgba = 'rgba(' + r + ',' + g + ',' + b + ', 0.7)'; // Cria uma cor RGBA com transparência
                var borderColor = 'rgba(' + (r * 0.7) + ',' + (g * 0.7) + ',' + (b * 0.7) +
                ', 1)'; // Cria uma cor RGBA mais escura

                datasets.push({
                    label: dados.labels[i], // Nome da legenda será o rótulo do mês
                    data: [dados.data[i]], // Dados correspondentes ao mês
                    backgroundColor: rgba,
                    borderColor: borderColor,
                    borderWidth: 1
                });
            }

            var data = {
                labels: [''], // Um rótulo genérico para o eixo X, pois cada mês será um dataset
                datasets: datasets
            };

            gerarLegendasGrConQtdSolicitacaoCirurgiaAgrupConvenio(datasets);

            var options = {
                title: {
                    display: true, // Exibe o título
                    text: 'QUANTIDADE DE SOLICITAÇÕES AGRUPADO POR CONVÊNIO', // Título do gráfico
                    fontSize: 20, // Tamanho da fonte do título
                    padding: 20 // Espaço entre o título e o gráfico
                },
                legend: {
                    display: false, // Define a legenda como visível
                    position: 'bottom', // Move a legenda para a parte inferior
                    labels: {
                        fontColor: 'black', // Cor do texto da legenda
                        fontSize: 12 // Tamanho da fonte da legenda
                    }
                },
                hover: {
                    mode: 'index' // Permite o efeito de hover em múltiplos elementos simultaneamente
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true // Inicia o eixo Y a partir de zero
                        }
                    }]
                }
            };

            // Criando o gráfico
            var myChart = new Chart(ctx, {
                type: tipo_grafico,
                data: data,
                options: options
            });
        }

        function gerarLegendasGrConQtdSolicitacaoCirurgiaAgrupConvenio(dados) {
            var legendaContainer = document.getElementById('legendas-grConQtdSolicitacaoCirurgiaAgrupConvenio');
            legendaContainer.innerHTML = ''; // Limpa as legendas anteriores, se houver

            dados.forEach(function(label, index) {
                // Criando um bloco de legenda para cada dataset
                var blocoLegenda = `
                        <div class="legenda-bloco" style="margin-left: 22px;">
                            <div class="legenda-cor" style="background-color: ${dados[index].backgroundColor};"></div>
                            <div class="legenda-texto">${dados[index].label}</div>
                            <div class="legenda-valor">${dados[index].data}</div>
                        </div>
                `;
                legendaContainer.innerHTML += blocoLegenda; // Adiciona o bloco de legenda ao container
            });
        }

    </script>
@endsection