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

@section("schedule-contents")
<main>
    <input type="hidden" name="type" id="type" value="HOLIDAY" />
    <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%">
            </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="date[]" class="form-control form-control-sm date" disabled autocomplete="false" />
                    </td>
                    <td>
                        <input type="text" name="title[]" class="form-control form-control-sm title" value="" 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 />
                    </td>
                    <td>
                        <input type="text" name="title[]" class="form-control form-control-sm title" value="" autocomplete="false" disabled />
                    </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="detail_id" class="detail_id" value="{{ $item->id }}" />
                            <input type="date" name="date[]" value="{{ $item->date }}" id="date_{{ $item->id }}"
                                class="form-control form-control-sm date" data-old={{ $item->date }}  autocomplete="false"
                                {{ date('Y-m-d') > $item->date  ? "disabled" : "" }}
                            />
                        </td>
                        <td>
                            <input type="text" name="title[]" class="form-control form-control-sm title" value="{{ $item->title }}" data-old='{{ $item->title }}'  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>
</main>

@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(".date").attr("id", "date" + $('.date').length )
            row.show();

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

            onLoadDatePicker();
        })

        $(document).on("change.td", '.date, .title', function() {
            checkScheduleChange($(this).closest("tr"), ".date, .title");
        })
    })



    function checkValidation() {
        let isValid = false;
        const rows = $('#schedule_list tbody tr:not(.is_disable)');
        resetValidationsForm();
        if (rows.length == 0) {
            isValid = displayValidationForm($('#schedule_list'), "변경된 데이터가 없습니다.", "div.form-group");
            return false;
        }

        const defDate = new Date();
        defDate.setDate(defDate.getDate() + 1);
        const allDates = $.map(rows, function(row) {
            const date = new Date(row.querySelector(".date").value)

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

            return {
                "date" : new Date(row.querySelector(".date").value),
                "title" : row.querySelector(".title").value,
                "detail_id" : row.querySelector(".detail_id") ? row.querySelector(".detail_id").value : 0,
                "is_remove" : row.classList.contains('is_remove'),
                "type" : "HOLIDAY"
            }
        });

        if (! isValid) {
            onSubmitScheduleDetail("holiday", allDates);
        }
    }






</script>
@endsection