@extends('layout.basic.main')
@section('title', 'コンバージョン（一覧）')
@push('css')
<link rel="stylesheet" href="/css/conversion/style.css?v={{config("sns-line.version")}}" type="text/css">
    <style>
        .btn{
            font-weight: bold;
        }
        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;
        }
        div, label, a, h2{
            font-weight: bold;
        }

        /*.copy-btn , .copy-btn:focus, .copy-btn:focus-visible, .btn:focus{*/
        /*   outline: none !important;*/
        /*}*/

        /*.copy-btn i{*/
        /*    color: #51595c;*/
        /*    font-size: 17px;*/
        /*}*/

        /*.copy-btn:hover{*/
        /*    background-color: #96ADB2 !important;*/
        /*}*/
        /*.copy-btn:hover i{*/
        /*    color: #FFFFFF !important;*/
        /*}*/
    </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: #f6f6f6  !important; ;
    }
    .focus-pointer-item {
        cursor: pointer;
        padding: 5px;
    }

    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
    }

    .tag_right select {
        width: 140px
    }
    .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 !important;
    }
    .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;
    }
</style>
@endpush
@section('content')
    <article class="">

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

            <div class="row">
                <div class="col-sm-12">
                    <h2 style="font-size: 20px;  font-weight: bold; padding: 10px 10px 10px 0">コンバージョン</h2>
{{--                    <p style="margin-bottom: 15px; font-size: 15px; color: #51595c">--}}
{{--                        コードをサイトに埋め込むことで、そのサイトに訪れた友だちに自動でタグ付け、テンプレート送信、ステップ配信が出来ます。<br/>--}}
{{--                        機能させるために必ずコンバージョンコードを友だちに送ってください。<br/>--}}
{{--                        ※パソコンでのアクセスやiOSの最新版でも機能します--}}
{{--                    </p>--}}
                </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">

                                        {{--                                        <svg v-on:click="showAddGroupPopup" xmlns="http://www.w3.org/2000/svg"--}}
                                        {{--                                             viewBox="0 0 512 512" style="width: 20px; fill: rgba(137,143,144,1) !important;position: absolute;right: 7px;top: -18px;"><path d="M232 344V280H168C154.7 280 144 269.3 144 256C144 242.7 154.7 232 168 232H232V168C232 154.7 242.7 144 256 144C269.3 144 280 154.7 280 168V232H344C357.3 232 368 242.7 368 256C368 269.3 357.3 280 344 280H280V344C280 357.3 269.3 368 256 368C242.7 368 232 357.3 232 344zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/></svg>--}}
                                        {{--                                        <i v-on:click="showAddGroupPopup"  class="far fa-plus-circle ic-add"></i>--}}
                                        <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>
                                    {{--                                    <i class="fas fa-sort-amount-down-alt ic-sort"  data-toggle='modal'--}}
                                    {{--                                       data-target='#modalSortFolder' v-on:click="showModalSortFolder()"></i>--}}
                                </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">
                                        {{--                                        <i class="far fa-ellipsis-h ic-menu" ></i>--}}
                                    </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="">
                            <a v-on:click="showCreateItem()" 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="padding-left: 25px; padding-right: 25px"
                                        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 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="padding-right: 15px; padding-left: 15px;" disabled
                                > 一括削除
                                </button>
                                <button type="button" v-else  class="btn btn-sns-line btn-sns-line-danger"
                                        style="padding-right: 15px; padding-left: 15px;"
                                        v-on:click="deleteItemsInfo()"
                                        {{--                                    v-on:click="deleteItemsInfo()"--}}
                                        {{--                                    v-bind:class="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)?'disabled':''"--}}
                                > 一括削除
                                </button>
                            </div>

                        </div>
                    </div>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th style=" border-radius: 4px 0 0 4px;">
                                <input type="checkbox" name="" value="" v-model="selectAll">
                            </th>
                            <th class="text-left">作成日</th>
                            <th class="text-center">配信・埋め込みコード</th>
                            <th class="text-left">管理名</th>
                            <th class="text-center" >アクション</th>
                            <th class="text-center">反応人数</th>
                            <th style="border-radius: 0 4px 4px 0;"> </th>
                        </tr>
                        </thead>
                        <tbody ><!---->
                        <tr class="" v-for="(item,index) in items">
                            <td  >
                                <input type="checkbox" :id="'checkbox_'+item.id" name="check_item[]" :value="item.id" v-model="selected" >
                            </td>
                            <td class="text-left" >
                                @{{formatDate(item.created_at)}}
                            </td>
                            <td class="text-center">
                                <button type="button"  class="btn btn-sns-line btn-sns-line-primary"
                                        data-toggle='modal' style="padding-right: 10px; padding-left: 10px; margin: 0 15px"
                                        data-target='#modalPreviewCode'
                                        v-on:click="previewCode(item, index)"
                                > コード表示
                                </button>
                            </td>
                            <td class="text-left">
                                <a style="text-decoration: underline" :href="'/basic/conversion/edit/'+item.id">@{{ item.name }}</a>
                            </td>
                            <td class="text-center">
                                <button type="button"  class="btn btn-sns-line btn-sns-line-dark"
                                        data-toggle='modal' style="padding-right: 10px; padding-left: 10px; margin: 0 15px"
                                        :disabled="!item.action_id || item.detailsAction.length == 0"
                                        v-on:click="previewAction(item)"
                                        data-target='#preview-action'
                                > プレビュー
                                </button>
                            </td>
                            <td class="text-center">
                                <a style="text-decoration: underline" :href="'/basic/conversion/visited/'+item.id">@{{ item.visited }}</a>
                            </td>
                            <td >
                                <div class="btn-group" style="padding: unset;">
                                    <i class="far fa-ellipsis-h ic-menu" style="font-size: 25px" ></i>
                                    <ul class="dropdown-menu action-broadcast"
                                        style=" min-width: 74px;left: -39px;top: 23px;text-align: center;">
                                        <li class="focus-pointer-item" >
                                            <a @click="copyInfo(item.id)" style="padding: unset; font-weight: bold;color: #51595C ;">
                                                コピー
                                            </a>
                                        </li>
                                        <li class="focus-pointer-item" v-on:click="deleteItem(item.id)" >
                                            <div style="cursor: pointer;color: #F44336; font-weight: bold">
                                                削除
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </td>

                        </tr>
                        <tr v-show="items.length == 0">
                            <td colspan="9"> データがありません。</td>
                        </tr>
                        </tbody>
                    </table>


                    {{--                    <button type="button" class="btn btn-sns-line btn-sns-line-success"  :disabled="next_page == 1" v-on:click="nextPage(next_page)">次の20件へ--}}
                    {{--                    </button>--}}
                </div>
            </div>

            <div class="modal fade" id="preview-action"
                 tabindex="-1" role="dialog" aria-labelledby="preview-action" style="margin: 60px auto;">
                <div class="modal-dialog" role="document">
                    <div class="modal-content" style="border: none">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                <span class="line-icon line-icon-close"><i class="fas fa-times"></i></span>
                            </button>
                            <h2 class="text-center" style="font-weight: bold !important">アクション詳細</h2>
                        </div>
                        <div class="modal-body">
                            <div class="row" style="padding: 0 30px 30px;">
                                <div class="col-sm-12 preview-action_content">
                                    <div id="list-action">
                                        <p v-for="(item,indexAction) in itemPreviewAction.detailsAction" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"  v-if="item.type">
                                            @include('layout.modal_setting.label_action')
                                    {{-- <span v-if="item.type == 'tag'">【タグ】
                                                                    <span v-for="(itemTag, indexTag) in item.list_tags">@{{  indexTag == 0 ? '' : ', ' }}@{{ itemTag.name }}</span>を<span
                                                v-if="item.data.action == 1">つける</span><span v-else>はずす</span>
                                                                </span>
                                            <span v-else-if="item.type == 'scenario'">【ステップ】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.scenario_name }}</span><span v-else>購読停止・予約キャンセル</span>
                                                                </span>
                                            <span v-else-if="item.type == 'template'">【テンプレート】
                                                                    <span>@{{ item.data.template_name }}</span>
                                                                </span>
                                            <span v-else-if="item.type == 'text'">【テキスト】
                                                                    <span>@{{ item.data.content  }}</span>
                                                                </span>
                                            <span v-else-if="item.type == 'richmenu'">【リッチメニュー】
                                                                    <span v-if="item.data.action != 1">@{{ item.data.richmenu_name }}表示</span><span v-else>表示を停止</span>
                                                                </span>
                                            <span v-else-if="item.type == 'remind'">【リマインド】<span>@{{ item.data.remind_name }}</span></span>
                                            <span v-else-if="item.type == 'bookmark'">
                                                    <span class="action-title">【ブックマーク】</span>
                                                    <span v-if="item.data.action == 1">ブックマークする</span>
                                                    <span v-else>ブックマークを外す</span>
                                                </span>
                                                <span v-else-if="item.type == 'block'">
                                                    <span class="action-title">【ブロック・非表示】</span>
                                                    <span v-if="item.data.action == 1">ブロックする</span>
                                                    <span v-if="item.data.action == 2">ブロック解除</span>
                                                    <span v-if="item.data.action == 3">表示</span>
                                                    <span  v-if="item.data.action == 4">非表示</span>
                                                </span>
                                                <span v-else-if="item.type == 'compliant_status'">
                                                    <span class="action-title">【対応ステータス】</span>
                                                    <span v-if="item.data.action == 1">@{{ item.data.content }}をつける</span>
                                                    <span v-else> ステータスを外す</span>
                                                </span>

                                            <span v-else-if="item.type == 'friend_info'">【友だち情報】
                                                                <span v-show="item.data.action == 1">登録情報を削除</span>
                                                                <span v-show="item.data.action == 3">当日日付を登録</span>
                                                                <span v-show="item.data.action == 2">
                                                                    <span v-show="item.data.type == 1"><span style="margin-right: 5px">@{{item.data.name}}</span>(選択肢): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 2"><span style="margin-right: 5px">@{{item.data.name}}</span>(記述): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 3"><span style="margin-right: 5px">@{{item.data.name}}</span>(年月日): @{{ item.data.content | shortContentFriendInfo }}</span>
                                                                    <span v-show="item.data.type == 6"><span style="margin-right: 5px">@{{item.data.name}}</span>(ポイント): @{{ item.data.content | shortContentFriendInfo }} ポイントを</span>
                                                                    <span v-show="item.data.type == 6">
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 1">（上書き）</span>
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 2">（プラス）</span>
                                                                        <span v-show="item.data.type == 6 && item.data.action_content == 3">（マイナス）</span>
                                                                    </span>
                                                                </span>
                                                            </span> --}}
                                        </p>
                                    </div>


                                </div>
                            </div>
                            <div class="text-center">
                                <button type="button" class="btn btn-sns-line btn-sns-line-secondary" data-dismiss="modal" style="padding: 6px 40px;">戻る</button>
                                <button type="button" class="btn btn-sns-line btn-sns-line-primary" style="margin-left: 10px;padding: 6px 40px;font-weight: bold !important" v-on:click="openSettingAction(itemPreviewAction.action_id)">編集</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modalPreviewCode"
                 tabindex="-1" role="dialog"
                 aria-labelledby="chatSettingStatus">
                <div class="modal-dialog" role="document">
                    <div class="modal-content" style="border: none">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                <span class="line-icon line-icon-close"><i class="fas fa-times"></i></span>
                            </button>
                            <h2 class="text-center"> 【 配信・埋め込みコード】 </h2>

                        </div>
                        <div class="modal-body">
                            <div style="padding: 10px">
                                <div class="col-md-12 "  v-if="itemPreviewCode.type == 2">
                                    <label>① 配信用コード</label>
                                    <div class="inp-copy">
                                        <input type="text" class="form-control input-preview"
                                               id="sent_code"
                                               :value="'[CONVERSION_'+ itemPreviewCode.unique_key+']'">
                                        <span class="line-icon copy-btn"
                                              data-clipboard-target="#sent_code"
                                        ><i class="fal fa-copy"></i></span>
                                    </div>
                                    <p class="p-txt-note">▶︎ 友だちに配信する際は、必ずこの配信用コードを配信してください。</p>

                                </div>
                                <div class="col-md-12 " style="margin-top: 30px; margin-bottom: 30px" v-if="itemPreviewCode.type == 2">
                                    <label>② 配信ページ埋め込みHTMLコード</label>
                                    <div class="inp-copy">
                                        <input type="text" class="form-control input-preview"
                                               id="sent_page"
                                               value="<script src='{{asset('js/conversion/sent_page_v2.js')}}'></script>"
                                        >
                                        <span class="line-icon copy-btn"  data-clipboard-target="#sent_page">
                                            <i class="fal fa-copy"></i></span>
                                    </div>
                                    <p class="p-txt-note">▶︎ 配信するページにこのHTMLコードを埋め込んでください</p>

                                </div>
                                <div class="col-md-12 " >
                                    <label>@{{ itemPreviewCode.type == 2 ? '③' : ''}} アクション起動ページ埋め込みHTMLコード</label>
                                    <div class="inp-copy">
                                        <input type="text" class="form-control input-preview"
                                               id="target_page"
                                               :value="itemPreviewCode.img_url"
                                        >
                                        <span class="line-icon copy-btn" data-clipboard-target="#target_page"><i class="fal fa-copy"></i></span>
                                    </div>
                                    <p class="p-txt-note">▶︎ 「このページが表示されたらアクションを稼働させる」というページに<br>
                                        　　このHTMLコードを埋め込んでください</p>

                                </div>
                            </div>


                        </div>
                        <div class="text-center mb-3">
                            <button type="button" class="btn  btn-sns-line btn-sns-line-success"  data-dismiss="modal" style="width: 100px; margin-top: 30px; margin-bottom: 20px"
                            >戻る</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modalSortFolder"
                 tabindex="-1" role="dialog"
                 data-backdrop="static"
                 data-keyboard="false"
                 aria-labelledby="chatSettingStatus">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    v-on:click="closeModalSortFolder()" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                <span class="line-icon line-icon-close"><i class="fas fa-times"></i></span>
                            </button>
                            <h2 class="text-center"> 【 フォルダ並べ替え 】</h2>

                        </div>

                        <div class="modal-body scroll-modal">
                            <div class="row mt-item-fol" v-for="(item,index) in arrGroupSort" :data-id="item.id">
                                <div class="col-sm-9 col-sm-offset-1  ">
                                    <div style="padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">@{{item.name}}</div>
                                </div>
                                <div class="col-sm-1">
                                    <div class="box-ic-sort" >
                                        <i class="far fa-chevron-up"  v-on:click="onUpdateDefaultGroup(undefined, index, 'up')"></i>
                                        <i class="far fa-chevron-down " v-on:click="onUpdateDefaultGroup(undefined, index, 'down')"></i>
                                    </div>

                                </div>
                            </div>
                            <input type="hidden" id="array_sort_fol" value="">
                            <input type="hidden" id="current_position_fol" value="">
                        </div>
                        <div class="text-center mb-3">
                            {{--                            btn-success btn-choise-folder--}}
                            <button type="button" class="btn btn-sns-line btn-sns-line-success " v-on:click="sortedFolder">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modalMoveFolder"
                 tabindex="-1" role="dialog"
                 aria-labelledby="chatSettingStatus">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                <span class="line-icon line-icon-close"><i class="fas fa-times"></i></span>
                            </button>
                            <h2 class="text-center"> 【 一括フォルダ変更 】</h2>

                        </div>
                        <div class="modal-body">
                            <div class="row " >
                                <div class="col-sm-2 col-sm-offset-1 title-left" style="font-weight: bold">
                                    移行先選択
                                </div>
                                <div class="col-sm-8">
                                    <div class="b-select">
                                        <select class="form-control" v-model="folder_move_id">
                                            <option value="0">未分類</option>
                                            <option v-for="(category, index) in sortedCategories" :value="category.id">@{{ category.name }}</option>
                                        </select>
                                        <i class="fal fa-angle-down"></i>
                                    </div>

                                </div>

                            </div>

                        </div>
                        <div class="text-center mb-3">
                            <button type="button" class="btn  btn-sns-line btn-sns-line-success"
                                    v-on:click="moveItems()"
                                    v-bind:class="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)?'disabled':''"
                            >登録</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modalSortItem"
                 tabindex="-1" role="dialog"
                 data-backdrop="static"
                 data-keyboard="false"
                 aria-labelledby="modalSortItem">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true" style="opacity: 1;font-size: 27px"
                                    v-on:click="closeModalSortItems()"
                            >
                                <i class="fas fa-times" style="color: rgba(125,145,149,1) !important;"></i></button>
                            <h2 class="text-center"> 【 並べ替え 】</h2>

                        </div>
                        <div class="modal-body scroll-modal">
                            <div class="row mt-item-fol" v-for="(item,index) in arrItemsSort" :data-id="item.id">
                                <div class="col-sm-9 col-sm-offset-1  ">
                                    <div style="padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">@{{item.name}}</div>
                                </div>
                                <div class="col-sm-1">
                                    <div class="box-ic-sort">
                                        <i class="far fa-chevron-up "  v-on:click="onUpdate(undefined, index, 'up')"></i>
                                        <i class="far fa-chevron-down " v-on:click="onUpdate(undefined, index, 'down')"></i>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="array_sort" value="">
                            <input type="hidden" id="current_position" value="">
                        </div>
                        <div class="text-center">
                            <button type="button" class="btn btn-sns-line btn btn-sns-line btn-sns-line-success "
                                    style=" margin-bottom: 20px; width: 101px;"
                                    v-on:click="sortedItemConversion">保存</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-overlay" style="display: none;"></div>
            <input type="hidden" id="folder_cookie"  value="{{$folderCookie}}">
        </section>

        @include('layout.modal_setting.modal_select_action')
        @include('layout.modal_filter_v2')
    </article>
@endsection
@push('js')
    <script>
        var token = "{!! csrf_token() !!}";
        var group_id = '{{ $folderCookie }}';
    </script>
    <script src="/chat_files/clipboard.min.js"></script>
    <script src="/js/conversion/index.js?v={{config("sns-line.version")}}"></script>
    <script>
        var params = [];
        var basic_home_new = [];
    </script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>
@endpush