@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.box_action_change td {
        background: #F8F8F8 0 0 no-repeat padding-box;
        opacity: 1;
    }

    #sortable tbody tr:hover .box_action {
        width: 30px;
        height: 30px;
        border: 1px solid #C7C7C7;
        border-radius: 7px;
    }

    #sortable tbody tr:hover .box_action i {
        color: #888888;
    }

    #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;
    }

    .box_action_all {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background: #C7C7C7;
        border-radius: 7px;
    }

    .box_action_all i {
        color: #FFFFFF !important;
    }

    .box_action {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }

    .box_action i {
        color: #E0E0E0;
    }

    .box_action:hover {
        width: 30px;
        height: 30px;
        background: #C7C7C7;
        border-radius: 7px;
    }
    .box_action-option i{
        color: #222222 !important;
    }
    .box_action:hover .fa-ellipsis-h-alt {
        color: #FFFFFF !important; ;
    }
    .box_action-option{
        display: none;
    }
    .box_action:hover .box_action-option{
        display: block;
    }
    #sortable{
        border-collapse: collapse;
    }
    .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 relative">
    <div v-if="!booking_setting_display.use_course_db" class="overlay absolute bg-[#0000004D] top-0 right-0 w-[102%] h-[71vh] z-50 mt-[-12px] ml-[-19px] flex
    pt-[300px] justify-center">
        <div class="w-[500px] h-[150px] bg-[#FFFFFF] rounded-[5px] p-[20px] text-center">
            <h3 class="text-[#222222] text-[20px] !font-semibold mb-[15px]">「コース選択を利用しない」が設定されています。</h3>
            <div>
            <span class="block text-[#222222] text-[16px] font-light mb-[5px]">コースを編集する場合、<a class="text-[#5799DB] text-[16px] font-light"
                                                                                                       href=""
                                                                                                       @click.prevent="redirectTab('#setting-display', 'setting_classic')">コースの表示設定</a>から</span>
                <span class="block text-[#222222] text-[16px] font-light">「コース選択を利用する」に変更してください</span>
            </div>
        </div>
    </div>
    <div class="flex">
        <div class="w-[250px]">
            <h3 class="!font-semibold mb-[25px] text-[20px] text-[#222222]">コース作成・編集</h3>
            <div class="flex items-center gap-3 mb-[25px]">
                <div class="bg-[#F8F8F8] rounded-[3px] w-[144px] h-[30px] text-[#222222] text-[16px] !font-semibold text-center leading-[28px]">
                    @{{ courseMenu.showMenu == 1 ? 'メニューあり' : 'メニューなし' }}
                </div>
                <div @click="showDisplayCourseMenuModal = true"
                     class="flex items-center justify-center hover:opacity-70 cursor-pointer border border-solid border-[#DDDDDD] w-[30px] h-[30px] rounded-[3px]">
                    <i class="fas fa-cog text-[20px] text-[#888888]"></i>
                </div>
            </div>
        </div>
        <div class="w-[calc(100%-250px)] pl-[25px] mt-[5px]" v-if="courseMenu.showMenu == 1 && categoryLists.length > 0">
            <div class="w-[500px] h-[auto] rounded-[5px] bg-white border border-solid border-[#DDDDDD] flex justify-between items-center pr-[15px]">
                <div class="flex px-[6px] py-[5px] gap-3 items-center ">
                    <div class="rounded-[5px]  h-[50px]" style="overflow: auto">
                        <img class="w-full h-full overflow-hidden"
                             :src="categoryDetail.category_image ? '{{ env('URL_SERVER_MEDIA') }}' + categoryDetail.category_image : '/images/no-image-new-7.png'"
                             alt=""/>
                    </div>
                    <div class="w-[350px] h-[auto]  mt-[5px]">
                        <span class="text-[14px] text-[#222222] !font-semibold">@{{ categoryDetail.category_name }}</span>
                    </div>
                </div>
                <div>
                    <button @click="showCreateCourseMenuModal = true;isEditCourseMenu = true;isDelImgCourseMenu=0;detailCourseMenu(categoryDetail.category_id);"
                            class="bg-[#F8F8F8] w-[60px] h-[40px] leading-[38px] rounded-[4px] text-[14px] text-[#222222] !font-semibold">編集</button>
                </div>
            </div>
        </div>
    </div>
    <div class="flex">
        <div class="w-[250px]" v-if="courseMenu.showMenu == 1">
            <div class="flex gap-4 items-center">
                <button @click="showCreateCourseMenuModal = true;formCreateCourseMenu.course_menu_image = null;formCreateCourseMenu.course_menu_name = '';
                        buttonUpload.isShowBtnUpload = true;
                        buttonUpload.isShowBtnEdit = false;
                        buttonUpload.isShowBtnDelete = false;"
                        class="flex items-center justify-center w-[150px] h-[42px] bg-[#5799DB] rounded-[4px] hover:opacity-70">
                    <img class="mr-[6px]" src="/images/feather_plus.svg"><span class="text-[14px] leading-[19px] font-light text-[#FFFFFF]">メニュー作成</span>
                </button>
                <button @click="showSortCalendarCourseMenuModal = true" class="font-light text-[14px] text-[#222222] bg-[#FFFFFF] rounded-[4px] w-[83px]
                h-[40px] border border-solid border-[#DDDDDD]
                leading-[38px]">並べ替え</button>
            </div>
            <div v-for="(item, index) in categoryLists" :key="index" @click="chooseCategory(item.category_id)"
                 class="w-[250px] p-[10px] h-[auto] rounded-[5px] bg-white border border-solid border-[#DDDDDD] flex gap-3 cursor-pointer mt-[20px]"
                 :class="{'!border-2 !border-solid !border-[#08BF5A]': categoryActive == item.category_id}"
            >
                <div class="rounded-[10px] w-[98px] h-[auto] w-1/3" style="overflow: auto">
                    <img class="w-full h-full overflow-hidden" :src="item.category_image ? '{{ env('URL_SERVER_MEDIA') }}' +  item.category_image : '/images/no-image-new-7.png'" alt=""/>
                </div>
                <div class="w-2/3 overflow-hidden">
                    <span class="text-[14px] text-[#222222] !font-semibold"
                        :class="categoryActive == item.category_id ? '!text-[#08BF5A]' : ''"
                    >@{{ shortContent(item.category_name) }}</span>
                </div>
            </div>
        </div>
        <div :class="courseMenu.showMenu == 1 ? 'w-[calc(100%-250px)] pl-[25px]' : 'w-[80%]'">
            <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-full">
                <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-[200px] 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 w-[30px] text-right font-semibold"></td>
                    </tr>
                    </thead>

                        <tbody>
                        <tr v-if="calendarCourseLists.length > 0 && courseMenu.showMenu == 1 && item.id"
                            :data-page="currentPosition"
                             v-for="(item, index) in calendarCourseLists"
{{--                            :key="item.id"--}}
                            :data-id="item.id"
                           >
                            <td class="cell cursor-pointer">
{{--                                @{{ item.id }}-@{{ item.order}}-@{{ item.course_order}}--}}
                                <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]':
                                    courseBookingPageDisplay[index]}">ON</span>
                                        <div class="cl-toggle-switch flex items-center justify-center !mr-0">
                                            <label class="cl-switch">
                                                <input type="checkbox" v-model="courseBookingPageDisplay[index]" @click="updateBookingPageDisplayCalendarCourse(item
                                                .id, courseBookingPageDisplay[index])">
                                                <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-[100px] 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_salon_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-[14px] text-[#222222] font-light"><span class="text-[16px] text-[##222222] font-light
                            mr-[3px]">¥</span>@{{ item.amount}}-</span>
                                <span v-else class="text-[14px] font-light mr-[3px] text-[#222222]">設定なし</span>
                            </td>
                            <td class="cell text-right cursor-pointer">
                                <div class="relative w-[30px] h-[30px] mr-[30px]">
                                    <div class="box_action"
                                         :class="{'box_action_all': showBoxActionCourse[index]}"
    {{--                                     @click.stop="toggleBoxAction(index)--}}
                                         >
                                        <i class="fa fa-ellipsis-h-alt text-[#E0E0E0] w-[24px]"></i>
                                        <div
                                                {{--                                        v-show="showBoxActionCourse[index]" --}}
                                                class="box_action-option absolute top-[30px] z-40 w-[90px] h-[90px]
                                    rounded-[5px]
                                    bg-white
                                    shadow-[0_3px_3px_#00000029] text-left right-0
                                    "
                                                {{--                                     :class="courseMenu.showMenu == 1 ? 'right-0' : 'left-0'"--}}
                                        >
                                            <div class="cursor-pointer w-full p-[8px] hover:bg-[#F8F8F8]" @click="copyItemCourse(item, index)">
                                                <i class="fal fa-copy text-[20px] !text-[#222222]"></i><span class="ml-[5px] text-[#222222] text-[14px] font-light">コピー</span>
                                            </div>
                                            <div class="cursor-pointer w-full p-[8px] hover:bg-[#F8F8F8]" @click="handleDeleteCourse(item, index)">
                                                <i class="fal fa-trash-alt text-[20px] !text-[#222222]"></i><span class="ml-[5px] text-[#222222] text-[14px] font-light">削除</span>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </td>
                        </tr>
                        <tr v-if="calendarCourseLists.length > 0 && courseMenu.showMenu != 1 && item.id"
                            :data-page="currentPosition"
                            v-for="(item, index) in calendarCourseLists"
                            {{--                            :key="item.id"--}}
                            :data-id="item.id"
                            >
                            <td class="cell cursor-pointer">
                                {{--                                @{{ item.id }}-@{{ item.order}}-@{{ item.course_order}}--}}
                                <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]':
                                    courseBookingPageDisplay[index]}">ON</span>
                                        <div class="cl-toggle-switch flex items-center justify-center !mr-0">
                                            <label class="cl-switch">
                                                <input type="checkbox" v-model="courseBookingPageDisplay[index]" @click="updateBookingPageDisplayCalendarCourse(item
                                                .id, courseBookingPageDisplay[index])">
                                                <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-[100px] 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_salon_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-[14px] text-[#222222] font-light"><span class="text-[16px] text-[##222222] font-light
                            mr-[3px]">¥</span>@{{ item.amount}}-</span>
                                <span v-else class="text-[14px] font-light mr-[3px] text-[#222222]">設定なし</span>
                            </td>
                            <td class="cell text-right cursor-pointer">
                                <div class="relative w-[30px] h-[30px] mr-[30px]">
                                    <div class="box_action"
                                         :class="{'box_action_all': showBoxActionCourse[index]}"
                                            {{--                                     @click.stop="toggleBoxAction(index)--}}
                                    >
                                        <i class="fa fa-ellipsis-h-alt text-[#E0E0E0] w-[24px]"></i>
                                        <div
                                                {{--                                        v-show="showBoxActionCourse[index]" --}}
                                                class="box_action-option absolute top-[30px] z-40 w-[90px] h-[90px]
                                    rounded-[5px]
                                    bg-white
                                    shadow-[0_3px_3px_#00000029] text-left right-0
                                    "
                                                {{--                                     :class="courseMenu.showMenu == 1 ? 'right-0' : 'left-0'"--}}
                                        >
                                            <div class="cursor-pointer w-full p-[8px] hover:bg-[#F8F8F8]" @click="copyItemCourse(item, index)">
                                                <i class="fal fa-copy text-[20px] !text-[#222222]"></i><span class="ml-[5px] text-[#222222] text-[14px] font-light">コピー</span>
                                            </div>
                                            <div class="cursor-pointer w-full p-[8px] hover:bg-[#F8F8F8]" @click="handleDeleteCourse(item, index)">
                                                <i class="fal fa-trash-alt text-[20px] !text-[#222222]"></i><span class="ml-[5px] text-[#222222] text-[14px] font-light">削除</span>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </td>
                        </tr>

                        </tbody>

                </table>
                <div v-if="calendarCourseLists.length == 0" class="text-center h-[70px] text-[16px] text-[#222222] font-light pt-[20px]" style="    border-bottom: 1px solid #ddd;">
                    データがありません。
                </div>
            </div>
        </div>
    </div>
</div>
@push('js')
    <script>
        $(function () {
            setTimeout(function () {
                $("#sortable tbody").sortable({
                    cursor: 'move',
                    // opacity: 0.3,
                    placeholder: 'custom-placeholder',
                    helper: fixWidthHelper,
                    scroll: false,
                    start: function (event, ui) {
                        console.log('start',event);
                        ui.item.css('width', ui.item.width() + 'px');
                    },
                    stop: function (event, ui) {
                        console.log('stop',event);
                        ui.item.css('width', '');
                    },
                    axis: "y",
                    delay: 150,
                    forceHelperSize: true,
                    forcePlaceholderSize: true,
                    // containment: "parent",
                    animation: 300,
                    // revert: 150,
                    update() {
                        sendOrderToServer()
                    }
                }).disableSelection();
            },200);
            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-salon/api/course/sortable') }}",
                    data: {
                        order: order,
                        calendarId: calendarId,
                        _token: '{{csrf_token()}}'
                    },
                    success: function (response) {
                        if (response.success) {
                            console.log('success',response);
                            appCalendarSalon.calendarCourseLists = [{
                                calendar_salon_id:'',
                                id:'',
                                order:'',
                                amount:'',
                                course_image:null,
                                course_menu_id:null,
                                course_name:'',
                                system_name:'',
                            }];
                            appCalendarSalon.initDataCourse();
                            // $("#sortable").sortable("refresh");
                        } else {
                            console.log(response);
                            // $("#sortable").sortable("refresh");

                        }
                    },
                    // [#39566] Endpoint này nay trả 422 (thiếu order/calendarId) / 400 (lỗi nghiệp vụ)
                    // / 500 thay vì 200-500 như trước, tức lỗi rơi vào nhánh error. Thiếu nhánh này
                    // thì thao tác kéo-thả thất bại HOÀN TOÀN IM LẶNG: người dùng thấy thứ tự mới
                    // trên màn hình nhưng máy chủ chưa lưu. Nạp lại danh sách để màn hình khớp DB.
                    error: function (error) {
                        window.showSalonAjaxError(error);
                        appCalendarSalon.initDataCourse();
                    }
                });

            }
        });

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

    </script>
@endpush