@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')

<div class="row justify-content-between">
  <div class=""> <button class="btn btn-primary" onclick="history.back()"><i class="fas fa-arrow-left"></i>
      Indietro</button></div>
  <div class="text-center">
    <h1>Analisi Total Body </h1>
  </div>
  <div class="d-flex ">
    <form action="{{route('Analisi.destroy',$data['id'])}}" class="mx-2" method="POST">
      @csrf
      @method('DELETE')
      <button type="submit" class="btn btn-sm btn-danger">cancella</button>

    </form>

    <form action="{{route('Analisi.PdfTotal')}}" method="POST">
      @csrf
      <input type="hidden" name="Sesso" id="Sesso" value="{{$data['an']->Sesso}}">
      <input type="hidden" name="" id="BCMG" value="{{$data['an']->BCMG}}">
      <input type="hidden" name="" id="BCMGP" value="{{$data['anP']->BCMG}}">
      <input type="hidden" name="PAP" id="PAP" value="{{$data['anP']->PA}}">
      <input type="hidden" name="Resistenza" id="res" value="{{$data['an']->Resistenza}}">
      <input type="hidden" name="Reattanza" id="rea" value="{{$data['an']->Reattanza}}">
      <input type="hidden" name="Altezza" id="Altezzah" value="{{$data['an']->Altezza}}">
      <input type="hidden" name="ResistenzaP" id="resP" value="{{$data['anP']->Resistenza}}">
      <input type="hidden" name="ReattanzaP" id="reaP" value="{{$data['anP']->Reattanza}}">
      <input type="hidden" name="AltezzaP" id="AltezzahP" value="{{$data['anP']->Altezza}}">
      <input type="hidden" name="Laf" id="LAF" value="{{$data['an']->Laf}}">
      <input type="hidden" name="Peso" id="Peso" value="{{$data['an']->Peso}}">
      <input type="hidden" name="DataNascita" id="DataNascita" value="{{$data['DataNascita']}}">
      <input type="hidden" name="DataAnalisi" id="DataNascita" value="{{$data['DataAnalisi']}}">
      <input type="hidden" name="Formule" id="Formule" value="{{$data['Formule']}}">
      <input type="hidden" name="Nome" id="Nome" value="{{$data['Nome']}}">
      <input type="hidden" name="Vsi" id="Vsi" value="{{$data['Vsi']}}">
      <input type="hidden" name="FMP" id="exampleInputEmail1" value="{{$data['FMP']}}">
      <input type="hidden" name="FMP" id="exampleInputEmail1" value="{{$data['FMPP']}}">
      <input type="hidden" name="id" id="exampleInputEmail1" value="{{$data['id']}}">
      <input type="hidden" name="idp" id="exampleInputEmail1" value="{{$data['idp']}}">
      <button type="submit" class="btn btn-primary btn-sm" >Esporta pdf</button>
    </form>

    <button type="button"
      class="btn btn-warning btn-sm mx-2"
      style="height:31px; font-size:0.875rem"
      onclick="window.open('{{ route('Analisi.ReportPro', $data['id']) }}','ReportPro','width=842,height=1191,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes');" >
      Report Pro
    </button>



    <button class="btn btn-success btn-sm mx-2" style="height:31px; font-size:0.875rem" data-toggle="modal"
      data-target="#modal-email">
      Invia Pdf
    </button>
  </div>
</div>

@stop

@section('content')
<!-- INIZIO TABS-->
<div class="row">
  <div class="col-md-12 col-sm-6">
    <div class="card card-primary card-outline card-outline-tabs">
      <div class="card-header p-0 border-bottom-0">
        <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="custom-tabs-four-home-tab" data-toggle="pill" href="#custom-tabs-four-home"
              role="tab" aria-controls="custom-tabs-four-home" aria-selected="true">NUTRI-Dex - HYDRA-Dex - FMI</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="custom-tabs-four-profile-tab" data-toggle="pill" href="#custom-tabs-four-profile"
              role="tab" aria-controls="custom-tabs-four-profile" aria-selected="false">PhA @can('show-biva')-
              Vettoriale @endcan</a>
          </li>
          @can('show-commento')
          <li class="nav-item">
            <a class="nav-link" id="custom-tabs-four-messages-tab" data-toggle="pill" href="#custom-tabs-four-messages"
              role="tab" aria-controls="custom-tabs-four-messages" aria-selected="false">Indici Map</a>
          </li>
          @endcan
          <li class="nav-item">
            <a class="nav-link" id="custom-tabs-four-settings-tab" data-toggle="pill" href="#custom-tabs-four-settings"
              role="tab" aria-controls="custom-tabs-four-settings" aria-selected="false">Masse, Fluidi, Aging</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <div class="tab-content" id="custom-tabs-four-tabContent">
          <div class="tab-pane fade active show" id="custom-tabs-four-home" role="tabpanel"
            aria-labelledby="custom-tabs-four-home-tab" style="height: 400px">
            <div class="row">
              <div class="col-xl-6 col-lg-6 col-sm-6 col-md-12">
                <p><strong>NUTRI-Dex</strong><span id="ValNutri" class="ml-3">00</span></p>
                <canvas id="nutri" width="450" height="100"></canvas>
              </div>

              <div class="col-xl-6 col-lg-6 col-sm-6  col-md-12">
                <p><strong>HYDRA-Dex</strong><span id="ValHydra" class="ml-3">00</span></p>
                <canvas id="hydra" width="450" height="100"></canvas>
              </div>
            </div>
            <div class="row">

              <div class="col-xl-6 col-lg-6 col-sm-6  col-md-12">
                <p><strong>FM-Index</strong><span id="ValFMI" class="ml-3">00</span></p>
                <canvas id="FMI" width="450" height="100"></canvas>
              </div>
              <div class="col-xl-6 col-lg-6 col-sm-6  col-md-12">
                <p style="margin-top: 1px;margin-bottom: 1px;"><strong>ECW%</strong><span id="ValECW"
                    style="margin-left: 10px">{{round($data['an']->ECW/$data['an']->TBW*100,1)}}</span></p>
                <canvas id="ECWPC" data-sx="{{$data['AnDat']->ECW['rangeSX']}}"
                  data-dx="{{$data['AnDat']->ECW['rangeDX']}}"
                  data-val="{{round($data['an']->ECW/$data['an']->TBW*100,1)}}"
                  data-valP="{{round($data['anP']->ECW/$data['anP']->TBW*100,1)}}" width="450" height="100"
                  style="margin-left: 9px; margin-top: 14px;"></canvas>

              </div>
            </div>
            <div class="row mt-3">
              <div class="col-12">
                <div class="card">
                  <div class="card-body">
                    <h6 class="card-title mr-2"><strong>Legenda</strong></h6>
                    <div class="d-flex align-items-center">
                      <div class="mr-4">
                        <span style="background-color: #ff0000; width: 3px; height: 20px; display: inline-block; vertical-align: middle;"></span>
                        <span class="ml-2">Linea rossa: Esame attuale</span>
                      </div>
                      <div>
                        <span style="background-color: #0066ff; width: 3px; height: 20px; display: inline-block; vertical-align: middle;"></span>
                        <span class="ml-2">Linea blu: Esame precedente</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="custom-tabs-four-profile" role="tabpanel"
            aria-labelledby="custom-tabs-four-profile-tab" style="height: 400px">
            <div class="row">
              <div class="col-md-4">
                <div style="height: 400px;width:400px">
                  <canvas id="myChart4" style="position: relative; height:40vh; width:40vw"></canvas>
                </div>
              </div>
              @can('show-biva')
              <div class="col-md-4 mr-4 ml-2">
                <div style="height: 400px;width:400px">
                  <canvas id="BiVa" style="position: relative; height:40vh; width:40vh"></canvas>
                </div>
              </div>
              <div class="col-md-3 ml-2">
                <p>Nel grafico vengono mostrate le ellissi di tolleranza del 95% (linea rossa), 75% (linea azzurra) e
                  50% (linea verde). Il semiasse minore dell'ellisse indica il livello di benessere cellulare (verso
                  sinistra, indica una maggiore BCM massa cellulare corporea mentre verso destra una minore BCM).
                  Il semiasse maggiore dell'ellisse indica l'idratazione: verso la parte superiore del grafico indica
                  ipo o disidratazione mentre verso la parte inferiore indica un eccesso di fluidi fino all'edema.
                </p>
              </div>
              @endcan
            </div>
          </div>
          @can('show-commento')
          <div class="tab-pane fade" id="custom-tabs-four-messages" role="tabpanel"
            aria-labelledby="custom-tabs-four-messages-tab" style="height: 400px">
            <div class="row">
              <div class="col-xl-6 col-lg-6 col-sm-6  col-md-12">
                <p data-toggle="modal" data-target="#modal-Cdex"><strong  >DC - Densità cellulare</strong> <span><i
                      class="text-primary fas fa-info-circle"></i></span></p>
                <canvas id="Cdex" width="450" height="100" 
                data-target="#modal-Cdex" 
                data-cdex="{{$data['an']->BC}}"
                data-cdex-p="{{$data['anP']->BC}}"
                data-eta="{{$data['an']->eta}}"
                data-altezza="{{$data['an']->Altezza}}"
                data-sesso="{{$data['an']->Sesso}}"
                ></canvas>
              </div>
              <div class="col-xl-6 col-lg-6 col-sm-6  col-md-12">
                <p data-toggle="modal" data-target="#modal-EFP"><strong id="qdexv" >Q-Dex</strong> <span><i
                      class="text-primary fas fa-info-circle"></i></span></p>
                <canvas id="BiaDex" data-toggle="modal" data-target="#modal-EFP" width="450" height="100"></canvas>
              </div>

            </div>
            <div class="row mt-4">

              <div class="col-xl-6 col-lg-6 col-sm-6  col-md-12">
                <p data-toggle="modal" data-target="#modal-Rp"><strong >R-Dex - Potenziale di conduzione</strong> <span><i
                  class="text-primary fas fa-info-circle"></i></span></p>
                <canvas id="rp-chart"
                  width="450"
                  height="100"
                  data-rp="{{$data['AnDat']->RPh['val']}}"
                  data-rp-p="{{$data['AnPDat']->RPh['val'] ?? null}}"
                  data-sesso="{{$data['an']->Sesso}}"
                  data-eta="{{$data['an']->eta}}">
                </canvas>
              </div>
              <div class="col-xl-6 col-lg-6 col-sm-6  col-md-12">
                <p  data-toggle="modal" data-target="#modal-Eci"><strong>EM - Efficienza metabolica</strong> <span><i
                  class="text-primary fas fa-info-circle"></i></span></p>
                <canvas id="eci-chart"
                  width="450"
                  height="100"
                  data-eci="{{$data['AnDat']->ECI['val']}}"
                  data-eci-p="{{$data['AnPDat']->ECI['val'] ?? null}}"
                  data-sesso="{{$data['an']->Sesso}}">
                </canvas>
              </div>


            </div>
          </div>
          @endcan
          <div class="tab-pane fade" id="custom-tabs-four-settings" role="tabpanel"
            aria-labelledby="custom-tabs-four-settings-tab" style="height: 400px">
            <div class="row">
              <div class="col-md-2">
                <div style="height: 400px "> <canvas id="myChart1"></canvas></div>

              </div>
              <div class="col-md-2">
                <div style="height: 400px "> <canvas id="myChart2"></canvas></div>

              </div>
              <div class="col-md-3">
                <div style="height: 400px "> <canvas id="myChart3"></canvas></div>
              </div>
              <div class="col-xl-5 col-lg-5 col-sm-5  col-md-12">


                @can('show-commento')
                <p><strong>Aging</strong></p>

                <canvas id="AgingDex" data-eta="{{$data['AnDat']->eta}}" data-etabio="{{$data['AnDat']->etaBio['val']}}"
                  width="450" height="100"></canvas>
                @endcan
              </div>

            </div>
          </div>
        </div>
      </div>
      <!-- /.card -->
    </div>
  </div>
