@extends('layouts.master')

@section('browserTitle')
{{ trans('menu.exResDetails') }}
@endsection


@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('clinicianIndex') }}">{{ trans('menu.home') }}</a></li>
<li class="breadcrumb-item"><a href="{{ route('exerciseResults.index') }}">{{ trans('menu.showExRes') }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ trans('btn.details') }}</li>
@endsection


@section('title')
{{ trans('menu.patient') }} {{ $ex_result->patient->user->firstname }} {{ $ex_result->patient->user->lastname }}
@endsection


@section('subtitle')
{{ trans('menu.exResDetails') }}
@endsection


@section('body')
<script>
    $(document).ready(function() {
        // Calcola la percentuale di completamento dell'esercizio
        var n_correct_target = "";
        var n_target = "";
        var n_missing_target = "";
        var n_errors = "";
        var n_input = "";
        var t = "";
        var t_max = "";
        updateProgressBar(n_correct_target, n_target, 1);
        updateProgressBar(n_missing_target, n_target, 2);
        updateProgressBar(n_errors, n_input - n_target, 3);
        updateProgressBar(t, t_max, 4);

        function updateProgressBar(val1, val2, i) {
            var progressPercent = (val1 / val2) * 100;
            console.log(progressPercent);

            var progressBar = document.getElementById('dynamic-progress-bar' + i);
            progressBar.style.width = progressPercent + '%'; // Imposta la larghezza dinamicamente
            progressBar.setAttribute('aria-valuenow', progressPercent);
            progressBar.textContent = Math.round(progressPercent) + '%';
            if(i == 1) {
                if(progressPercent < 25) {
                    progressBar.classList.add('bg-danger');
                } else if(progressPercent < 75) {
                    progressBar.classList.add('bg-warning');
                } else {
                    progressBar.classList.add('bg-success');
                }
            } else {
                if(progressPercent < 25) {
                    progressBar.classList.add('bg-success');
                } else if(progressPercent < 75) {
                    progressBar.classList.add('bg-warning');
                } else {
                    progressBar.classList.add('bg-danger');
                }
            }
        } 
    });
</script>



<div class="row">
    <div class="col-xs-6 d-flex justify-content-end">
        <p>
            <a class="my-btn my-blue-btn" href="{{ route('exerciseResults.index') }}">{{ trans('btn.back') }}
            </a>
        </p>
    </div>
</div>

    

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">
            <table class="table">
                <tbody>
                    <tr>
                        <!-- <th scope="row">Firstname</th> -->
                        <td>{{ $ex_result->patient->user->firstname }} {{ $ex_result->patient->user->lastname }}</td>
                    </tr>
                    <!-- <tr>
                        <th scope="row">Lastname</th>
                        <td>{{ $ex_result->patient->user->lastname }}</td>
                    </tr> -->
                    <tr>
                        <!-- <th scope="row">Date</th> -->
                        <td>{{ $ex_result->date }}</td>
                    </tr>
                    
                    <tr>
                        <!-- <th scope="row">Exercise</th> -->
                        <td>"{{ $ex_result->ex_name }}"</td>
                    </tr>
                    <tr>
                        <td><img src="/img/{{ $ex_result->ex_code }}.png" class="img-fluid ex-element"></td>
                    </tr>

                    <!-- <tr>
                        <th scope="row">Values</th>
                        <td>
                            <div>
                                <table class="table table-bordered border-primary">
                                    <tbody>
                                        <tr>
                                            <th scope="row">Time (sec)</th>
                                            @if($ex_result->t == -1 )
                                                <td>Time expired</td>
                                            @else
                                            <td>{{ intval($ex_result->t / 1000) }}</td>
                                            @endif
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        
                        </td>
                    </tr> -->


                </tbody>
            </table>

            
        </div>


        <!-- <div class="col-sm-8 justify-content-center">
            <div class="row mb-3">
                <div class="container">
                    <div class="card text-center shadow-sm">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-4">
                                    <h5 class="card-title">Tempo Impiegato</h5>
                                    <p class="card-text">15 minuti</p>
                                </div>
                                <div class="col-sm-4">
                                    <h5 class="card-title">Tempo totale</h5>
                                    <p class="card-text">20 minuti</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" 
                                        aria-valuemin="0" aria-valuemax="100">75%
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="container">
                    <div class="card text-center shadow-sm">
                        <div class="card-body">
                            <h5 class="card-title">Numero di Errori</h5>
                            <p class="card-text">3 errori</p>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->

        <div class="col-sm-8 justify-content-center">
            <div class="row mb-3">
                <div class="card text-center shadow-sm">
                    <div class="card-body">
                        <div class="row justify-content-center">
                            <div class="col-sm-4">
                                <h5 class="card-title">{{ trans('other.correctT') }}</h5>
                                <p class="card-text">{{ $ex_result->n_correct_targets }}</p>
                            </div>
                            <div class="col-sm-4">
                                <h5 class="card-title">{{ trans('other.totalT') }}</h5>
                                <p class="card-text">{{ $ex_result->n_target }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <!-- <div class="progress">
                                <div id="dynamic-progress-bar1" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" 
                                    aria-valuemin="0" aria-valuemax="100">
                                    0%
                                </div>
                            </div> -->
                            <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar" id="dynamic-progress-bar1" style="width: 25%">25%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="card text-center shadow-sm">
                    <div class="card-body">
                        <div class="row justify-content-center">
                            <div class="col-sm-4">
                                <h5 class="card-title">{{ trans('other.missingT') }}</h5>
                                <p class="card-text">{{ $ex_result->n_missing_targets }}</p>
                            </div>
                            <div class="col-sm-4">
                                <h5 class="card-title">{{ trans('other.totalT') }}</h5>
                                <p class="card-text">{{ $ex_result->n_target }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar" id="dynamic-progress-bar2" style="width: 25%">25%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="card text-center shadow-sm">
                    <div class="card-body">
                        <div class="row justify-content-center">
                            <div class="col-sm-4">
                                <h5 class="card-title">{{ trans('other.errors') }}</h5>
                                <p class="card-text">{{ $ex_result->n_errors }}</p>
                            </div>
                            <div class="col-sm-4">
                                <h5 class="card-title">{{ trans('other.totalD') }}</h5>
                                <p class="card-text">{{ $ex_result->n_input - $ex_result->n_target }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar" id="dynamic-progress-bar3" style="width: 25%">25%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="card text-center shadow-sm">
                    <div class="card-body">
                        <div class="row justify-content-center">
                            <div class="col-sm-4">
                                <h5 class="card-title">{{ trans('other.time') }}</h5>
                                <p class="card-text">{{ intval($ex_result->t / 1000) }} sec</p>
                            </div>
                            <div class="col-sm-4">
                                <h5 class="card-title">{{ trans('other.maxTime') }}</h5>
                                <p class="card-text">{{ intval($ex_result->t_max / 1000) }} sec</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar" id="dynamic-progress-bar4" style="width: 25%">25%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection