@extends("common.layout")

@section('page-title', "수강생 진도율 현황")

@section("header")
    {!! resource('js/components/multiSelect.js') !!}
    {!! resource('css/components/multiSelect.css') !!}
@endsection

@section("content")
<h1><a href="{{ route('enrollment.lms') }}">수강생 진도율 현황</a></h1>

<section class="mb-3">
    <main>
        <form action="{{ route('enrollment.lms') }}" class="search-form" method="GET">

            <input type="hidden" name="paginate" value="{{ Request::has("paginate") ? Request::get("paginate"):'' }}">
            <input type="hidden" name="page" value="{{ Request::has("page") ? Request::get("page"):'' }}">
            <input type="hidden" name="order_by" value="{{ Request::has("order_by") ? Request::get("order_by"):'id' }}">
            <input type="hidden" name="sort" value="{{ Request::has("sort") ? Request::get("sort"):'desc' }}">
            <div class="search-input-wrap">
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="start_at">기간</label>
                    <input class="form-control" type="date" name="start_at" id='start_at' value="{{ Request::get("start_at") }}">
                    <input class="form-control" type="date" name="end_at" id='end_at' value="{{ Request::get("end_at") }}">
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="type">상태</label>
                    <select class="form-select" name="type" id="type">
                        <option value="" @selected(empty(Request::get("type")))>전체</option>
                        @foreach ($type as $key => $val)
                            <option value="{{ $key }}" @selected(Request::get("type") == $key)>{{ $val }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="keyword">수강생검색</label>
                    <input class="form-control" type="text" name="keyword" id='keyword' value="{{ Request::get("keyword") }}">
                </div>
            </div>

            <button type="submit" class="btn btn-sm btn-outline-dark search-button"><i class="bi bi-search"></i> 조회</button>
        </form>
    </main>
</section>

<section>
    <header>
        <h6>
            총 <strong>{{ $data->total() }}</strong>건
        </h6>
    </header>

    <main>
        <table class="table table-hover table-striped table-management">
            <colgroup>
                <col width="3%" data-field='번호'>
                <col width="5%" data-field='회원명'>
                <col width="10%" data-field='회원이메일'>
                <col width="25%" data-field='수강명'>
                <col width="5%" data-field='구분'>
                <col width="5%" data-field='진도율'>
                <col width="5%" data-field='현재진도율'>
                <col width="5%" data-field='증감율'>
                <col width="/" data-field='메타데이터'>
                <col width="10%" data-field='등록일'>
            </colgroup>
            <thead>
                <tr class="text-center">
                    <th>번호</th>
                    <th>회원명</th>
                    <th>회원이메일</th>
                    <th>수강명</th>
                    <th>구분</th>
                    <th>진도율</th>
                    <th>현재진도율</th>
                    <th>증감율</th>
                    <th>메타데이터</th>
                    <th>등록일</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($data as $key => $val)
                <tr>
                    <td>{{ $val->id }}</td>
                    <td>{{ $val->enrollment->user->name }}</td>
                    <td>{{ $val->enrollment->user->getPlain('email') }}</td>
                    <td>
                        <a href="{{ route("enrollment.detail", ['service' => $val->enrollment->service, 'id' => $val->enrollment->id]) }}" target="_blank">
                            [{{ ucfirst($val->enrollment->module) }}] {{ $val->enrollment->getEnrollmentName() }}
                        </a>
                    </td>
                    <td class="text-center">
                        <span @class(['badge',
                            'badge-success' => $val->type == 'HIGH_PROGRESS',
                            'badge-warning' => $val->type == 'LOW_PROGRESS',
                            'badge-secondary' => $val->type == 'NOT_STARTED',
                        ])>{{ $type[$val->type] }}</span>

                    </td>
                    <td class="text-center">{{ $val->progress_rate }}</td>
                    <td class="text-center">{{ $val->enrollment->progress_rate }}</td>
                    <td class="text-center">
                        @php
                            $old = $val->progress_rate;
                            $now = $val->enrollment->progress_rate;

                            $diff = $now - $old;
                        @endphp

                        <span @class(['icon-rate', 'up' => $diff > 0 , 'down' => $diff < 0])>
                            <i class="bi bi-caret-up-fill"></i>
                            <i class="bi bi-caret-down-fill"></i>
                            {{ $diff }}
                        </span>

                    </td>
                    <td>
                        @php
                            $metadata = json_decode($val->metadata, 1);
                        @endphp
                        @foreach ($metadata as $key => $item)
                            <div class="row mx-0 col-12 p-0 font-sm">
                                <label class="col-3 font-weight-600">{{ $key }}</label>
                                <span class="col-9">{{ in_array( $key, ['시작일', '종료일']) ? date('Y-m-d', strtotime($item )) : $item}}</span>
                            </div>
                        @endforeach
                    </td>
                    <td>{{ $val->created_at }}</td>
                </tr>

                @endforeach
            </tbody>
        </table>

        <footer>
            <div class="pagination-wrap">
                {{ $data->links() }}

                <select id='paginate-control' class='form-select form-select-sm data-length-select' onchange="copyValue('.data-length-select', 'input[name=paginate]', '.search-form')">
                    <option value="10" @selected(Request::get("paginate") == 10)>10개씩 보기</option>
                    <option value="30" @selected(Request::get("paginate") == 30)>30개씩 보기</option>
                    <option value="50" @selected(Request::get("paginate") == null  || Request::get("paginate") == 50)>50개씩 보기</option>
                    <option value="100" @selected(Request::get("paginate") == 100)>100개씩 보기</option>
                </select>
            </div>
        </footer>
    </main>
</section>

@endsection

@push("script")
@endpush