</div>
<!-- FINE TABS-->


@can('show-commento')


<div class="row">

  <div class="col-xl-6 col-lg-6">

    @if($data['an']->Sesso == "F" && $data['vd']=='on' && false)
    <p><strong id="vdexv" data-toggle="modal" data-target="#modal-VDEX">V-Dex</strong> <span><i
          class="text-primary fas fa-info-circle"></i></span></p>
    <canvas id="EfpDex" data-toggle="modal" data-target="#modal-VDEX" width="450" height="100"></canvas>
    @endif

  </div>
</div>
@endcan




<div>

</div>
<div class="row">

  <div class="col-md-4"> </div>
  <div class="col-md-4"> </div>
</div>
<div class="row">
  <div class="col-md-8">
    <div class="card h-100">
      <div class="card-header">
        <h3 class="text-center"> Analisi: {{$data['Cliente']->Nome}} - Genere: {{$data['an']->Sesso}} - Data analisi:
          {{Carbon\Carbon::parse($data['DataAnalisi'])->format('d/m/Y H:i')}}</h3>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-6">
            <div class="row">
              <div class="col-md-5">
                <p><strong>Resistenza:</strong></p>
              </div>
              <div class="col-md-2"><strong>
                  <p id="resistenza">{{$data['an']->Resistenza}}</p>
                </strong></div>
            </div>
            <div class="row">
              <div class="col-md-5">
                <p><strong>Reattanza:</strong></p>
              </div>
              <div class="col-md-2"><strong>
                  <p id="reattanza">{{$data['an']->Reattanza}}</p>
                </strong></div>
            </div>
            <div class="row">
              <div class="col-md-5" data-toggle="modal" data-target="#modal-PA">
                <p><strong> Angolo di fase: </strong><span><i class="text-primary fas fa-info-circle"></i></span></p>
              </div>
              <div class="col-md-2">
                <p><strong id="PA">{{round($data['an']->PA,1)}}</strong></p>
              </div>
            </div>
          </div>


          <div class="col-md-6">
            <div class="row">
              <div class="col-md-5"><strong>
                  <p>Età:</p>
                </strong></div>
              <div class="col-md-2"><strong>
                  <p id="eta">{{$data['an']->eta}}</p>
                </strong></div>
            </div>
            <div class="row">
              <div class="col-md-5"><strong>
                  <p>Altezza:</p>
                </strong></div>
              <div class="col-md-2"><strong>
                  <p id="resistenza">{{$data['an']->Altezza}} cm</p>
                </strong></div>
            </div>
            <div class="row">
              <div class="col-md-5"><strong>
                  <p>Peso:</p>
                </strong></div>
              <div class="col-md-4"><strong>
                  <p id="resistenza">Att: {{round($data['an']->Peso,2)}} kg - Prec: {{round($data['anP']->Peso,2)}} kg
                  </p>
                </strong></div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-header">
        <h3 class="text-center">Note </h3>
      </div>
      <div class="card-body">@livewire('comp-cor.note',['analisi'=>$data['id']])</div>
    </div>
  </div>
</div>
<div class="row">

