@extends("domains.common.layouts.layout")

@section("header")
@vite([
    'resources/js/domains/common/tomSelect.js',
    'resources/js/domains/common/tomSelectAllCheck.js',
    'resources/js/domains/common/fullCalendar.js',
])
@endsection

@section("main-content")
<div class="container-fluid detail">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h1>개인 일정 관리</h1>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-xl-12 col-lg-12 order-lg-2 order-xl-1">
            <div class="card">
                <div class="card-body">
                    <form action="" class="search-form" method="GET">
                        <div class="search-input-wrap">
                            <div class="search-input">
                                <label for="sort">일정 구분</label>
                                <select name="sort" id="sort">
                                    <option value="0">전체</option>
                                    <option value="1">미정</option>
                                    <option value="2">직원회원1</option>
                                    <option value="3">직원회원2</option>
                                    <option value="4">직원회원3</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="view">일정 보기</label>
                                <select name="view" id="view">
                                    <option value="0">월</option>
                                    <option value="1" selected>연도</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <input type="hidden" name="paginate">
                                <input type="hidden" name="order_by">
                                <input type="hidden" name="sort">
                            </div>
                        </div>
                        <button type="submit" class="search-button">조회</button>
                    </form>

                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div>
    <!-- end row -->

    <div class="row detail-con-wrap4">
        <div class="detail-con card">
            <form action="" class="set-user-form" >
                <div class="card-body">
                    <div class="flex-box">
                        <div class="w100">
                            <div class="schedule-calendar2"></div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="detail-con card">
            <form action="" class="set-user-form" >
                <div class="card-body">
                    <div class="flex-box">
                        <div class="w100">
                            <div class="top-select-form">
                                <button class="button btn-style-1">일정 등록</button>
                            </div>
                            <div class="schedule-table-wrap">
                                <table class="default-table sc-table">
                                    <colgroup>
                                        <col>
                                        <col>
                                        <col>
                                    </colgroup>
                                    <thead>
                                        <tr>
                                            <th scope="col">시간</th>
                                            <th scope="col">일정 구분</th>
                                            <th scope="col">방문자명/일정제목</th>
                                            <th scope="col">방문 여부</th>
                                            <th scope="col">담당자</th>
                                            <th scope="col">▼</th>
                                        </tr>
                                    </thead>
                                    <tbody style="text-align: center">
                                        <tr>
                                            <td class="year-td" colspan="6">2023.01</td>
                                        </tr>
                                        <tr>
                                            <td>오전 10:00 ~<br>오후 13:00</td>
                                            <td>개강</td>
                                            <td class="text-left">%이름%,%일정제목%</td>
                                            <td>
                                                <select name="" id="" class="w60px">
                                                    <option value="">O</option>
                                                    <option value="">X</option>
                                                </select>
                                            </td>
                                            <td class="text-left">%이름%</td>
                                            <td id="sc-toggle-memo">▼</td>
                                        </tr>
                                        <tr class="sc-memo-tr">
                                            <td colspan="6" class="text-left sc-memo">
                                                %상담메모%
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- end row -->
</div>
@endsection

@push("script")
<script>

    window.addEventListener("load", () => {
        calendarInit();
    });

    const calendarInit = () => {
        // 캘린더 Elem 접근
        const calendarEls = document.querySelectorAll('.schedule-calendar2');
        for (let calendarEl of calendarEls) {
            if (calendarEl != null) {
                let calendar = new Calendar(calendarEl, {
                    // plugins: [dayGridPlugin, timeGridPlugin, listPlugin],
                    plugins: [dayGridPlugin, momentPlugin, multiMonthPlugin],
                    initialView: 'multiMonthYear',
                    headerToolbar: {
                        left: 'prev,next',
                        center: 'title',
                        // right: 'dayGridMonth,timeGridWeek,listWeek'
                        right: 'today'
                    },
                    titleFormat: 'YYYY년 MM월',
                    buttonText: {
                        today:    'Today',
                        // month:    'month',
                        // week:     'week',
                        // day:      'day',
                        // list:     'list'
                    },
                    buttonIcons: {
                        // prev: 'chevron-left',
                        // next: 'chevron-right',
                        // prevYear: 'chevrons-left', // double chevron
                        // nextYear: 'chevrons-right' // double chevron
                    },
                    // height: window.innerHeight - 300,
                    editable: false,
                    droppable: false,
                    selectable: false,
                    events: [
                        {
                            title: 'All Day Event',
                            start: '2023-07-01',
                            className: "bg-warning"
                        },
                        {
                            title: 'Long Event',
                            start: '2023-07-07',
                            end: '2023-07-10',
                            className: "bg-warning"
                        },
                        {
                            groupId: '999',
                            title: 'Repeating Event',
                            start: '2023-07-09T16:00:00',
                            className: "bg-warning"
                        },
                        {
                            groupId: '999',
                            title: 'Repeating Event',
                            start: '2023-07-16T16:00:00',
                            className: "bg-warning",
                        },
                        {
                            title: 'Conference',
                            start: '2023-07-11',
                            end: '2023-07-13',
                            className: "bg-warning"
                        },
                        {
                            title: 'Meeting',
                            start: '2023-07-12T10:30:00',
                            end: '2023-07-12T12:30:00',
                            className: "bg-warning"
                        },
                        {
                            title: 'Lunch',
                            start: '2023-07-12T12:00:00',
                            className: "bg-warning"
                        },
                        {
                            title: 'Meeting',
                            start: '2023-07-12T14:30:00',
                            className: "bg-warning"
                        },
                        {
                            title: 'Birthday Party',
                            start: '2023-07-13T07:00:00',
                            className: "bg-warning"
                        },
                        {
                            title: 'Click for Google',
                            url: 'https://google.com/',
                            start: '2023-07-28',
                            className: "bg-warning"
                        },
                        {
                            title: "Meeting with Mr. Shreyu",
                            start: Date.now() + 158e6,
                            end: Date.now() + 338e6,
                            //  클래스로 색 구별  id="event-category"
                            className: "bg-warning"
                        },
                        {
                            title: "Meeting with Mr. Shreyu",
                            start: Date.now() + 158e6,
                            end: Date.now() + 338e6,
                            //  클래스로 색 구별  id="event-category"
                            className: "bg-warning"
                        },
                        {
                            title: "Meeting with Mr. Shreyu",
                            start: Date.now() + 158e6,
                            end: Date.now() + 338e6,
                            //  클래스로 색 구별  id="event-category"
                            className: "bg-warning"
                        }
                    ]
                });
                calendar.render();
            }
        }

        const weekendElems = document.querySelectorAll("a.fc-col-header-cell-cushion");
        for (let weekendElem of weekendElems) {
            if (weekendElem.innerHTML == "Sun" || weekendElem.innerHTML == "Sat")
                weekendElem.classList.add("weekend-red");
        }
    }

    let selectTmp;



    window.addEventListener("load", () => {
        selectTmp = new TomSelect("#sort", {
            plugins: [
                "checkbox_options",
                "caret_position",
                "input_autogrow"
            ],
            maxItems: null
        });

    });
</script>
@endpush