@extends("common.layout")

@section("header")
{{-- <link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
{!! resource('js/common/tomSelectAllCheck.js') !!} --}}
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">


{!! resource('js/components/tab.js') !!}
{!! resource('js/enrollment/academy-course.js') !!}
@endsection

@section("content")

@php
    use Carbon\Carbon;
    $activeTab = Request::get('activeTab', 'L');
    $year = Request::get('year',date('y') );
    $month = Request::get('month',date('m') );
@endphp

<div class="split">
    <h1><a href="{{ route('enrollment.academy.list', $service) }}">{{ $service == "ielts" ? "인강" : "어학센터" }} 수강생 현황</a></h1>
</div>

<section>
    <main>
        <form action="{{ route('enrollment.academy.list', $service) }}" class="search-form" id="search-form" method="GET">
            <input type="hidden" name="paginate" value="{{ Request::get('paginate') }}" />
            <input type="hidden" name="service" value="{{ $service }}" />
            <input type="hidden" name="activeTab" value="{{ $activeTab }}" />
            <input type="hidden" name="year" id="year" value="{{ $year }}" />
            <input type="hidden" name="month" id="month" value="{{ $month }}" />


            <div class="search-input-wrap">
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for='type'>재등록구분값</label>
                    <select class="form-select" id="type" name="type">
                        <option value="">선택없음</option>
                        <option value="A" @selected(Request::get('type') == 'A')>A</option>
                        <option value="B" @selected(Request::get('type') == 'B')>B</option>
                        <option value="C" @selected(Request::get('type') == 'C')>C</option>
                        <option value="F" @selected(Request::get('type') == 'F')>F</option>
                    </select>
                </div>
            </div>

            <button type="button" class="btn btn-sm btn-outline-dark search-button"><i class="bi bi-search"></i> 조회</button>
        </form>
    </main>
</section>
<section class="mt-3">
    <header>
        <h6></h6>
        <span>
            <button onclick="onExcelDownload()" class="btn btn-success" type="button">
                <i class="bi bi-file-earmark-excel-fill"></i>
                엑셀다운로드
            </button>
        </span>
    </header>
    <main>
        <div class="layout-horizon-tab">
            <div class="search-area type1">
                @include("enrollment.course.month-selector")
            </div>
            <div class="content-area">
                <div class="tab-wrap" data-name="tasks">
                    <ul class="tab-list">
                        <li  @class(['tab-item', 'active' => $activeTab == 'L']) class="tab-item active" data-name='L'><a class="tab-text" href="javascript:void(0)">(출결 외) 명단관리</a></li>
                        <li  @class(['tab-item', 'active' => $activeTab == 'A']) class="tab-item" data-name='A'><a class="tab-text" href="javascript:void(0)">(출결) 명단관리</a></li>
                    </ul>
                    <div class="tab-contents">
                        @foreach ( ["L", "A"] as $isManage)
                            <div @class(["layout-2-cols", "tab-content", "active" => $isManage == $activeTab]) >
                                @include("enrollment.course.list-table", ['isManage' => $isManage ])
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

    </main>
</section>

@endsection

@push("script")
<script src="https://unpkg.com/sticky-table-headers"></script>

<script>
    $(function() {
        $("#course_id").chosen({
            width: "100%",
            no_results_text: "검색 결과가 없습니다: ",
            placeholder_text_single: "상품을 선택하세요",
            search_contains: true
        });


        $('.search-button').on("click", function() {
            $('input[name=activeTab]').val($('.tab-item.active').data("name") )

            $('#search-form').submit()
        })

        $('.limit-height table').each(function() {
            $(this).stickyTableHeaders({scrollableArea: $(this).closest('.limit-height')});
        })


    })


    function onExcelDownload() {
        $('input[name=activeTab]').val($('.tab-item.active').data("name") )
        excelDownload('.search-form', '{{ route('api.enrollment.course.excel') }}')
    }

</script>
@endpush