@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Confronto silhouettes</h1>
@stop

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="card-tools">
                    <a href="{{route('FYO.GraficiPdfConfronta')}}" class="btn btn-primary" target="_blank">Esporta PDF </a>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-4 ">
                        <h4 class="text-center">Prima Analisi</h4>
                       <p> {{$PrimaAnalisi->created_at->format('d/m/Y H:i')}}</p>
                        <p>Massa grassa addominale: {{round($PrimaAnalisi->abdominal_fat_mass,1)}} kg</p>
                        <p>Rapporto vita /altezza: {{round($PrimaAnalisi->waist_to_height,1)}}</p>
                        <canvas id="canvas-Pre" height="720" width="360" data-immagine="{{$PrimaAnalisi->Immagine}}"
                            data-eye="{{$PrimaAnalisi->eye}}" data-pixel_size="{{$PrimaAnalisi->pixel_size}}"
                            data-ankle="{{$PrimaAnalisi->ankle}}" data-thigh="{{$PrimaAnalisi->thigh}}"
                            data-height="{{$Cliente->Altezza}}" data-chest="{{$PrimaAnalisi->chest}}"
                            data-belly="{{$PrimaAnalisi->belly}}" data-hip="{{$PrimaAnalisi->hip}}"
                            data-tigh="{{$PrimaAnalisi->thigh}}" data-belly_front="{{$PrimaAnalisi->belly_front}}"
                            data-calf="{{$PrimaAnalisi->calf}}" data-belly_x="{{$PrimaAnalisi->belly_x}}"
                            data-chest_cm="{{$PrimaAnalisi->chest_cm}}" data-thigh_cm="{{$PrimaAnalisi->thigh_cm}}"
                            data-hip_cm="{{$PrimaAnalisi->hip_cm}}" data-calf_cm="{{$PrimaAnalisi->calf_cm}}"
                            data-belly_cm="{{$PrimaAnalisi->belly_cm}}"></canvas>
                    </div>
                    <div class="col-4   ">
                        <h4 class="text-center">Analisi Corrente</h4>
                       <p>{{$analisi->created_at->format('d/m/Y H:i')}}</p>
                        <p>Massa grassa addominale: {{round($analisi->abdominal_fat_mass,1)}} kg</p>
                        <p>Rapporto vita /altezza: {{round($analisi->waist_to_height,1)}}</p>
                        <canvas id="canvas-Current" height="720" width="360" data-immagine="{{$analisi->Immagine}}"
                            data-eye="{{$analisi->eye}}" data-pixel_size="{{$analisi->pixel_size}}" data-ankle="{{$analisi->ankle}}"
                            data-thigh="{{$analisi->thigh}}" data-height="{{$Cliente->Altezza}}" data-chest="{{$analisi->chest}}"
                            data-belly="{{$analisi->belly}}" data-hip="{{$analisi->hip}}" data-tigh="{{$analisi->thigh}}"
                            data-calf="{{$analisi->calf}}" data-belly_front="{{$analisi->belly_front}}"
                            data-belly_x="{{$analisi->belly_x}}" data-chest_cm="{{$analisi->chest_cm}}"
                            data-thigh_cm="{{$analisi->thigh_cm}}" data-hip_cm="{{$analisi->hip_cm}}"
                            data-calf_cm="{{$analisi->calf_cm}}" data-belly_cm="{{$analisi->belly_cm}}"></canvas>
                    </div>
                    <div class="col-3" >
                        <h4 class="text-center">Confronto</h4>
                        <div class="position-relative">
                            <p>{{\Carbon\Carbon::now()->format('d/m/Y H:i')}}</p>
                            <p>Massa grassa addominale: {{round($PrimaAnalisi->abdominal_fat_mass - $analisi->abdominal_fat_mass,2)}} kg</p>
                            <p>Rapporto vita /altezza: {{round($PrimaAnalisi->waist_to_height - $analisi->waist_to_height,1)}}</p>
                            <canvas id="canvas-Confronto" height="720" width="360" data-immagine=""
                                data-eye="{{$analisi->eye}}" data-pixel_size="{{$analisi->pixel_size}}" data-ankle="{{$analisi->ankle}}"
                                data-thigh="{{$analisi->thigh}}" data-height="{{$Cliente->Altezza}}" data-chest="{{$analisi->chest}}"
                                data-belly="{{$analisi->belly}}" data-hip="{{$analisi->hip}}" data-tigh="{{$analisi->thigh}}"
                                data-calf="{{$analisi->calf}}" data-belly_front="{{$analisi->belly_front}}"
                                data-belly_x="{{$analisi->belly_x}}" data-chest_cm="{{$analisi->chest_cm}}"
                                data-thigh_cm="{{$analisi->thigh_cm}}" data-hip_cm="{{$analisi->hip_cm}}"
                                data-calf_cm="{{$analisi->calf_cm}}" data-chest_cm_pre="{{$PrimaAnalisi->chest_cm}}"
                                data-thigh_cm_pre="{{$PrimaAnalisi->thigh_cm}}" data-hip_cm_pre="{{$PrimaAnalisi->hip_cm}}"
                                data-calf_cm_pre="{{$PrimaAnalisi->calf_cm}}" data-belly_cm_pre="{{$PrimaAnalisi->belly_cm}}"
                                data-belly_cm="{{$analisi->belly_cm}}">
            
                                
                            </canvas>
                            <div id="loading-spinner" class="position-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%); display: none;">
                                <p>Elaborazione in corso...</p>
                                <i class="fas fa-spinner fa-spin fa-3x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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









