@extends('adminlte::page')


@section('title', 'Dashboard')


@section('content_header')


<h1>Risultato Questionario</h1>


@stop


@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Questionario: {{ $data['result']->Questionario->Titolo }} - {{ $data['result']->Cliente->Nome }}</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
<ul class="list-unstyled">
    <li><strong>Codice Analisi: {{ $data['result']->Analisi->id }} <a class="btn btn-primary ml-2" href="{{ route('Analisi.show',$data['result']->Analisi->id ) }} " target="blank"> Visualizza analisi </a></strong> </li>
</ul>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <a href={{ route('ValExtra.EsportaPdf',['tipo'=>$data['result']->Questionario->Titolo,'id'=>$data['result']->id]) }} class="btn btn-primary btn-sm"> Esporta pdf </a>
            </div>
            <div class="card-body">
                <p>I segnali evidenziati possono avere una forte connessione tra loro e spesso possono dipendere da una ridotta comunicazione cellulare, infiammazione, ipo/iper idratazione ed alterazione del livello di benessere nutrizionale.</p>
                <p><strong>Risultato Rilevato: {{ $data['result']->Risultato }}</strong>                 <button class="btn btn-primary ml-2" data-toggle="modal" data-target="#modal-Sintomi">Segnali rilevati</button></p>
                    @livewire('ValExtra.Commento',['data'=>$data])
                <div class="row mt-3 mb-5" >
                    <div class="col-md-8" style=""> <canvas id="myChart4" style="position: relative; height:40vh; width:60vw"></canvas></div>
                </div>
            </div>
        </div>
    </div>
</div>


    <div id="modal-Sintomi" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog  modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Segnali rilevati</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-bordered table-striped">
                <thead>
                  <tr>
                    <th>Segnale</th>
                    <th>Parametro BIA</th>
                  </tr>
                </thead>
                <tbody>
          @foreach ($data['Risposte'] as $item)
            @if(is_array($item) && count($item) >= 2)
              <tr >
                <td class="{{ $item[2] ? 'text-danger' : '' }}">{{ $item[0] }}</td>
                <td>{{ $item[1] ?? '' }}</td>
              </tr>
            @elseif(is_string($item))
              <tr>
                <td>{{ $item }}</td>
                <td></td>
              </tr>
            @endif
          @endforeach
                </tbody>
          </table>
          <p class="text-danger">
          Tra i vari segnali emersi dal questionario, quelli contrassegnati in rosso “ALERT” possono indicare la necessità di un approfondimento. Sebbene la presenza di uno o più di essi non significhi necessariamente una condizione seria, è consigliabile non trascurarli ed effettuare un’analisi più approfondita per identificarne la causa.
          </p>
          <p>
            Nota: la seguente lista associa i segnali presenti ai parametri BIA-Dex con i quali possono essere correlati. Tuttavia, l'eventuale presenza di uno o più segnali 
non significa necessariamente che ci sia un problema con il parametro BIA corrispondente in quanto i segnali possono essere causati da molteplici fattori.
</p>


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

@stop


@section('css')


@stop


@section('js')
<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>
    console.log("ff")
    var Analisi = {!! json_encode($data['result']->Analisi) !!}

    if(Analisi.BCMht2<=2.5)
{
    BCMht2 = 2.5
}else{
    BCMht2 = Analisi.BCMht2
}
    var Result = {!! json_encode($data['result']->Risultato) !!}
    var ResultData= {!! json_encode($data['result']) !!}
  </script>

