@extends('layouts.app-bo')
@section('title', $user_training->training->name)
@section('content')
<style>
    .header-group {
        background-color: #AAAADD !important;
    }

    .blink {
        animation: blinker 1s linear infinite;
    }

    @keyframes blinker {
        50% {
            opacity: 0;
        }
    }
</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_training->training->name }}
                        </h4>
                        <div class="mb-3 card-subtitle"><b> {{ __('app.trainee') }} : </b> {{ $user->fname }} {{ $user->lname }}</div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between gap-6">
                        @if ($completed_training)
                        <a href="{{ route('user-training.view-attestation', [$locale, $user_training->id]) }}" target="_blank" class="btn btn-primary d-flex align-items-center gap-1 fs-3 py-2 px-9">
                            {{ __("app.attestation") }}
                        </a>
                        @endif
                        <a href="{{ route('train-user.index', [$locale, $user_training->training->category->id]) }}" 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">
                @if ($user_training->training->category->id == 2)
                @include('train.view-list-two')
                @else
                @include('train.view-list-one')
                @endif
                <div class="row mt-3">
                    <div class="col-md-4"></div>
                    <div class="col-md-8 text-end fs-5">
                        <b>{{ __('app.estimated_time') }} : </b>{{ $user_training->estimated_time }}
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <b>{{ __('app.time_taken') }} : </b><span class="text-success">{{ $user_training->track_record_duration }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h4 class="card-title">
                            {{ __("app.training_documents") }} ({{ count($documents_training) }})
                        </h4>
                    </div>
                    <div class="col-md-6">
                        <h4 class="card-title">
                            {{ __("app.uploaded_documents") }} ({{ count($documents_user_training) }})
                        </h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="{{ $setting->table_div_class }}">
                            <table class="{{ $setting->table_class }}">
                                <tbody class="{{ $setting->table_tbody_class }}">
                                    @foreach ($documents_training as $document_name => $document_path)
                                    @php
                                    $link_path = route('other.download', [$locale, $document_name]);
                                    @endphp
                                    <tr>
                                        <td>
                                            <a href="{{ $link_path }}">
                                                <h5>{{ $document_name }}</h5>
                                            </a>
                                        </td>
                                        <td class="table-actions">
                                            <a href="{{ $link_path }}" class="text-primary edit">
                                                <i class="ti ti-download fs-5"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="{{ $setting->table_div_class }}">
                            <table class="{{ $setting->table_class }}">
                                <tbody class="{{ $setting->table_tbody_class }}">
                                    @foreach ($documents_user_training as $document_name => $document_path)
                                    @php
                                    $link_path = route('other.download', [$locale, $document_name]);
                                    @endphp
                                    <tr>
                                        <td>
                                            <a href="{{ $link_path }}">
                                                <h5>{{ $document_name }}</h5>
                                            </a>
                                        </td>
                                        <td class="table-actions">
                                            <a href="{{ $link_path }}" class="text-primary edit">
                                                <i class="ti ti-download fs-5"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <form action="{{ route('track-record.store.documents', $locale) }}" method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>
                            @csrf
                            <input type="hidden" name="user_training_id" value="{{ $user_training->id }}" />
                            <!--
                                <div class="dropzone" id="dropzone-documents">
                                    <div class="dz-button" type="button">{{ __('app.drag_drop_files_here') }}</div>
                                </div>
                            -->
                            <input class="form-control" id="documents" name="documents[]" type="file" placeholder="{{ __('app.select_files') }}" multiple onchange="this.form.submit()" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @if ($user_training->training->category->id == 2)
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 text-start">
                        <h4 class="card-title">
                            {{ __('app.status') }} : {{ $completed_training ? __('app.completed') : __('app.in_progress') }}
                        </h4>
                    </div>
                    <div class="col-md-6 text-end">
                        <h4 class="card-title">
                            {{ $tasks_status[2] }} / {{ $tasks_status[0] }} {{ __('app.completed') }}
                        </h4>
                    </div>
                </div>
                <div id="chart-status-two"></div>
            </div>
        </div>
        @endif
    </section>
</div>

@if ($user_training->training->category->id == 2)
<script type="text/javascript">
    $(function() {
        var options_basic = {
            series: [{
                name: "{{ __('app.count') }}",
                data: null            }],
            chart: {
                fontFamily: "inherit",
                type: "bar",
                height: 350,
                toolbar: {
                    show: true,
                },
            },
            grid: {
                borderColor: "transparent",
            },
            colors: ["var(--bs-primary)", "var(--bs-success)", "var(--bs-warning)"],
            plotOptions: {
                bar: {
                    horizontal: false,
                    distributed: true
                },
            },
            dataLabels: {
                enabled: false,
            },
            xaxis: {
                categories: [
                    "{{ __('app.total') }}",
                    "{{ __('app.completed') }}",
                    "{{ __('app.not_completed') }}"
                ],
                labels: {
                    style: {
                        colors: "#a1aab2",
                    },
                },
            },
            yaxis: {
                title: {
                    text: "{{ __('app.count') }}",
                },
                labels: {
                    style: {
                        colors: "#a1aab2",
                    },
                    formatter: function(value) {
                        return Math.floor(value);
                    }
                },
            },
            tooltip: {
                theme: "dark",
            },
        };

        var chart_status_two = new ApexCharts(document.querySelector("#chart-status-two"), options_basic);
        chart_status_two.render();
    });
</script>
@endif
@endsection