@extends("common.layout-popup")

@section("page-title", "강좌 일정 등록")

@section("header")
{!! setResources([ 'toast-calendar']) !!}


<style>
    @media (max-width: 768px) {
        .time-picker {
            display: block;
            width: auto;
        }
    }
</style>
@endsection

@section("content")
    <section>
        <main>
            <form method="get" class="search-form" id="lecture-form" action="{{ route('schedule.popup.add', 'course') }} ">
                @csrf
                <div class="search-input-wrap">
                    <div class="input-group input-group-sm">
                        <label class="input-group-text" for="categories">강좌</label>
                        @if ($id == 0)
                            <select name="course_id" id="course_id" class="form-select form-select-sm">
                                @foreach ( $courses as $course )
                                    <option value="{{ $course->id }}">{{ $course->name }}</option>
                                @endforeach
                            </select>
                        @else
                            <input type="hidden" name="course_id" id="course_id" value="{{ $courses->id }}" disabled/>
                            <input type="hidden" name="paginate" id="paginate" value="{{ Request::get('paginate') }}" disabled/>
                            <div class="input-group-text">
                                {{ $courses->name }}
                            </div>
                        @endif
                    </div>

                    @if ($id == 0)
                        <button type="submit" class="btn btn-sm btn-outline-dark search-button">조회</button>
                    @else
                        <button type="button" class="btn btn-sm btn-outline-dark search-button" onclick="location.href='{{ route('schedule.popup.add', 'course') }}'">초기화</button>
                    @endif
                </div>
            </form>
        </main>
    </section>

    @if ($id > 0)
    <div class="row mt-3">
        <div class="col-6">
            <section>
                <main>
                    <div class="calendar-wrap">
                        <div class="calendar-header">
                            <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 id="calendar" style="height: 600px" class="simple"></div>
                    </div>
                </main>
            </section>
        </div>
        <div class="col-6">
            <section>
                <header>
                    <h6></h6>
                    <button class="btn btn-sm btn-primary" type="button" onclick="checkValidation()">저장</button>
                </header>
                <main>
                    <form class="default" method="POST">
                        <div class="form-group row">
                            <label class="required col-2">요일</label>
                            <div class="right-col d-flex col-10" id="day-of-week">
                                @php
                                    $dayLists = $pattern ? explode("|", $pattern->day_list) : [];
                                @endphp
                                @foreach ($dayOfWeeks as $key => $text)
                                    <label class="form-check-label">
                                        <input type="checkbox" name="day" value="{{ $key }}" class="day" @checked( ! empty($dayLists) && in_array($key, $dayLists))> {{ $text }}
                                    </label>
                                @endforeach
                            </div>
                            <div class="validation-wrap">
                                <p class="m-0"></p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="required col-2">시간</label>
                            <div class="right-col d-flex col-10" id="time-box">
                                <div class="col-3">
                                    <input type="time" value="{{ $pattern ? $pattern->start_time : "" }}" name="start_time" id="start_time" class="form-control form-control-sm" />
                                </div>
                                <span class="col-1 align-center">~</span>
                                <div class="col-3">
                                    <input type="time" value="{{ $pattern ? $pattern->end_time : "" }}" name="end_time" id="end_time"  class="form-control form-control-sm col-3" />
                                </div>
                            </div>
                            <div class="validation-wrap">
                                <p class="m-0"></p>
                            </div>
                        </div>

                        <div class="form-group">
                            <table class="table table-striped table-hover mt-3" id="schedule_list">
                                <colgroup>
                                    <col width="40%">
                                    <col width="40%">
                                    <col width="10%">
                                    <col width="10%">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>개강</th>
                                        <th>종강</th>
                                        <th>수강회차</th>
                                        <th>관리</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="default" style="display: none" class="is_disable is_new_schedule">
                                        <td>
                                            <input type="date" value="" name="start_date[]" class="form-control form-control-sm start_date" disabled />
                                        </td>
                                        <td>
                                            <input type="date" value="" name="end_date[]" class="form-control form-control-sm end_date" disabled />
                                        </td>
                                        <td class="study_cnt"></td>
                                        <td>
                                            <button class="btn btn-sm btn-danger onRemove" type="button">삭제</button>
                                        </td>
                                    </tr>
                                    <tr class="is_disable" id="append-row">
                                        <td>
                                            <input type="date" value="" class="form-control form-control-sm" disabled />
                                        </td>
                                        <td>
                                            <input type="date" value="" class="form-control form-control-sm" disabled />
                                        </td>
                                        <td></td>
                                        <td>
                                            <button class="btn btn-sm btn-primary onCreate" type="button">추가</button>
                                        </td>
                                    </tr>
                                    @foreach ($schedules as $item)
                                        <tr class="is_disable">
                                            <td>
                                                <input type="hidden" name="schedule_course_id" value="{{ $item->id }}" />
                                                <input type="date" name="start_date[]" value="{{ $item->start_date }}" class="form-control form-control-sm" data-old-date={{ $item->start_date }} />
                                            </td>
                                            <td>
                                                <input type="date" name="end_date[]" value="{{ $item->end_date }}" class="form-control form-control-sm" data-old-date={{ $item->end_date }}  />
                                            </td>
                                            <td>{{ number_format($item->count) }}</td>
                                            <td>
                                                <button class="btn btn-sm btn-danger onRemove" type="button" data-course-id="{{ $item->id }}">삭제</button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div class="validation-wrap">
                                <p class="m-0"></p>
                            </div>

                        </div>
                    </form>
                </main>
                <footer>
                    <div class="pagination-wrap">
                        {{ $schedules->links() }}
                    </div>
                </footer>
            </section>
        </div>
    </div>
    @endif
