@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="15%">
                <col width="/">
                <col width="7%">
                <col width="7%">
                <col width="25%">
                <col width="5%">
            </colgroup>
            <thead>
                <tr>
                    <th>일자</th>
                    <th>회차</th>
                    <th>강좌명</th>
                    <th>강의명</th>
                    <th>진도율</th>
                    <th>이어듣기</th>
                    <th>수강기간</th>
                    <th>관리</th>
                </tr>
            </thead>
            <tbody>
                @if ($list)
                    @php
                        $isBgColor = true;
                        $pStartDate = $pEndDate = null;
                        $isPrintPause = false;
                        if ( $enrollment->enrollmentPause ) {
                            $pStartDate = $enrollment->enrollmentPause->started_at;
                            $pEndDate = $enrollment->enrollmentPause->ended_at;
                        }
                    @endphp
                    @foreach($list as $date => $attendances)
                        @if ( $pStartDate && $pEndDate && $pStartDate <= $date && $pEndDate >= $date)
                            @if (! $isPrintPause)
                                <tr class="">
                                    <td colspan="8" 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($attendances) > 0)
                            @foreach ($attendances as $key => $item)
                                <tr @class(['bg-gray' => $isBgColor])>
                                    @php
                                        $item['percentage'] = isset($item['percentage']) ? $item['percentage'] : 0;
                                    @endphp
                                    @if ($key == 0)
                                        <td rowspan="{{ count($attendances) }}" @class(['font-weight-600', 'text-danger' => ! $isAttendance ])>{{ $date }}</td>
                                    @endif
                                    <td>{{ isset($item['sort']) ? $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>
                                        @if (isset($item["dues"]))
                                            <div class="history-box">
                                            @foreach ( $item['dues'] as $key => $due)
                                                @php
                                                    $percent =  empty($item['total_duration']) ? 0 : round($due['duration'] / $item['total_duration'] * 100);
                                                @endphp
                                                <div @class(['history-item', 'today' => $due['date'] == $date ])>
                                                    <span class="badge badge-primary">{{ $key + 1 }}회차</span>
                                                    <span @class(['rate', 'badge', 'badge-secondary' => $due['is_acknowledged'] != 1 , 'badge-success' => $due['is_acknowledged'] == 1])>[{{ $percent > 100 ? 100 : $percent }}%]</span>
                                                    <span class="timer"> {{ $due['started_at'] }} ~ {{ $due['ended_at'] }}
                                                        ({{ gmdate('G:i:s', $due['duration']) }})
                                                    </span>
                                                </div>
                                            @endforeach
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($item['percentage'] > 0)
                                            <button class="btn btn-sm btn-warning" type="button" onclick="onOpenAttendance({{ $item['id'] }})"><i class="bi bi-eye"></i></button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr @class(['bg-gray' => $isBgColor])>
                                <td class="font-weight-600 text-danger">{{ $date }}</td>
                                @for ($i = 0 ; $i < 7; $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 onOpenAttendance(lecture_attendance_id) {
        const href = "{{ route('board.popup.attendance-detail', ':id') }}";
        edmPopupOpen(href.replace(":id", lecture_attendance_id));
    }


    $(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