@extends("common.layout-popup")

@section("header")

@endsection

@section("page-title", "출석율 확인")

@section("content")
@php
    // $usedDate = $enrollment->getEnrollmentPeriod() ;
    $usedDate = $enrollment->productOption->refund_recognition_period ??  $enrollment->productOption->period;
    $attendanceDate = $enrollment->getLectureAttendanceDate() ;
@endphp
<div class="summary-wrap mb-3">
    <div class="summary-box" style="--box-color: var(--bs-black)">
        <div class="summary-title">
            <i class="bi bi-check-circle-fill"></i>
            <span>수강인정일</span>
        </div>
        <div class="summary-text ">{{ $usedDate }}일</div>
    </div>
    <div class="summary-box" style="--box-color: var(--bs-success)">
        <div class="summary-title">
            <i class="bi bi-calendar-fill"></i>
            <span>출석일</span>
        </div>
        <div class="summary-text text-success">{{ count($attendanceDate )}}일</div>
    </div>
    <div class="summary-box" style="--box-color: var(--bs-danger)">
        <div class="summary-title">
            <i class="bi bi-exclamation-circle-fill"></i>
            <span>결석일</span>
        </div>
        <div class="summary-text text-danger">{{ $usedDate - count($attendanceDate) }}일</div>
    </div>
    <div class="summary-box" style="--box-color: var(--bs-primary)">
        <div class="summary-title">
            <i class="bi bi-bar-chart-fill"></i>
            <span>출석율</span>
        </div>
        <div class="summary-text">{{ $enrollment->attendance_rate ?? 0 }}%</div>
    </div>
</div>

<section class="mb-3">
    <header>임의출석체크</header>
    <main>
        <div class="col-12 row mx-0">
            <label class="col-1">날짜</label>
            <div class="col-3">
                <input type="date" name="attendance_date" class="form-control form-control-sm" id="attendance_date"
                    data-started-date="{{ date('Y-m-d', strtotime($enrollment->started_at)) }}"
                    data-ended-date="{{ date('Y-m-d', strtotime($enrollment->ended_at)) }}"  />
                <input type="hidden" name="enrollment_id" id="enrollment_id" value="{{ $enrollment->id }}" />
            </div>
            <div class="col-3">
                <button class="btn btn-sm btn-primary" onclick="onCreate()" type="button">출석하기</button>
            </div>
        </div>
    </main>
</section>


<section class="mb-3">
    <header>
        <h6>수강기간 : {{ date('Y-m-d', strtotime($enrollment->started_at)) }} ~ {{ date('Y-m-d', strtotime($enrollment->ended_at)) }} ({{ $enrollment->getEnrollmentPeriod() }}일)</h6>
    </header>
    <main class="limit-height p-0 m-3 custom-scroll" style="--height: 650px">
        <table class="table table-hover table-sticky">
            <colgroup>
                <col width="10%">
                <col width="7%">
                <col width="/">
                <col width="/">
                <col width="7%">
                <col width="7%">
                <col width="15%">
            </colgroup>
            <thead>
                <tr>
                    <th>일자</th>
                    <th>회차</th>
                    <th>강좌명</th>
                    <th>강의명</th>
                    <th>진도율</th>
                    <th>이어듣기</th>
                    <th>수강기간</th>
                </tr>
            </thead>
            <tbody>
                @if ($attendances)
                    @php
                        $isBgColor = true;
                        $pStartDate = $pEndDate = null;
                        $isPrintPause = false;
                        if ( $enrollment->enrollmentPause ) {
                            $pStartDate = $enrollment->enrollmentPause->started_at;
                            $pEndDate = $enrollment->enrollmentPause->ended_at;
                        }
                    @endphp
                    @foreach($attendances as $date => $list)
                        @if ( $pStartDate && $pEndDate && $pStartDate <= $date && $pEndDate >= $date)
                            @if (! $isPrintPause)
                                <tr class="">
                                    <td colspan="7" class="text-center" style="background: var(--bs-gray-400);color: var(--bs-black);font-weight: 600;">
                                        [휴강기간] {{ $pStartDate }} ~ {{ $pEndDate }}
                                    </td>
                                </tr>
                                @php $isPrintPause = true; continue; @endphp
                            @else
                                @php continue;  @endphp
                            @endif
                        @endif
                        @php
                            $isAttendance = in_array( $date, $attendanceDate);
                        @endphp
                        @if (count($list) > 0)
                            @foreach ($list as $key => $item)
                                <tr @class(['bg-gray' => $isBgColor])>
                                    @if ($key == 0)
                                        <td rowspan="{{ count($list) }}" @class(['font-weight-600', 'text-danger' => ! $isAttendance ])>{{ $date }}</td>
                                    @endif
                                    <td>{{ $item['sort'] }}</td>
                                    <td @class(['text-danger onDelete' => ($isAttendance && $item['percentage'] == 0) ]) data-date="{{ $date }}">{{ $item['courseName'] }}</td>
                                    <td>{{ $item['lectureName'] }}</td>
                                    <td>{{ $item['percentage'] }}%</td>
                                    <td>{{ $item['is_acknowledged'] == 2 ? "O" : "-" }}</td>
                                    <td class="font-sm">
                                        @if (is_array($item["due"]))
                                        <ul class="list-item-none">
                                            @foreach ( $item['due'] as $key => $due)
                                                <li>
                                                    @if ( $key > 0 ) <div class="line"> @endif
                                                    <span class="font-weight-600">{{ $key + 1 }}.</span> {{ $due }}
                                                </li>
                                            @endforeach
                                        </ul>
                                        @else
                                            {{ $item["due"] }}
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr @class(['bg-gray' => $isBgColor])>
                                <td class="font-weight-600 text-danger">{{ $date }}</td>
                                @for ($i = 0 ; $i < 6 ; $i ++)
                                    <td>-</td>
                                @endfor
                            </tr>
                        @endif


                        @php
                            $isBgColor = ! $isBgColor;
                        @endphp
                    @endforeach
                @endif

            </tbody>
        </table>
    </main>
</section>


@endsection

@push("script")
<script>
    function onCreate() {
        if ( $.isEmptyObject($('#attendance_date').val()) ) {
            alertify.alert("에러", "출석일을 선택해주세요", () => {});
            return false;
        }

        alertify.confirm("확인", "출석체크를 진행하시겠습니까?", async () => {
            const result = await customFetch("{{ route('api.enrollment.force-attendance.create') }}", {
                method: "POST",
                body : JSON.stringify({"attendance_date" : $('#attendance_date').val(), "enrollment_id" : $('#enrollment_id').val() }) ,
                headers: { "Content-Type" : "application/json"}
            });

            if ( result.status ) {
                alertify.alert("성공", "출석체크에 성공하셨습니다.", () => { location.reload() });
            } else {
                alertify.alert("실패", result.message ,() => {  });
            }
        }, () => {});
    }

    $(function() {
        $('.onDelete').on("click",  function() {
            alertify.confirm("확인", "임의 출석체크를 삭제하시겠습니까?", async () => {
                const result = await customFetch("{{ route('api.enrollment.force-attendance.remove') }}", {
                    method: "POST",
                    body : JSON.stringify({"attendance_date" : $(this).data('date'), "enrollment_id" : $('#enrollment_id').val() }) ,
                    headers: { "Content-Type" : "application/json"}
                });

                if ( result.status ) {
                    alertify.alert("성공", "삭제되었습니다.", () => { location.reload() });
                } else {
                    alertify.alert("실패", result.message ,() => { });
                }
            }, () => {})
        })
    })
</script>
@endpush