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

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

    @foreach($contractCourses as $contractCourse)
        <div class="student mb-5">
            <div class="student__wrap" style="position: relative">
                <div class="student-bar__row">
                    <div class="student-bar__row__item">
                        <p>Balance of Licenses</p>
                        <span>{{$contractCourse->amount - $contractCourse->students_count }}</span>
                    </div>
                    <div class="student-bar__row__item">
                        <p>Not started</p>
                        <span>{{ $contractCourse->scormCourse->accountProgresses->where('lesson_status', null)->count()  }}</span>
                    </div>
                    <div class="student-bar__row__item">
                        <p>In progress</p>
                        <span>{{ $contractCourse->scormCourse->accountProgresses->where('lesson_status', 'incomplete')->where('score_raw', null)->count()  }}</span>
                    </div>
                    <div class="student-bar__row__item">
                        <p>Quiz Failed</p>
                        <span>{{ $contractCourse->scormCourse->accountProgresses->where('lesson_status', 'incomplete')->where('score_raw', !null)->count()  }}</span>
                    </div>
                    <div class="student-bar__row__item">
                        <p>Completion</p>
                        <span>{{ $contractCourse->scormCourse->accountProgresses->where('lesson_status', 'passed')->count()  }}</span>
                    </div>
                    <div class="student-bar__row__item">
                        <p>Average score</p>
                        <span>{{ round($contractCourse->scormCourse->accountProgresses->where('score_raw', !null)->average('score_raw'), 2) ?? 0  }}%</span>
                    </div>
                    <div class="student-bar__row__item">
                        <p>Expiration Date</p>
                        <span>{{ $contractCourse->date_end->format('m/d/y')  }}</span>
                    </div>
                </div>
                <div class="student__table__wrap">
                    <div class="student__table__description">
                        <h3>{{$contractCourse->scormCourse->title}}</h3>
                        <p>{{$contractCourse->scormCourse->description}}</p>
                    </div>
                    <div class="student__table">
                        <table>
                            <thead>
                            <tr>
                                <th>User</th>
                                <th>Progress</th>
                                <th>Score</th>
                                <th>Spent</th>
                                <th>Certificate</th>
                                <th>Start date</th>
                                <th>End date</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($contractCourse->scormCourse->accountProgresses as $progress)
                                @if($progress->lesson_status === 'passed')
                                    <tr>
                                        <td>{{ $progress->user?$progress->user->contact->full_name:'-' }}</td>
                                        <td><span class="green">Finished</span></td>
                                        <td>{{$progress->score_raw}}%</td>
                                        <td>{{ $progress->timeTotal }}</td>
                                        <td>
                                            <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 class="mb-3">
                                                        <a 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>
                                        </td>
                                        <td>{{$progress->courseStarted}}</td>
                                        <td>{{$progress->courseFinished}}</td>
                                    </tr>
                                @elseif(!$progress->lesson_status)
                                    <tr>
                                        <td>{{ $progress->user?$progress->user->contact->full_name:'-'}}</td>
                                        <td><span class="blue">Not started</span></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                @elseif($progress->lesson_status === 'incomplete' && $progress->score_raw)
                                    <tr>
                                        <td>{{ $progress->user?$progress->user->contact->full_name:'-'}}</td>
                                        <td><span class="red">Quiz Failed</span></td>
                                        <td>{{$progress->score_raw}}%</td>
                                        <td>{{ $progress->timeTotal }}</td>
                                        <td></td>
                                        <td>{{$progress->courseStarted}}</td>
                                    </tr>
                                @else
                                    <tr>
                                        <td>{{ $progress->user?$progress->user->contact->full_name:'-'}}</td>
                                        <td><span class="purple">In progress</span></td>
                                        <td></td>
                                        <td>{{ $progress->timeTotal }}</td>
                                        <td></td>
                                        <td>{{$progress->courseStarted}} </td>
                                        <td></td>
                                    </tr>
                                @endif

                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div>
                    @if($contractCourse->available and $contractCourse->scormCourse->status==='active')
                        <a href="#add-student-{{$contractCourse->scormCourse->id}}" class="btn btn-sm btn-primary waves-effect waves-light"
                           data-animation="fadein"
                           data-plugin="add-student-{{$contractCourse->scormCourse->id}}" data-overlayspeed="200" data-overlaycolor="#36404a">Add
                            Student</a>
                    @elseif($contractCourse->scormCourse->status==='deleted')
                        <span title="This course is no longer available."> * </span>
                    @else
                        <span title="To access the course, the company must renew the contract.">
                        <a href="#" class="btn btn-sm btn-outline-dark disabled">Add
                            Student</a>
                        </span>
                    @endif

                </div>
                <div id="add-student-{{$contractCourse->scormCourse->id}}" class="modal-demo" style="position: absolute; left: 30%">
                    <button type="button" class="close">
                        <span>×</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="custom-modal-title">Add Student</h4>
                    <div class="custom-modal-text">
                        <form method="POST" action="{{ route('courses.addStudent', ['courseId' => $contractCourse->scormCourse->id]) }}">
                            @csrf
                            <input type="hidden" name="scorm_course_id" value="{{$contractCourse->scormCourse->id}}">
                            <div class="form-group">
                                <label for="student-select-{{$contractCourse->scormCourse->id}}">Select student</label>
                                <select id="student-select-{{$contractCourse->scormCourse->id}}" name="user_id" class="form-control" required>
                                    <option value="" disabled selected>Select student</option>
                                    @foreach($students as $id=>$student)
                                        <option value="{{$id}}">{{$student}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group text-right">
                                <button type="submit" class="btn btn-primary">Add</button>
                                <button type="button" class="btn btn-secondary cancel-modal-close">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    @endforeach
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const modalTriggers = document.querySelectorAll("a[data-plugin^='add-student-']");

            modalTriggers.forEach(trigger => {
                trigger.addEventListener("click", function (event) {
                    event.preventDefault();
                    const modalId = this.getAttribute("href").substring(1);
                    const modal = document.getElementById(modalId);
                    if (modal) {
                        modal.style.display = "block";
                        document.body.style.overflow = "hidden";
                    }
                });
            });

            const closeButtons = document.querySelectorAll(".modal-demo .cancel-modal-close");

            closeButtons.forEach(button => {
                button.addEventListener("click", function () {
                    const modal = this.closest(".modal-demo");

                    if (modal) {
                        modal.style.display = "none";
                        document.body.style.overflow = "";
                    }
                });
            });
        });
    </script>
@endsection