@push('css')
<style lang="css">
    .calendar-wrapper .display-custom .table .row .cell {
        padding: 10px;
        cursor: pointer;
    }

    .cl-switch>input:checked+span::before {
        background-color: #85b8b7;
    }

    .cl-switch>span::before {
        content: "";
        float: right;
        display: inline-block;
        margin: 5px 0 5px 0;
        border-radius: 7px;
        width: 36px;
        height: 14px;
        background-color: #2B2F36;
        opacity: 0.2;
        vertical-align: top;
    }

    .cl-switch>input:checked+span::after {
        background-color: #08BF5A;
        transform: translateX(16px);
        left: -16px;
    }

    .cl-switch>span::after {
        content: "";
        position: absolute;
        top: 2px;
        right: 0;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background-color: #999999;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }

    .cl-switch>input:checked {
        right: -10px;
        background-color: #85b8b7;
    }

    .cl-switch>input {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        z-index: -1;
        position: absolute;
        right: 6px;
        top: -8px;
        display: block;
        margin: 0;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: rgb(0, 0, 0, 0.38);
        outline: none;
        opacity: 0;
        transform: scale(1);
        pointer-events: none;
    }

    .cl-toggle-switch {
        margin-right: 5px;
        margin-left: -9px;
    }
    .pagination > .active > a {
        color: #5799DB !important;
        background: #FFFFFF !important;
        border: 1px solid #5799DB;
    }
    .custom-placeholder {
        min-width: auto !important;
        height: 80px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 2px dashed #888888;
        opacity: 1;
    }
    #sortable tbody tr:hover td {
        background: #F8F8F8 0 0 no-repeat padding-box;
        opacity: 1;
    }
    #sortable tbody tr {
        /*opacity: 0.6;*/
        height: 80px;
        width: auto !important;
    }
    #sortable thead tr > td {
        background-color: #F5F5F5;
        color: #2B2F36;
    }
    #sortable thead tr > td {
        background-color: #F5F5F5;
    }
    .sortable-being-dragged {
        background-color: #ccc;
    }

    #sortable tbody tr:first-child td {
        border-top: none !important;
    }
    #sortable tbody tr:last-child td {
        border-bottom: 1px solid #ddd;
    }
