@extends("common.layout")

@section("header")
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
{!! resource('js/common/tomSelectAllCheck.js') !!}
@endsection

@section("content")
<div class="split">
    <h1>{{ $service == "ielts" ? "인강" : "어학원" }} 수강현황</a></h1>
</div>
@php
    $courseSummary = $enrollment->getEnrollmentLectureSummary();
    $feedbackSummary = $enrollment->getEnrollmentFeedbackSummary();
    $cdtSummary = $enrollment->getEnrollmentCdtSummary();
@endphp
<section>
    <header>수강정보</header>
    <main>
        <form class="default">
        <main class="split-form" >
            <ul class="list-item-none">
                <li class="mb-3 row mx-0 align-middle">
                    <div class="col-1">
                        <label>수강생</label>
                        <div>{{ $enrollment->user->name }}({{ $enrollment->user->edm_id }})</div>
                    </div>
                    <div class="col-1">
                        <label>수강상태</label>
                        <div>{{ $status[$enrollment->status] }}</div>
                    </div>
                    <div class="col-2">
                        <label>수강상품</label>
                        <div>{{ $enrollment->getEnrollmentName() }}</div>
                    </div>
                    <div class="col-2">
                        <label>수강기간</label>
                        <div>{{ date('Y-m-d', strtotime($enrollment->started_at)) }} ~ {{ date('Y-m-d', strtotime($enrollment->ended_at)) }}</div>
                    </div>
                    <div class="col-2">
                        <label>출석</label>
                        <div>
                            {{ $enrollment->attendance_count }}일 ({{ $enrollment->attendance_rate }} %)

                            <button type="button" class="btn btn-sm btn-primary" onclick="onOpenAttendances({{ $enrollment->id }})">자세히보기</button>
                        </div>
                    </div>
                </li>
                <li class="mb-3 row mx-0 align-middle">
                    <div class="col-2">
                        <label>강의</label>
                        <div>
                            @if ( $courseSummary != null )
                                {{ $courseSummary['processCnt'] }}강 / 총 {{ $courseSummary['totalCnt'] }}강
                                ({{ $enrollment->progress_rate }}%)
                            @else
                                -
                            @endif
                        </div>
                    </div>
                    <div class="col-2">
                        <label>첨삭</label>
                        <div>
                            @if ( $feedbackSummary != null )
                                {{ $feedbackSummary['totalCnt'] }} / {{ $feedbackSummary['useCnt'] }}
                            @else
                                -
                            @endif
                        </div>
                    </div>
                    <div class="col-2">
                        <label>CDT</label>
                        <div>
                            @if ( $cdtSummary != null )
                                {{ $cdtSummary['totalCnt'] }} / {{ $cdtSummary['useCnt'] }}
                            @else
                                -
                            @endif
                        </div>
                    </div>
                </li>

                @if ( $enrollment->enrollmentPause )
                    <li class="mb-3 row mx-0 align-middle">
                        <div class="col-1">
                            <label>휴강일</label>
                            <div>{{ $enrollment->enrollmentPause->period }}일</div>
                        </div>
                        <div class="col-3">
                            <label>휴강기간</label>
                            <div>{{ date('Y-m-d', strtotime($enrollment->enrollmentPause->started_at)) }} ~ {{ date('Y-m-d', strtotime($enrollment->enrollmentPause->ended_at)) }}</div>
                        </div>
                        <div class="col-3">
                            <label>휴강신청일</label>
                            <div>{{ $enrollment->enrollmentPause->created_at }}</div>
                        </div>
                    </li>
                @endif
            </ul>
        </main>
    </form>
    </main>
</section>
<div class="layout-2-cols mt-3">
    <section>
        <header>진도율</header>
        <main>
            <div class="custom-scroll" style="max-height: 1000px; overflow-y: scroll;">
                <ul class="list-item-none">
                    @foreach ($enrollment->enrollmentCourses as $course)
                        <li class="course-item ">
                            <h5 class="course-info">
                                <div class="course-title">{{ $course->name }}</div>
                                <div class="course-count">
                                    {{ $course->enrollmentCourseLectures()->count() }}강
                                    <button class="btn btn-sm btn-warning isOpen" click="javascript:void(0)">보기</button>
                                </div>
                            </h5>
                            <ul class="lecture-list list-item-none">
                                @foreach ($course->enrollmentCourseLectures as $lecture)
                                @php
                                    $attendance = $lecture->lectureAttendance;
                                    $percent = $attendance?->getProgressPercentageAttribute()
                                @endphp
                                <li @class(['lecture-item'])>
                                    <div class="lecture-title"> {{ $lecture->name }} </div>
                                    <div class="lecture-detail">
                                        @if ( $attendance )
                                            <span class="attendance-date">{{ date('Y-m-d', strtotime($attendance->created_at ))}}</span>
                                            <span class="attendance-rate">
                                                <div class="font-weight-600">{{ $percent }}%</div>
                                                <div class="font-sm">({{ gmdate('G:i:s', $attendance->watch_duration) }} / {{ gmdate('G:i:s', $attendance->total_duration) }})</div>
                                            </span>
                                        @endif

                                        @if ($attendance)
                                            <span @class(['badge', 'badge-success' => $percent >= 80 , 'badge-warning' => $percent < 80 ])>{{ $percent >= 80 ? "수강완료" : "수강중"}}</span>
                                        @else
                                            <span class="badge badge-secondary">수강전</span>
                                        @endif
                                    </div>
                                </li>
                                @endforeach
                            </ul>
                        </li>
                    @endforeach
                </ul>
            </div>
        </main>
    </section>
</div>

@endsection

@push("script")
    <script>
        function onOpenAttendances(enrollment_id) {
            const href = "{{ route('board.popup.attendance', ':id') }}";
            edmPopupOpen(href.replace(":id", enrollment_id));
        }
        $(function() {
            $('.isOpen').on("click", function() {
                $(this).closest(".course-item").find(".lecture-list").slideToggle()
            })
        })
    </script>
@endpush