@extends('layouts.app-bo')
@section('title', __('app.read') . ' : ' . $track_record->user_training->training->name)
@section('content')
<div class="main-content container-fluid">
    <section class="section">
        <form action="{{ route('track-record.store-read', [$locale]) }}" method="POST" enctype="multipart/form-data" class="needs-validation" id="form-track-record" novalidate>
            @csrf
            <input type="hidden" name="track_record_id" value="{{ $track_record->id }}" />
            <div class="card">
                <div class="card-body">
                    <div class="d-md-flex align-items-center justify-content-between">
                        <div class="mb-4 mb-md-0">
                            <h4 class="card-title">
                                {{ $track_record->user_training->training->name }}
                            </h4>
                        </div>
                        <div class="d-flex align-items-center justify-content-between gap-6">
                            <a href="{{ route('track-record.view', [$locale, $track_record->user_training->id]) }}" class="btn btn-info d-flex align-items-center gap-1 fs-3 py-2 px-9">
                                {{ __("app.back") }}
                            </a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 text-end">
                            {{ __('app.trainee_progress') }}
                        </div>
                        <div class="col-md-6">
                            <div class="progress" style="height: 20px;">
                                @php $style_progress_bar = 'style="width: ' . $progress_bar . '%"'; @endphp
                                <div class="progress-bar text-bg-success" role="progressbar" {!! $style_progress_bar !!}>
                                    {{ $progress_bar_count }} ({{ $progress_bar }}%)
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 text-end">

                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">
                        <b>{{ __("app.title") }} : </b> {{ $track_record->task->title }}
                    </h4>
                    <div class="row" id="data-path-row">
                        <div class="col-md-12 text-center" id="data-path-col">
                            @if ($task->data_type == 'image' && $data_path_name)
                            <img src="{{ $data_path }}" style="max-width:70%;height:auto;" title="{{ $data_path_name }}">
                            @endif
                            @if ($task->data_type == 'video' && $data_path_name)
                            <div class="text-center">
                                <video id="task-video"
                                    src="{{ $data_path }}"
                                    title="{{ $data_path_name }}"
                                    controls
                                    autoplay
                                    controlslist="nodownload"
                                    style="width:75%;height:auto;margin:auto;display:block;">
                                    {{ __('message.your_browser_does_not_support_the_video_tag') }}
                                </video>
                            </div>
                            @endif
                            @if ($task->data_type == 'url' && $data_path)
                            <div class="embed-responsive embed-responsive-16by9">
                                @if (strpos($data_path, 'iframe') !== false)
                                {!! $data_path !!}
                                @else
                                <div class="text-start mb-5">
                                    <label>{{ __('app.provided_url') }}</label>
                                    <div class="text-center">
                                        <iframe width="600" height="400" class="embed-responsive-item"
                                            src="{{ $data_path }}" title="{{ $task->name }}"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen>
                                        </iframe>
                                    </div>
                                </div>
                                @endif
                            </div>
                            @endif
                            @if ($task->data_type == 'media')
                            <div class="image-container">
                                @foreach ($data_path as $data_path_key => $data_path_val)
                                <div>
                                    <img src="{{ $data_path_val }}" style="width:100%;height:auto;" title="{{ $data_path_key }}">
                                </div>
                                @endforeach
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">

                        </div>
                        <div class="col-md-4">
                            <div class="form-check fs-7">
                                <input class="form-check-input" type="checkbox" name="trainee" id="trainee" value="1" onchange="this.form.submit()" {{ $track_record->trainee ? "checked" : "" }}>
                                <label class="form-check-label" for="trainee">
                                    {{ __('app.i_read_the_procedure') }}
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4">

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

@endsection