@extends("common.layout")

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

{!! setResources([ 'toast-calendar']) !!}
{!! resource("js/schedule/schedule.js") !!}

<style>

</style>
@endsection

@section("content")
<div class="split">
    <h1><a href="">어학원 일정 관리(년)</a></h1>
</div>

<section>
    <main>
        <form action="" class="search-form" method="GET" id="schedule_form">
            <div class="search-input-wrap">
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="categories">카테고리명</label>
                    <select name="categories" id="categories" multiple>
                        @foreach ( $productCategories as $category)
                        <option value="{{ $category->id }}" @selected(in_array($category->id , Request::get("catecategoriesgory", [])))>{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="product_module">모듈 구분</label>
                    <select name="product_module" id="product_module" class="form-select form-select-sm">
                        <option value="0">선택없음</option>
                        @foreach ( $modules as $module)
                            <option value="{{ $module }}" @selected(Request::get("product_module") == $module)>{{ $module }}</option>
                        @endforeach
                    </select>
                </div>
                {{-- <div class="input-group input-group-sm">
                    <label class="input-group-text" for="option_ids">옵션명</label>
                    <select name="option_ids" id="option_ids" multiple>
                        @foreach ( $options as $option)
                            <option value="{{ $option->id }}" @selected(in_array($option->id , Request::get("options", [])))>{{ $option->product->name }} - {{ $option->name }}</option>
                        @endforeach
                    </select>
                </div> --}}
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="types">일정 구분</label>
                    <select name="type" id="type" multiple>
                        @foreach ($types as $key => $type )
                            @if ($key == 'HOLIDAY') @continue @endif
                            <option value="{{ $key }}" @selected(in_array("key", Request::get("types", [])))>{{ $type['name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="year">연도</label>
                    <select name="year" id="year" class="form-select form-select-sm">
                        @for ($i = (date('Y') + 1) ; $i >= 2000 ; $i-- )
                            <option value="{{ $i }}" @selected($i == Request::get('year', date('Y')))>{{ $i }}년</option>
                        @endfor
                    </select>
                </div>
            </div>
            <button type="button" class="btn btn-sm btn-outline-dark search-button" onclick="onSubmit()">조회</button>
        </form>
    </main>
</section>


<section>
    <main>
        <form action="" class="search-form mb-3">
            <div class="search-input-wrap mr-3">
                <div>
                    <input type="hidden" name="type" id="schedule_type" value="period" />

                    <button type="button" class="type btn btn-sm btn-outline-success" style="width: 70px;" data-value="period">수강</button>
                    <button type="button" class="type btn btn-sm btn-outline-success" style="width: 70px;" data-value="test">모의고사</button>
                    <button type="button" class="type btn btn-sm btn-outline-success" style="width: 70px;" data-value="special">특강</button>
                    <button type="button" class="type btn btn-sm btn-outline-danger" style="width: 70px;" data-value="holiday">공휴일</button>
                </div>
            </div>
            <button type="button" class="btn btn-sm btn-primary" onclick="onOpenSchedulePopup()">일정등록</button>
        </form>

        <div class="row year">
            <input type="hidden" name="year" id="year" value="{{ Request::get('year', date('Y')) }}" />
            @for ($i = 1 ; $i < 13 ;$i ++)
                <div class="calendar-wrap">
                    <div class="calendar-header">
                        <span class="now-month">{{ Request::get('year', date('Y')) .'-' . str_pad($i, 2, '0', STR_PAD_LEFT) }}</span>
                    </div>
                    <div id="calendar_{{ $i }}" style="height: 300px"></div>
                </div>
            @endfor
        </div>

        <div class="col-lg-6 col-md-10 col-sm-6">
            <table class="table table-striped table-hover" id="month_list">
                <colgroup>
                    <col width="15%">
                    <col width="15%">
                    <col width="15%">
                    <col width="15%">
                    <col width="40%">
                </colgroup>
                <thead>
                    <tr>
                        <th>날짜</th>
                        <th>시작</th>
                        <th>종료</th>
                        <th>구분</th>
                        <th>강좌명</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="default" style="display: none">
                        <td data-name="date"></td>
                        <td data-name="start_time"></td>
                        <td data-name="end_time"></td>
                        <td data-name="typeName"></td>
                        <td data-name="schedule_name"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>
</section>
@endsection

@push("script")
<script>

    $(async function() {
        setPageType("year-list")
        await calendarInit();
    })

    async function onSubmit() {
        const year = $('#year').val();
        const data = await getScheduleData({ 'year' : year }) ;

        setMonthlyData([]);
        for (let i = 1 ; i <= 12; i++) {
            const monthlyData = $.isEmptyObject(data[i]) ? [] : data[i];

            calendars[i].setCalenderData(monthlyData, new Date(year, i - 1));
            setMonthlyData(monthlyData, false);
        }
    }

    $(function() {
        const categorySelector = new MultiSelector("categories", { isOverall : true });
        const optionSelector = new MultiSelector("option_ids", { isOverall : true });
        const typeSelector = new MultiSelector("type", { isOverall : true });


        $('#year').on("change", function() {
            $('#schedule_form').submit();
        })


    })

</script>

@endpush