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

@section("schedule-contents")
<main>
    <input type="hidden" name="type" id="type" value="SPECIAL" />

    <div class="alert alert-warning">
        * 특강게시판에 등록된 일정은 삭제가 불가합니다
    </div>
    <div class="form-group">
        <table class="table table-striped table-hover mt-3" id="schedule_list">
            <colgroup>
                <col width="30%">
                <col width="50%">
                <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>
                        <div class="row">
                            <div class="col-5">
                                <input type="time" value="" name="start_time[]" class="form-control form-control-sm start_time" disabled  autocomplete="false"/>
                            </div>
                            <label class="col-1">~</label>
                            <div class="col-5">
                                <input type="time" value="" name="end_time[]" class="form-control form-control-sm end_time" disabled  autocomplete="false"/>
                            </div>
                        </div>
                    </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="" name="date[]" class="form-control form-control-sm date" disabled  autocomplete="false"/>
                    </td>
                    <td>
                        <div class="row">
                            <div class="col-5">
                                <input type="time" value="" name="start_time[]" class="form-control form-control-sm start_time" disabled  autocomplete="false"/>
                            </div>
                            <label class="col-1">~</label>
                            <div class="col-5">
                                <input type="time" value="" name="end_time[]" class="form-control form-control-sm end_time" disabled autocomplete="false" />
                            </div>
                        </div>
                    </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" />
                        </td>
                        <td>
                            <div class="row">
                                <div class="col-5">
                                    <input type="time" value="{{ $item->start_time }}" name="start_time[]" id="start_time_{{ $item->id }}" class="form-control form-control-sm start_time" data-old={{ $item->start_time }} autocomplete="false" />
                                </div>
                                <label class="col-1">~</label>
                                <div class="col-5">
                                    <input type="time" value="{{ $item->end_time }}" name="end_time[]" id="end_time_{{ $item->id }}" class="form-control form-control-sm end_time" data-old={{ $item->end_time }} autocomplete="false" />
                                </div>
                            </div>
                        </td>
                        <td>
                            @if (! $item->specialLecture)
                            <button class="btn btn-sm btn-danger onRemove" type="button" data-course-id="{{ $item->id }}">삭제</button>
                            @endif
                        </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.find(".start_time").attr("id", "start_time" + $('.date').length )
            row.find(".end_time").attr("id", "end_time" + $('.date').length )
            row.show();

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

            onLoadDatePicker();
            onLoadTimePicker();
        })

        $(document).on("change.td", '.date, .start_time, .end_time', function() {
            const row = $(this).closest("tr");
            checkScheduleChange(row, ".date, .start_time, .end_time");
        })

    })

    function checkValidation() {
        resetValidationsForm();
        const rows = $('#schedule_list tbody tr:not(.is_disable)');

        const allDates = $.map(rows, function(row) {
            return {
                "date" : new Date(row.querySelector(".date").value),
                "start_time" : row.querySelector(".start_time").value,
                "end_time" : row.querySelector(".end_time").value,
                "detail_id" : row.querySelector(".detail_id") ? row.querySelector(".detail_id").value : 0,
                "is_remove" : row.classList.contains('is_remove'),
                "type" :"SPECIAL"
            }
        });

        onSubmitScheduleDetail("special", allDates);


    }





</script>
@endsection