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

    #sortable_staff tbody tr.box_action_change td {
        background: #F8F8F8 0 0 no-repeat padding-box;
        opacity: 1;
    }

    #sortable_staff tbody tr:hover .box_action i {
        color: #888888;
    }
    #sortable_staff tbody tr:hover .box_action  {
        border: 1px solid #C7C7C7;
        border-radius: 7px;
    }

    #sortable_staff tbody tr {
        /*opacity: 0.6;*/
        height: 80px;
        width: auto !important;
    }
    #sortable_staff thead tr > td {
        background-color: #F5F5F5;
        color: #2B2F36;
    }
    #sortable_staff thead tr > td {
        background-color: #F5F5F5;
    }
    .sortable-being-dragged {
        background-color: #ccc;
    }

    #sortable_staff tbody tr:first-child td {
        border-top: none !important;
    }
    #sortable_staff 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:hover i {*/
    /*    color: #FFFFFF !important;*/
    /*}*/
    .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_staff{
        border-collapse: collapse !important;
    }
    .custom-placeholder {
        min-width: auto !important;
        height: 80px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 2px dashed #888888;
        opacity: 1;
    }
    #sortable_staff tbody tr:hover td {
        background: #F8F8F8 0 0 no-repeat padding-box;
        opacity: 1;
    }
    #sortable_staff tbody tr {
        /*opacity: 0.6;*/
        height: 80px;
        width: auto !important;
    }
    #sortable_staff thead tr > td {
        background-color: #F5F5F5;
        color: #2B2F36;
    }
    #sortable_staff thead tr > td {
        background-color: #F5F5F5;
    }
    .sortable-being-dragged {
        background-color: #ccc;
    }

    #sortable_staff tbody tr:first-child td {
        border-top: none !important;
    }
    #sortable_staff tbody tr:last-child td {
        border-bottom: 1px solid #ddd;
    }
</style>
@endpush
<div class="calendar-wrapper relative">
    <div v-if="booking_setting_display.show_modal_display_staff" class="overlay absolute bg-[#0000004D] top-0 right-0 w-[102%] min-h-[71vh] h-[100%] z-50 mt-[-12px] ml-[-19px] flex
        pt-[300px] justify-center">
        <div class="w-[600px] 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-staff-content', 'setting-staff')">スタッフの表示設定</a>から</span>
                <span class="block text-[#222222] text-[16px] font-light">「スタッフ選択を利用する」に変更してください</span>
            </div>
        </div>
    </div>
    <h3 class="!font-semibold text-[#222222] text-[18px] mb-[15px]">スタッフ作成・編集</h3>
    <div class="mb-4 text-[#222222] text-[16px] font-light">このページではスタッフの指名料、スタッフごとのアクションの設定ができます。</div>
    <button @click="openModalCreateStaff" 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_staff">
            <thead>
            <tr class="h-[40px] text-[#222222] bg-[#F5F5F5]">
                <td class="cell w-[70px] !text-[#222222] text-center"></td>
                <td class="cell w-[150px] !text-[#222222] p-0 text-left font-semibold">予約ページ表示</td>
                <td class="cell w-[200px] !text-[#222222] text-center font-semibold">イメージ</td>
                <td class="cell text-left  !text-[#222222] font-semibold">スタッフ名</td>
                <td class="cell min-w-[100px] !text-[#222222] text-left font-semibold">料金</td>
                <td class="cell w-[30px] !text-[#222222] text-right font-semibold"></td>
            </tr>
            </thead>
            <tbody>

            <tr v-if="calendarStaffLists.length > 0 && item.id" v-for="(item, index) in calendarStaffLists"
                :data-key="item.order"
                :data-id="item.id"
                :data-page="currentPosition">
                <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" @click="updateBookingPageDisplayStaff(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 ">
                    <img class="w-[50px] h-[50px] rounded-[50%]" style="margin: auto" :src="item.staff_image ? '{{ env('URL_SERVER_MEDIA') }}' + item.staff_image : '/images/avatar_default_line_user.png'" width="100%"/>
                </td>
                <td class="cell text-left">
                    <a href="javascript:void(0)" @click="redirectPageStaff(item.calendar_salon_id, item.id)" class="text-[#5799DB] underline
                        font-semibold
                        text-[16px]
                        text-left">@{{ item.staff_system_name ? item.staff_system_name : item.staff_name.substring(0, 10)
                        }}</a>
                </td>
                <td class="cell text-left">
                        <span v-if="item.staff_bill && parseInt(item.staff_bill) > 0" class="text-[14px] text-[#222222] font-light"><span class="text-[16px] text-[#222222]
                        font-light
                        mr-[3px]">¥</span>@{{ item.staff_bill}}-</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': showBoxActionStaff[index]}"
{{--                             @click.stop="toggleBoxActionStaff(index)"--}}
                        >
                            <i class="fa fa-ellipsis-h-alt text-[#E0E0E0] w-[24px]"></i>
                            <div
{{--                                    v-show="showBoxActionStaff[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
                                ">
                                <div class="cursor-pointer w-full p-[8px] hover:bg-[#F8F8F8]" @click="copyItemStaff(item, index)">
                                    <i class="fal fa-copy text-[20px]"></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="handleDeleteStaff(item, index)">
                                    <i class="fal fa-trash-alt text-[20px]"></i><span class="ml-[5px] text-[#222222] text-[14px] font-light">削除</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </td>
            </tr>
{{--            <tr v-if="calendarStaffLists.length == 0" class="h-[80px]">--}}
{{--                <td class="text-[16px] text-[#222222] font-light" colspan="6" class="cell">--}}
{{--                    データが見つかりません--}}
{{--                </td>--}}
{{--            </tr>--}}
            </tbody>
        </table>
        <div v-if="calendarStaffLists.length == 0" class="text-center h-[70px] text-[16px] text-[#222222] font-light pt-[20px]" style="    border-bottom: 1px solid #ddd;">
            データが見つかりません。
        </div>
    </div>
</div>
@push('js')
    <script>
        $(function () {
            $("#sortable_staff tbody").sortable({
                cursor: 'move',
                // opacity: 0.3,
                placeholder: 'custom-placeholder',
                helper: fixWidthHelperStaff,
                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() {
                    sendOrderToServerStaff()
                }
            }).disableSelection();

            function sendOrderToServerStaff() {
                const order = [];
                $('#sortable_staff 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/staff/sortable') }}",
                    data: {
                        order: order,
                        _token: '{{csrf_token()}}'
                    },
                    success: function (response) {
                        if (response.success ) {
                            console.log(response);
                            appCalendarSalon.calendarStaffLists = [{
                                calendar_salon_id:'',
                                id:'',
                                order:'',
                                staff_bill:'',
                                staff_image:null,
                                staff_name:'',
                                staff_system_name:'',
                            }];
                            appCalendarSalon.getListsStaff();
                        } else {
                            console.log(response);
                        }
                    },
                    // [#39566] Endpoint này nay trả 422 (thiếu order) / 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.getListsStaff();
                    }
                });

            }
        });

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

    </script>
@endpush