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

@section("schedule-contents")
<main>
    <input type="hidden" name="type" id="type" value="CDT|PBT" />
    <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="hidden" name="type" class="schedule_type" value="CDT" />
                        <span class="badge badge-primary badge-select type" data-value="CDT">CDT 모의고사</span>
                        <span class="badge badge-secondary badge-select type" data-value="PBT">PBT 모의고사</span>
                    </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="hidden" name="type" class="schedule_type" value="CDT" />
                        <span class="badge badge-primary badge-select type" data-value="CDT">CDT 모의고사</span>
                        <span class="badge badge-secondary badge-select type" data-value="PBT">PBT 모의고사</span>
                    </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 }}
                                {{ date('Y-m-d') > $item->date  ? "disabled" : "" }}
                            />
                        </td>
                        <td>
                            <input type="hidden" name="type" class="schedule_type" value="{{ $item->type }}" data-old='{{ $item->type }}' />
                            <span class="badge badge-select type {{ $item->type == "CDT" ? 'badge-primary' : "badge-secondary"  }}" data-value="CDT">CDT 모의고사</span>
                            <span class="badge badge-select type {{ $item->type == "PBT" ? 'badge-primary' : "badge-secondary"  }}"" data-value="PBT">PBT 모의고사</span>
                        </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>
<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(".date").attr("id", "date" + $('.date').length )
            row.show();

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

            onLoadDatePicker();
        })



        $(document).on("click", ".type", function() {
            if ($(this).hasClass("badge-primary")) {
                return false;
            }

            const badges = $(this).closest("td").find(".badge");
            badges.addClass("badge-secondary").removeClass("badge-primary");
            $(this).addClass("badge-primary").removeClass("badge-secondary");
            $(this).closest("td").find(".schedule_type").val($(this).data("value"));

            checkScheduleChange($(this).closest("tr"), ".date, .schedule_type");
        })

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



    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),
                "type" : row.querySelector(".schedule_type").value,
                "detail_id" : row.querySelector(".detail_id") ? row.querySelector(".detail_id").value : 0,
                "is_remove" : row.classList.contains('is_remove'),
            }
        });

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






</script>
@endsection