@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="">개인 일정 관리(년)</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>
    <main>
        <form action="" class="search-form mb-3">
            <button type="button" class="btn btn-sm btn-primary" onclick="onOpenCounselCreatePopup()">일정등록</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="14%">
                    <col width="14%">
                    <col width="14%">
                    <col width="17%">
                    <col width="17%">
                    <col width="22%">
                    <col width="2%">
                </colgroup>
                <thead>
                    <tr>
                        <th>날짜</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="date"></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>
    </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 filterSelector = new MultiSelector("visited_type", { isOverall : true });
        const chargedSelector = new MultiSelector("charged_by", { isOverall : true });

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


    })

</script>

@endpush