@php
    $percentageFinished = 0;
    if ($enrollment->course->lessons_without_homework_count > 0)
        $percentageFinished = ($enrollment->finished_lessons_count / $enrollment->course->lessons_without_homework_count) * 100;
@endphp
@php
    $params = [];
    if (session()->has('my-courses.filters')) {
        $params = session()->get('my-courses.filters');
    }
    $route = route('lms.my-courses', $params);
    if(request()->routeIs('lms.my-courses')) {
        $route = route('lms.my-course', [
            // $enrollment->package->slug,
            $enrollment->course->slug,
            'enrollment_id' => $enrollment->id
        ]);
    }else if ($enrollment->parent_id != -1) {
        $route = route('lms.my-training', [
            'course_slug' => $enrollment->course->slug,
            'enrollment_id' => $enrollment->parent_id
        ]);
    }
@endphp
<div class="top-course">
    <div class="top-course-title">
        <h1>
            <a href="{{ $route }}">
                <!-- left-arrow -->
                @if ($showBackBtn)
                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362.04 102.38">
                    <path d="M3.67,168.42c-4.9,2.45-4.9,10.4,0,12.85,37.94,20.81,76.5,39.78,118.12,50.8,6.12,1.22,12.24-5.51,8.57-11a139.91,139.91,0,0,0-31.21-31.82c85.68,2.45,174.42,14.08,258.88-6.12,6.12-1.22,4.9-11.63-1.23-11-87.52,11-174.42,2.45-261.94,1.22,9.18-10.4,18.36-20.81,27.54-30.6,4.28-4.28,1.84-13.46-5.51-12.85C76.5,134.76,38.56,148.22,3.67,168.42Zm72.83,6.73c-5.51,3.67-4.28,14.08,4.28,14.08H82c7.34,7.34,14.69,14.08,22,22-28.15-9.79-54.47-22-80.78-36.11,23.87-12.24,48.35-21.42,74.66-26.32-6.12,6.73-12.24,14.08-19,20.81A4.52,4.52,0,0,0,76.5,175.15Z" transform="translate(0 -129.83)"/>
                    </svg>
                @endif
                {{ $enrollment->course->title }}
            </a>
        </h1>
        <p class="text-light">{{ $enrollment->course->description }}</p>
    </div>
    <!-- top-course-title end -->
    <div class="row">
        <div class="col-lg-4">
            <div class="course-data">
                <div class="course-status">
                    <!-- turn-right-arrow -->
                    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 421.94 189.4">
                    <path d="M418.05,273.64a267.64,267.64,0,0,1-48.35-38.56c-4.9-4.9-13.46-1.23-13.46,5.51,0,5.51-.61,11-.61,16.52-53.24,9.79-106.49,14.08-161,14.69C148.77,273,87,277.92,45.35,255.89,13.52,238.76,8.63,199,22.09,168.37c5.51-12.85,15.3-23.26,27.54-30.6,14.08-8.57,28.15-3.67,42.84-7.34,1.84-.61,2.45-3.06,1.22-4.9C71,101.67,31.27,129.21,16.58,148.79c-20.81,27.54-22,67.93-3.67,96.7,26.93,42.84,91.19,39.78,134.64,41,68.54,2.45,140.76.61,208.08-14.69a59.16,59.16,0,0,0,2.45,17.75A3.18,3.18,0,0,0,359.3,292c-4.9,4.28-.61,15.3,8,13.46a225.49,225.49,0,0,0,52-17.14C423.56,284.66,422.34,276.7,418.05,273.64Zm-47.12-15.91c8.57,7.34,17.14,14.69,26.93,21.42-8.57,3.67-17.75,6.12-26.93,8.57v-2.45C369.09,276.09,369.71,266.91,370.93,257.73Z" transform="translate(0 -116.27)"></path>
                    </svg>
                    <div class="course-count">
                        <a href="#" target="_blank">
                            <!-- layers -->
                            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 474.58 483.94">
                            <path d="M489.35,148.68l3-3c2-3.94,1-7.88-3-9.85-38.4-20.68-77.78-41.35-116.18-61C333.78,55.14,295.38,34.46,256,15.75,293.42,39.38,330.83,61,368.25,83.69c33.48,19.69,67.94,39.38,101.42,59.08L366.28,198.89,256,258l-110.28-61L42.34,140.8c33.48-19.69,67.94-39.38,101.42-59.08C181.17,59.08,218.58,37.42,256,13.78c-39.38,19.69-77.78,39.38-117.17,59.08-38.4,20.68-77.78,40.37-116.18,61a13.59,13.59,0,0,1-3,3.94c-2,3.94-1,7.88,3,10.83,13.78,7.88,6.89,3.94,87.63,50.22-29.54,14.77-58.09,30.52-87.63,46.28-1,0-2,1-3,2-2,3.94-1,7.88,3,10.83,13.78,7.88,5.91,3.94,87.63,50.22C80.74,323,52.18,338.71,22.65,354.46c-1,0-2,1-3,2-2,3.94-1,7.88,3,10.83,37.42,21.66,75.82,43.32,114.22,65l114.22,64a8.94,8.94,0,0,0,9.85,0l114.22-64c38.4-21.66,75.82-43.32,114.22-65l3-3c2-3.94,1-7.88-3-9.85-28.55-15.75-58.09-30.52-87.63-46.28,78.77-45.29,74.83-42.34,87.63-50.22l3-3c2-3.94,1-7.88-3-9.85-28.55-15.75-58.09-30.52-87.63-46.28,29.54-16.74,58.09-33.48,87.63-50.22ZM469.66,360.37,366.28,416.49,256,476.55,145.72,416.49,42.34,360.37c26.58-14.77,53.17-30.52,78.77-46.28,26.58,14.77,36.43,20.68,130,72.86a8.94,8.94,0,0,0,9.85,0c93.54-52.18,101.42-57.11,130-72.86C417.48,329.85,443.08,344.62,469.66,360.37Zm0-109.29L366.28,307.2,256,367.26,145.72,307.2,42.34,251.08c26.58-14.77,53.17-30.52,78.77-46.28,26.58,14.77,35.45,19.69,130,72.86a8.94,8.94,0,0,0,9.85,0l114.22-64c4.92-3,9.85-5.91,15.75-8.86,26.58,15.75,52.18,30.52,78.77,46.28Z" transform="translate(-18.71 -13.78)"/>
                            </svg>
                            {{ $enrollment->finished_lessons_count }}/{{ $enrollment->course->lessons_without_homework_count }} lekcija
                        </a>
                    </div>
                    <!-- course-count end -->
                    {{-- @if ($enrollment->total_question_count ?? false) --}}
                        <div class="course-medal">
                            <a href="#" target="_blank">
                                <!-- award -->
                                <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 384.47">
                                <path d="M202,246.39l-5.9,35a20.23,20.23,0,0,0,29.5,21.2L256,286.32l30.41,16.29a20.23,20.23,0,0,0,29.5-21.2l-5.9-35,25.08-24.91a20.22,20.22,0,0,0-11.29-34.36L289.46,182l-15.26-31.5h0a20.23,20.23,0,0,0-36.41,0L222.54,182l-34.34,5.09a20.22,20.22,0,0,0-11.29,34.36Zm26-40.91a20.22,20.22,0,0,0,15.24-11.19L256,168l12.74,26.3A20.21,20.21,0,0,0,284,205.48l28.86,4.27-21.12,21A20.27,20.27,0,0,0,286,248.45L291,277.83,265.54,264.2a20.21,20.21,0,0,0-19.09,0L221,277.83,226,248.44a20.28,20.28,0,0,0-5.7-17.7l-21.12-21Z" transform="translate(-32 -63.6)"/>
                                <path d="M32.63,375.46a12,12,0,0,0,9.77,8.05L90.11,390l6.43,47.72a12,12,0,0,0,8.05,9.77,11.86,11.86,0,0,0,3.84.63,12,12,0,0,0,8.48-3.52l74.21-74.21a158.77,158.77,0,0,0,129.75,0l74.21,74.21a12,12,0,0,0,8.48,3.52,11.86,11.86,0,0,0,3.84-.63,12,12,0,0,0,8.05-9.77L421.89,390l47.71-6.44a12,12,0,0,0,6.88-20.37l-74.21-74.2a160.14,160.14,0,1,0-292.56,0l-74.21,74.2a12,12,0,0,0-2.89,12.32ZM442.38,363l-32.76,4.42a12,12,0,0,0-10.29,10.29l-4.42,32.77-52-52a161.22,161.22,0,0,0,47.47-47.47ZM256,87.93A136.14,136.14,0,1,1,119.86,224.07,136.14,136.14,0,0,1,256,87.93Zm-134.34,223a161.22,161.22,0,0,0,47.47,47.47l-52,52-4.42-32.77a12,12,0,0,0-10.29-10.29L69.62,363Z" transform="translate(-32 -63.6)"/>
                                </svg>
                                {{ $enrollment->enrollment_correct_answers_count ?? 0 }}/{{ $enrollment->course->total_questions_count ?? 0 }}
                            </a>
                        </div>
                    {{-- @endif --}}
                    <!-- course-medal end -->
                    @if($enrollment->course->total_video_duration > 0)
                        <div class="course-time">
                            <!-- stop-watch -->
                            @include('front-inc.svg.stop-watch') 
                            {{ DateFormater::secondsToHumanReadable($enrollment->course->total_video_duration, false, 'h:i') }}
                        </div>
                        <!-- course-time end -->
                    @endif
                </div>
                <!-- course-status end -->
                @if($enrollment->course->categories->count() != 0)
                    @if ($enrollment->course->categories->first()->parentCategory)
                        <a class="dark-link course-link" href="{{ route('lms.my-courses', ['categories' => $enrollment->course->categories->first()->parentCategory->id]) }}">
                            {{ $enrollment->course->categories->first()->parentCategory->name }}
                        </a>
                    @else
                        <a class="dark-link course-link" href="{{ route('lms.my-courses', ['categories' => $enrollment->course->categories->first()->id]) }}">
                            {{ $enrollment->course->categories->first()->name }}
                        </a>
                    @endif
                @endif
                @if ($enrollment->course->instructor)
                / 
                    <a
                            class="dark-link"
                            href="{{ route('lms.instructor.show', [
                                'instructor_id' => $enrollment->course->instructor->id,
                                'first_name' => $enrollment->course->instructor->first_name
                            ]) }}"
                        >
                        {{ $enrollment->course->instructor->first_name.' '.$enrollment->course->instructor->last_name}}
                    </a>
                @endif

            </div>
            <!-- course-data end -->
        </div>
        @if ($enrollment->is_completed == 1)
            <div class="col-lg-8">
                <div class="course-continue">
                    <div class="course-last-view">
                        @if ($enrollment->is_completed)
                            Kurs je završen: <strong>{{ \Carbon\Carbon::parse($enrollment->completed_date)->format('d.m.Y') }}</strong>
                        @endif
                        <div class="course-last-view-arrow"></div>
                    </div>
                    <!-- course-last-view end -->

                    <!-- mobile only progress -->
                    <div class="row d-block d-lg-none w-100">
                        <div class="col-12 p-0">
                            <div class="progress course-bar">
                                <div class="progress-bar" role="progressbar" style="width: {{ $percentageFinished }}%" aria-valuenow="{{ $percentageFinished }}" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="course-progress-total">
                                    <strong>{{ round($percentageFinished) }}%</strong>
                                </div>
                                <!-- course-progress-total end -->
                            </div>
                            <!-- progress end -->
                        </div>
                        <!-- col end -->
                    </div>
                    <!-- row mobile only progress end -->
                    @if ($enrollment->course->create_certificate == true)
                        <a
                            href="{{ route('lms.moji-sertifikati.index') }}"
                            class="btn btn-pill-{{ $enrollment->is_completed ? 'magenta' : 'blue' }}-45"
                        >
                            Preuzmi sertifikat
                        </a>
                    @endif
                    @if ($enrollment->is_completed)
                        <button
                            class="btn btn-pill-blue-45"
                            type="button"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasOceniKurs"
                            aria-controls="offcanvasOceniKurs"
                        >
                            Oceni kurs
                        </button>
                    @endif
                </div>
                <!-- course-continue end -->
            </div>
            <!-- col end -->
        @endif

        <!-- col end -->
        @if ((request()->route()->getName() == 'lms.my-courses') && ($enrollment->is_completed == 0))
            <div class="col-lg-8">
                <div class="course-continue">
                    <div class="course-last-view">
                        @if ($lastWatchedCourse->lessonProgressess->where('started_at', '!=', null)->count() == 0)
                            Niste još uvek gledali lekcije ovog kursa.
                        @else
                            Poslednji put gledano: <strong>{{ date('d.m.Y. H:i:s', strtotime($enrollment->last_date)) }}</strong>
                        @endif
                        <div class="course-last-view-arrow"></div>
                    </div>
                    <!-- course-last-view end -->

                    <!-- mobile only progress -->
                    <div class="row d-block d-lg-none w-100">
                        <div class="col-12 p-0">
                            <div class="progress course-bar">
                                <div class="progress-bar" role="progressbar" style="width: {{ $percentageFinished }}%" aria-valuenow="{{ $percentageFinished }}" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="course-progress-total">
                                    <strong>{{ round($percentageFinished) }}%</strong>
                                </div>
                                <!-- course-progress-total end -->
                            </div>
                            <!-- progress end -->
                        </div>
                        <!-- col end -->
                    </div>
                    <!-- row mobile only progress end -->

                    <a
                        href="{{ route('lms.my-course', [
                                // $enrollment->package->slug,
                                $enrollment->course->slug,
                                'enrollment_id' => $enrollment->id
                            ]) }}"
                        class="btn btn-pill-{{ $enrollment->is_completed ? 'magenta' : 'blue' }}-45"
                    >
                        @if ($lastWatchedCourse->lessonProgressess->where('started_at', '!=', null)->count() == 0)
                            Počni sa učenjem
                        @else
                            Nastavite da učite
                        @endif
                    </a>
                </div>
                <!-- course-continue end -->
            </div>
            <!-- col end -->
        @endif

        <!-- desktop only progress -->
        <div class="col-12 d-none d-lg-block">
            <div class="progress course-bar">
                @php
                    $boughtSegmentsCount = $enrollment->course->segments->count();
                    if($boughtSegmentsCount == 0) {
                        $boughtSegmentsCount = 1;
                    }
                    $startPoint = 100 / $boughtSegmentsCount;
                    $increment = $startPoint;
                    $totalLessons = $enrollment->course->lessons_without_homework_count;
                @endphp
                <div class="progress-bar" role="progressbar" style="width: {{ $percentageFinished }}%" aria-valuenow="{{ $percentageFinished }}" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="course-mark" style="left: 100%">
                    <div class="course-dot"></div>
                    <div class="course-lesson">{{ $enrollment->enrollment_correct_answers_count ?? 0 }}/{{ $enrollment->enrollment_total_question_count ?? 0 }}</div>
                </div>
                @foreach ($enrollment->course->segments as $segment)
                    @php
                        $increment += $startPoint;
                    @endphp
                @endforeach
                @if (!$enrollment->is_completed)
                <div class="course-icon" style="left: {{ $percentageFinished }}%">
                    <!-- cat-toy -->
                    @include('front-inc.svg.cat-toy-avatar')
                </div>
                @endif
                <!-- course-mark end -->
                <div class="course-trophy {{ $enrollment->is_completed ? 'finished' : 'unfinished' }}">
                        <!-- trophy unfinished -->
                        @include('front-inc.svg.trophy-unfinished')
                        <!-- firework -->
                        @include('front-inc.svg.firework-svg')
                        <!-- trophy finished -->
                        @include('front-inc.svg.trophy-finished')
                </div>
                <!-- course-trophy end -->
                <div class="course-progress-total">
                    <strong>{{ round($percentageFinished) }}%</strong>
                </div>
                <!-- course-progress-total end -->
            </div>
            <!-- progress end -->
        </div>
        <!-- col desktop only progress end -->

    </div>
    <!-- row end -->
</div>
<!-- top-course end -->