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

@section('content_header')
    <h1><b>Business intelligence (BI) - Particular</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('BiParticular.index') }}" id="extratoDetalhadoGerar" method="GET">
                <div class="row" style="padding-left: 50px;">
                    <div class="input-group">
                        <input type="hidden" name="tipo" value="particular">
                        <div class="col-md-4">
                            <label class="col-form-label">Prestador</label>
                            <select class="form-control select2-psvCod" name="id_cg_pre" id="cg_pre"  >
                                <option value="">Nenhum selecionado</option>
                                @foreach ($select_prestadores as $prestador)
                                    <option value="{{ $prestador->id_cg }}">{{ $prestador->cg_nome}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label 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 class="col-form-label">Data final</label>
                            <input type="date" name="data_final" id="data_final" class="form-control">
                        </div>
                        {{-- <div class="col-md-3" style="padding-top: 14px;"> <strong>Filtro</strong>
                            <select class="form-control select2-psvCod" name="filtro" id="select2filtro">
                                <option value="TOTAL_NAO_COMPARECIDO">Não comparecido (R$)</option>
                                <option value="TOTAL_COMPARECIDO">Comparecido (R$)</option>
                                <option value="TOTAL">Quantidade de pacientes agendados</option>
                                <option value="QUANTIDADE_NAO_COMPARECIDO">Quantidade de pacientes que não compareceram</option>
                                <option value="QUANTIDADE_COMPARECIDO">Quantidade de pacientes que compareceram</option>
                                <option value="TOTAL_COMPARECIDO_P">Percentual de pacientes que compareceram</option>
                                <option value="TOTAL_NAO_COMPARECIDO_P">Percentual de pacientes que não compareceram</option>
                            </select>
                        </div> --}}
                        <div class="col-md-2" style="margin-top: 37px;">
                            <div class="input-group-append">
                                <input type="submit" class="btn btn-primary" value="Pesquisar" id="pesquisar">
                            </div>
                        </div>
                    </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>{{ $iprod_total_cirurgia_solicitado }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE 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-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 esteja Em negociaçaõ e o campo data do orçamento esteja preenchido">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprod_total_cirurgia_negociacao }}<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-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 orçamentos enviados onde o campo data do orçamento esteja preenchido">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprod_total_orcamento_enviado }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE ORÇAMENTOS ENVIADOS </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 vendidas onde o campo data do orçamento esteja preenchido e o status esteja como vendido">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprod_total_cirurgia_vendida }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL CIRURGIA VENDIDA </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 perdidas onde o campo data do orçamento esteja preenchido e o status esteja como perdido">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprod_total_cirurgia_perdida }}<sup style="font-size: 20px"></sup></h3>
                                            <b> TOTAL 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 vendido e que tenha o campo valor da UTI preenchido">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprod_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 vendido e que tenha o campo OPME preenchidos">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprod_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 vendido e pré cirurgia e o campo data da cirurgia estejam preenchidos">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprod_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 status seja vendido e que tenha o campo OPME preenchidos">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <div class="inner">
                                            <h3>{{ $iprod_total_cirurgia_realizada }}<sup style="font-size: 20px"></sup></h3>
                                            <b>TOTAL DE 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-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <!-- 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">
                            <div class="row">
                                <div class="col-md-10">
                                    <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> <b style="color: red;">(R$ {{ number_format($ifin_total_perdido, 2, ',', '.') }}) </b></h5>
                                </div>
                                <!-- INICIO TOTALIZADORES VENDAS-->
                                <div class="col-md-2">
                                    <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 Total)">
                                        <i class="fas fa-question-circle"></i>
                                    </a>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <!-- INICIO INDICADOR-->
                                <div class="col-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <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 Hospital)">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <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">
                                        <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 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">
                                        <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 Anestesia)">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <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">
                                        <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 UTI)">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <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">
                                        <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 OPME)">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <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">
                                        <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 Sangue)">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <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-->
                            <div class="row">
                                <hr>
                                <div class="col-md-10">
                                    <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>
                                </div>

                                <div class="col-md-2">
                                    <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total de orçamentos onde o campo status seja em negociação e que o campo data do orçamento esteja preenchido (Soma o campo Valor Total)">
                                        <i class="fas fa-question-circle"></i>
                                    </a>
                                </div>
                            </div>
                            <br>
                            <!-- TOTALIZADORES ORÇADOS -->
                            <div class="row">
                                <!-- INICIO INDICADOR-->
                                <div class="col-lg-4 col-6">
                                    <div class="small-box bg-success">
                                        <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total de orçamentos onde o campo status seja em negociação e que tenha o campo data do orçamento preenchido (Soma o campo Valor Hospital)">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <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">
                                        <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total de orçamentos onde o campo status seja em negociação e que tenha o campo data do orçamento 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_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">
                                        <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total de orçamentos onde o campo status seja em negociação e que tenha o campo data do orçamento preenchido (Soma o campo Valor Anestesia)">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <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">
                                        <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total de orçamentos onde o campo status seja em negociação e que tenha o campo data do orçamento preenchido (Soma o campo Valor UTI)">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <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">
                                        <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total de orçamentos onde o campo status seja em negociação e que tenha o campo data do orçamento preenchido (Soma o campo Valor OPME)">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <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">
                                        <a type="button" class="tooltip-bi-card-custom" data-toggle="tooltip" data-placement="top" title="Exibe o total de orçamentos onde o campo status seja em negociação e que tenha o campo data do orçamento preenchido (Soma o campo Valor Bolsa de Sangue)">
                                            <i class="fas fa-question-circle"></i>
                                        </a>
                                        <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">
                <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 ORÇAMENTOS 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-grQtdOrcamentoMensal">
                                <!-- 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="grQtdOrcamentoMensal" 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">
                <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 CIRURGIAS 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-grQtdCirurgiaAgendadaMensal">
                                <!-- 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="grQtdCirurgiaAgendadaMensal" 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">
                <div class="col-md-12">
                    <div class="card card-secondary collapsed-card">
                        <div class="card-header">
                            <h3 class="card-title"><b>GRÁFICO - VALORES RECEBIDOS 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-grRecebidoMensal">
                                <!-- 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="grRecebidoMensal" class="embed-responsive-item"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- FIM GRÁFICO RECEBIDOS MENSAL-->
            <br>
        </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;

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


        // $('#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 dadosGrQtdOrcamentoMensal = @json($grQtdOrcamentoMensal);
        var dadosGrQtdCirurgiaAgendadaMensal = @json($grQtdCirurgiaAgendadaMensal);
        var dadosGrTotalRecebidoMensal = @json($grTotalRecebidoMensal);

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

        grQtdOrcamentoMensal(dadosGrQtdOrcamentoMensal);
        grQtdCirurgiaAgendadaMensal(dadosGrQtdCirurgiaAgendadaMensal);
        grRecebidoMensal(dadosGrTotalRecebidoMensal);


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

            // Obtendo o contexto do canvas para o gráfico
            var ctx = document.getElementById('grQtdOrcamentoMensal').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
            };

            gerarLegendasGrQtdOrcamentoMensal(datasets);

            var options = {
                title: {
                    display: true, // Exibe o título
                    text: 'ORÇAMENTOS ENVIADOS', // 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 gerarLegendasGrQtdOrcamentoMensal(dados) {
            var legendaContainer = document.getElementById('legendas-grQtdOrcamentoMensal');
            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 grQtdCirurgiaAgendadaMensal(dados) {
            var tipo_grafico = 'bar';

            // Obtendo o contexto do canvas para o gráfico
            var ctx = document.getElementById('grQtdCirurgiaAgendadaMensal').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
            };

            gerarLegendasGrQtdCirurgiaAgendadaMensal(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 gerarLegendasGrQtdCirurgiaAgendadaMensal(dados) {
            var legendaContainer = document.getElementById('legendas-grQtdCirurgiaAgendadaMensal');
            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 grRecebidoMensal(dados) {
            var tipo_grafico = 'bar';

            // Obtendo o contexto do canvas para o gráfico
            var ctx = document.getElementById('grRecebidoMensal').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
            };

            gerarLegendasGrRecebidoMensal(datasets);

            var options = {
                title: {
                    display: true, // Exibe o título
                    text: 'VALORES REBIDOS 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 gerarLegendasGrRecebidoMensal(dados) {
            var legendaContainer = document.getElementById('legendas-grRecebidoMensal');
            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