<script>



    const ctx4 = document.getElementById('myChart4').getContext('2d');
    var gradient = ctx4.createLinearGradient(0, 0, 0, 600);
        gradient.addColorStop(0.5, 'rgba(223,255,216,0.4)');
        gradient.addColorStop(1, 'rgba(255,0,0,0.3)');
    const ctx = document.getElementById('myChart4');
 var c = document.getElementById("myChart4");

 c.style.height = "500px";

       var sesso = "{{$data['result']->Cliente->Sesso}}";
       var linea = 0
       var max = 0

       if(sesso == "M")
       {
           linea = 8.5
           max = 16.25
       }else{
           linea = 6.9
           max = 14.25
       }




       if(Result<=2)
       {
        color = "green"
       }else if(Result>=3 && Result <=9)
       {
        color = "yellow"
       }else if(Result >9)
       {
  color = "red"
       }


 const myChart4 = new Chart(ctx4, {
   responsive :true,
   maintainAspectRatio: false,
     type: 'line',
     data: {
         datasets: [{
           label: 'Segnali',
             data: [
                    {x: Result, y: BCMht2},
                   ],
             backgroundColor: [
                color,
             ],
             borderColor: [
                 color,
             ],
             borderWidth: 2,
             pointRadius: 8,
         }]
     },
     options: {
        backgroundColor: "red",
       aspectRatio:0,
       plugins:{
         tooltip: {
           enabled: true,
           mode: 'nearest',
           intersect: false,
           backgroundColor: 'rgba(0,0,0,0.8)',
           titleColor: 'white',
           bodyColor: 'lightgray',
           borderColor: "",
           borderWidth: 2,
           cornerRadius: 6,
           padding: 10,
           callbacks: {
             title: function(context) {
               return 'Dettagli Risultato Questionario';
             },
             label: function(context) {
               return [
                 `Risultato segnali: ${context.parsed.x}`,
                 `Marker Nutrizionale: ${context.parsed.y.toFixed(2)}`,
               ];
             },
             afterLabel: function(context) {
               if(context.parsed.x <= 2) {
                 return 'Stato: Buono - Segnali minimi';
               } else if(context.parsed.x >= 3 && context.parsed.x <= 9) {
                 return 'Stato: Moderato - Alcuni segnali presenti';
               } else {
                 return 'Stato: Critico - Elevata presenza di segnali';
               }
             }
           }
         },
         annotation:{
           clip:true,
           drawTime: 'afterDatasetsDraw',
           annotations:[
            {
                    type:'box',
                    xMin: 0,
                    xMax: 20,
                    yMin: 0,
                    yMax: 16.3,
                    backgroundColor: gradient,
                   },
               {
         type: 'line',
         yMin: linea,
         yMax: linea,
         borderColor: 'rgb(0,0,0)',
         borderWidth: 0.5,
       },
       {
           type: 'label',
         xValue: 15,
         yValue: 3.5,
         content: ['Ridotto benessere nutrizionale','Elevata presenza di segnali'],
         font: {
           size: 15
         }
       },
       {
           type: 'label',
         xValue: 5,
         yValue: 13,
         content: ['Benessere nutrizionale','Presenza di segnali'],
         font: {
           size: 15
         }
       },
       {
           type: 'label',
         xValue: 15,
         yValue: 13,
         content: ['Benessere nutrizionale','Elevata presenza di segnali'],
         font: {
           size: 15
         }
       },
       {
           type: 'label',
         xValue: 1,
         yValue: 13,
         textAlign:'left',
         content: ['▲ benessere','nutrizionale','▼  segnali'],
         font: {
           size: 15
         }
       },
       {
           type: 'label',
         xValue: 1,
         yValue: 3.5,
         textAlign:'left',
         content: ['▼ benessere','nutrizionale','▼  segnali'],
         font: {
           size: 15
         }
       },
       {
           type: 'label',
         xValue: 5,
         yValue: 3.5,
         content: ['Ridotto benessere nutrizionale','Presenza di segnali'],
         font: {
           size: 15
         }
       },
       {
         type: 'line',
         xMin: 3,
         xMax: 3,
         borderColor: 'rgb(0,0, 0)',
         borderWidth: 1,
       },


       {
         type: 'line',
         xMin: 10,
         xMax: 10,
         borderColor: 'rgb(0,0, 0)',
         borderWidth: 1,
       },
       ]

         },
       },
       backgroundColor: "red",
         scales: {
             y: {
               beginAtZero: true,
               max: 8,
               title: {
       display: true,
       text: 'Nutritional Marker'
     },
             min:2.5,
             max:max,
             ticks: {
               stepSize: 2.45
           },
                       display: true,
                       scaleLabel: {
                            display: false,
                       }
                   },
             x:{
               title: {
       display: true,
       text: 'Segnali'
     },
               type: 'linear',
               max: 20,
             min: 0,
             ticks: {
               stepSize: 1
           },
                          display: true,
                          scaleLabel: {
                               display: false,
                               labelString: 'Your label'
                          },
             }
         }
     }
 });



 </script>
@stop