@extends("common.layout-popup")

@section("header")

@endsection

@section("page-title", "출석율 자세히보기")

@section("content")

<section>
    <header>수강정보</header>
    <main>
        <div class="col-12 row mx-0 mb-3">
            <label class="col-1 font-weight-600">수강정보</label>
            <div class="col-10">
                {{ $attendance->enrollment->getEnrollmentName() }}
            </div>
        </div>
        <div class="col-12 row mx-0 mb-3">
            <label class="col-1 font-weight-600">강좌명</label>
            <div class="col-10">
                {{ $attendance->enrollmentCourse->course->name }}
            </div>
        </div>
        <div class="col-12 row mx-0 mb-3">
            <label class="col-1 font-weight-600">강의명</label>
            <div class="col-10">
                {{ $attendance->enrollmentCourseLecture->lecture->name }}
            </div>
        </div>
    </main>
</section>

<section class="mt-3">
    <header>시청이력(단위: 초)</header>
    <main>
        @foreach ( $attendance->kollusLmsSummaries as $key => $summary)
            <div class="history-wrap">
                <h5 class="history-header">
                    <span class="font-weight-600">[{{ $key + 1 }} 회차] {{ $summary->date }}</span>
                    <span>{{ date('H:i:s', strtotime($summary->started_at)) }} ~ {{ date('H:i:s', strtotime($summary->ended_at)) }}</span>
                </h5>
                <div class="history-body">
                    <table class="history-table">
                        <colgroups>
                            <col width="5%">
                            @for ( $i = 0 ; $i <= 9 ; $i++ )
                                <col width="7%">
                            @endfor
                            <col width="7%">
                            <col width="16%">
                        </colgroup>
                        <thead>
                            <tr>
                                <th rowspan="2" style="border-right: 2px solid #333">회차</th>
                                <th colspan="10">블록당 시청시간({{ round($attendance->total_duration / 10) }})</th>
                                <th rowspan="2" style="border-left: 2px solid #333">시청시간</th>
                                <th rowspan="2">생성일시</th>
                            </tr>
                            <tr>
                                @for ( $i = 0 ; $i <= 9 ; $i++ )
                                    <th>{{ $i }}</th>
                                @endfor
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($list[$summary->date] as $log)
                                @php
                                    $data = json_decode($log->data, 1);
                                @endphp
                                <tr>
                                    <td style="border-right: 2px solid #333">{{ $log->serial }}</td>
                                    @for ( $i = 0 ; $i <= 9 ; $i++ )
                                        @php
                                            $field = 'percent' . $i;
                                            $blocks = $data['json_data']['block_info']['blocks'];
                                        @endphp
                                        <td @class([
                                            'bg-completed' => $log->{$field} >= 80,
                                            'bg-processing' => $log->{$field} < 80 && $log->{$field} > 0
                                        ])> {{ $blocks['t' . $i] }} ({{ $log->{$field} }}%)</td>
                                    @endfor
                                    <td style="border-left: 2px solid #333">{{ $data['json_data']['content_info']['showtime'] }}</td>
                                    <td class="font-sm">{{ $log->created_at }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endforeach

    </main>
</section>
@endsection

@push("script")
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/sticky-table-headers/js/jquery.stickytableheaders.min.js"></script>

    <script>
        $(function() {
            $('table').each(function() {
                $(this).stickyTableHeaders({
                    scrollableArea: $(this).closest('.history-body')
                });
            });

        });
    </script>
@endpush