@extends('layout.basic.main')
@section('title', 'イベント予約（一覧）')
@push('css')
    {{--    <link rel="stylesheet" href="/css/broadcast/style.css?v={{config("sns-line.version")}}">--}}
    {{--    <link rel="stylesheet" href="/css/friendlist/style.css?v={{config("sns-line.version")}}">--}}
    <link rel="stylesheet" href="/css/booking/style.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">

    <style>
        body{
            color: #51595C;
            font-weight: bold;
        }
        a{
            cursor: pointer;
        }
        h2{
            font-weight: bold;
        }
        .modal-content {
            top: 50px !important;
        }

        .active {
            font-weight: 700;
            background: #ddd !important;
        }

        .modal-content {
            top: 50px !important;
        }

        .choice_submit {
            text-align: center;
            padding-top: 10px !important;
        }

        .btn-default {
            /*color: #333 !important;*/
            /*background-color: #fff !important;*/
            /*border: solid 1px #ccc !important;*/
        }

        .btn:hover{
            opacity: 0.7;
        }
        .btn-default:active {
            color: #333;
            background-color: #d4d4d4 !important;
            border-color: #8c8c8c !important;
        }

        a:hover {
            /*color: red !important;*/
        }

        .modal-content input[type="submit"], .tag_right .btngroup .tag_right_search input[type="submit"] {
            width: 30%;
            background: #eee;
            border: 1px solid #eee;
            padding: 5px 10px;
            display: inline-block;
            height: 40px;
        }

        .modal-content input[type="text"], .tag_right .btngroup .tag_right_search input[type="text"] {
            width: 70%;
            height: 40px;
        }

        .choice_detail label {
            display: block;
            font-weight: 100;
        }

        .btngroup .btn {
            width: 48%;
        }

        #custom-modal #msg_all .message {
            margin: unset !important;
            padding: 10px 50px !important;
        }

        .btn-new-group {
            color: #fff !important;
            background-color: #5bc0de;
            border-color: #46b8da;
        }
        thead th{
            background-color: #08BF5A !important;
            font-weight: bold;
            border: none !important;
        }
        tbody>tr:first-child>td{
            border-top: none !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 !important;
            border-bottom: solid 1px #dedddd;
            margin-left: 2px;
            /*height: 42px;*/
        }
        #nano-inner-group .tag_group.active {
            padding: 7px !important;

        }

        .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;
        }
        .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: 7px;
            border: 1px solid #F2F2F2;
            border-radius: 4px;
            margin-bottom: 7px;
        }
        #nano-inner-group .tag_group:hover {
            background-color: #f6f6f6;
        }

        .ic-menu {
            font-size: 25px;
            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, select, option{
            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; margin-top: 1px;
            cursor: no-drop;
            padding-left: 10px;
            padding-right: 10px;
            opacity: 1;
        }
        .filter_event{
            background: #F6F6F6;
            padding: 7px 12px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        .tblListEventDay>thead>tr>th{
            padding: 11px 6px;
        }
        .tblListEventDay{
            margin-top: 6px;
        }
        .lb_checkbox{
            /*position: absolute;*/
            top: 3px;
            border: 1px solid #B0C2C6;
            border-radius: 4px;
        }
        .tblListEventDay input[type=checkbox] {
            display:none;
        }

        .tblListEventDay input[type=checkbox] + label
        {
            background: #FFFFFF;
            height: 17px;
            width: 17px;
            display:inline-block;
            padding: 0 0 0 0px;
            cursor: pointer;
        }
        .tblListEventDay input[type=checkbox]:checked + label
        {
            background: #08BF5A;
            height: 17px;
            width: 17px;
            display:inline-block;
            padding: 0 0 0 0px;
            cursor: pointer;
        }
        #list-event-booking .tag_left .line-icon i{
            color: #898F90 !important;
        }
        #list-event-booking .tag_left .line-icon:hover i{
            color: white !important;
        }
    </style>
