@extends("common.layout")

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

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

</style>
@endsection

@section("content")
<div class="split">
    <h1><a href="{{ route('schedule.user.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="visited_type">일정 구분</label>
                    <select name="visited_type" id="visited_type" class="form-select visited_type" multiple>
                        <option value="notice" @selected(in_array('notice' , Request::get("visited_type", [])))>공지</option>
                        <option value="person" @selected(in_array('person' , Request::get("visited_type", [])))>개인</option>
                        @foreach ( $visited as $key => $val )
                            <option value="{{ $key }}"  @selected(in_array($key , Request::get("visited_type", [])))>{{ $val }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="charged_by">담당자</label>
                    <select name="charged_by" id="charged_by" class="form-select charged_by" multiple>
                        <option value="0" @selected(in_array('0' , Request::get("admins", [])))>미정</option>
                        @foreach ( $admins as $key => $val )
                            <option value="{{ $key }}" @selected(in_array($key , Request::get("admins", [])))>{{ $val['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>
{{--                            <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="onOpenCounselCreatePopup()">일정등록</button>
                </form>

                <div>
                    <table class="table table-hover" id="date_list">
                        <colgroup>

                            <col width="22%">
                            <col width="15%">
                            <col width="19%">
                            <col width="19%">
                            <col width="22%">
                            <col width="3%">
                        </colgroup>
                        <thead>
                            <tr style="vertical-align: middle;">
                                <th style="display:none;"></th>
                                <th>시간</th>
                                <th>일정구분</th>
                                <th>방문자명</th>
                                <th>방문여부</th>
                                <th>담당자</th>
                                <th><button class="btn btn-default btn-all-toggle">▼</button></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="default" style="display: none">
                                <td data-name="info" style="display: none;"><input type="hidden" name="info" ></td>
                                <td data-name="time"></td>
                                <td class="font-weight-600 bg-custom-50" data-name="visited_type"></td>
                                <td data-name="name" ></td>
                                <td data-name="is_completed" ></td>
                                <td data-name="admins" ></td>
                                <td data-name="toggle"></td>
                            </tr>
                            <tr id="default-detail" style="display: none" class="detail-row">
                                <td colspan="7">추가 세부 정보</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
</section>
@endsection

@push("script")
<script>

    $(async function() {
        setPageType("month-list")
        await calendarInit();
        $(".today").trigger('click');
    })

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

    $(function() {
        const filterSelector = new MultiSelector("visited_type", { isOverall : true });
        const chargedSelector = new MultiSelector("charged_by", { isOverall : true });
    });

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

        })
    })


</script>

@endpush