@extends('academy.layout')

@section('ielts-css')
    {{-- {!! resource('css/components/calendar.css') !!} --}}
@endsection

@section('academy-content')

<div style="display: flex;  align-items: center; justify-content: center;margin: 1rem 0" id="calendar" >
    <input type="text" name="date" id="date" value="" style=" max-width: 200px;" />
</div>

    {{-- 퍼블 원본 --}}
{{-- <div class="calendarWrap">
    <div class="calendar product">
        <div class="calendar-wrap">
            <div class="calendar-header">
                <a class="btn-previous">
                    <i></i>
                </a>
                <div class="month">2024년 11월</div>
                <a class="btn-next">
                    <i></i>
                </a>
            </div>
            <div class="calendar-body">
                <ul class="day-list week">
                    <li class="day-item">일</li>
                    <li class="day-item">월</li>
                    <li class="day-item">화</li>
                    <li class="day-item">수</li>
                    <li class="day-item">목</li>
                    <li class="day-item">금</li>
                    <li class="day-item">토</li>
                </ul>
                <ul class="day-list day">
                    <li class="day-item">
                        <div class="day-box"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box">
                            <span class="date">1</span>
                        </div>
                        <div class="indicator">
                            <span class="start"></span>
                            <span class="end"></span>
                            <span class="cdt"></span>
                            <span class="pbt"></span>
                            <span class="special"></span>
                        </div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">2</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item today">
                        <div class="day-box"><span class="date">3</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item active">
                        <div class="day-box"><span class="date">4</span></div>
                        <div class="indicator">
                            <span class="start"></span>
                            <span class="end"></span>
                        </div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">5</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">6</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">7</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">8</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">9</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">10</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">11</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">12</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">13</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">14</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">15</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">16</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">17</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">18</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">19</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">20</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">21</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">22</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">23</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">24</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">25</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">26</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">27</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">28</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"><span class="date">29</span></div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box">
                            <span class="date">30</span>
                        </div>
                        <div class="indicator"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"></div>
                    </li>
                    <li class="day-item">
                        <div class="day-box"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="calendar-info">
        <div class="calendar-header">일정 상세</div>
        <div class="calendar-list">
            <div class="date">3일</div>
            <div class="calendar-item">
                <div class="title"> <span class="special"></span> <div>특강이 있습니다.</div></div>
                <div class="timer"> 10:00 - 11:00</div>
            </div>
        </div>
        <div class="calendar-list">
            <div class="date">3일</div>
            <div class="calendar-item">
                <div class="title"> <span class="special"></span> <div>특강이 있습니다.</div></div>
                <div class="timer"> 10:00 - 11:00</div>
            </div>
            <div class="calendar-item">
                <div class="title"> <span class="special"></span> <div>특강이 있습니다.</div></div>
                <div class="timer"> 10:00 - 11:00</div>
            </div>
        </div>
    </div>
</div>



    <div id="calendar"></div> --}}
@endsection

@section('academy-script')
    {{-- {!! resource('js/components/calendar.js') !!} --}}
    <script>
        (function( factory ) {
            if ( typeof define === "function" && define.amd ) {
                define([ "../widgets/datepicker" ], factory );
            } else {
                factory( jQuery.datepicker );
            }
        }(function( datepicker ) {
                datepicker.regional['ko'] = {
                prevText: '<i class="btn-prev"></i>',
                nextText: '<i class="btn-next"></i>',
                closeText: "닫기",
                prevText: "이전달",
                nextText: "다음달",
                currentText: "오늘",
                monthNames: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
                monthNamesShort: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
                dayNames: ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"],
                dayNamesShort: ["일","월","화","수","목","금","토"],
                dayNamesMin: ["일","월","화","수","목","금","토"],
                weekHeader: "주",
                dateFormat: "yy-mm-dd",
                firstDay: 0,
                isRTL: false,
                showMonthAfterYear: true,
                yearSuffix: "년"
            };
            datepicker.setDefaults(datepicker.regional['ko']);
            return datepicker.regional['ko'];
        }));

        $(function() {
            $("#date").datepicker({
                dateFormat: "yy-mm-dd",
                changeMonth: false,
                changeYear: false,
                showButtonPanel: false,
            });
        })
        // $(function() {
        //     new Calendar("calendar", {
        //         onMonthChange: async (month) => {
        //             const monthText = month.getFullYear() + "-" + (month.getMonth() + 1) + "-01" ;
        //             const response = await fetch("/api/classroom/402/attendances?month=" + monthText, {
        //                 method: "GET",
        //                 headers : {
        //                     "Content-Type": "application/json", // 요청 데이터 형식 명시
        //                     "Accept": "application/json",      // 응답 데이터 형식 명시
        //                     "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
        //                 }
        //             })

        //             const result = await response.json();
        //             return result.list
        //         }
        //     })
        // })
    </script>
@endsection