@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">연도</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-calendar"></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>오전 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>
    let selectTmp;

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

    });
</script>
@endpush