@extends("schedule.popup.layout-schedule")

@section("schedule-contents")
<main>
    <form class="default" method="POST">
        <input type="hidden" name="type" id="type" value="START|STUDY|END" />
        <input type="hidden" name="pattern_id" id="pattern_id" value="{{ $pattern?->id }}" >
        <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_list" @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="45%">
                    <col width="45%">
                    <col width="15%">
                </colgroup>
                <thead>
                    <tr>
                        <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  autocomplete="false"/>
                        </td>
                        <td>
                            <input type="date" value="" name="end_date[]" class="form-control form-control-sm end_date" disabled  autocomplete="false"/>
                        </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  autocomplete="false"/>
                        </td>
                        <td>
                            <input type="date" value="" class="form-control form-control-sm" disabled  autocomplete="false"/>
                        </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_period_id" class="schedule_period_id" value="{{ $item->id }}" />
                                <input type="date" name="start_date[]" value="{{ $item->start_date }}" id="start_time_{{ $item->id }}"
                                    class="form-control form-control-sm start_date" data-old-date={{ $item->start_date }}
                                    {{ date('Y-m-d') > $item->start_date  ? "disabled" : "" }}  autocomplete="false"
                                />
                            </td>
                            <td>
                                <input type="date" name="end_date[]" value="{{ $item->end_date }}" id="end_date_{{ $item->id }}"
                                class="form-control form-control-sm end_date" data-old-date={{ $item->end_date }}
                                {{ date('Y-m-d') > $item->end_date ? "disabled" : "" }}  autocomplete="false"
                                />
                            </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 ? $schedules->links() : "" }}
    </div>
</footer>

@endsection


@section("schedule-script")
<script>

    $(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", '.start_date, .end_date', function() {
            const row = $(this).closest("tr");
            const now = new Date();
            now.setHours(0,0,0,0);

            const inputDate = new Date($(this).val());
            inputDate.setHours(0,0,0,0);

            if (row.prev().hasClass("is_disabled") || ! row.hasClass("is_new_schedule") || now.getTime() != inputDate.getTime()) {
                return false;
            }
            if ($(this).hasClass("start_date")) {
                if ( $.isEmptyObject(row.prev().find(".end_date").val())) {
                    return false;
                }
                const date = new Date(row.prev().find(".end_date").val());
                const nextMonth = new Date(date.getFullYear(), date.getMonth() + 1, 1);

                setDatepickerValue($(this), nextMonth);
                setDatepickerValue(row.find(".end_date"), nextMonth);
            } else {
                setDatepickerValue($(this), new Date(row.find(".start_date").val()));
            }
        })

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

            let isDisabled = true;
            $.each(row.find('.start_date, .end_date'), function() {
                isDisabled = getDatepickerValue($(this)) == $(this).data("old-date") ? isDisabled : false
                $(this).css("color", '#000');
            })

            isDisabled ? row.addClass("is_disable") : row.removeClass("is_disable");
        })
    })

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

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

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

        resetValidationForm($('#schedule_list'),  "div.form-group");


        const rows = $('#schedule_list tbody tr');

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

        //여기는 날짜를 변경할 모든 데이터를 가져옴
        const allDates = $.map(rows, function(row, index) {
            if ( ! row.classList.contains('is_disable') && row.querySelector(".start_date") && row.querySelector(".start_date").value) {
                const start = new Date(row.querySelector(".start_date").value);
                const end = new Date(row.querySelector(".end_date").value);

                if (start.getTime() >= end.getTime()) {
                    displayValidationForm($('#schedule_list'), index + "번째 행의 종강일이 개강일보다 빠릅니다.", "div.form-group");
                    row.querySelector(".start_date").style.color = "red";
                    row.querySelector(".end_date").style.color = "red";
                    isDateValid = false;
                }

                if (start.getTime() < defDate.getTime()) {
                    displayValidationForm($('#schedule_list'), index + "번째 행의 개강일은 익일 이후로만 설정 가능합니다.", "div.form-group");
                    row.querySelector(".start_date").style.color = "red";
                    row.querySelector(".end_date").style.color = "red";
                    isDateValid = false;
                }

                row.querySelector(".start_date").style.color = "black";
                row.querySelector(".end_date").style.color = "black";

                return {
                    "index" : index,
                    "start_date" : start,
                    "end_date" : end,
                    "schedule_period_id" : row.querySelector(".schedule_period_id") ? row.querySelector(".schedule_period_id").value : 0,
                    "is_remove" : row.classList.contains('is_remove'),
                }
            }
        });


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

        //날짜를 변경하기로 한 데이터를 기준으로 모든 날짜 데이터 확인
        $.each(rows, function(index) {
            if ($.isEmptyObject($(this).find(".start_date").val()) && $.isEmptyObject($(this).find(".end_date").val()))  {
                return true;
            }

            const start = new Date($(this).find(".start_date").val());
            const end = new Date($(this).find(".end_date").val());
            const isValid = checkValidationDate(allDates, index,  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.period.create")  }}', {
                    method: "POST",
                    body : JSON.stringify({
                        "dates" : allDates,
                        "productId" : $('#product_id').val(),
                        "startTime" : $('#start_time').val(),
                        "endTime" : $('#end_time').val(),
                        "dayOfWeeks" : dayOfWeeks,
                        "type" : "period"
                    }) ,
                    headers: { "Content-Type" : "application/json"}
                });

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

            }, () => {});
        }

    }

    function checkValidationDate(allDates, rowIndex, startDate, endDate) {
        let isValid = true;
        $.each(allDates, function(index) {
            const dates = allDates[index];
            if (rowIndex == dates['index']) {
                return true;
            }

            if (
                (dates['start_date'].getTime() == startDate.getTime() &&  dates['end_date'].getTime() == endDate.getTime()) ||
                (dates['start_date'].getTime() >= startDate.getTime() &&  dates['end_date'].getTime() <= startDate.getTime()) || //개강일이 다른 개강일 - 종강일 사이에 있거나
                (dates['start_date'].getTime() >= endDate.getTime() &&  dates['end_date'].getTime() <= endDate.getTime()) //종강일이 다른 개강일 - 종강일 사이에 으면 false
            ) {
                displayValidationForm($('#schedule_list'), rowIndex + "번째 행 과 "+ dates['index'] + "번째 행의 일정이 중복됩니다.", "div.form-group");
                $('#schedule_list tbody tr:nth-child('+ (Number(dates['index']) + 1) +') input').css("color", "red");
                isValid = false;
            }
        })


        return isValid;
    }


</script>

@endsection