@stop

@section('css')
@stop

@section('js')
<script>
    var NomeFile;
    $(document).ready(function() {
        $('#loading-spinner').show();
        caricaimg();
        caricaConfronto();

    });

    async function caricaConfronto() {
        try {
            $('#loading-spinner').show();
            
            const response = await fetch('/api/Photo/Sovrapposizione', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    immaginePrima: '{{$PrimaAnalisi->Immagine}}',
                    idPrima: '{{$PrimaAnalisi->id}}',
                    immagineCurrent: '{{$analisi->Immagine}}',
                    idCurrent: '{{$analisi->id}}'
                })
            });

            if (!response.ok) {
                throw new Error('Errore nella chiamata API');
            }

            const data = await response.json();
            
            if (data.success) {
                $('#loading-spinner').hide();
                NomeFile = data.result;
                caricaimg();
            } else {
                console.error('Errore nel caricamento del confronto:', data.message);
            }

        } catch (error) {
            $('#loading-spinner').hide();
            console.error('Errore:', error);
        }
    }


    function caricaimg()
    {
    
           canvasPre = document.getElementById('canvas-Pre');
           ctxPre = canvasPre.getContext("2d"); 
           canvasCurrent = document.getElementById('canvas-Current');
           ctxCurrent = canvasCurrent.getContext("2d"); 
           canvasConfronto = document.getElementById('canvas-Confronto');
           ctxConfronto = canvasConfronto.getContext("2d"); 
           ImmaginePre = '{{asset('storage/images/'.$PrimaAnalisi->Immagine)}}';
           ImmagineCurrent = '{{asset('storage/images/'.$analisi->Immagine)}}';
           ImmagineSovrapposizione = '{{asset('storage/images/')}}/'+NomeFile;
           console.log('img',ImmagineSovrapposizione);
           img = new Image();
           invert = 1;
             line_color = '#ffffff'
             reference_line_color = '#1d7df2'
           IMG_W = 360;
           IMG_H = 720;
           imgCurrent = new Image();
           imgSovrapposizione = new Image();
           LoadImage(1,ctxCurrent,ImmagineCurrent,imgCurrent,canvasCurrent);
      
           LoadImage(1,ctxPre,ImmaginePre,img,canvasPre);
           LoadImage(0,ctxConfronto,ImmagineSovrapposizione,imgSovrapposizione,canvasConfronto);
 
           function LoadImage(invert,can,immagine,img,canvas){
            console.log(immagine);
        img.onload = function () {
        ctx = can
 
        ctx.drawImage(img, 0, 0, IMG_W, IMG_H);
        if(invert == 1){     // Inverti i colori
        const imageData = ctx.getImageData(0, 0, IMG_W, IMG_H);
        const data = imageData.data;

        
            for (let i = 0; i < data.length; i += 4) {
            data[i] = 255 - data[i];         // Rosso
            data[i + 1] = 255 - data[i + 1]; // Verde 
            data[i + 2] = 255 - data[i + 2]; // Blu
            // Alpha rimane invariato

        }

        for (let i = 0; i < data.length; i += 4) {
        // Se il pixel è molto scuro (vicino al nero)
        if (data[i] < 50 && data[i+1] < 50 && data[i+2] < 50) {
            // Schiarisce il pixel aumentando i valori RGB del 30%
            data[i] = Math.min(255, data[i] + 200);     // Rosso
            data[i+1] = Math.min(255, data[i+1] + 200); // Verde 
            data[i+2] = Math.min(255, data[i+2] + 200); // Blu
        }
    }
                ctx.putImageData(imageData, 0, 0);

    }else{
        const imageData = ctx.getImageData(0, 0, IMG_W, IMG_H);
        const data = imageData.data;

        
         
                ctx.putImageData(imageData, 0, 0);
    }
    init_tool(canvas,ctx,ctx.canvas.id);
    }
    img.src = immagine;

    }


    function init_tool(can,ctx,nome)
{
    canvas = can;
    scale_factor = 1920 / IMG_H
    person_height = canvas.getAttribute('data-height');

    eye_position = Math.floor(canvas.getAttribute('data-eye') / scale_factor)
    ankle_position = Math.floor(canvas.getAttribute('data-ankle') / scale_factor)
    belly_position = Math.floor(canvas.getAttribute('data-belly') / scale_factor)
    calf_position = Math.floor(canvas.getAttribute('data-calf') / scale_factor)
    hip_position = Math.floor(canvas.getAttribute('data-hip') / scale_factor)
    hip_cm = canvas.getAttribute('data-hip_cm') 
    hip_cm_pre = canvas.getAttribute('data-hip_cm_pre') 
    belly_cm = canvas.getAttribute('data-belly_cm')
    belly_cm_pre = canvas.getAttribute('data-belly_cm_pre') 
    chest_position = Math.floor(canvas.getAttribute('data-chest') / scale_factor)
    chest_cm = canvas.getAttribute('data-chest_cm') 
    chest_cm_pre =canvas.getAttribute('data-chest_cm_pre') 
    thigh_cm = canvas.getAttribute('data-thigh_cm') 
    thigh_cm_pre =canvas.getAttribute('data-thigh_cm_pre') 
    thigh_position = Math.floor(canvas.getAttribute('data-tigh') / scale_factor)
    calf_cm = canvas.getAttribute('data-calf_cm') 
    calf_cm_pre =canvas.getAttribute('data-calf_cm_pre') 
    belly_front = Math.floor(canvas.getAttribute('data-belly_front') / scale_factor)
    belly_x = Math.floor(canvas.getAttribute('data-belly_x') / scale_factor)
    console.log(thigh_position);
        frame_size = ankle_position - eye_position
        console.log(frame_size,person_height);
    pixel_size = (person_height / frame_size)
    console.log("pixel_size",pixel_size);

    bellyfront_line(ctx);
    draw_reference_lines(ctx,nome);
 
}

function bellyfront_line(ctx){

pixel = ctx.getImageData(0, belly_front, canvas.width, 1).data;
console.log(pixel);
lastX = 0;
let lastY = belly_front;
for(let i = 0; i < pixel.length; i+=4) {
    if(pixel[i] < 200 && pixel[i+1] < 200 && pixel[i+2] < 200) {
        lastX = Math.floor(i/4);
    }
}
console.log("Ultima coordinata x del pixel 150:", lastX);
console.log("Coordinata y:", lastY);
console.log("Belly front X coordinate:", belly_front);

}

function calcolaCoordinatePuntoDestro() {
    let maxX = 0;
    let maxY = 0;
    
    // Scansiona ogni riga dalla belly alla hip
    for(let y = belly_position; y <= hip_position; y++) {
        let pixel = ctx.getImageData(0, y, canvas.width, 1).data;
        
        // Trova il punto bianco più a destra su questa riga
        let lastX = 0;
        for(let i = 0; i < pixel.length; i+=4) {
            if(pixel[i] < 200 && pixel[i+1] < 200 && pixel[i+2] < 200) {
                lastX = Math.floor(i/4);
            }
        }
        
        // Aggiorna le coordinate se questo punto è più a destra
        if(lastX > maxX) {
            maxX = lastX;
            maxY = y;
        }
    }
    
    console.log("Coordinata X più a destra:", maxX);
    console.log("Coordinata Y corrispondente:", maxY);
    
    return {x: maxX, y: maxY};
}

function draw_reference_lines(context,nome) {
    ctx = context;
    console.log(eye_position);
    ctx.lineWidth = 1;
    ctx.strokeStyle = reference_line_color;

    ctx.beginPath();
    ctx.moveTo(0, eye_position);
    ctx.setLineDash([5, 5]);
    ctx.lineTo(canvas.width, eye_position);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(0, ankle_position);
    ctx.lineTo(canvas.width, ankle_position);
    ctx.stroke();


    ctx.moveTo(0, hip_position);
    ctx.lineTo(canvas.width, hip_position);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(0, chest_position);
    ctx.lineTo(canvas.width, chest_position);
    ctx.stroke();



   
    ctx.beginPath();
    ctx.moveTo(0, calf_position);
    ctx.lineTo(canvas.width, calf_position);
    ctx.stroke();
    ctx.beginPath();

    ctx.moveTo(0, thigh_position);
    ctx.lineTo(canvas.width, thigh_position);
    ctx.stroke();
    ctx.beginPath();
    ctx.stroke();
    ctx.setLineDash([]);



    ctx.font = "18px Arial";
    ctx.fillStyle = "#000000";
    if(nome == 'canvas-Pre'){
        ctx.fillText(chest_cm + " cm", 10, chest_position - 5);
        ctx.fillText(thigh_cm + " cm", 10, thigh_position - 5);
        ctx.fillText(hip_cm + " cm", 10, hip_position - 5);
        ctx.fillText(calf_cm + " cm", 10, calf_position - 5);
        ctx.fillText(belly_cm + " cm", 10, belly_position - 5);
        let puntoDestro = calcolaCoordinatePuntoDestro();
    console.log("Punto destro:", puntoDestro);
    ctx.strokeStyle = "green";
    ctx.beginPath();
    ctx.moveTo(belly_x, belly_position);
    ctx.lineTo(puntoDestro.x, puntoDestro.y);
    ctx.stroke();

    }else if(nome == 'canvas-Current'){
        
        ctx.fillStyle = "#ff0000";
        ctx.fillText(chest_cm + " cm", 280 , chest_position - 5);
        ctx.fillText(thigh_cm + " cm", 280, thigh_position - 5);
        ctx.fillText(hip_cm + " cm", 280, hip_position - 5);
        ctx.fillText(calf_cm + " cm", 280, calf_position - 5);
        ctx.fillText(belly_cm + " cm", 280, belly_position - 5);
        let puntoDestro = calcolaCoordinatePuntoDestro();
    console.log("Punto destro:", puntoDestro);
    ctx.strokeStyle = "green";
    ctx.beginPath();
    ctx.moveTo(belly_x, belly_position);
    ctx.lineTo(puntoDestro.x, puntoDestro.y);
    ctx.stroke();

    }else if(nome == 'canvas-Confronto'){
        ctx.setLineDash([5, 5]);
        ctx.beginPath();
    ctx.moveTo(0, belly_position);
    ctx.lineTo(canvas.width, belly_position);
    ctx.stroke();
        ctx.fillStyle = "#000000";
        ctx.fillText(chest_cm_pre + " cm", 10, chest_position - 5);
        ctx.fillText(thigh_cm_pre + " cm", 10, thigh_position - 5);
        ctx.fillText(hip_cm_pre + " cm", 10, hip_position - 5);
        ctx.fillText(calf_cm_pre + " cm", 10, calf_position - 5);
        ctx.fillText(belly_cm_pre + " cm", 10, belly_position - 5);
        ctx.fillStyle = "#ff0000";
        ctx.fillText(chest_cm + " cm",  280, chest_position - 5);
        ctx.fillText(thigh_cm + " cm", 280, thigh_position - 5);
        ctx.fillText(hip_cm + " cm", 280, hip_position - 5);
        ctx.fillText(calf_cm + " cm", 280, calf_position - 5);
        ctx.fillText(belly_cm + " cm", 280, belly_position - 5);
    }

}




    function mouse_pos(canvas, evt) {
         ClientRect = canvas.getBoundingClientRect();
    return {
        x: Math.round(evt.clientX - ClientRect.left),
        y: Math.round(evt.clientY - ClientRect.top)
    };
}
     
    }



     
</script>




@stop