</div>
<div class="row">
  <div class="col-md-8">
    <h4 class="text-center">Analisi delle masse</h4>
    <table class="table">
      <thead class="thead-light">
        <tr>
          <th scope="col" style="width:40%">Dato</th>
          <th scope="col" style="width:10%">Valore attuale</th>
          <th scope="col">UM</th>
          <th scope="col">%</th>
          <th class="d-md-table-cell" scope="col">Range</th>
          <th scope="col" style="text-align: center;">Precedente</th>
          <th scope="col">UM</th>
        </tr>
      </thead>
      <tbody>

        @cannot('bia-b') <tr>
          <th data-toggle="modal" data-target="#modal-PI2" scope="row">Peso Ideale <span><i
                class="text-primary fas fa-info-circle"></i></span></th>

          <td>{{ is_numeric($data['AnDat']->PIDFFM['val']) ? round($data['AnDat']->PIDFFM['val'], 1) :
            $data['AnDat']->PIDFFM['val'] }}</td>
          <td>kg</td>
          <td></td>
          <td class="d-none d-md-table-cell"></td>
          <td style="text-align: center;">{{ is_numeric($data['AnPDat']->PIDFFM['val']) ? round($data['AnPDat']->PIDFFM['val'], 1) :
            $data['AnPDat']->PIDFFM['val'] }}</td>
          <td>kg</td>
        </tr>
        @endcannot
        <tr>
          <th scope="row">Altezza</th>
          <td>{{round($data['an']->Altezza,1)}}</td>
          <td>cm</td>
          <td></td>
          <td class="d-none d-md-table-cell"> </td>
          <td style="text-align: center;">{{round($data['anP']->Altezza,1)}}</td>
          <td>cm</td>
        </tr>
        <tr>
          <th scope="row">Peso</th>
          <td>{{round($data['an']->Peso,1)}}</td>
          <td>Kg</td>
          <td></td>
          <td class="d-none d-md-table-cell"></td>
          <td style="text-align: center;">{{round($data['anP']->Peso,1)}}</td>
          <td>Kg</td>
        </tr>

        <tr>
          <th scope="row">Resistenza</th>
          <td>{{round($data['an']->Resistenza,1)}}</td>
          <td>ohm</td>
          <td></td>
          <td class="d-none d-md-table-cell"></td>
          <td style="text-align: center;">{{round($data['anP']->Resistenza,1)}}</td>
          <td>ohm</td>
        </tr>
        <tr>
          <th scope="row">Reattanza</th>
          <td>{{round($data['an']->Reattanza,1)}}</td>
          <td>ohm</td>
          <td></td>
          <td class="d-none d-md-table-cell"></td>
          <td style="text-align: center;">{{round($data['anP']->Reattanza,1)}}</td>
          <td>ohm</td>
        </tr>
        <tr>
          <th scope="row">Pa Angolo di fase</th>
          <td>{{round($data['an']->PA,1)}}</td>
          <td>º</td>
          <td></td>
          <td class="d-none d-md-table-cell"></td>
          <td style="text-align: center;">{{round($data['anP']->PA,1)}}</td>
          <td>º</td>
        </tr>
        @cannot('bia-b') <tr>
          <th data-toggle="modal" data-target="#modal-Cdex" scope="row">C-Dex <span><i
                class="text-primary fas fa-info-circle"></i></span></th>
          <td id="C-dex">{{round($data['an']->BC)}}</td>
          <td>pF</td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->BC['range']}}</td>
          <td id="C-dexP" style="text-align: center;">{{round($data['anP']->BC)}}</td>
          <td>pF</td>
        </tr>
        <tr>
          <th data-toggle="modal" data-target="#modal-Cm" scope="row">Cm <span><i
                class="text-primary fas fa-info-circle"></i></span></th>
          <td>{{round($data['an']->CM,2)}}</td>
          <td></td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->CM['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->CM,2)}}</td>
          <td>pF</td>
        </tr>

        <tr>
          <th data-toggle="modal" data-target="#modal-ecl" scope="row">ECL - Livello di efficienza cellulare <span><i
                class="text-primary fas fa-info-circle"></i></span></th>
          <td>{{round($data['an']->ECL)}}</td>
          <td>pF</td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->ECL['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->ECL)}}</td>
          <td>pF</td>
        </tr>
        <tr>
          <th data-toggle="modal" data-target="#modal-BiaIndex" scope="row">Bia-Index <span><i
                class="text-primary fas fa-info-circle"></i></span></th>
          <td id="BiaVal">{{round($data['an']->BiaIndex,1)}}</td>
          <td></td>
          <td></td>
          <td class="d-none d-md-table-cell"></td>
          <td id="BiaVal" style="text-align: center;">{{round($data['anP']->BiaIndex,1)}}</td>
          <td></td>
        </tr>
        @endcannot
        <tr>
          <th data-toggle="modal" data-target="#modal-BCM" scope="row">BCM - massa cellulare <span><i
                class="text-primary fas fa-info-circle"></i></span></th>
          <td>{{round($data['an']->BCM,1)}}</td>
          <td>kg</td>
          <td>{{round($data['an']->BCM/$data['an']->Peso*100,1)}}</td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->BCM['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->BCM,1)}}</td> 
          <td>kg</td>
        </tr>
        <tr>
          <th scope="row">BCMm - massa cellulare minima </th>
          <td>{{round($data['an']->BCMM,2)}}</td>
          <td>kg</td>
          <td></td>
          <td class="d-none d-md-table-cell">-</td>
          <td style="text-align: center;">{{round($data['anP']->BCMM,1)}}</td>
          <td>kg</td>
        </tr>
        <tr>
          <th scope="row">BCMI</th>
          <td>{{round($data['an']->BCMht2,1)}}</td>
          <td>kg/m<sup>2</sup></td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->BCMht2['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->BCMht2,1)}}</td>
          <td>kg/m<sup>2</sup></td>
        </tr>
        <tr>
          <th scope="row">BCM/FFM %</th>
          <td>{{round($data['an']->BCMFFM*100,1)}}</td>
          <td>%</td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->BCMFFM['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->BCMFFM*100,1)}}</td>
          <td>%</td>
        </tr>
        <tr>
          <th scope="row">ECM - massa extra cellulare</th>
          <td>{{round($data['an']->ECM,1)}}</td>
          <td>kg</td>
          <td>{{round($data['an']->ECM/$data['an']->Peso*100,1)}}</td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->ECM['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->ECM,1)}}</td>
          <td>kg</td>
        </tr>
        <tr>
          <th data-toggle="modal" data-target="#modal-ECMBCM" scope="row">ECM/BCM <span><i
                class="text-primary fas fa-info-circle"></i></span></th>
          <td>{{round($data['an']->ECMBCM,2)}}</td>
          <td></td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->ECMBCM['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->ECMBCM,2)}}</td>
          <td></td>
        </tr>
        <tr>
          <th scope="row">ASMM - massa muscolare appendicolare</th>
          <td>{{round($data['an']->ASMM,1)}}</td>
          <td>kg</td>
          <td></td>
          <td class="d-none d-md-table-cell"></td>
          <td style="text-align: center;">{{round($data['anP']->ASMM,1)}}</td>
          <td>kg</td>
        </tr>
        @can('show-commento')
        <tr>
          <th scope="row">ASMMI - indice di massa muscolare appendicolare</th>
          <td>{{round($data['an']->ASMMI,1)}}</td>
          <td>kg/m<sup>2</sup></td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->ASMMI['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->ASMMI,1)}}</td>
          <td>kg/m<sup>2</sup></td>
        </tr>
        @endcan
        <tr>
          <th scope="row">SMM - massa muscolare scheletrica</th>
          <td>{{round($data['an']->SM,1)}}</td>
          <td>kg</td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->SM['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->SM,1)}}</td>
          <td>kg</td>
        </tr>
        <tr>
          <th scope="row">SMI - indice di massa muscolare </th>
          <td>{{round($data['an']->SMI,1)}}</td>
          <td>kg/m<sup>2</sup></td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->SMI['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->SMI,1)}}</td>
          <td>kg/m<sup>2</sup></td>
        </tr>
        <tr>
          <th scope="row">FFM - massa magra</th>
          <td>{{round($data['an']->FFM,1)}}</td>
          <td>kg</td>
          <td>{{round($data['an']->FFM/$data['an']->Peso*100,1)}}</td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->FFM['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->FFM,1)}}</td>
          <td>kg</td>
        </tr>
        <tr>
          <th scope="row">FFMI - indice di massa magra</th>
          <td>{{round($data['an']->FFMht2,1)}}</td>
          <td>kg/m<sup>2</sup></td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->FFMht2['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->FFMht2,1)}}</td>
          <td>kg/m<sup>2</sup></td>
        </tr>
        <tr>
          <th data-toggle="modal" data-target="#modal-FMP" scope="row">FM - massa grassa <span><i
                class="text-primary fas fa-info-circle"></i></span></th>
          <td>{{round($data['an']->FM,1)}}</td>
          <td>kg</td>
          <td style="text-align: center;">{{round($data['an']->FM/$data['an']->Peso*100,1)}}@if ($data['CustomFm'] == 1)

            <i class="fas fa-child text-primary" data-bs-toggle="tooltip" data-bs-placement="top"
              title="FM% Inserita manualmente"></i>
            @endif
          </td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->FM['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->FM,1)}}</td>
          <td>kg</td>
        </tr>
        <tr>
          <th scope="row">FMI - indice di massa grassa</th>
          <td id="fmid">{{round($data['an']->FMI,1)}}</td>
          <td>kg/m<sup>2</sup></td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->FMI['range']}}</td>
          <td id="fmidP" style="text-align: center;">{{round($data['anP']->FMI,1)}}</td>
          <td>kg/m<sup>2</sup></td>
        </tr>
        <tr>
          <th scope="row">FM/FFM</th>
          <td>{{round($data['an']->FMFFM,2)}}</td>
          <td></td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->FMFFM['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->FMFFM,2)}}</td>
          <td></td>
        </tr>
        <tr>
          <th scope="row">BMI</th>
          <td>{{round($data['an']->BMI,1)}}</td>
          <td>kg/m<sup>2</sup></td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->BMI['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->BMI,1)}}</td>
          <td>kg/m<sup>2</sup></td>
        </tr>
        <tr>
          <th scope="row">BSA - superfice corporea </th>
          <td>{{round($data['an']->BCA,2)}}</td>
          <td>m<sup>2</sup></td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->BCA['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->BCA,2)}}</td>
          <td>m<sup>2</sup></td>
        </tr>
        <tr>
          <th scope="row">Nae/Ke - sodio potassio scambiabile</th>
          <td>{{round($data['an']->CMP,2)}}</td>
          <td></td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->CMP['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->CMP,2)}}</td>
          <td></td>
        </tr>
        <tr>
          <th scope="row">RMR - dispendio medio a riposo</th>
          <td>{{round($data['an']->BMR)}}</td>
          <td>Kcal</td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->BMR['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->BMR)}}</td>
          <td>Kcal</td>
        </tr>

        <tr>
          <th scope="row">TDEE</th>
          <td>{{round($data['an']->DEE)}}</td>
          <td>Kcal</td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->DEE['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->DEE)}}</td>
          <td>Kcal</td>
        </tr>

        <tr>
          <th scope="row">LAF</th>
          <td>{{round($data['an']->LAF,2)}}</td>
          <td></td>
          <td></td>
          <td class="d-none d-md-table-cell"></td>
          <td style="text-align: center;">{{round($data['an']->LAF,2)}}</td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <h4 class="text-center">Analisi dei fluidi</h4>
    <table class="table">
      <thead class="thead-light">
        <tr>
          <th scope="col" style="width:40%">Dato</th>
          <th scope="col" style="width:10%">Valore attuale</th>
          <th scope="col">UM</th>
          <th scope="col">%</th>
          <th class="d-md-table-cell" scope="col">Range</th>
          <th scope="col" style="text-align: center;">Precedente</th>
          <th scope="col">UM</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">TBW</th>
          <td id="TBW"> {{round($data['an']->TBW,1)}}</td>
          <td>lt</td>
          <td>{{round($data['an']->TBW/$data['an']->Peso*100,1)}}</td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->TBW['range']}}</td>
          <td id="TBW" style="text-align: center;"> {{round($data['anP']->TBW,1)}} </td>
          <td>lt</td>
        </tr>
        <tr>
          <th scope="row">Hydration marker</th>
          <td id="TBW"> {{round($data['an']->TBW/$data['an']->FFM,3)}}</td>
          <td></td>
          <td></td>
          <td class="d-none d-md-table-cell">0,68 - 0,76</td>
          <td id="TBW" style="text-align: center;"> {{round($data['anP']->TBW/$data['anP']->FFM,3)}}</td>
          <td></td>
        </tr>
        <tr>
          <th scope="row">ECW</th>
          <td id="ECW">{{round($data['an']->ECW,1)}}</td>
          <td>lt</td>
          <td id="ECWP">{{round($data['ECWP'],1)}} %</td>
          <td class="d-none d-md-table-cell" id="ECWrange">{{$data['AnDat']->ECW['range']}}</td>
          <td id="ECW" style="text-align: center;">{{round($data['anP']->ECW,1)}}<span class="ml-2">({{round($data['ECWPP'],1)}} %)</span></td>
          <td>lt</td>
        </tr>
        <tr>
          <th scope="row">ECW/Ht</th>
          <td>{{round($data['an']->ECWHT,1)}}</td>
          <td>lt/m</td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->ECWHT['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->ECWHT,1)}}</td>
          <td>lt/m</td>
        </tr>
        <tr>
          <th scope="row">ICW</th>

          <td>{{round($data['an']->ICW,1)}}</td>
          <td>lt</td>
          <td>{{round($data['ICWP'],1)}} %</td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->ICW['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->ICW,1)}}<span class="ml-2">({{round($data['ICWPP'],1)}} %)</span></td>
          <td>lt</td>
        </tr>
        <tr>
          <th scope="row">ECW/BCM</th>
          <td>{{round($data['an']->ECW/$data['an']->BCM,2)}}</td>
          <td></td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->EcwBCM['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->ECW/$data['anP']->BCM,2)}}</td>
          <td></td>
        </tr>
        <tr>
          <th data-toggle="modal" data-target="#modal-ECWICW" scope="row">ECW/ICW <span><i
                class="text-primary fas fa-info-circle"></i></span> </th>
          <td>{{round($data['an']->ECWICW,2)}}</td>
          <td></td>
          <td></td>
          <td class="d-none d-md-table-cell">{{$data['AnDat']->ECWICW['range']}}</td>
          <td style="text-align: center;">{{round($data['anP']->ECWICW,2)}}</td>  
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
  @can("show-commento")


  <div class="col-md-4 mt-2">

    <div class="card  d-print-none">
      <div class="card-header">
        <h3 class="text-center">Osservazioni</h3>
      </div>
      <div class="body">
        <textarea class="form-control" rows="40">{{$data['comm']}}</textarea>
      </div>
    </div>
  </div>
  @endcan
</div>

<div id="modal-PI" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Peso Ideale</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Sebbene il peso corporeo ideale sia a volte stimato su base estetica, in realtà questo parametro è stato
          effettivamente introdotto per valutare meglio gli obiettivi e il possibile livello di benessere generale del
          soggetto.
          Tuttavia in ambito sportivo non andrebbe preso in considerazione in quanto per alcune specialità ove la
          finalità è l'aumento della massa muscolare il peso corporeo è spesso superiore al peso ideale, mentre per
          altre discipline (in particolare quelle di resistenza/endurance) può addirittura essere inferiore.
        </p>
        <p> Ricordiamo che il valore del "peso ideale" non è un dato perfetto in quanto non considera le percentuali di
          FM grasso corporeo e di BCM Massa cellulare/muscolare nel corpo di una persona. In modo analogo al BMI è
          possibile che atleti in buona forma fisica vengano considerati in sovrappeso in base al loro peso corporeo.
          Così essere al di sopra o al di sotto al proprio peso ideale ed essere perfettamente in salute.
        </p>
        <strong>Universal equation for estimating ideal body weight and body weight at any BMI</strong>
        <p> Courtney M Peterson, Diana M Thomas, George L Blackburn, and Steven B Heymsfield</p>
        <p style="font-size: 11px"> John S McIlhenny Skeletal Muscle Physiology Laboratory and Metabolism and Body
          Composition Laboratory, Pennington Biomedical Research Center, Louisiana State University System, Baton Rouge,
          LA; Center for Quantitative Obesity Research, Montclair State University, Montclair, NJ; Center for the Study
          of Nutrition Medicine, Beth Israel Deaconess Medical Center, Boston, MA; and Division of Nutrition, Harvard
          Medical School, Boston, MA
        </p>
      </div>
    </div>
  </div>
</div>

<div id="modal-PI2" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Peso Ideale</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Sebbene il peso corporeo ideale sia a volte stimato su base estetica, in realtà questo parametro è stato
          effettivamente introdotto per valutare meglio gli obiettivi e il possibile livello di benessere generale del
          soggetto.
          Tuttavia in ambito sportivo non andrebbe preso in considerazione in quanto per alcune specialità ove la
          finalità è l'aumento della massa muscolare il peso corporeo è spesso superiore al peso ideale, mentre per
          altre discipline (in particolare quelle di resistenza/endurance) può addirittura essere inferiore.
        </p>
        <p> Ricordiamo che il valore del "peso ideale" non è un dato perfetto in quanto non considera ad esempio la
          percentuale di BCM Massa cellulare/muscolare del soggetto. In modo analogo al BMI, è possibile che atleti in
          buona forma fisica vengano considerati in sovrappeso in base al loro peso corporeo. Il soggetto potrebbe
          risultare al di sopra o al di sotto del proprio peso ideale ed essere comunque perfettamente in salute.
        </p>

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

<div id="modal-PA" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Angolo Di fase</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
          L'angolo di fase è un metodo lineare per analizzare il rapporto tra la resistenza elettrica (Rz) e la
          reattanza (Xc) (Fluidi e Membrane cellulari). E' un marker ampiamente utilizzato per valutare lo stato
          nutrizionale in molte popolazioni denutrite e il valore può aiutare a identificare la malnutrizione
          precocemente prima dei test di laboratorio.
          L' Angolo di fase può essere considerato un ottimo indicatore dello stato fisico e dell'integrità cellulare.
          Basse valori di Angolo di Fase φ sembrano essere coerenti con una bassa Reattanza, deperimento cellulare o
          rottura della permeabilità della membrana cellulare.

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

<div id="modal-ecl" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">ECL - Livello di efficienza cellulare</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Indice bioelettrico di carattere puramente esplorativo che può indicare il livello di efficienza
          cellulare.<br /> Può essere utilizzato come indice di tentenza - Valori auspicabili nei maschi > 210 e nelle
          femmine > 170 </p>
      </div>
    </div>
  </div>
</div>

<div id="modal-ECMBCM" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">ECM/BCM</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Oltre all'angolo di fase PhA e alla massa cellulare in Kg BCM, l'indice ECM/BCM è un parametro importante per
          valutare lo stato metabolico e nutrizionale. Nelle persone sane e ben nutrite,
          la BCM dovrebbe essere sempre maggiore rispetto alla ECM, quindi con un indice < 1. Un aumento dell'indice
            ECM/BCM può essere correlato con la riduzione dell'angolo di fase PhA ed eventualmente utilizzato per
            intercettare precocemente eventuale riduzione del livello di benessere nutrizionale in fase iniziale. Uno
            dei primi segnali dell'abbassamento del livello di benessere nutrizionale è dato dall'aumento di questo
            parametro, causato dal catabolismo della BCM, dall'aumento di acqua extracellulare della ECM per eccesso di
            insulina nel sangue o per altri motivi. Il rapporto ECM/BCM può essere considerato un buon marker in quanto
            la variazione di tale indice è indipendente dalle variazioni del peso corporeo. Ricordiamo inoltre che una
            riduzione del rapporto ECM/BCM può indicare che l'eventuale dimagrimento sta avvenendo in modo equilibrato
            mentre il relativo aumento può indicare che la perdita di peso sta avvenendo in modo squilibrato a carico
            della BCM. </p>
      </div>
    </div>
  </div>
</div>

<div id="modal-Cdex" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">DC - Densità cellulare</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>La Densità Cellulare (DC) è un parametro elettrofisiologico diretto che esprime la concentrazione e la compattezza della massa cellulare attiva all'interno dei tessuti. A differenza del semplice dato sulla BCM, la DC ne valuta la qualità strutturale e l'integrità. È un ottimo marker per monitorare lo stato di vitalità dei tessuti. Un calo della DC può segnalare precocemente processi di sarcopenia, malnutrizione proteica o una perdita di integrità delle membrane cellulari, spesso prima che si verifichi una variazione significativa del peso corporeo.</p>
      </div>
    </div>
  </div>
</div>

<div id="modal-Cm" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Cm</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Capacità della membrana è un parametro bioelettrico che può descrivere la quantità di corrente derivata dal
          flusso di ioni elettrici che attraversa la membrana cellulare.<br />
          Può riflettere l'integrità della membrana cellulare.
        </p>
      </div>
    </div>
  </div>
</div>

<div id="modal-BiaIndex" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Bia-Index</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Bia-Index è un indicatore bioelettrico legato alla permeabiità delle membrane cellulari e alla distribuzione
          dei fluidi corporei.<br />Tale valore può essere correlato al livello infiammatorio </p>
      </div>
    </div>
  </div>
</div>

<div id="modal-Rp" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">PC - Potenziale di conduzione</h5>
      </div>
      <div class="modal-body">
        <p><strong>Il Potenziale di conduzione</strong> è un parametro bioelettrico che misura la reattività elettrica reale dell’ambiente interstiziale in cui avvengono gli scambi metabolici.</strong>
          A differenza delle comuni stime volumetriche (come la ECW%), questo parametro rileva la capacità di trasporto del segnale: esso dipende non solo dalla presenza di liquidi, ma soprattutto dalla densità degli elettroliti, dal pH e dalla viscosità della matrice extracellulare.</p>
          <p>Interpretazione funzionale e sportiva</p>
          <ul>
         <li> <strong>Valori ridotti (-10 o inferiori - alta conduzione)</strong> sono compatibili con un ambiente interstiziale "iper-reattivo". È tipico delle fasi di picco prestativo (iper-idratazione funzionale), ma anche di stati infiammatori acuti, acidosi o alterazioni della permeabilità capillare. In questo stato, i segnali e i nutrienti viaggiano velocemente, ma il sistema è vicino alla saturazione.
         <li> <strong>Valori elevati (+10 o superiori – bassa conduzione)</strong>sono compatibili con un ambiente "inerte" o resistente. Può indicare disidratazione, stasi circolatoria, o una matrice extracellulare densa e fibrotica (tossicosi cronica). Gli scambi tra sangue e cellule sono rallentati, ostacolando il recupero.
         </li>
         </ul>
        <p><strong>Perché è un parametro importante</strong></p>
        <p>Il potenziale di conduzione spiega le discrepanze tra la stima dei fluidi e i dati volumetrici. Se la stima dei fluidi appare normale ma il Potenziale di Conduzione è fuori range, significa che la qualità (concentrazione ionica e pH) dei fluidi è alterata. Può essere considerato un parametro della “pulizia e dell'efficienza” dei flussi extracellulari.
          </p>
      </div>
    </div>
  </div>
</div>
<div id="modal-Eci" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Efficienza metabolica</h5>
      </div>
      <div class="modal-body">
        <p><strong>L'efficienza metabolica</strong> è un indice bioelettrico che esprime la capacità delle cellule di mantenere i gradienti elettrici e gestire l'energia. Mentre le stime della BCM descrivono la quantità di tessuto presente, questo parametro ne descrive la qualità funzionale. Rappresenta il rendimento reale della cellula nel trasformare le risorse in potenziale vitale e prestativo.</p>
          <p><strong>Interpretazione funzionale e sportiva</strong></p>
          <ul>
          <li><strong>Valori elevati: (+10 o superiori)</strong> sono compatibili con membrane cellulari integre e altamente performanti. La cellula è in grado di trattenere i nutrienti, espellere le scorie e rispondere rapidamente agli stimoli nervosi e ormonali. È il segno di uno stato di salute ottimale o di una super-compensazione atletica riuscita.</li>
          <li><strong>Valori ridotti: (-10 inferiori)</strong> sono compatibili con uno "stress di membrana". Anche in presenza di molta massa cellulare/muscolare, un valore ridotto di Efficienza metabolica può indicare che le cellule stanno sprecando energia per mantenere l'equilibrio interno. </li>
          È comune in caso di stanchezza cronica, disfunzioni metaboliche (es. ipotiroidismo), infiammazione sistemica o sovrallenamento.
          </ul>
         <p><strong>Perché è un parametro importante</strong></p>
          <p>L'efficienza metabolica è il parametro che aiuta a capire perché un soggetto con molta massa muscolare (BCM elevata) possa sentirsi stanco o avere performance scadenti. Se EM è ridotta, il professionista deve dare priorità al recupero cellulare e alla riduzione dell'infiammazione piuttosto che all'aumento dei carichi o della massa.</p>
          </p>
      </div>
    </div>
  </div>
</div>

<div id="modal-BCM" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">BCM</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>La massa cellulare corporea BCM è una componente della FFM massa magra corporea.
          Rappresenta tutte le cellule coinvolte nei vari processi metabolici e che determinano il tasso metabolico di
          base. La BCM è costituita da cellule muscolari scheletriche, muscoli lisci, miocardio, organi interni,
          apparato digerente, sangue, ghiandole e sistema nervoso.
          Il valore individuale di BCM è determinato da fattori genetici, età e condizione fisica.
          La quota di BCM in relazione alla FFM massa magra dovrebbe essere >/= al 50/53% negli uomini e circa 48/55%
          nelle donne.
          La BCM può essere anche utilizzata nella valutazione del consumo energetico, determinando il fabbisogno
          calorico dell'organismo.
          La stima della BCM può essere molto importante per analizzare il livello di benessere nutrizionale. Il
          mantenimento della BCM ad un determinato livello può avere un effetto positivo sul benessere fisico della
          persona e rappresenta un importante obiettivo in tutte le tipologie di intervento.
          Parallelamente può essere utile valutare il livello di BCMI ottenuto dai kg di BCM normalizzati con l'altezza
          del soggetto.
        </p>
      </div>
    </div>
  </div>
</div>

<div id="modal-BMD" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">BMD</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>BMD g/cm2 è un parametro esplorativo che può indicare la tendenza/presenza di osteopenia (riduzione della
          densità minerale ossea). Tale condizione può presentarsi a partire dai 50 anni ed in particolare nelle donne.
          Generalmente l'osteopenia è asintomatica.
        </p>
      </div>
    </div>
  </div>
</div>

<div id="modal-ECWICW" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">ECW/ICW</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>L'acqua totale TBW è composta prevalentemente dal 57% di acqua Intracellulare ICW e da circa il 43%
          extracellulare (ECW). La quantità di l'acqua intracellulare è determinata principalmente dalla massa
          cellulare/muscolare BCM.
          In presenza di un equilibrio tra le due componenti l'indice ECW/ICW è compreso tra 0,6 e 0,8. Nel caso di
          alterazioni cataboliche con riduzione della BCM, può verificarsi un aumento dei fluidi compensativo
          extracellulare, con indice in aumento.
        </p>
      </div>
    </div>
  </div>
</div>


<div id="modal-FMP" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">FM% intervalli di riferimento</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table class="table table-sm table-striped">
          <thead>
            <tr>
              <th style="width: 10px">Età</th>
              <th>Maschio Minumum</th>
              <th>Maschio Maximum</th>
              <th>Femmina Minumum</th>
              <th>Femmina Maximum</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>7</td>
              <td>13.0</td>
              <td>20.0</td>
              <td>15.0</td>
              <td>25.0</td>
            </tr>
            <tr>
              <td>8</td>
              <td>13.0</td>
              <td>21.0</td>
              <td>15.0</td>
              <td>26.0</td>
            </tr>
            <tr>
              <td>9</td>
              <td>13.0</td>
              <td>22.0</td>
              <td>16.0</td>
              <td>27.0</td>
            </tr>
            <tr>
              <td>10</td>
              <td>13.0</td>
              <td>23.0</td>
              <td>16.0</td>
              <td>28.0</td>
            </tr>
            <tr>
              <td>11</td>
              <td>13.0</td>
              <td>23.0</td>
              <td>16.0</td>
              <td>29.0</td>
            </tr>
            <tr>
              <td>12</td>
              <td>13.0</td>
              <td>23.0</td>
              <td>16.0</td>
              <td>29.0</td>
            </tr>
            <tr>
              <td>13</td>
              <td>12.0</td>
              <td>22.0</td>
              <td>16.0</td>
              <td>29.0</td>
            </tr>
            <tr>
              <td>14</td>
              <td>12.0</td>
              <td>21.0</td>
              <td>16.0</td>
              <td>30.0</td>
            </tr>
            <tr>
              <td>15</td>
              <td>11.0</td>
              <td>21.0</td>
              <td>16.0</td>
              <td>30.0</td>
            </tr>
            <tr>
              <td>16</td>
              <td>10.0</td>
              <td>20.0</td>
              <td>16.0</td>
              <td>30.0</td>
            </tr>
            <tr>
              <td>17</td>
              <td>10.0</td>
              <td>20.0</td>
              <td>16.0</td>
              <td>30.0</td>
            </tr>
            <tr>
              <td>18</td>
              <td>10.0</td>
              <td>20.0</td>
              <td>17.0</td>
              <td>31.0</td>
            </tr>
            <tr>
              <td>19</td>
              <td>15.0</td>
              <td>20.0</td>
              <td>19.0</td>
              <td>32.0</td>
            </tr>
            <tr>
              <td>20-39</td>
              <td>15.0</td>
              <td>20.0</td>
              <td>21.0</td>
              <td>33.0</td>
            </tr>
            <tr>
              <td>40-59</td>
              <td>15.0</td>
              <td>22.0</td>
              <td>23.0</td>
              <td>34.0</td>
            </tr>
            <tr>
              <td>60-79</td>
              <td>15.0</td>
              <td>25.0</td>
              <td>24.0</td>
              <td>36.0</td>
            </tr>



          </tbody>

        </table>
        <h6>Gallagher D International Journal of Obesity</h6>

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

<div id="modal-EFP" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Q-Dex</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Indice bioelettrico esplorativo riportato su una scala bidirezionale che può essere di aiuto nella
          valutazione delle componenti intra ed extracellulari senza l'utilizzo dei dati antropometrici del soggetto.
          La zona centrale da -10 a + 10 rappresenta la media/normalità , ponendo una particolare attenzione su quei
          soggetti che si avvicinano a -10. La zona rossa a sinistra è riconducibile ad una ridotta condizione di
          benessere , la zona a destra contraddistinta con il celeste può essere riconducibile a condizioni di
          ipo/disidratazione o elevata massa muscolare.
          Tale indice può essere utile per identificare ulteriormente il livello di benessere nutrizionale, la tendenza
          a ritenere liquidi, l'equilibrio cellulare.
        </p>
      </div>
    </div>
  </div>
</div>

<div id="modal-aging" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Aging</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Ognuno di noi ha due età: un'età definita "cronologica" in funzione della data di nascita ed un'età
          "fenotipica" o "biologica" rispetto ai livelli medi di fitness o salute.
          Il processo di invecchiamento biologico non è costante e sembra accelerare periodicamente, con incrementi
          maggiori che si possono verificare in media, intorno ai 35, 60 e 78 anni.
        </p>
      </div>
    </div>
  </div>
</div>

<div id="modal-VDEX" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">VDEX-Dex</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
          Indice esplorativo per la valutazione della compliance venosa e dell'eventuale tendenza/presenza di
          alterazioni della circolazione venosa/arteriosa.
          L'indice di compliance venosa sfrutta la tecnologia BIA-Dex® che attraverso l'analisi dei valori di Rz
          Resistenza, Xc Reattanza e PhA Angolo di Fase consente di elaborare e visualizzare un indice rappresentato da
          una scala bidirezionale facilmente interpretabile.


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

<div id="modal-email" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Invia Report</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body text-center">
        @livewire('PdfReport',['data'=>$data,'tipo'=>'TotalBody'])


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


@stop

@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css"
  integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
  @media (max-width: 767px) {
    table {
      font-size: 0.8rem;
    }
  }

  .mSidebar {
    position: relative;
    right: 0px;
    top: 0px;
    -webkit-transition: all 500ms cubic-bezier(0.255, 1, 0.44, 1);
    /* older webkit */
    -webkit-transition: all 500ms cubic-bezier(0.255, 1.225, 0.44, 1.32);
    -moz-transition: all 500ms cubic-bezier(0.255, 1.225, 0.44, 1.32);
    -o-transition: all 500ms cubic-bezier(0.255, 1.225, 0.44, 1.32);
    transition: all 500ms cubic-bezier(0.255, 1.225, 0.44, 1.32);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.255, 1, 0.44, 1);
    /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.255, 1.225, 0.44, 1.32);
    -moz-transition-timing-function: cubic-bezier(0.255, 1.225, 0.44, 1.32);
    -o-transition-timing-function: cubic-bezier(0.255, 1.225, 0.44, 1.32);
    transition-timing-function: cubic-bezier(0.255, 1.225, 0.44, 1.32);
    /* custom */
  }
</style>
@stop





@php
if($data['an']->Sesso == "M")
{
@endphp
@section('js')

<script src="{{ asset('js/ecwp.js')}}"></script>
<script src="{{ URL::asset('/js/tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
  integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  console.log("devicew")
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    console.log(width);

  $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    var top =scrollTop - 1200
    if(top>0  && window.innerWidth>900)
    {
        $('.mSidebar').css( "top", top );
    }else{
        $('.mSidebar').css( "top", 0 );
    }

});
</script>
<script>
  $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
//$request->Resistenza, $request->Reattanza, $request->Altezza, $request->Sesso, $request->Peso,$request->DataNascita,$request->LAF
    $( "#esportaPDf" ).click(function() {

        $.post( "{{route('Analisi.PdfTotal')}}", {  Resistenza: $( "#res" ).val(),
                                                    Reattanza: $( "#rea" ).val(),
                                                    Altezza: $( "#Altezza" ).val(),
                                                    Sesso: $( "#Sesso" ).val(),
                                                    Peso: $( "#Peso" ).val(),
                                                    DataNascita: $( "#DataNascita" ).val(),
                                                    LAF: $( "#Laf" ).val(),
                                                    Formule: $( "#Formule" ).val(),


                                                })
  .done(function( data ) {
    alert( "Data Loaded: " + data );
  });


});
</script>
<script src="{{ asset('js/Nutri.js')}}"></script>
<script src="{{ asset('js/Hydra.js')}}"></script>
<script src="{{ asset('js/FMI.js')}}"></script>
<script src="{{ asset('js/Cdex.js')}}"></script>
<script src="{{ asset('js/BiaIndex.js')}}"></script>
<script src="{{ asset('js/aging.js')}}"></script>
<script src="{{ asset('js/Rp.js')}}"></script>
<script src="{{ asset('js/ECI.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.js"
  integrity="sha512-es3XL5vwq08UWKA+Fp6tZVTcJ4Kh25GsgsCSkBbPlX6QmDn3YJX0yhUVhPYQUoPX/gUFXf7uH0YtuZHGPj4iHA=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  const ctx1 = document.getElementById('myChart1');
    const myChart1 = new Chart(ctx1, {
  type: 'bar',
  data: {
    labels: [""],
    datasets: [{
      label: 'FAT',
      backgroundColor: "#F5CF35",
      datalabels: {
        color: '#000000',
        formatter: (item) => {
                return '     FAT\n '+item + ' ' + "kg";
              }
      },
      data: [{{round($data['an']->FM,1)}}],
    }, {
      label: 'FFM',
      backgroundColor: "#B7FA8E",
      datalabels: {
        color: '#000000',
        formatter: (item) => {
                return '     FFM\n '+item + ' ' + "kg";
              }
      },
      data: [{{round($data['an']->FFM,1)}}],
    }],
  },

  plugins: [ChartDataLabels],
  options: {
    responsive: true,
    maintainAspectRatio: false,

    plugins: {
        legend:{
            display:false,
        },
      title: {
        display: false,
        text: 'Chart.js Bar Chart - Stacked'
      },
    },

    scales: {
      x: {

        stacked: true,
      },
      y: {
        max:{{round($data['an']->Peso,1)}},
        stacked: true,

      }
    }
  }

});

const ctx2 = document.getElementById('myChart2');
    const myChart2 = new Chart(ctx2, {
  type: 'bar',
  data: {
    labels: [""],
    datasets: [{
      label: 'FAT',
      backgroundColor: "#F5CF35",
      datalabels: {
        color: '#000000',
        formatter: (item) => {
                return '     FAT\n '+item + ' ' + "kg";
              }
      },
      data: [{{round($data['an']->FM,1)}}],
    },  {
      label: 'BCM',
      backgroundColor: "#D64D3E",
      datalabels: {
        color: '#000000',
        formatter: (item) => {
                return '     BCM\n '+item + ' ' + "kg";
              }
      },
      data: [{{round($data['an']->BCM,1)}}],
    }, {
      label: 'ECM',
      backgroundColor: "#F5B87A",
      datalabels: {
        color: '#000000',
        formatter: (item) => {
                return '     ECM\n '+item + ' ' + "kg";
              }
      },
      data: [{{round($data['an']->ECM,1)}}],
    }],
  },

  plugins: [ChartDataLabels],
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend:{
            display:false
        },
      title: {
        display: false,
        text: 'Chart.js Bar Chart - Stacked'
      },
    },

    scales: {
      x: {
        stacked: true,
      },
      y: {
        max:{{round($data['an']->Peso,1)}},
        stacked: true,

      }
    }
  }

});


  @can('show-biva')
  const ctxBiva = document.getElementById('BiVa').getContext('2d');
  // Funzione per mostrare le coordinate del mouse
  ctxBiva.canvas.addEventListener('mousemove', function(event) {
    const rect = ctxBiva.canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    // Converti le coordinate del canvas in coordinate del grafico
    const xValue = Biva.scales.x.getValueForPixel(x);
    const yValue = Biva.scales.y.getValueForPixel(y);

    if(xValue && yValue) {
      ctxBiva.canvas.title = `X: ${xValue.toFixed(1)}, Y: ${yValue.toFixed(1)}`;
    }
  });

  const Biva = new Chart(ctxBiva, {
    type: 'scatter',
    data: {
      datasets: [{
        label: 'Attuale',
        data: [
          {x: {{round($data['an']->Resistenza/($data['an']->Altezza/100),1)}}, y: {{round($data['an']->Reattanza/($data['an']->Altezza/100),1)  }}},



        ],
        backgroundColor: 'rgba(255, 99, 132, 1)',
        borderColor: 'rgb(255, 0, 0)',
      },
      {
        label: 'Precedente',
        data: [
          {x: {{round($data['anP']->Resistenza/($data['anP']->Altezza/100),1)}}, y: {{round($data['anP']->Reattanza/($data['anP']->Altezza/100),1)  }}},



        ],
        backgroundColor: 'rgba(54, 162, 235, 1)',
        borderColor: 'rgb(54, 162, 235)',
      }]

    },
    options: {
      responsive: true,
      scales: {
        x: {
          type: 'linear',
          position: 'bottom',
          title: {
            display: true,
            text: 'Rz / H'
          },
          max: 600,
          min:0
        },
        y: {
          title: {
            display: true,
            text: 'Xc / H'
          },
          max: 60,
          min:0
        }
      },
      plugins: {
        annotation: {
          annotations: {
            ellipse1: {
              type: 'ellipse',
              xMin: 208 ,
              xMax: 387,
              yMin: 12.25,
              yMax: 49.4,
              backgroundColor: 'rgba(255, 0, 0, 0)',
              borderColor: 'red',
              borderWidth: 2,
              rotation: 22 // Rotazione di 20 gradi
            },
            line1: {
              type: 'line',
              xMin: 230,
              xMax: 363.1,
              yMin: 13.4,
              yMax: 48.2,
              borderColor: 'rgba(0, 0, 0, 0.5)',
              borderWidth: 2,

            },
            line2: {
              type: 'line',
              xMin: 218,
              xMax: 380,
              yMin: 35,
              yMax: 27.5,
              borderColor: 'rgba(0, 0, 0, 0.5)',
              borderWidth: 2,

            },
            ellipse2: {
              type: 'ellipse',
              xMin: 237,
              xMax: 358.5 ,
              yMin: 18.2,
              yMax: 43.5,
              backgroundColor: 'rgba(38, 145, 222, 0)',
              borderColor: 'rgba(38, 145, 222, 1)',
              borderWidth: 2,
             rotation: 22 // Rotazione di 20 gradi
            },
            ellipse3: {
              type: 'ellipse',
              xMin: 253.5,
              xMax: 341.5,
              yMin: 22,
              yMax: 39.7,
              backgroundColor: 'rgba(0, 255, 0, 0)',
              borderColor: 'green',
              borderWidth: 2,
             rotation: 22 // Rotazione di 20 gradi
            }
          },

        },
        legend: {
          display: true
        },

      }
    }
  });
  @endcan


  str= $('#ECWrange').html()
  ecwLIM=str.substring(6, 8);
  console.log("MASCHIO")
   str= $('#ECWrange').html()
  console.log(str.substring(6, 4));




ecw=parseFloat($('#ECWP').html())
col="";
if(ecw>parseFloat(ecwLIM) )
{
    col = "#ff0000"
}else{
    col = "#000000"
}

const annotation1 = {
    type: 'box',
  xMin: 0.149,
  xMax: 0.38,
  yMin: parseFloat(ecwLIM),
  yMax: parseFloat(ecwLIM)-0.5,
  backgroundColor: 'rgba(250, 0, 0, 1)',
  drawTime: 'afterDatasetsDraw',
  borderWidth: 0,
  borderRadius: 0,
};
const ctx3 = document.getElementById('myChart3');
    const myChart3 = new Chart(ctx3, {
  type: 'bar',
  data: {
    labels: [""],
    datasets: [    {
      label: 'TBW',
      backgroundColor: "#68B0FA",
      datalabels: {
        color: '#000000',
        offset: 50,
        formatter: (item) => {
                return '  TBW\n '+'{{round($data['an']->TBW,1)}} ' + "lt";
              }
      },
      data: [{{round($data['an']->TBW/$data['an']->TBW*100,1)}}],
    },{
      label: 'ICW%',
      backgroundColor: "#5EF3FA",
      datalabels: {
        color: '#000000',
        formatter: (item) => {
                return 'ICW%\n '+item + ' ' + "%";
              }
      },
      data: [{{round($data['an']->ICW/$data['an']->TBW*100,1)}}],
    }, {
      label: 'ECW%',
      backgroundColor: "#A8E6FF",
      datalabels: {

        color: col,
        formatter: (item) => {
                return 'ECW%\n '+item + ' ' + "%";
              }
      },
      data: [{{round($data['an']->ECW/$data['an']->TBW*100,1)}}],
    }],
  },

  plugins: [ChartDataLabels],
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend:{
            display:false
        },
        annotation: {
        annotations: {
          annotation1
        }
      },
      title: {
        display: false,
        text: 'Chart.js Bar Chart - Stacked'
      },
      datalabels: {
        offset:0,
        align: 'end',
      }
    },

    scales: {
      x: {

      },
      y: {
        max:100,


      }
    }
  }

});

    const ctx = document.getElementById('myChart');
  const myChart = new Chart(ctx, {
    responsive :false,
    maintainAspectRatio: false,
      type: 'line',
      data: {

          datasets: [{
            label: 'PhA/Età ',
              data: [

                     {x: "{{$data['an']->Resistenza}}", y: "{{$data['an']->Reattanza}}"},

                    ],
              backgroundColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1,
              pointRadius: 4,
          }]
      },
      options: {
        aspectRatio:1,
        plugins:{
          annotation:{
            drawTime: 'afterDatasetsDraw',
            annotations:[{
          type: 'line',
          yMin: 79,
          yMax: 32,
          borderColor: 'rgb(0, 0, 0)',
          borderWidth: 1,
        },{
          type: 'line',
          xMin: 720,
          xMax: 300,
          borderColor: 'rgb(0, 0, 0)',
          borderWidth: 1,
        },{
              type: 'ellipse',
              xMin: 230,
          xMax: 820,
          yMin: 40,
          yMax: 68,
          rotation:-66,
          backgroundColor: 'rgba(33, 99, 132, 0.15)',
              label: {
                enabled: false,
                content: 'Test label'
              }
            },{
              type: 'ellipse',
              xMin: 300,
          xMax:  750,
          yMin: 44,
          yMax: 64,
          rotation:-66,
          backgroundColor: 'rgba(22, 11, 132, 0.15)',
              label: {
                enabled: false,
                content: 'Test label'
              }
            },{
              type: 'ellipse',
              xMin: 385,
          xMax:  670,
          yMin: 48,
          yMax: 62,
          rotation:-66,
          backgroundColor: 'rgba(11, 99, 132, 0.15)',
              label: {
                enabled: false,
                content: 'Test label'
              }
            }]

          },
        },
          scales: {
              y: { // and your y axis customization as you see fit...

                beginAtZero: true,
                max: 100,
                title: {
        display: true,
        text: 'Reattanza'
      },
              min: 0,
                        display: true,
                        scaleLabel: {
                             display: false,
                        }
                    },
              x:{
                title: {
        display: true,
        text: 'Resistenza'
      },
                type: 'linear', // MANDATORY TO SHOW YOUR POINTS! (THIS IS THE IMPORTANT BIT)
                max: 1000,
              min: 0,
                           display: true, // mandatory
                           beginAtZero: true,
                           scaleLabel: {
                                display: false, // mandatory
                                labelString: 'Your label' // optional
                           },

              }
          }
      }
  });


  const ctx4 = document.getElementById('myChart4');
  var c = document.getElementById("myChart4");
var ctxg = c.getContext("2d");

// Limita l'eta plottata al massimo supportato dalle curve statistiche.
var etaMassimaGrafico = 80;
var etaPlotCorrente = Math.min(Number("{{$data['an']->eta}}"), etaMassimaGrafico);
var etaPlotPrecedente = Math.min(Number("{{$data['anP']->eta}}"), etaMassimaGrafico);

//PHA eta Inizio M
if($("#eta").html()>=16){
    //PHA eta Inizio M
  const myChart4 = new Chart(ctx4, {
    responsive :false,
    maintainAspectRatio: false,
      type: 'line',
      data: {

          datasets: [{
            label: 'PhA / Età M',
              data: [

                     {x: etaPlotCorrente, y: "{{$data['an']->PA}}"},

                    ],
              backgroundColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 2,
              pointRadius: 4,
          },
          {
            label: 'PhA / Età M Prec.',
              data: [

                     {x: etaPlotPrecedente, y: "{{$data['anP']->PA}}"},

                    ],
              backgroundColor: [
                  'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderColor: [
                'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 2,
              pointRadius: 4,
          },
          {
    label: 'none',
    data: [{x: 15, y: 8},{x: 30, y: 7.9},{x: 50, y: 7.5},{x: 70, y: 6.9},{x: 75, y: 6.25},{x: 80, y: 6}],
    fill: false,
    borderColor: 'rgb(66,245, 61)',
    tension: 0.1,
    pointStyle: 'circle',
      pointRadius: 0,
      pointHoverRadius: 0
  },
  {
    label: 'none',
    data: [{x: 15, y: 7},{x: 30, y: 6.9},{x: 50, y: 6.5},{x: 70, y: 5.9},{x: 75, y: 5.25},{x: 80, y: 5}],
    fill: false,
    borderColor: 'rgb(0, 0, 0,100)',
    borderWidth: 0.5,
    tension: 0.1,
    pointStyle: 'circle',
      pointRadius: 0,
      pointHoverRadius: 0
  },
  {
    label: 'none',
    data: [{x: 15, y: 6},{x: 30, y: 5.9},{x: 50, y: 5.5},{x: 70, y: 4.9},{x: 75, y: 4.25},{x: 80, y: 4}],
    fill: false,
    borderColor: 'rgb(245, 48, 37)',
    borderWidth: 2,
    tension: 0.1,
    pointStyle: 'circle',
      pointRadius: 0,
      pointHoverRadius: 0
  }

          ]
      },
      options: {
        aspectRatio:1,
        plugins:{
            legend:{
                labels: {
                filter: item => {
                    return item.text != "none"
                }
            }
            },
          annotation:{
            clip:true,
            drawTime: 'afterDatasetsDraw',
            annotations:[ {
          type: 'label',
          xValue: 77,
          yValue: 4.25,
          content: ['5%'],
          font: {
            size: 15
          }
        }, {
          type: 'label',
          xValue: 77,
          yValue: 5.2,
          content: ['50%'],
          font: {
            size: 15
          }
        }, {
          type: 'label',
          xValue: 77,
          yValue: 6.15,
          content: ['95%'],
          font: {
            size: 15
          }
        }



        ]

          },
        },
          scales: {
              y: { // and your y axis customization as you see fit...

                beginAtZero: true,
                max: 8,
                title: {
        display: true,
        text: 'PhA'
      },
              min:2,
              max:10,
              ticks: {
                stepSize: 0.5
            },
                        display: true,
                        scaleLabel: {
                             display: false,
                        }
                    },
              x:{
                title: {
        display: true,
        text: 'Età'
      },
                type: 'linear', // MANDATORY TO SHOW YOUR POINTS! (THIS IS THE IMPORTANT BIT)
                max: 80,
              min: 15,
              ticks: {
                stepSize: 5
            },

                           display: true, // mandatory
                           scaleLabel: {
                                display: false, // mandatory
                                labelString: 'Your label' // optional
                           },

              }
          }
      }
  });
  //FINE
}else{
  const myChart4 = new Chart(ctx4, {
    responsive :false,
    maintainAspectRatio: false,
      type: 'line',
      data: {

          datasets: [{
            label: 'PhA / Età ',
              data: [

                     {x: etaPlotCorrente, y: "{{$data['an']->PA}}"},

                    ],
              backgroundColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 2,
              pointRadius: 4,
          },
          {
            label: 'PhA / Età Prec ',
              data: [

                     {x: etaPlotPrecedente, y: "{{$data['anP']->PA}}"},

                    ],
              backgroundColor: [
                 'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderColor: [
                  'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 2,
              pointRadius: 4,
          }
          ]
      },
      options: {
        aspectRatio:1,
        plugins:{
          annotation:{
            clip:true,
            drawTime: 'afterDatasetsDraw',
            annotations:[{
          type: 'line',
          yMin: 4.4,
          yMax: 5.1,
          borderColor: 'rgb(245, 48, 37)',

          borderWidth: 2,
        },{
          type: 'line',
          yMin: 5.2,
          yMax: 5.925,
          borderColor: 'rgb(0, 0, 0)',
          borderWidth: 0.5,
        },{
          type: 'line',
          yMin: 6.0,
          yMax: 6.75,
          borderColor: 'rgb(66,245, 61)',
          borderWidth: 2,
        }, {
          type: 'label',
          xValue: 77,
          yValue: 3.25,
          content: ['5%'],
          font: {
            size: 15
          }
        }, {
          type: 'label',
          xValue: 77,
          yValue: 4.2,
          content: ['50%'],
          font: {
            size: 15
          }
        }, {
          type: 'label',
          xValue: 77,
          yValue: 5.15,
          content: ['95%'],
          font: {
            size: 15
          }
        }



        ]

          },
        },
          scales: {
              y: { // and your y axis customization as you see fit...

                beginAtZero: true,
                max: 10,
                min: 2.5,
                ticks: {
                stepSize: 0.5
            },
                title: {
        display: true,
        text: 'PhA'
      },
                        display: true,
                        scaleLabel: {
                             display: false,
                        }
                    },
              x:{
                title: {
        display: true,
        text: 'Età'
      },
                type: 'linear', // MANDATORY TO SHOW YOUR POINTS! (THIS IS THE IMPORTANT BIT)
                max: 15,
              min: 3,
              ticks: {
                stepSize: 1
            },

                           display: true, // mandatory
                           scaleLabel: {
                                display: false, // mandatory
                                labelString: 'Your label' // optional
                           },

              }
          }
      }
  });

}
//fine

  $("#ricarica").click(function() {
    myChart.update();

});
</script>

@stop
@php
}else{
@endphp
@section('js')
<script src="{{ asset('js/ecwp.js')}}"></script>
<script src="{{ URL::asset('/js/tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
  integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    var top =scrollTop - 1200
    if(top>0  && window.innerWidth>900)
    {
        $('.mSidebar').css( "top", top );
    }else{
        $('.mSidebar').css( "top", 0 );
    }

});
</script>
<script src="{{ asset('js/Nutri.js')}}"></script>
<script src="{{ asset('js/Hydra.js')}}"></script>
<script src="{{ asset('js/FMI.js')}}"></script>
<script src="{{ asset('js/Cdex.js')}}"></script>
<script src="{{ asset('js/BiaIndex.js')}}"></script>
<script src="{{ asset('js/efpDex.js')}}"></script>
<script src="{{ asset('js/aging.js')}}"></script>
<script src="{{ asset('js/Rp.js')}}"></script>
<script src="{{ asset('js/ECI.js')}}"></script>


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.js"
  integrity="sha512-es3XL5vwq08UWKA+Fp6tZVTcJ4Kh25GsgsCSkBbPlX6QmDn3YJX0yhUVhPYQUoPX/gUFXf7uH0YtuZHGPj4iHA=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  const ctx1 = document.getElementById('myChart1');
    const myChart1 = new Chart(ctx1, {
  type: 'bar',
  data: {
    labels: [""],
    datasets: [{
      label: 'FAT',
      backgroundColor: "#F5CF35",
      datalabels: {
        color: '#000000',
        formatter: (item) => {
                return '     FAT\n '+item + ' ' + "kg";
              }
      },
      data: [{{round($data['an']->FM,1)}}],
    }, {
      label: 'FFM',
      backgroundColor: "#B7FA8E",
      data: [{{round($data['an']->FFM,1)}}],
      datalabels: {
        color: '#000000',
        formatter: (item) => {
                return '     FFM\n '+item + ' ' + "kg";
              }
      },
    }],
  },

  plugins: [ChartDataLabels],
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend:{
            display:false,
        },
      title: {
        display: false,
        text: 'Chart.js Bar Chart - Stacked'
      },
    },

    scales: {
      x: {
        stacked: true,
      },
      y: {
        max:{{round($data['an']->Peso,1)}},
        stacked: true,

      }
    }
  }

});

    const ctx2 = document.getElementById('myChart2');
    const myChart2 = new Chart(ctx2, {
  type: 'bar',
  data: {
    labels: [""],
    datasets: [{
        datalabels: {
        color: '#000000',
        formatter: (item) => {
                return '     FAT\n '+item + ' ' + "kg";
              }
      },
      label: 'FAT',
      backgroundColor: "#F5CF35",
      data: [{{round($data['an']->FM,1)}}],
    },  {
        datalabels: {
        color: '#000000',
        formatter: (item) => {
                return '     BCM\n '+item + ' ' + "kg";
              }
      },
      label: 'BCM',
      backgroundColor: "#D64D3E",
      data: [{{round($data['an']->BCM,1)}}],
    }, {
        datalabels: {
        color: '#000000',
        formatter: (item) => {
                return '     ECM\n '+item + ' ' + "kg";
              }
      },
      label: 'ECM',
      backgroundColor: "#F5B87A",
      data: [{{round($data['an']->ECM,1)}}],
    }],
  },

  plugins: [ChartDataLabels],
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend:{
            display:false
        },
      title: {
        display: false,
        text: 'Chart.js Bar Chart - Stacked'
      },
    },

    scales: {
      x: {
        stacked: true,
      },
      y: {
        max:{{round($data['an']->Peso,2)}},
        stacked: true,

      }
    }
  }

});




  @can('show-biva')
  const ctxBiva = document.getElementById('BiVa').getContext('2d');
  // Funzione per mostrare le coordinate del mouse






  const Biva = new Chart(ctxBiva, {
    type: 'scatter',
    data: {
      datasets: [{
        label: 'Attuale',
        data: [
          {x: {{round($data['an']->Resistenza/($data['an']->Altezza/100),1)}}, y: {{round($data['an']->Reattanza/($data['an']->Altezza/100),1)  }}},



        ],
        backgroundColor: 'rgba(255, 99, 132, 1)',
        borderColor: 'rgb(255, 0, 0)',
      },
      {
        label: 'Precedente',
        data: [
          {x: {{round($data['anP']->Resistenza/($data['anP']->Altezza/100),1)}}, y: {{round($data['anP']->Reattanza/($data['anP']->Altezza/100),1)  }}},



        ],
        backgroundColor: 'rgba(54, 162, 235, 1)',
        borderColor: 'rgb(54, 162, 235)',
      }]

    },
    options: {
      responsive: true,
      scales: {
        x: {
          type: 'linear',
          position: 'bottom',
          title: {
            display: true,
            text: 'Rz / H  '
          },
          max: 600,
          min:0
        },
        y: {
          title: {
            display: true,
            text: 'Xc / H'
          },
          max: 60,
          min:0
        }
      },
      plugins: {
        annotation: {
          annotations: {
            ellipse1: {
              type: 'ellipse',
              xMin: 265,
              xMax: 474.5,
              yMin: 14.4,
              yMax: 54  ,
              backgroundColor: 'rgba(255, 0, 0, 0)',
              borderColor: 'red',
              borderWidth: 2,
              rotation: 22 // Rotazione di 20 gradi
            },
            line2: {
              type: 'line',
              xMin: 300,
              xMax: 440,
              yMin: 16.1,
              yMax: 53,
            },

            line1: {
              type: 'line',
              xMin: 273,
              xMax: 470,
              yMin: 39,
              yMax: 30.5,
            },


            ellipse2: {
              type: 'ellipse',
              xMin: 299,
              xMax: 440,
              yMin: 21,
              yMax: 47.75,
              backgroundColor: 'rgba(38, 145, 222, 0)',
              borderColor: 'rgba(38, 145, 222, 1)',
              borderWidth: 2,
              rotation: 22 // Rotazione di 20 gradi
            },
            ellipse3: {
              type: 'ellipse',
              xMin: 321,
              xMax: 420,
              yMin: 24.9,
              yMax: 43.75,
              backgroundColor: 'rgba(0, 255, 0, 0)',
              borderColor: 'green',
              borderWidth: 2,
            rotation: 22 // Rotazione di 20 gradi
            }
          },

        },
        legend: {
          display: true
        },

      }
    }
  });
  @endcan


  str= $('#ECWrange').html()
  ecwLIM=str.substring(6, 8);
  // Limita l'eta plottata al massimo supportato dalle curve statistiche.
  var etaMassimaGrafico = 80;
  var etaPlotCorrente = Math.min(Number("{{$data['an']->eta}}"), etaMassimaGrafico);
  var etaPlotPrecedente = Math.min(Number("{{$data['anP']->eta}}"), etaMassimaGrafico);
    if($("#eta").html()>=16){
    const ctx4 = document.getElementById('myChart4');
    //INIZIO PA F
  const myChart4 = new Chart(ctx4, {
    responsive :false,
    maintainAspectRatio: false,
      type: 'line',
      data: {

          datasets: [{
            label: 'PhA/Età',
              data: [

                     {x: etaPlotCorrente, y: "{{$data['an']->PA}}"},

                    ],
              backgroundColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1,
              pointRadius: 4,
          },
          {
            label: 'PhA/Età Prec',
              data: [

                     {x: etaPlotPrecedente, y: "{{$data['anP']->PA}}"},

                    ],
              backgroundColor: [
                  'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderColor: [
                  'rgba(54, 162, 235, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1,
              pointRadius: 4,
          },

          {
    label: 'none',
    data: [{x: 15, y: 7},{x: 50, y: 6.9},{x: 60, y: 6.75},{x: 70, y: 6.5},{x: 80, y: 5.5}],
    fill: false,
    borderColor: 'rgb(66,245, 61)',
          borderWidth: 2,
    tension: 0.1,
    pointStyle: 'circle',
      pointRadius: 0,
      pointHoverRadius: 0,
      legend: {
                    display: false
                },
  },
          {
    label: 'none',
    data: [{x: 15, y: 6},{x: 50, y: 5.9},{x: 60, y: 5.75},{x: 70, y: 5.5},{x: 80, y: 4.5}],
    fill: false,
    borderColor: 'rgb(0, 0, 0,100)',
    borderWidth: 0.5,
    tension: 0.1,
    pointStyle: 'circle',
      pointRadius: 0,
      pointHoverRadius: 0
  }, {

    label: 'none',
    data: [{x: 15, y: 5},{x: 50, y: 4.9},{x: 60, y: 4.75},{x: 70, y: 4.5},{x: 80, y: 3.5}],
    fill: false,
    borderColor: 'rgb(245, 48, 37)',
          borderWidth: 2,
    tension: 0.1,
    pointStyle: 'circle',
      pointRadius: 0,
      pointHoverRadius: 0
  },]
      },
      options: {

        aspectRatio:1,
        plugins:{
            legend:{
                labels: {
                filter: item => {
                    return item.text != "none"
                }
            }
            },
          annotation:{
            drawTime: 'afterDatasetsDraw',
            annotations:[ {
          type: 'label',
          xValue: 77,
          yValue: 4.2,
          content: ['5%'],
          font: {
            size: 15
          }
        }, {
          type: 'label',
          xValue: 77,
          yValue: 5,
          content: ['50%'],
          font: {
            size: 15
          }
        }, {
          type: 'label',
          xValue: 77,
          yValue: 6,
          content: ['95%'],
          font: {
            size: 15
          }
        }



        ]

          },
        },
          scales: {
              y: { // and your y axis customization as you see fit...

                beginAtZero: true,
                max: 8,
                title: {
        display: true,
        text: 'PhA'
      },
              min:2.5,
              max:10,
              ticks: {
                stepSize: 0.5
            },
                        display: true,
                        scaleLabel: {
                             display: false,
                        }
                    },
              x:{
                title: {
        display: true,
        text: 'Età'
      },
                type: 'linear', // MANDATORY TO SHOW YOUR POINTS! (THIS IS THE IMPORTANT BIT)
                max: 80,
              min: 15,
              ticks: {
                stepSize: 5
            },
                           display: true, // mandatory
                           scaleLabel: {
                                display: false, // mandatory
                                labelString: 'Your label' // optional
                           },

              }
          }



      }
  });
}else{
    const ctx4 = document.getElementById('myChart4');
    //INIZIO PHA ETA F
  const myChart4 = new Chart(ctx4, {
    responsive :false,
    maintainAspectRatio: false,
      type: 'line',
      data: {

          datasets: [{
            label: 'PhA/Età',
              data: [

                     {x: etaPlotCorrente, y: "{{$data['an']->PA}}"},

                    ],
              backgroundColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1,
              pointRadius: 4,
          }]
      },
      options: {
        aspectRatio:1,
        plugins:{
          annotation:{
            drawTime: 'afterDatasetsDraw',
            annotations:[{
          type: 'line',
          yMin: 5.90,
          yMax: 6.70,
          borderColor: 'rgb(66,245, 61)',
          borderWidth: 2,
        },{
          type: 'line',
          yMin: 5.19,
          yMax: 6.05,
          borderColor: 'rgb(0, 0, 0)',
          borderWidth: 0.5,
        },{
          type: 'line',
          yMin: 4.49,
          yMax: 5.25,
          borderColor: 'rgb(245, 48, 37)',
          borderWidth: 2,
        }, {
          type: 'label',
          xValue: 77,
          yValue: 2.8,
          content: ['5%'],
          font: {
            size: 15
          }
        }, {
          type: 'label',
          xValue: 77,
          yValue: 4,
          content: ['50%'],
          font: {
            size: 15
          }
        }, {
          type: 'label',
          xValue: 77,
          yValue: 5,
          content: ['95%'],
          font: {
            size: 15
          }
        }



        ]

          },
        },
          scales: {
              y: { // and your y axis customization as you see fit...

                beginAtZero: true,
                max: 8,
                title: {
        display: true,
        text: 'PhA'
      },
              min:2.5,
              max:10,
              ticks: {
                stepSize: 0.5
            },
                        display: true,
                        scaleLabel: {
                             display: false,
                        }
                    },
              x:{
                title: {
        display: true,
        text: 'Età'
      },
                type: 'linear', // MANDATORY TO SHOW YOUR POINTS! (THIS IS THE IMPORTANT BIT)
                max: 15,
              min: 3,
              ticks: {
                stepSize: 1
            },
                           display: true, // mandatory
                           scaleLabel: {
                                display: false, // mandatory
                                labelString: 'Your label' // optional
                           },

              }
          }
      }
  });
}









ecw=parseFloat($('#ECWP').html())
console.log(ecw)
col="";
if(ecw>=parseFloat(ecwLIM) )
{
    col = "#ff0000"
}else{
    col = "#000000"
}


const annotation1 = {
    type: 'box',
  xMin: 0.149,
  xMax: 0.38,
  yMin: parseFloat(ecwLIM),
  yMax: parseFloat(ecwLIM)-0.5,
  backgroundColor: 'rgba(250, 0, 0, 1)',
  drawTime: 'afterDatasetsDraw',
  borderWidth: 0,
  borderRadius: 0,
};
const ctx3 = document.getElementById('myChart3');
    const myChart3 = new Chart(ctx3, {
  type: 'bar',
  data: {
    labels: [""],
    datasets: [ {
      label: 'TBW',
      backgroundColor: "#68B0FA",
      datalabels: {
        formatter: (item) => {
                return '  TBW\n '+'{{round($data['an']->TBW,1)}} ' + "lt";
              },
              color: '#000000',
      },
      data: [{{round($data['an']->TBW/$data['an']->TBW*100,1)}}],
    },{
        datalabels: {
        color: '#000000',
        formatter: (item) => {
                return ' ICW%\n '+item + ' ' + "%";
              }
      },
      label: 'ICW%',
      backgroundColor: "#5EF3FA",
      data: [{{round($data['an']->ICW/$data['an']->TBW*100,1)}}],
    }, {
        datalabels: {
        color: col,
        formatter: (item) => {
                return ' ECW%\n '+item + ' ' + "%";
              }
      },
      label: 'ECW%',
      backgroundColor: "#A8E6FF",
      data: [{{round($data['an']->ECW/$data['an']->TBW*100,1)}}],
    }],
  },

  plugins: [
  ChartDataLabels],
  options: {

    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend:{
            display:false
        },
        annotation: {
        annotations: {
          annotation1,
        }
      },
      title: {
        display: false,
        text: 'Chart.js Bar Chart - Stacked'
      },
      datalabels: {
        offset:0,
        align: 'end',
      }
    },

    scales: {
      x: {
      },
      y: {
        max:100,


      }
    }
  }

});

    const ctx = document.getElementById('myChart');
  const myChart = new Chart(ctx, {
    responsive :false,
    maintainAspectRatio: false,
      type: 'line',
      data: {
          datasets: [{
            label: 'Xc/Rz',
              data: [

                     {x: "{{$data['an']->Resistenza}}", y: "{{$data['an']->Reattanza}}"},

                    ],
              backgroundColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192,1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1.5
          }]
      },
      options: {
        aspectRatio:1,
        plugins:{
          annotation:{
            drawTime: 'afterDatasetsDraw',
            annotations:[{
          type: 'line',
          xMin: 820,
          xMax: 428,
          borderColor: 'rgb(0, 0, 0)',
          borderWidth: 1,
        },{
          type: 'line',
          yMin: 86,
          yMax: 42,
          borderColor: 'rgb(0, 0, 0)',
          borderWidth: 1,
        },{
              type: 'ellipse',
              xMin: 500,
          xMax:  810,
          yMin: 48,
          yMax: 66,
          rotation:-66,
          backgroundColor: 'rgba(22, 11, 132, 0.25)',
              label: {
                enabled: false,
                content: 'Test label'
              }
            },{
              type: 'ellipse',
              xMin: 425,
          xMax:  880,
          yMin: 44,
          yMax: 68,
          rotation:-66,
          backgroundColor: 'rgba(33, 99, 132, 0.25)',
              label: {
                enabled: false,
                content: 'Test label'
              }
            },{
              type: 'ellipse',
              xMin: 322,
          xMax: 980,
          yMin: 38,
          yMax: 75,
          rotation:-66,
          backgroundColor: 'rgba(255, 99, 132, 0.25)',
              label: {
                enabled: false,
                content: 'Test label'
              }
            }]

          },
        },
          scales: {
              y: { // and your y axis customization as you see fit...

                beginAtZero: true,
                max: 100,
                title: {
        display: true,
        text: 'Reattanza'
      },
              min: 0,
                        display: true,
                        scaleLabel: {
                             display: false,
                        }
                    },
              x:{
                title: {
        display: true,
        text: 'Resistenza'
      },
                type: 'linear', // MANDATORY TO SHOW YOUR POINTS! (THIS IS THE IMPORTANT BIT)
                max: 1000,
              min: 0,
                           display: true, // mandatory
                           beginAtZero: true,
                           scaleLabel: {
                                display: false, // mandatory
                                labelString: 'Your label' // optional
                           },

              }
          }
      }
  });





//fine

  $("#ricarica").click(function() {
    myChart.update();

});


$('#inviaPdf').click(function(e) {
 e.preventDefault();
});
</script>

@stop

@php
}
@endphp