</style>
@endpush
<div class="calendar-wrapper">
    <h3 class="font-light mb-4 text-[16px]">このページではコースの料金や基本所要時間、コースごとのアクションの設定ができます。</h3>

    <button @click="openModalCreateCourse()" class="flex items-center justify-center w-[150px] h-[42px] bg-[#5799DB] rounded-[4px] mr-[16px] hover:opacity-70">
        <img class="mr-[6px]" src="/images/feather_plus.svg"><span class="text-[14px] leading-[19px] font-light text-[#FFFFFF]">コース作成</span>
    </button>

    <div class="display-custom mt-5 w-4/5">
        <table class="table mb-[9px] bg-white" id="sortable">
            <thead>
                <tr class="h-[40px] text-[#2B2F36] bg-[#F5F5F5]">
                    <td class="cell w-[70px] text-center"></td>
                    <td class="cell w-[150px] p-0 text-left font-semibold">予約ページ表示</td>
                    <td class="cell w-[150px] text-left font-semibold">イメージ</td>
                    <td class="cell text-left font-semibold">コース名</td>
                    <td class="cell min-w-[100px] text-left font-semibold">料金</td>
                    <td class="cell min-w-[150px] text-left font-semibold">基本所要時間</td>
                </tr>
            </thead>
            <tbody>
                <tr v-if="calendarCourseLists.length > 0" v-for="(item, index) in calendarCourseLists" :data-id="item.id"
                    :data-page="currentPosition"
                    :key="item.id">
                    <td class="cell cursor-pointer">
                        <i class="far fa-bars text-[30px] text-[#DDDDDD]"></i>
                    </td>
                    <td class="cell">
                        <div class="flex items-center justify-between h-[30px]">
                            <div class="flex items-center justify-center grid grid-cols-3 gap-1">
                                <span :class="{'text-[12px] leading-normal text-[#333333] mr-[15px] font-light': true, '!text-[#08BF5A]':
                                item.booking_page_display == 1}">ON</span>
                                <div class="cl-toggle-switch flex items-center justify-center !mr-0">
                                    <label class="cl-switch">
                                        <input type="checkbox" value="1" v-model="item.booking_page_display" @change="updateBookingPageDisplayCalendarCourse(item.id,
                                    item.booking_page_display)">
                                        <span class="cursor-pointer"></span>
                                    </label>
                                </div>
                                <span class="text-[12px] leading-normal text-[#333333] ml-0 font-light">OFF</span>
                            </div>
                        </div>
                    </td>
                    <td class="cell w-[100px] rounded-[3px] h-auto text-left">
                        <img class="w-full h-full rounded-[3px]" :src="item.course_image ? '{{ env('URL_SERVER_MEDIA') }}' + item.course_image : '/images/Group3022.png'" width="100%"/>
                    </td>
                    <td class="cell text-left">
                        <a href="javascript:void(0)" @click="redirectPage(item.calendar_id, item.id)" class="text-[#5799DB] underline
                        font-semibold
                        text-[16px]
                        text-left">@{{ item.system_name ? item.system_name : item.course_name.substring(0, 10)
                        }}</a>
                    </td>
                    <td class="cell text-left">
                        <span v-if="parseInt(item.amount) > 0" class="text-[16px] text-[#2B2F36] font-light"><span class="text-[16px] text-[#2B2F36] font-light
                        mr-[3px]">¥</span>@{{ item.amount
                        }}</span>
                        <span v-else class="text-[16px] font-light mr-[3px] text-[#2B2F36]">設定なし</span>
                    </td>
                    <td class="cell text-left">
                        <span class="text-[16px] font-light text-[#2B2F36]">@{{ item.hour_done }}時間@{{ item.minute_done }}分</span>
                    </td>
                </tr>
                <tr v-if="calendarCourseLists.length == 0" class="h-[80px]">
                    <td class="text-[16px] text-[#222222] font-light" colspan="7" class="cell">
                        データが見つかりません
                    </td>
                </tr>
            </tbody>
        </table>
{{--        <div class="flex items-center flex-col justify-center mt-[20px]">--}}
{{--            <div v-if="calendarCourseLists.length > 0" class="text-center mt-0 text-[#222222] text-[14px] font-semibold">--}}
{{--                全@{{ pageCalendarCourse.totalPage }}件中@{{ (pageCalendarCourse.perPage * pageCalendarCourse.currentPage) - pageCalendarCourse.perPage + 1 }}-@{{ (pageCalendarCourse.perPage * (pageCalendarCourse.currentPage - 1)) + calendarCourseLists.length }}件を表示--}}
{{--            </div>--}}
{{--            <nav class="text-center mt-[8px]"--}}
{{--                 :class="{'pagination-devered': true}"--}}
{{--                 v-if="pageCalendarCourse.lastPage > 1">--}}
{{--                <ul class="pagination">--}}
{{--                    <li v-if="pageCalendarCourse.currentPage > 1">--}}
{{--                        <a href="#" aria-label="Previous" @click.prevent="changePageCalendarCourse(pageCalendarCourse.currentPage - 1)" class="font-light"--}}
{{--                           style="font-size:--}}
{{--                        14px;margin-right: 10px">--}}
{{--                            <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-chevron-left" style="color: #DDDDDD !important;"></i></span>--}}
{{--                        </a>--}}
{{--                    </li>--}}
{{--                    <li v-for="page in pagesNumberCalendarCourse" v-bind:class="[ page == isActived ? 'active' : '']">--}}
{{--                        <a href="#" @click.prevent="changePageCalendarCourse(page)" class="font-light !text-[14px] !text-[#888888] border border-solid--}}
{{--                        border-[#DDDDDD] rounded-[4px] mr-[10px]">@{{ page--}}
{{--                            }}</a>--}}
{{--                    </li>--}}
{{--                    <li v-if="pageCalendarCourse.currentPage < pageCalendarCourse.lastPage">--}}
{{--                        <a class="font-light" href="#" aria-label="Next" @click.prevent="changePageCalendarCourse(pageCalendarCourse.currentPage + 1)"--}}
{{--                           style="font-size: 14px;--}}
{{--                        margin-left: 0px">--}}
{{--                            <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-chevron-right" style="color: #DDDDDD !important;"></i></span>--}}
{{--                        </a>--}}
{{--                    </li>--}}
{{--                </ul>--}}
{{--            </nav>--}}
{{--        </div>--}}
    </div>
</div>
@push('js')
    <script>
        $(function () {
            $("#sortable tbody").sortable({
                cursor: 'move',
                // opacity: 0.3,
                placeholder: 'custom-placeholder',
                helper: fixWidthHelper,
                scroll: false,
                start: function(event, ui) {
                    ui.item.css('width', ui.item.width() + 'px');
                },
                stop: function(event, ui) {
                    ui.item.css('width', '');
                },
                axis: "y",
                delay: 150,
                forceHelperSize: true,
                forcePlaceholderSize: true,
                // containment: "parent",
                animation: 300,
                // revert: 150,
                update() {
                    sendOrderToServer()
                }
            }).disableSelection();

            function sendOrderToServer() {
                const order = [];
                $('#sortable tbody tr').each(function (index) {
                    const id = $(this).attr('data-id');
                    const page = $(this).attr('data-page');
                    if (id) {
                        order.push({
                            id: id,
                            position: index + 1,
                            page: page
                        });
                    }
                });

                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "{{ url('/basic/calendar-management/api/course/sortable') }}",
                    data: {
                        order: order,
                        _token: '{{csrf_token()}}'
                    },
                    success: function (response) {
                        if (response.status == "success") {
                            console.log(response);
                        } else {
                            console.log(response);
                        }
                    },
                    // [#40050] endpoint sắp xếp khoá học nay trả 422/400/500 theo đúng ý nghĩa,
                    // các mã này rơi vào nhánh error nên phải hiển thị lại lý do cho người dùng.
                    error: function (xhr) {
                        window.showLessonAjaxError(xhr);
                    }
                });

            }
        });

        function fixWidthHelper(e, ui) {
            ui.children().each(function() {
                $(this).width($(this).width());
            });
            return ui;
        }

        // function freeze_gifs_on_escape(e) {
        //     [].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);
        // }
        //
        // function is_gif_image(i) {
        //     return /^(?!data:).*\.gif/i.test(i.src);
        // }
        //
        // function freeze_gif(i) {
        //     var c = document.createElement('canvas');
        //     var w = c.width = i.width;
        //     var h = c.height = i.height;
        //     c.getContext('2d').drawImage(i, 0, 0, w, h);
        //     try {
        //         i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
        //     } catch (e) { // cross-domain -- mimic original with all its tag attributes
        //         for (var j = 0, a; a = i.attributes[j]; j++)
        //             c.setAttribute(a.name, a.value);
        //         i.parentNode.replaceChild(c, i);
        //     }
        // }
    </script>
@endpush