@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="{{ route('schedule.list', 'month') }}">어학원 일정 관리(월)</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="module_id">모듈 구분</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(in_array($module, Request::get("product_module", [])))>{{ $module }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="product_ids">상품명</label>
                    <select name="product_ids" id="product_ids" multiple>
                        @foreach ( $products as $product)
                            <option value="{{ $product->id }}" @selected(in_array($product->id , Request::get("product_ids", [])))>{{ $product->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>
            <button type="button" class="btn btn-sm btn-outline-dark search-button" onclick="onSubmit()">조회</button>
        </form>
    </main>
</section>


<section>
    <header>

    </header>
    <main>
        <div class="row">
            <div class="col-lg-8 col-md-12 mb-3">
                <div class="calendar-wrap">
                    <div class="calendar-header">
                        <div class="calendar-box">
                            <button class="btn btn-sm btn-secondary" type="button" onclick="onChangeToday()">Today</button>
                        </div>
                        <div class="calendar-box">
                            <span class="btn-prev" onclick="onChangeMonth(true)">
                                <i class="bi bi-arrow-left-circle"></i>
                            </span>
                            <span class="now-month">{{ date('Y-m') }}</span>
                            <span class="btn-next" onclick="onChangeMonth(false)">
                                <i class="bi bi-arrow-right-circle"></i>
                            </span>
                        </div>
                        <div class="calendar-box"></div>
                    </div>
                    <div id="calendar" style="height: 650px" class="simple"></div>
                </div>
            </div>
            <div class="col-lg-4 col-md-12">
                <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>
                    <table class="table table-striped table-hover" id="date_list">
                        <colgroup>
                            <col width="20%">
                            <col width="20%">
                            <col width="60%">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>시간</th>
                                <th>일정구분</th>
                                <th>일정명</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="default" style="display: none">
                                <td data-name="start_time"></td>
                                <td class="font-weight-600 bg-custom-50" data-name="typeName"></td>
                                <td data-name="schedule_name" ></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
</section>
@endsection

@push("script")
<script>

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

    async function onSubmit() {
        await getScheduleData();
    }

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

    })
    $(function() {
        $(document).on("click", '.onCalendarPopup', function(e) {
            calendar.openMorePopup($(this).data("date"), e.target);

        })
    })


</script>

@endpush