@extends("common.layout-popup")

@section("header")
    {!! resource("js/components/tab.js") !!}
@endsection

@section("page-title", "수강정보 변경내역")
@section("content")
    @php
        $interval = date_diff(new DateTime($enrollment->ended_at), new DateTime($enrollment->started_at));
    @endphp

    <section>
        <header>수강정보</header>
        <main>
            <form action="" method="POST" class="default font-sm">
                {{-- <div class="enrollment-wrap"> --}}
                    <div class="form-group mt-0">
                        <label>상품명</label>
                        <div>{{ $enrollment->product->name }} {{  $enrollment->productOption->name }}</div>

                    </div>
                    <div class="form-group ">
                        <label>현재수강기간 (<span class="font-sm">총 수강기간 : <span id="periodCnt" class="text-danger">{{ $interval->days }}</span> 일</span>)</label>
                        <div>{{ date('Y-m-d', strtotime($enrollment->started_at)) }} ~ {{ date('Y-m-d', strtotime($enrollment->ended_at)) }}</div>
                </div>
            </form>
        </main>
    </section>
    <section class="mt-3">
        <header>변경내역</header>
        <main>
            <div class="tab-wrap">
                <ul class="tab-list">
                    <li class="tab-item active" data-name="course">
                        <a class="tab-text">반변경 ( {{ isset($dataSet['course']) ? count($dataSet['course']) . "회" : "0회" }} )</a>
                    </li>
                    <li class="tab-item" data-name="present">
                        <a class="tab-text">상품지급 ( {{ isset($dataSet['present']) ? count($dataSet['present']) . "회" : "0회" }} )</a>
                    </li>
                    <li class="tab-item" data-name="period">
                        <a class="tab-text">수강정보 변경( {{ isset($dataSet['enroll']) ? count($dataSet['enroll']) . "회" : "0회" }} )</a>
                    </li>
                </ul>
                <div class="tab-contents">
                    @foreach(['course', 'present', 'enroll'] as $type)
                    <div @class(['tab-content', 'active' => $type == 'course' , 'limit-height', 'custom-scroll']) id="{{ $type }}" style="--height: 500px;;">
                        @if (isset($dataSet[$type]))
                            <x-user.enrollment-history :list="$dataSet[$type]" type="{{ $type }}" />
                        @else
                            <div class="font-sm align-center">변경내역이 없습니다.</div>
                        @endif
                    </div>
                    @endforeach

                </div>
            </div>
        </main>
    </section>

@endsection


@push("script")
<script>
    function onCloseEvent() {
        window.close();
    }
</script>
@endpush