@extends('layouts.main')
@section('breadcrumb')
    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                <h4 class="page-title pl-3">My Courses</h4>
                <ol class="breadcrumb float-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">My Courses</li>
                </ol>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
@endsection
@section('content')

    <div class="clearfix"></div>
    @include('flash::message')

    @if($scormProgresses->isNotEmpty())
        <div class="statistic-bar">
            <div class="statistic-bar__wrap">
                <h3>Total statistic</h3>
                <div class="statistic-bar__row">
                    <div class="statistic-bar__row__item">
                        <p>Total Course</p>
                        <span>{{$scormProgresses->count()}}</span>
                    </div>
                    <div class="statistic-bar__row__item">
                        <p>Not started</p>
                        <span>{{ $scormProgresses->where('lesson_status', null)->count()  }}</span>
                    </div>
                    <div class="statistic-bar__row__item">
                        <p>In progress</p>
                        <span>{{ $scormProgresses->where('lesson_status', 'incomplete')->where('score_raw', null)->count()  }}</span>
                    </div>
                    <div class="statistic-bar__row__item">
                        <p>Quiz Failed</p>
                        <span>{{ $scormProgresses->where('lesson_status', 'incomplete')->where('score_raw', !null)->count()  }}</span>
                    </div>
                    <div class="statistic-bar__row__item">
                        <p>Completion</p>
                        <span>{{ $scormProgresses->where('lesson_status', 'passed')->count()  }}</span>
                    </div>
                    <div class="statistic-bar__row__item">
                        <p>Average score</p>
                        <span>{{ round($scormProgresses->where('score_raw', !null)->average('score_raw'), 2) ?? 0  }}%</span>
                    </div>
                    <div class="statistic-bar__row__item">
                        <p>Hours spent</p>
                        <span>{{ $totalHours }}h</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="statistic-grid">
            <div class="statistic-grid__wrap">
                @foreach ($scormProgresses as $progress)
                    @if($progress->lesson_status === 'passed')
                        <div class="statistic-grid__wrap__item finished">
                            <div class="statistic-grid__wrap__item__body">
                                <div class="status">Finished</div>
                                <h4>{{$progress->scormCourse->title}}</h4>
                                <p>{{ $progress->scormCourse->description }}</p>
                                <div class="statistic-grid__wrap__item__details">
                                    <div class="statistic-grid__wrap__item__details__item">
                                        <p>Score:</p>
                                        <span>{{ $progress->score_raw }}</span>
                                    </div>
                                    <div class="statistic-grid__wrap__item__details__item">
                                        <p>Spent:</p>
                                        <span>{{ $progress->timeTotal }}</span>
                                    </div>
                                    <div class="statistic-grid__wrap__item__details__item">
                                        <p>Date start-end:</p>
                                        <span>
                                            {{ $progress->courseStarted }}<br>
                                            {{ $progress->courseFinished }}

                                        </span>
                                    </div>
                                </div>
                                <div class="dropdown pull-right">
                                    <button class="btn green-btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                        <img src="{{asset('theme/assets/images/lms/pdf-icon.svg')}}" alt="pdf">
                                        <span>Download</span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" style="box-shadow: 0 0 3px rgba(0, 0, 0, .5); right: 0; left: auto;">
                                        <li>
                                            <a class="mb-2" href="{{ url('/scorm-progresses/certificate/en/' . $progress->id) }}">
                                                Certificate in en
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ url('/scorm-progresses/certificate/es/' . $progress->id) }}">
                                                Certificate in es
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @elseif(!$progress->lesson_status)
                        <div class="statistic-grid__wrap__item notStarted">
                            <div class="statistic-grid__wrap__item__body">
                                <div class="status">Not started</div>
                                <h4>{{$progress->scormCourse->title}}</h4>
                                <p>{{ $progress->scormCourse->description }}</p>
                                <div class="statistic-grid__wrap__item__details">
                                    <div class="statistic-grid__wrap__item__details__item">
                                        <p>Score:</p>
                                    </div>
                                    <div class="statistic-grid__wrap__item__details__item">
                                        <p>Spent:</p>
                                    </div>
                                    <div class="statistic-grid__wrap__item__details__item">
                                        <p>Date start-end:</p>
                                    </div>
                                </div>
                                <a class="btn blue-btn" href="{{ route('courses.show', $progress->scormCourse->slug) }}">Start</a>
                            </div>
                        </div>
                    @elseif($progress->lesson_status === 'incomplete' && $progress->score_raw)
                        <div class="statistic-grid__wrap__item failed">
                            <div class="statistic-grid__wrap__item__body">
                                <div class="status">Quiz Failed</div>
                                <h4>{{$progress->scormCourse->title}}</h4>
                                <p>{{ $progress->scormCourse->description }}</p>
                                <div class="statistic-grid__wrap__item__details">
                                    <div class="statistic-grid__wrap__item__details__item">
                                        <p>Score:</p>
                                        <span>{{$progress->score_raw}}</span>
                                    </div>
                                    <div class="statistic-grid__wrap__item__details__item">
                                        <p>Spent:</p>
                                        <span>{{ $progress->timeTotal }}</span>
                                    </div>
                                    <div class="statistic-grid__wrap__item__details__item">
                                        <p>Date start-end:</p>
                                        <span>
                                            {{ $progress->courseStarted }}
                                        </span>
                                    </div>
                                </div>
                                <a class="btn red-btn" href="{{ route('courses.show', $progress->scormCourse->slug) }}">Launch</a>
                            </div>
                        </div>
                    @else
                        <div class="statistic-grid__wrap__item inProgress">
                            <div class="statistic-grid__wrap__item__body">
                                <div class="status">In progress</div>
                                <h4>{{$progress->scormCourse->title}}</h4>
                                <p>
                                    {{ $progress->scormCourse->description }}
                                </p>
                                <div class="statistic-grid__wrap__item__details">
                                    <div class="statistic-grid__wrap__item__details__item">
                                        <p>Score:</p>
                                        <span>{{ $progress->score_raw }}</span>
                                    </div>
                                    <div class="statistic-grid__wrap__item__details__item">
                                        <p>Spent:</p>
                                        <span>{{ $progress->timeTotal }}</span>
                                    </div>
                                    <div class="statistic-grid__wrap__item__details__item">
                                        <p>Date start-end:</p>
                                        <span>{{ $progress->courseStarted }}</span>
                                    </div>
                                </div>
                                @if($progress->available)
                                    <a class="btn purple-btn" href="{{ route('courses.show', $progress->scormCourse->slug) }}">Launch</a>
                                @else
                                    <a class="btn purple-btn disabled" href="#">Launch</a>
                                @endif
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    @else
        <div style="display: flex; justify-content: center; align-items: center; height: 68vh;">
            <p style="color: white; font-size: 20px; margin: 0;" class="text-center">There are no courses available</p>
        </div>
    @endif

@endsection