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

<style>
    .text-overlay {
        position: absolute;
        top: 50%;
        left: 25%;
        font-weight: bold;
        text-shadow: 2px 2px 5px rgba(0, 255, 0, 0.7);
    }
</style>
<div class="main-content container-fluid">
    <section class="section">
        <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">
                            {{ $user->fname }} {{ $user->lname }}
                        </h4>
                        <div class="mb-3 card-subtitle">{{ __("menus.$category->code") }}</div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between gap-6">
                        <a href="#" class="btn bg-primary-subtle text-primary d-flex align-items-center gap-1 fs-3 py-2 px-9" data-bs-toggle="modal" data-bs-target="#modal-dialog-category-tutorial-video" id="watch-training-tutorial">
                            {{ __("app.watch_the_training_tutorial") }}
                        </a>
                        <a href="{{ route('admin.dashboard', [$locale]) }}" class="btn btn-info d-flex align-items-center gap-1 fs-3 py-2 px-9">
                            {{ __("app.back") }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="row">
                 
                    @foreach ($user_trainings as $user_training)
                    @php
                    if (!$user_training->training->name) continue;
                    $images = $user_training->training->image;
                    $image_name = '';
                    $image_path = 'assets/images/backgrounds/active-bg.png';
                    foreach ($images as $key => $val)
                    {
                    $image_name = $key;
                    $image_path = $val;
                    }
                    @endphp
                    @php
                        $traineeCompletedCount = \App\Models\TrackRecord::where('trainee', 3)
                            ->where('user_training_id', $user_training->id)
                            ->count();

                        $instructorCompletedCount = \App\Models\TrackRecord::where('instructor', 1)
                            ->where('user_training_id', $user_training->id)
                            ->count();

                        $supervisorCompletedCount = \App\Models\TrackRecord::where('supervisor', 1)
                            ->where('user_training_id', $user_training->id)
                            ->count();
                            
                        $totalTrackRecords = \App\Models\TrackRecord::where('user_training_id', $user_training->id)
                            ->count();
                            
                        $isTraineeCompleted = ($traineeCompletedCount > 0 && $traineeCompletedCount == $totalTrackRecords);
                        $isInstructorCompleted = ($instructorCompletedCount > 0 && $instructorCompletedCount == $totalTrackRecords);
                        $isSupervisorCompleted = ($supervisorCompletedCount > 0 && $supervisorCompletedCount == $totalTrackRecords);
                    @endphp
                
               
                    <div class="col-lg-4 col-md-6 card-hover">
                        <div class="card" style="cursor: pointer;">
                            @if($isTraineeCompleted)
                                <div class="text-overlay text-dark" style="background-color: turquoise; position: absolute; top: 60px; left: 0; padding: 5px 10px; border-radius: 0 0 0 5px;">
                                    {{ __('app.completed_by_trainee') }}
                                </div>
                            @endif
                            @if($isInstructorCompleted)
                                <div class="text-overlay text-dark" style="background-color: turquoise; position: absolute; top: 100px; left: 0; padding: 5px 10px; border-radius: 0 0 0 5px;">
                                    {{ __('app.completed_by_instructor') }}
                                </div>
                            @endif
                            @if($isSupervisorCompleted)
                                <div class="text-overlay text-dark" style="background-color: turquoise; position: absolute; top: 140px; left: 0; padding: 5px 10px; border-radius: 0 0 0 5px;">
                                    {{ __('app.completed_by_supervisor') }}
                                </div>
                            @endif
                            <div class="card-header text-bg-{{ $user_training->is_completed ? 'success' : ($user_training->track_record_duration_second ? 'warning' : 'danger') }}">
                                <h4 class="mb-0 text-white card-title">{{ $user_training->training->name }}</h4>
                            </div>
                            @if (!in_array($user_training->training->category->id, array(2)))
                            <div class="h-200px">
                                @if ($image_name)
                                <img class="card-img-top img-responsive w-100 h-200px" src="{{ Storage::url($image_path) }}" alt="{{ $image_name }}">
                                @else
                                <img class="card-img-top img-responsive w-100 h-200px" src="{{ url($image_path) }}">
                                @endif
                            </div>
                            @endif
                            @if ($user_training->is_completed && $user_training->date)
                            <div class="text-overlay text-primary">
                                {{ __('app.attestation') }} {{ $user_training->date }}
                            </div>
                            @endif
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-7">
                                        <div>
                                            <b>{{ __('app.department') }} : </b>
                                            <span>{{ $user_training->training->department->name ? : '-' }}</span>
                                        </div>
                                        <div>
                                            <b>{{ __('app.prefix') }} : </b>
                                            <span>{{ $user_training->training->prefix ? : '-' }}</span>
                                        </div>
                                        <div>
                                            <b>{{ __('app.revision') }} : </b>
                                            <span>{{ $user_training->training->rev ? : '-' }}</span>
                                        </div>
                                        <div>
                                            <b>{{ __('app.renewal_date') }} : </b>
                                            <span>{{ 'xxxx' ? : '-' }}</span>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <div>
                                            <b>{{ __('app.time_taken') }} : </b>
                                            <span>{{ $user_training->track_record_duration }}</span>
                                        </div>
                                        <div>
                                            @if (!$user_training->track_record_duration_second)
                                            <a href="{{ $category->id == 3 ? route('user-training.trainee', [$locale, 'id' => $user_training->id]) : route('track-record.view', [$locale, $user_training->id]) }}" class="btn btn-xs btn-success align-items-center gap-1 fs-3 mt-1 w-100">
                                                <i class="ti ti-player-play fs-4"></i>
                                                {{ __('app.start') }}
                                            </a>
                                            @else
                                            @if ($user_training->is_completed)
                                            <a href="{{ $category->id == 3 ? route('user-training.trainee', [$locale, 'id' => $user_training->id]) : route('track-record.view', [$locale, $user_training->id]) }}" class="btn btn-xs btn-danger align-items-center gap-1 fs-3 mt-1 w-100">
                                                {{ __('app.completed') }}
                                            </a>
                                            @else
                                            <a href="{{ $category->id == 3 ? route('user-training.trainee', [$locale, 'id' => $user_training->id]) : route('track-record.view', [$locale, $user_training->id]) }}" class="btn btn-xs btn-success align-items-center gap-1 fs-3 mt-1 w-100">
                                                <i class="ti ti-player-play fs-4"></i>
                                                {{ __('app.start') }}
                                            </a>
                                            @endif
                                            @endif
                                            <a class="btn btn-xs btn-warning align-items-center gap-1 fs-3 mt-1 w-100" data-id="{{ $user_training->training->id }}" data-bs-toggle="modal" data-bs-target="#modal-dialog-details-training" id="details-training">
                                                <i class="ti ti-info-circle fs-4"></i>
                                                {{ __('app.details') }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @if (!count($user_trainings))
                <style>
                    .overlay-text {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        color: white;
                        background-color: rgba(0, 0, 0, 0.5);
                        padding: 10px 20px;
                        border-radius: 5px;
                    }
                </style>
                <img src="{{ Storage::url($category->image) }}" class="card-img-top rounded-0" alt="{{ __('menus.' . $category->code) }}">
                <div class="overlay-text">
                    <h1 style="color: white;">{{ __("app.soon_available") }}</h1>
                </div>
                @endif
            </div>
        </div>
    </section>
</div>


<!-- Modal dialog detail -->
<div id="modal-dialog-details-training" class="modal fade" tabindex="-1" aria-labelledby="modal-dialog-details-training-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header modal-colored-header bg-info text-white">
                <h4 class="modal-title text-white" id="modal-dialog-details-training-label">
                    {{ __('app.details') }}
                </h4>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="id" id="id" value="0">
                <div id="details">
                    {{ __('app.details') }} ...
                </div>
            </div>
            <hr />
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                    <i class="ti ti-circle-x fs-4"></i>
                    {{ __('app.close') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal dialog video -->
<div id="modal-dialog-category-tutorial-video" class="modal fade" tabindex="-1" aria-labelledby="modal-dialog-category-tutorial-video-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header modal-colored-header bg-primary text-white">
                <h4 class="modal-title text-white" id="modal-dialog-category-tutorial-video-label">
                    {{ __('message.category_tutorial_video') }} : {{ __('menus.' . $category->code) }}
                </h4>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    @if ($tutorial_video)
                    <video id="category-tutorial-video"
                        src="{{ $tutorial_video }}"
                        title="{{ __('menus.' . $category->code) }}"
                        controls
                        autoplay
                        controlslist="nodownload"
                        style="width:100%;height:auto;margin:auto;display:block;">
                        {{ __('message.your_browser_does_not_support_the_video_tag') }}
                    </video>
                    @else
                    <h1>{{ __('message.no_tutorial_video') }}</h1>
                    @endif
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="button-category-tutorial-video" data-bs-dismiss="modal">
                    <i class="ti ti-player-skip-forward fs-4"></i>
                    {{ __('message.skip') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Javascript -->
<script type="text/javascript">
    $(function() {
        $("#modal-dialog-category-tutorial-video").modal("show");
    });
</script>

<script type="text/javascript">
    $(function() {
        $("#watch-training-tutorial").click(function() {
            var video = $("#category-tutorial-video").get(0);
            video.play();
        });

        $("#button-category-tutorial-video").click(function() {
            var video = $("#category-tutorial-video").get(0);
            video.pause();
            video.currentTime = 0;
        });

        $("a#details-training").click(function() {
            var id = $(this).data("id");
            $.ajax({
                url: '{{ route("train-user.training.get", [$locale]) }}',
                type: 'GET',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id,
                    model: 'Training'
                },
                dataType: 'json',
                success: function(training) {
                    if (training) {
                        var details = training.details;
                        details = details.replace(/(?:\r\n|\r|\n)/g, '<br/>');
                        $("#modal-dialog-details-training #modal-dialog-details-training-label").html(training.name);
                        $("#modal-dialog-details-training #id").val(training.id);
                        $("#modal-dialog-details-training #details").html(details);
                    }
                }
            });
        });
    });
</script>
@endsection