@extends('layout.basic.main')
@section('title','リッチメニュー画像作成（一覧）')

@push('css')
    <link rel="stylesheet" href="/css/menu_rich/new.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">

    <style>
        *{
            font-weight: bold;!important;
        }
        td {
            text-align: left;
        }

        .font-bold {
            font-weight: bold;
        }

        /*thead tr th {*/
        /*    color: white !important;*/
        /*}*/
        thead tr th{
            padding: 10px !important;
            font-weight: bold;
            background-color: #08BF5A !important;
            border: none!important;
        }
        table>tbody>tr>td{
            border-top: none !important;
            border-bottom: 1px solid #ddd;
            font-weight: bold;!important;
        }
        .btn, a{
            font-weight: bold;
        }


        .btn-add-richmenu:hover{
            outline: unset !important;
            opacity: 0.7;
        }
        .btn-add-richmenu:focus{
            outline: unset !important;
            opacity: 0.7;
        }
        .title_area{
            background-color: #F6F6F6;
            padding: 10px;
            width: 130px;
            margin-left: 30px;
            border-radius: 4px;
            text-align: center;
            font-size: 16px;
            display: flex;
            align-items: center;
        }
        .txt-number{
            border: 1px solid;
            border-radius: 50%;
            font-size: 9px;
            padding: 0px 3px 0px 4px;
            margin-left: 4px;
        }
    </style>
    <style>
        .sort-div-ic i:hover {
            background-color: #7D9195 !important;
            color: #FFFFFF;
            padding: 6px;
            border-radius: 4px;
        }

        #myModal{
            color: #51595C
        }
        .lb-1{
            background: #7D9195;
            color: white;
            font-size: 13px;
            padding: 5px 19px;
            border-radius: 4px;
            font-weight: bold;
        }
        .lb-many{
            color: #7D9195;
            border: 2px solid #7D9195;
            font-size: 13px;
            padding: 4px 9px;
            border-radius: 4px;
            font-weight: bold;
        }
        .btn-group:hover .action-broadcast{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block !important;
        }
        .focus-pointer-item {
            cursor: pointer;
            padding: 5px;
            font-weight: bold;
            color: #51595C ;
        }


        .focus-pointer-item:hover{
            background-color: #5799DB  !important; ;
        }
        .focus-pointer-item:hover a{
            background-color: #5799DB  !important; ;
            color: #FFFFFF !important;
        }
        .focus-pointer-item {
            cursor: pointer;
            padding: 5px 12px;
        }

        table>tbody>tr>td{
            border-bottom: 1px solid #F2F2F2;
        }
        .btn{
            font-weight: bold;
        }
        #nano-inner-group {
            background-color: #fff
        }

        /*#nano-inner-group .tag_group {*/
        /*    padding: 9px;*/
        /*    border-bottom: solid 1px #dedddd;*/
        /*    margin-left: 2px;*/
        /*}*/

        .tag_separate {
            display: flex;
            display: -webkit-flex;
            margin-top: 20px
        }

        .tag_left {
            width: 20%;
            margin-right: 2%
        }

        .tag_right {
            width: 78%
        }

        .tag_left .btn {
            /*width: 50%;*/
            text-align: center
        }

        .tag_left ul {
            background: #FFF;
            margin-top: 20px;
            font-size: 90%
        }

        .tag_left ul li {
            /*border-bottom: 1px solid #666;*/
            padding: 10px
        }

        .tag_left ul li:last-child {
            border-bottom: 0
        }

        .tag_right .btngroup {
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
            margin-bottom: 20px
        }

        .tag_right .btngroup .btn {
            width: 150px;
            margin: 0 20px 0 0;
            padding: 0
        }

        .tag_right .btngroup .tag_right_search {
            display: flex;
            display: -webkit-flex;
            margin-left: auto
        }

        .tab_folder{
            padding: 8px 4px;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }
        .btn-group:hover .action-broadcast{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block !important;
        }
        .displayAdd{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block;
        }
        .tag_group.active{
            background-color: #f6f6f6 !important;
        }
        .list-i-fol{
            padding: unset;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .fade {
            transform: unset !important;
            animation: unset !important;
        }
        .fade.in {
            transform: unset !important;
            animation: unset !important;
        }
        .modal-content {
            -webkit-animation-name: unset !important;
            -webkit-animation-duration: 0.6s;
            animation-name: unset !important; ;
            animation-duration: unset !important;
        }
        .modal.fade .modal-dialog {
            -webkit-transition: unset !important;
            transition: unset !important;
            -webkit-transform:unset !important;
            -ms-transform: unset !important;
            -o-transform: unset !important;
            transform: unset !important;
        }
        .modal-header{
            border-bottom: unset !important;
        }
        #remove_templates:hover{
            /*background-color: #ff0200 !important;*/
        }

        .popup {
            position: relative;
            display: inline-block;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* The actual popup */
        .popup .popuptext {
            visibility: hidden;
            width: 233px;
            background-color: white;
            color: black;
            border-radius: 6px;
            border: 1px solid #ddd;
            padding: 10px;
            position: absolute;
            z-index: 9999;
            font-size: 14px;
            top: 125%;
            right: -159%;
            margin-left: -80px;
            box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
        }
        .popup .show {
            visibility: visible;
        }
        .btn-cus-a{
            padding: 9px 27px;
            border: 0;
            border-radius: 4px;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        .btn-cus-a:hover{
            color: #FFFFFF;
            opacity: 0.7;
        }
        .col-btn-primary{
            background-color: rgb(87, 153, 219);;
        }
        .box-btn-center{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .btn-right-top{
            display: flex;
            align-items: center;
        }
        /*tbody>tr:first-child>td{*/
        /*    border-top: none !important;*/
        /*}*/
        #nano-inner-group {
            background-color: #fff
        }
        #nano-inner-group .tag_group {
            padding: 9px;
            border: 1px solid #F2F2F2;
            border-radius: 4px;
            margin-bottom: 7px;
            margin-left: 2px;
        }
        #nano-inner-group .tag_group:hover {
            background-color: #f6f6f6;
        }

        .ic-menu {
            font-size: 23px;
            cursor: pointer;
            padding: unset;
        }
        .list-i-fol .focus-pointer {
            cursor: pointer;
            padding: 5px;
            font-size: 13px;
            color: #51595C;
        }

        .list-i-fol .focus-pointer:hover{
            background-color: #f6f6f6  !important; ;
        }
        .b-select{
            position: relative;
        }
        .b-select i{
            position: absolute;
            right: 9px;
            top: 7px;
            font-size: 22px;
        }
        .title-left{
            background: #7d9195;
            padding: 6px;
            color: white;
            border-radius: 4px;
            /*margin-left: 10px;*/
            text-align: center;
        }
        .btn-choise-folder{
            background: #08BF5A;
            border-color: #08BF5A;
            width: 140px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 50px;
            margin-bottom: 25px;
            margin-top: 10px;
        }

        .box-ic-sort i {
            line-height: 2px;
            color: rgba(137,143,144,1);
            font-size: 24px;
            padding: 9px 3px;
        }
        .box-ic-sort i:hover{
            background-color: #96ADB2;
            color: #FFFFFF !important;
            padding: 9px 3px;
            border-radius: 4px;
        }
        .mt-item-fol{
            margin-top: 10px;
        }

        .ic-sort{
            width: 31px;
            padding: 8px 4px 5px 7px;
            border-radius: 4px;
        }
        .ic-add{
            font-size: 21px;
            width: 33px;
            padding: 6px 0px 4px 6px;
            border-radius: 4px;
        }
        .ic-sort:hover, .ic-add:hover, .fa-copy:hover, .fa-eye:hover{
            background-color: #96ADB2;
            color: #FFFFFF !important;
        }
        .btn-choise-folder:hover, .btn-choise-folder:focus, .btn-choise-folder:active{
            background-color:#08BF5A;
            border-color:#08BF5A;
            outline: none;
        }
        .btn:active, .btn:focus{
            outline: none;
        }
        /*.btn-cus-a:active,  .btn-cus-a:active:focus{*/
        /*    box-shadow: 1px -3px 3px rgb(128 128 128 / 73%) !important;*/
        /*    outline: none;*/
        /*}*/

        .btn:focus, .btn-cus-a:focus{
            outline: none;
        }
        td, span, div{
            /*color: #51595C;*/
            font-weight: bold;
        }

        #btn_sort_event:active, #btn_sort_event:active:focus{
            /*box-shadow: none !important;*/
        }

        .btn-move-folder{
            margin-left: 15px;
            margin-right: 15px;
        }

        .btn-sns-line:disabled{
            background-color: rgb(176, 194, 198);
            color: white;
            cursor: no-drop;
            padding-left: 10px;
            padding-right: 10px;
            opacity: 1;
        }
        #modalPreviewCode .input-preview{
            height: 38px;
            width: 90%;
            margin-right: 20px;
        }
        #modalPreviewCode .inp-copy{
            display: flex;
            margin-top: 8px;
            margin-bottom: 6px;
        }
        #list-action p {
            /*background-color: #F2F2F2;*/
            /*padding: 10px;*/
            /*margin-bottom: 8px;*/
            /*border-radius: 5px;*/
        }
        .p-txt-note{
            font-size: 13px;
        }
        .note-add-friend {
            font-weight: bold;
            border-radius: 5px;
            position: absolute;
            padding: 10px 15px;
            box-shadow: rgb(0 0 0 / 0.16) 0 3px 6px;
            display: none;
            background-color: #F6F6F6;
            font-size: 13px;
        }
        .triangle-new {
            display: inline-block;
            position: relative;
        }

        .triangle-new:before {
            left: -254px;
        }

        /*.triangle-new:before {*/
        /*    display: block;*/
        /*    position: absolute;*/
        /*    top: 9px;*/
        /*    width: 20px;*/
        /*    height: 13px;*/
        /*    font-size: 10px;*/
        /*    content: "";*/
        /*    border-left: 12px solid transparent;*/
        /*    border-right: 12px solid transparent;*/
        /*    border-top: 15px solid #FFFFFF;*/
        /*}*/
        #note_new {
            top: 1px;
            left: 21%;
            min-width: 502px;

        }
        .slt-top{
            min-width: 133px;
            text-align: left;
            margin-left: 20px;
            margin-right: 15px;
            height: 36px;
            padding-right: 30px;
        }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: -21px;
            left: -36px;
            right: 0;
            bottom: 0;
            -webkit-transition: .4s;
            transition: .4s;
            background-color: #08BF5A;
            font-weight: 600;
            width: 77px;
            height: 30px;
            border-radius: 40px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 24px;
            width: 26px;
            top: 5px;
            left: 50px;
            bottom: 5px;
            font-size: 12px !important;
            background-color: #fff;
            font-weight: 600;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 50%;
            padding: 2px;
            margin: -2px;
        }

        input:checked + .slider {
            content: "OFF";
            background-color: #CDD6DD;
            color: white;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(-45px);
            -ms-transform: translateX(-45px);
            transform: translateX(-45px);
            background-color: #fff;
            color: white;
        }

        .slider:after {
            position: absolute;
            top: 7px;
            left: 14px;
            bottom: 5px;
            font-size: 12px !important;
            color: #fff;
            content: 'ON';
        }

        input:checked + .slider:after {
            color: #fff;
            left: 40px;
            content: 'OFF';
        }
        .txt-title{
            text-decoration: underline !important;
            width: 150px;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            display: block;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        h2{
            font-weight: bold;
        }
        .box_images{
            display:grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* chia làm 4 cột */
            grid-column-gap: 20px; /* khoảng cách giữa các cột */
            grid-row-gap: 20px; /* khoảng cách giữa các hàng cột */
        }
        /* size màn hình dưới 700px sẽ về 2 cột */
        @media (max-width: 700px) {
            .box{grid-template-columns: 1fr 1fr;} /* thành 2 cột */
        }
        /* size màn hình dưới 300px sẽ về 1 cột */
        @media (max-width: 300px) {
            .box{grid-template-columns: 1fr;} /* thành 1 cột */
        }

        .box_images .itemImg{
            position: relative;
            background: #F4FBF2 0% 0% no-repeat padding-box;
            border: 1px solid #DDDDDD;
            border-radius: 3px 3px 0px 0px;
            opacity: 1;
            padding:10px;
            height:  calc(100% - 37px);
            min-height: 50px;
            /*max-height: 110px;*/
        }
        .box_images .bt_img{
            border: 1px solid #DDDDDD;
            border-top: none;
            border-radius: 0px 0px 3px 3px;
            display: flex;
            justify-content: space-between;
            padding: 5px 10px;
        }
        .lb_checkbox{
            position: absolute;
            top: 13px;
            right: 14px;
            border: 1px solid #707070;
            border-radius: 3px;
        }
        .box_images input[type=checkbox] {
            display:none;
        }

        .box_images input[type=checkbox] + label
        {
            background: #FFFFFF;
            height: 21px;
            width: 21px;
            display:inline-block;
            padding: 0 0 0 0px;
            cursor: pointer;
        }
        .box_images input[type=checkbox]:checked + label
        {
            background: #08BF5A;
            height: 21px;
            width: 21px;
            display:inline-block;
            padding: 0 0 0 0px;
            cursor: pointer;
        }
        .active_item{
            background-color: #08BF5A;
        }
        .active_item span ,.active_item i, .active_item .txt_name{
            color: #ffffff !important;
            text-decoration: none;
        }
    </style>
@endpush
@section('content')
    <article class="">

        <section class="taglist tmp" id="imageRichmenuList" v-cloak >

            <div class="row" >
                <div class="col-sm-12">
                    <h2 style="font-size: 20px; font-weight: bold; padding: 10px 10px 10px 0">リッチメニュー画像作成</h2>

                </div>
            </div>
            <div class="tag_separate">
                <div class="tag_left">
                    <div class="row">
                        <div class="col-md-12" style="padding-right: 0">
                            <div class="tab_folder  " >
                                <span style="font-weight: bold; font-size: 18px;">フォルダ</span>
                                <div style="display: flex;align-items: baseline;">
                                    <div class="popup">
                                        <span class="line-icon"
                                              v-on:click="showAddGroupPopup" >
                                        <i class="far fa-plus-circle "></i>
                                       </span>
                                        <div class="popuptext" id="myPopup">
                                            <span style="font-weight: bold; color: #51595C;">フォルダ名</span>
                                            <div style="padding: 7px 0; display: flex; align-items: flex-end">
                                                <input type="text" id="cat_txt" v-model="name_group"
                                                       style="outline: none; width: 79%;height: 32px;padding-left: 3px;border: 1px solid #bbb;border-radius: 4px">
                                                <span style="font-size: 12px;margin-left: 2px;">@{{ countTex(name_group) }}/15</span>
                                            </div>
                                            <div class="text-center" style="display: flex;align-items: center;justify-content: space-between;">
                                                <button class="btn btn-sns-line btn-sns-line-success btn-sns-line-sm"
                                                        style="width: 82px;background: #08BF5A;"
                                                        v-on:click="addGroup()">決定</button>
                                                <button class="btn btn-sns-line btn-sns-line-dark btn-sns-line-sm" style="background-color: rgb(125, 145, 149);color: white;"
                                                        v-on:click="closeAddPopup">キャンセル</button>

                                            </div>

                                        </div>
                                    </div>
                                    <span class="line-icon" data-toggle='modal'
                                          data-target='#modalSortFolder' v-on:click="showModalSortFolder()">
                                        <i class="fas fa-sort-amount-down-alt "></i>
                                    </span>
                                     </div>

                            </div>
                        </div>
                    </div>

                    <div class="nano-inner" id="nano-inner-group" style="margin-top: 2px">
                        <div class="tag_group row"
                             id="group_0"
                             data-id="0"
                             style="padding: 7px"
                             v-bind:class="(group_open == 0)?'active':'folder-close'"
                             v-on:click="showGroup(0)">
                            <div  class="display_category row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol" >
                                    <div>未分類 (@{{ count_default }})</div>
                                    <div class="btn-group"  style="padding: unset; height: 24px">
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div v-for="(category, index) in sortedCategories" class="tag_group row"
                             :id="'group_'+category.id"
                             :data-id="category.id"
                             v-bind:class="(category.id == group_open)?'active':'folder-close'"
                             v-on:click="showGroup(category.id)">
                            <div v-on:click="showGroup(category.id)" class="display_category  row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol" >
                                    <div>
                                        @{{ category.name }} (@{{ category.count }})
                                    </div>
                                    <div class="btn-group" style="padding: unset;height: 23px" :style="(category.id == group_open)?'display:block':'display:none'">
                                        <i class="far fa-ellipsis-h ic-menu" ></i>
                                        <ul class="dropdown-menu action-broadcast"
                                            style="min-width: 113px;left: -89px;top: 0px;">
                                            <li class="focus-pointer" v-on:click="editGroup(category)">
                                                <div style="cursor: pointer">
                                                    フォルダ名変更
                                                </div>
                                            </li>
                                            <li class="focus-pointer" v-on:click="deleteGroup(category.id)">
                                                <div style="cursor: pointer">
                                                    フォルダ削除
                                                </div>
                                            </li>
                                        </ul>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="tag_right" style="margin-top: 12px" >
                    <div class="box-btn-center">
                        <div class="" style="display: flex; align-items: center">
                            <a v-on:click="showCreateImageRichMenu"
                            class="btn btn-sns-line btn-sns-line-primary"
                            >新規作成</a>

                        </div>

                        <div class="btn-right-top">
                            <div  >
                                <button type="button" href="" id="btn_sort_event"
                                        class="btn btn-sns-line btn-sns-line-secondary "
                                        data-toggle="modal" data-target="#modalSortItem"
                                        style=""
                                        data-type="tag" data-id="" data-callback="tag_sorted"
                                        v-on:click="showModalSortItems()"
                                >並べ替え</button>
                            </div>
                            <div>
                                <button type="button" v-if="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)"
                                        class="btn btn-sns-line btn-sns-line-primary" disabled
                                        style="padding-right: 10px; padding-left: 10px; margin-left: 15px"
                                > 一括ダウンロード
                                </button>
                                <button type="button" v-else  class="btn btn-sns-line btn-sns-line-primary"
                                        style="padding-right: 10px; padding-left: 10px; margin-left: 15px"
                                       v-on:click="downLoadImages"
                                > 一括ダウンロード
                                </button>
                            </div>
                            <div>
                                <button type="button" v-if="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)"
                                        class="btn btn-sns-line btn-sns-line-primary btn-move-folder" disabled
                                > 一括フォルダ変更
                                </button>
                                <button type="button" v-else  class="btn btn-sns-line btn-sns-line-primary"
                                        data-toggle='modal' style="padding-right: 10px; padding-left: 10px; margin: 0 15px"
                                        data-target='#modalMoveFolder'
                                > 一括フォルダ変更
                                </button>
                            </div>
                            <div>
                                <button type="button" v-if="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)"
                                        class="btn btn-sns-line btn-sns-line-danger" style="" disabled
                                > 一括削除
                                </button>
                                <button type="button" v-else  class="btn btn-sns-line btn-sns-line-danger"
                                        style=""
                                        v-on:click="deleteItemsRich()"
                                > 一括削除
                                </button>
                            </div>

                        </div>
                    </div>
{{--                    <div class="table-responsive" style="overflow-x: scroll;">--}}
                    <div style="margin-top: 10px">
                        <div class="box_images">
                            <div v-if="items.length > 0" v-for="(item,index) in items"  >
                                <div class="itemImg">
                                    <input type="checkbox" :id="'checkbox_'+item.id"
                                           name="check_item[]" :value="item.id"
                                           v-model="selected" >
                                    <label :for="'checkbox_'+item.id" class="lb_checkbox"></label>
                                    <div v-bind:style="(item.layout_type == 'compact')? 'margin-top:19%':''">
                                        <img v-if="item.image_rich" :src="'