@endsection

@push("script")
    <script>

        @if ($id > 0)
            $(async function() {
                setPageType("popup");
                await calendarInit()
            })
        @endif


        $(function() {

            $('.onCreate').on("click", function() {
                const appendRow = $('#append-row')

                const row = $('#default').clone();
                row.attr("id", "append-row");
                row.attr("class", "is_new_schedule");
                row.find("input").attr("disabled", false);

                row.find(".start_date").attr("id", "start_date_" + $('.start_date').length )
                row.find(".end_date").attr("id", "end_date_" + $('.end_date').length )
                row.show();

                $('#schedule_list tbody #append-row').after(row);
                appendRow.attr("id", "");

                onLoadDatePicker();
            })

            $(document).on("click", ".onRemove", function() {
                const tr = $(this).closest("tr")
                if ($(this).data("course-id")) {
                    const scheduleCourseId = $(this).data("course-id");
                    //ajax 로 데이터 삭제
                    alertify.confirm("알림", "일정을 삭제하시겠습니까?<br>삭제 시 하위 정보도 모두 삭제됩니다.", async () => {
                    const result = await customFetch('{{ route("api.schedules.course.remove")  }}', {
                        method: "POST",
                        body : JSON.stringify({
                            "course_id" : scheduleCourseId
                        }) ,
                        headers: { "Content-Type" : "application/json"}
                    });

                    if (result.status) {
                        alertify.alert("알림", "삭제되었습니다.", () => { tr.remove() } )
                    }

                }, () => {});
                } else {
                    tr.remove()
                }
            })

            $(document).on("click", '.start_date', function() {
                const row = $(this).closest("tr");
                if (row.prev().hasClass("is_disabled") || ! row.hasClass("is_new_schedule") || $.isEmptyObject(row.prev().find(".end_date").val()) || !$.isEmptyObject($(this).val())) {
                    return false;
                }

                const date = new Date(row.prev().find(".end_date").val());
                const nextMonth = new Date(date.getFullYear(), date.getMonth() + 1, 1);

                const newDate = nextMonth.getFullYear() + "-" + ( String(nextMonth.getMonth() + 1).padStart(2, '0')) + "-" + "01";
                setDatepickerValue($(this), newDate);
                setDatepickerValue(row.find(".end_date"), newDate);
            })

            $(document).on("change", '.start_date, .end_date', function() {
                const row = $(this).closest("tr");
                getDaysInRange(row);
            })

            $(document).on("click", ".day", function() {
                $.each($('.is_new_schedule:not(is_disabled)'), function() {
                    getDaysInRange($(this));
                })
            })
        })

        function getDaysInRange(row) {

            let startDate = new Date(row.find(".start_date").val());
            let endDate = new Date(row.find(".end_date").val());
            if ($.isEmptyObject(startDate) || $.isEmptyObject(endDate) || $('input[name=day]:checked').length == 0) {
                return false;
            }
            const dayOfWeeks = $.map($('.day:checked'), function(day) {
                return Number(day.value)
            });
            let count = 0;
            while (startDate <= endDate) {
                if (dayOfWeeks.indexOf(startDate.getDay()) >= 0) {
                    count++;
                }
                startDate.setDate(startDate.getDate() + 1);
            }

            row.find(".study_cnt").text(count);
        }


        function checkValidation() {
            let isDateValid = true;
            if ($('input[name=day]:checked').length == 0) {
                isDateValid = displayValidationForm($('#day-of-week'), "수강일 패턴을 선택하세요", "div.form-group");
            }

            if ($.isEmptyObject($('#start_time').val()) || $.isEmptyObject($('#end_time').val())) {
                isDateValid = displayValidationForm($('#time-box'), "수강 시간이 입력되지 않았습니다.", "div.form-group");
            }

            if ($('#start_time').val() >= $('#end_time').val()) {
                isDateValid = displayValidationForm($('#time-box'), "종료 시간이 시작 시간보다 빠르거나 같습니다.", "div.form-group");
            }

            const rows = $('#schedule_list tbody tr:not(.is_disable)');
            const allDates = $.map(rows, function(row) {
                return {
                    "start_at" : new Date(row.querySelector(".start_date").value),
                    "end_at" : new Date(row.querySelector(".end_date").value)
                }
            });

            const dayOfWeeks = $.map($('.day:checked'), function(day) {
                return Number(day.value)
            });

            $.each(rows, function() {
                const start = new Date($(this).find(".start_date").val());
                const end = new Date($(this).find(".end").val());

                if ($.isEmptyObject(start) && $.isEmptyObject(end))  {
                    return true;
                }
                const isValid = checkValidationDate(allDates, start, end);
                isDateValid = isValid ? isDateValid : false;
                if (! isValid) {
                    $(this).find(".start_date, .end_date").css("color", "red");
                }
            })

            if (isDateValid) {
                //이 경우 데이터 저장시키기!
                alertify.confirm("알림", "일정을 저장하시겠습니까?", async () => {
                    const result = await customFetch('{{ route("api.schedules.course.create")  }}', {
                        method: "POST",
                        body : JSON.stringify({
                            "dates" : allDates,
                            "courseId" : $('#course_id').val(),
                            "startTime" : $('#start_time').val(),
                            "endTime" : $('#end_time').val(),
                            "dayOfWeeks" : dayOfWeeks,
                            "type" : "course"
                        }) ,
                        headers: { "Content-Type" : "application/json"}
                    });

                    if (result.status) {
                        alertify.alert("알림", "저장되었습니다.", () => { location.reload() } )
                    } else {
                        alertify.alert("알림", result.message, () => {  } )
                    }

                }, () => {});
            }

        }

        function checkValidationDate(allDates, startDate, endDate) {

            let isValid = true;
            if (startDate.getTime() >= endDate.getTime()) {
                isValid = displayValidationForm($('#schedule_list'), "종강일이 개강일보다 빠릅니다.", "div.form-group");
                return false;
            }

            const defDate = new Date();
            defDate.setDate(defDate.getDate() + 2);
            defDate.setHours(0);
            defDate.setMinutes(0);
            defDate.setSeconds(0)

            if (startDate.getTime() < defDate.getTime()) {
                isValid = displayValidationForm($('#schedule_list'), "개강일은 익일 이후로만 설정 가능합니다.", "div.form-group");
                return false;
            }

            $.each(allDates, function(index) {
                const dates = allDates[index];

                if (dates['start_at'].getTime() == startDate.getTime() &&  dates['end_at'].getTime() == endDate.getTime()) {
                    return true;
                }

                if (
                    dates['start_at'].getTime() >= startDate.getTime() &&  dates['end_at'].getTime() <= startDate.getTime() || //개강일이 다른 개강일 - 종강일 사이에 있거나
                    dates['start_at'].getTime() >= endDate.getTime() &&  dates['end_at'].getTime() <= endDate.getTime() //종강일이 다른 개강일 - 종강일 사이에 으면 false
                ) {
                    isValid = displayValidationForm($('#schedule_list'), "중복된 강좌 일정이 있습니다.", "div.form-group");
                }
            })
            return isValid;
        }


    </script>
@endpush