@extends('layouts.app-bo')
@section('title', __('app.training'))
@section('content')

    <style>
        .progress {
            height: 15px;
        }
        .progress-bar {
            font-size: 12px;
            line-height: 25px;
        }
    </style>
    <div class="main-content container-fluid">
        <section>
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-9 text-center">
                            @php
                                $totalTasks = App\Models\TrackRecord::where('user_training_id', $track_record->user_training_id)->count();
                                $masteredTasks = App\Models\TrackRecord::where('user_training_id', $track_record->user_training_id)
                                    ->where('trainee', 3)
                                    ->count();
                                $progressPercentage = ($totalTasks > 0) ? round(($masteredTasks / $totalTasks) * 100) : 0;
                            @endphp

                            <div class="progress mb-3">
                                <div class="progress-bar bg-primary" role="progressbar" 
                                    style="width: {{ $progressPercentage }}%"
                                    aria-valuenow="{{ $progressPercentage }}" 
                                    aria-valuemin="0" 
                                    aria-valuemax="100">
                                    {{ $progressPercentage }}%
                                </div>
                            </div>
                        </div>
                        <div class="col-3 text-center mb-3">
                                <!-- Previous Button -->
                                <a id="prevtask" class="btn btn-primary">
                                    <iconify-icon icon="ph:arrow-left-bold"></iconify-icon>
                                </a>
    
                                <!-- Next Button -->
                                <button type="submit" form="myForm" class="btn btn-primary"><iconify-icon icon="ph:arrow-right-bold"></iconify-icon></button>
                        </div>


                    

                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-9">
                                <h3>{{ __('app.title') }}: {{ $track_record->task->title }}</h3>
                            </div>
                            <div class="col-3">
                                <a href="{{ route('user-training.trainee', [$locale, $track_record->user_training_id]) }}" class="btn btn-danger float-start">
                                    <iconify-icon icon="ph:x-bold"></iconify-icon> {{ __('app.stop') }}
                                </a>
                            </div>
                        </div>


                        <form id="myForm" method="POST" action="{{ route('track-record.test', [$locale, $track_record]) }}">
                            @csrf
                            <div class="row mt-5">
                                <div class="col-7">
                                    <!-- Display task content based on data type -->
                                    @php 
                                        $path = unserialize($track_record->task->data_path);                                         
                                        $src = reset($path);
                                        $src = Storage::url($src);
                                    @endphp
                                    
                                    @if ($track_record->data_type === 'image')
                                        <img src="{{ $src }}" class="img-responsive" style="width:100%;">
                                    @elseif ($track_record->data_type === 'video')
                                        <video src="{{ $src }}" controls style="width:100%;"></video>
                                    @elseif ($track_record->data_type === 'pdf')
                                        <iframe src="{{ $src }}" width="100%" height="500px"></iframe>
                                    @endif
                                </div>
                                <div class="col-5">
                                    @if($isTrainee)
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('assets/images/booklet/apprenti.jpg') }}" class="img-responsive me-2" style="width:10%;">
                                            <select name="trainee" id="trainee" class="form-control" style="font-size: 12px; width: 80%;">
                                                <option value="">{{ __('app.select') }}</option>
                                                <option value="1"><iconify-icon icon="ph:check-bold"></iconify-icon>{{ __('app.i_read_the_task') }}</option>
                                                <option value="2"><iconify-icon icon="ph:spinner-bold"></iconify-icon> {{ __('app.i_read_the_task_and_it_is_in_progress') }}</option>
                                                <option value="3"><iconify-icon icon="ph:check-bold"></iconify-icon> {{ __('app.i_understand_and_have_mastered_the_task') }}</option>
                                            </select>
                                        </div>
                                    @endif
                                <!-- Instructor Checkbox -->
                                @if ($isInstructor)
                                    <div class="mt-3">
                                        <img src="{{ asset('assets/images/booklet/instructor.jpg') }}" class="img-responsive" style="width:10%;">
                                        <input type="checkbox" name="instructor" value="1" {{ old('instructor') ? 'checked' : '' }} {{$isInstructor ? '' : 'disabled' }}>
                                            <label style="font-size: 11px;">{{ __('app.the_trainee_can_perform_the_task_autonomously_and_safely') }}</label>
                                    </div>
                                @endif

                                <!-- Supervisor Checkbox -->
                                @if ($isSupervisor)
                                        <div class="mt-3">
                                            <img src="{{ asset('assets/images/booklet/supervisor.jpg') }}" class="img-responsive" style="width:10%;">
                                            <input type="checkbox" name="supervisor" value="1" {{ old('supervisor') ? 'checked' : '' }} {{$isSupervisor ? '' : 'disabled' }}>
                                            <label style="font-size: 11px">{{ __('app.the_trainee_has_mastered_the_task') }}</label>
                                        </div>
                                @endif
                                </div>
                            </div>


                            <div class="row">
                                <div class="col-12">
                                    <label style="font-size: 15px;">{{ __('app.comments') }}</label>
                                    @if ($isInstructor)
                                        <textarea name="comments2" rows="6" style="width: 100%;" class="form-control mt-3">{{ old('comments2') }}</textarea>
                                    @elseif ($isSupervisor)
                                        <textarea name="comments3" rows="6" style="width: 100%;" class="form-control mt-3">{{ old('comments3') }}</textarea>
                                    @else
                                        <textarea name="comments" rows="6" style="width: 100%;" class="form-control mt-3">{{ old('comments') }}</textarea>
                                    @endif
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
        </section>
    </div>

    @include('lib.training-confirm-dialog')
@endsection