@endpush
@section('content')
    <article class="">

        <section class="taglist tmp" id="list-event-booking" v-cloak>
            <h2 class="title">イベント予約</h2>
             @if(!$liffId)
                <h3 class="text-danger text-center no-liff-app" style="margin: 20px 0">
                    LIFF IDを登録してください (<a
                            href="https://lme.jp/media/manual/inflow/" target="_blank">登録方法</a>)</h3>
            @endif
            <div class="row">
                <div class="col-sm-2">

                </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 " style=""></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 " style=""></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: 0">
                        <div class="tag_group row"
                             id="group_0"
                             data-id="0"
                             style="padding: 10px 7px"
                             v-bind:class="(group_open == 0)?'active':'folder-close'"
                             v-on:click="showGroup(0)">
                            <div  v-on:click="showGroup(0)" 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;">
                                        {{--                                        <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;" :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 style="  display: flex;    align-items: center;">

                            <div class="">
                                <button type="button" @if($liffId) onclick="showCreateEvent()"  @endif
                                @if(!$liffId) onclick="showAlertErrorLiffId()" @endif class="btn btn-sns-line btn-sns-line-primary"
                                        style="background-color:rgba(87,153,219,1) ;" target="_self"> 新規作成</button>
                            </div>
{{--                            <div style="  display: flex;    align-items: center;margin-left:30px">--}}
{{--                                <div style="margin-right: 10px">イベント形式</div>--}}
{{--                                <div class="filter_event" v-if="filter_type_event == 0">--}}
{{--                                    <button class="btn btn-sns-line btn-sns-line-sm btn-sns-line-dark" v-on:click="filterEvent(0)"--}}
{{--                                            style="font-size: 13px; width: 120px;box-shadow: 0px 3px 6px #00000029; " >1日イベント</button>--}}
{{--                                    <div style="color: #7D9195; font-size: 14px;  width: 126px;  text-align: center; " v-on:click="filterEvent(1)">複数日イベント</div>--}}
{{--                                </div>--}}
{{--                                <div class="filter_event" v-if="filter_type_event == 1">--}}
{{--                                    <div  style="color: #7D9195; font-size: 14px;      text-align: center;  width: 100px;"--}}
{{--                                          v-on:click="filterEvent(0)">1日イベント</div>--}}
{{--                                    <button class="btn btn-sns-line btn-sns-line-sm btn-sns-line-dark"--}}
{{--                                            style="font-size: 13px; width: 126px; box-shadow: 0px 3px 6px #00000029;   text-align: center; "--}}
{{--                                            v-on:click="filterEvent(1)">複数日イベント</button>--}}
{{--                                </div>--}}

{{--                            </div>--}}
                        </div>
                        <div class="btn-right-top">
{{--                            <div>--}}
{{--                                <button type="button" class="btn btn-sns-line btn-sns-line-warning"--}}
{{--                                        style="color: #FE9C00 !important;background: #FFF2C7; margin-right: 15px">決済システム連携</button>--}}
{{--                            </div>--}}
                            <div  >
                                <button type="button" href="" id="btn_sort_event" class="btn btn-sns-line btn-sns-line-secondary " data-toggle="modal" data-target="#myModal"
                                        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="removeEvents()"
                                        {{--                                    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 tblListEventDay" >
                        <thead>
                        <tr>
                            <th style="border-radius: 4px 0px 0px 4px;">
                                <input type="checkbox" id="check_all"
                                       v-model="selectAll">
                                <label for="check_all" class="lb_checkbox"></label>
                            </th>
                            <th class="text-left">作成日/管理名</th>
                            <th>
                                イベントページ
                            </th>
                           <th style="min-width: 75px">
                                参加予定
                            </th>
                            <th style="min-width: 60px">
                                定員
                            </th>
                           <th style="min-width: 72px">
                                承認待ち
                            </th>
                            <th style="min-width: 70px">
                                参加済み
                            </th>
                            <th style="min-width: 100px;">
                                参加者リスト
                            </th>
                            <th style="min-width: 86px">
                                予約枠一覧
                            </th>
                            <th style="border-radius: 0px 4px 4px 0px;" ></th>
                        </tr>
                        </thead>
                        <tbody ><!---->
                        <tr class="" v-for="(item,index) in items">
                            <td :class="'check_all check_event_'+item.id" >
                                <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>
                            </td>
                            <td :class="'text-left check_all check_event_'+item.id" >
                                <span style="font-size: 13px">@{{formatDate(item.created_at)}}</span>
                                <div class="title-event">
                                    <label style="overflow: hidden;
                                            max-width: 360px;
                                            text-overflow: ellipsis;
                                            display: -webkit-box;
                                            -webkit-line-clamp: 1;
                                            -webkit-box-orient: vertical;"
                                           v-bind:for="item.title+item.id">
                                        <a  :href="'/basic/booking-event-day/' + item.id +'/edit'" style="color: #5799DB; font-size: 16px;font-weight: bold; text-decoration: underline"> @{{item.title}}</a>
                                    </label>
                                </div>
                            </td>
                           <td :class="'text-left check_all check_event_'+item.id">

                                <div style="display: flex;
                                        /*border: 1px solid #B0C2C6;*/
                                        border-radius: 4px;
                                        align-items: stretch;">
                                    <input type="text" :id="'url_event_' + item.id" class="form-control inp-url-tbl"
                                           style="border: 1px solid #B0C2C6;border-right: none; border-radius: 4px 0 0 4px;"
                                           :value="'https://liff.line.me/{{ $liffId }}?booking_event_id=' + item.id + '&ts={{ \Illuminate\Support\Carbon::now()->timestamp }}'">

                                    <input type="hidden" :id="'url_event_copy' + item.id"
                                           :value="'https://liff.line.me/{{ $liffId }}?booking_event_id=' + item.id+'&ts={{ \Illuminate\Support\Carbon::now()->timestamp }}'">

                                    <i class="fal fa-copy" style="
                                             border: 1px solid #B0C2C6; cursor: pointer;color:#7D9195 ;
                                            padding: 8px 8px 2px 8px;"
                                       v-on:click="copyUrlEvent(item.id)"></i>
                                    <i class="far fa-eye" style=" padding: 9px 7px 2px; cursor: pointer; color: #7D9195;
                                        border: 1px solid #B0C2C6;
                                        border-left: 0;
                                        border-radius: 0 4px 4px 0;" v-on:click="openPreview(item.hashIdEvent)"></i>
                           </div>

                            </td>
                            <td :class="'check_all check_event_'+item.id" >
                                <div><span>@{{item.number_approve_doing}}</span>
                                </div>
                            </td>

                            <td :class="'check_all check_event_'+item.id" >
                                <div><span>@{{item.max}}</span>
                                </div>
                            </td>
                            <td :class="'check_all check_event_'+item.id" >
                                <div><span v-bind:for="item.number_pending+item.id" v-if="item.number_pending != null">
                                @{{item.number_pending}}</span>
                                    <span v-bind:for="item.number_pending+item.id" v-if="item.number_pending == null">
                                0</span></div>
                            </td>
                            <td :class="'check_all check_event_'+item.id" >
                                <div><span>@{{item.number_approve_done}}</span>
                                </div>
                            </td>
                            <td :class="'text-center check_all check_event_'+item.id" >
                                <div>
{{--                                    <a :href="'/basic/booking_event_day/booking-all-slot/'+item.id +'?type_event='+item.type_event"--}}
{{--                                    >--}}
                                        <button type="button" class="btn btn-sns-line btn-sns-line-success"
                                                v-on:click="openBookingAllSlot(item.id)"
                                                style="padding-left: 15px; padding-right: 15px; background-color: #F4FBF2;
                                             color: #08BF5A !important;">
                                            参加者
                                        </button>

{{--                                    </a>--}}
                                </div>
                            </td>
                            <td :class="'check_all check_event_'+item.id" >
                                <div style="min-width: 46px;">
                                    <a :href="'/basic/booking-event-day/event/'+item.id+'/slots'">
                                        <button type="button" class="btn btn-sns-line btn-sns-line-secondary"
                                                style="background-color:#F2F2F2; color: #51595C !important; ">
                                            予約枠
                                        </button>

                                    </a>
                                </div>
                            </td>
                            <td :class="'check_all check_event_'+item.id">
                                <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="copyBookingEvent(item.id)" style="padding: unset; font-weight: bold;color: #51595C ;">
                                                コピー
                                            </a>
                                        </li>
                                        <li class="focus-pointer-item" v-on:click="removeEvent(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="10"> データがありません。</td>
                        </tr>
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-sns-line btn-sns-line-success"  v-if="next_page > 1 && group_open != 0" v-on:click="nextPage(next_page)">次の20件へ
                    </button>
                </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>
            @include('basic.booking_event.modal.modal_sort')
            <div class="modal-overlay" style="display: none;"></div>
            <input type="hidden" id="folder_cookie"  value="{{$folderCookie}}">
        </section>
    </article>
@endsection
@push('js')
    <script>
        var token = "{!! csrf_token() !!}";
        var group_id = '{{ $folderCookie }}';
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAU9JfuYb5j2Xtr_v5__89wY5flXr0ai5I&libraries=places&callback=initMap&language={{App::getLocale()}}"
            async defer>
    </script>
    <script src="/js/vue-paginate.js"></script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/msg_template/custom_rule.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/msg_template/vee-validate_ja.min.js"></script>
    <script src="/chat_files/bootstrap-timepicker.js"></script>

    <script>
        var token = "{!! csrf_token() !!}";
    </script>
    <script>
        // $(function () {
        //     var nav = $('#snav ul');
        //     var navTop = nav.offset().top;
        //     $('li', nav).hover(function () {
        //             $('ul', this).stop().slideDown('fast');
        //         },
        //         function () {
        //             $('ul', this).stop().slideUp('fast');
        //         });
        // });
        $(function () {
            $('.modal-open').click(function () {
                $('body').append('<div class="modal-overlay"></div>');
                $('.modal-overlay').fadeIn('slow');
                var modal = '#' + $(this).attr('data-target');
                modalResize();
                $(modal).fadeIn('slow');
                $('.modal-overlay, .modal-close').off().click(function () {
                    $(modal).fadeOut('slow');
                    $('.modal-overlay').fadeOut('slow', function () {
                        $('.modal-overlay').remove();
                    });
                });
                $(window).on('resize', function () {
                    modalResize();
                });

                function modalResize() {
                    var w = $(window).width();
                    var h = $(window).height();
                    var x = (w - $(modal).outerWidth(true)) / 2;
                    var y = (h - $(modal).outerHeight(true)) / 2;
                    $(modal).css({'left': x + 'px', 'top': y + 'px'});
                }
            });
        });
        function showAlertErrorLiffId(){
            alert('LIFF IDを登録してください');
        }
    </script>
    <script type="application/javascript" src="/js/booking_event_day/index.js?v={{config("sns-line.version")}}"></script>
@endpush