@extends('layout.basic.main')
@section('title','一斉配信（一覧）')

@push('css')
<link rel="stylesheet" href="/css/send_all.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/css/plugins/timepicker/bootstrap-timepicker.css">


    <style>
        .active {
            font-weight: 700;
        }

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

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

        .btn-default:hover, .btn-default:active {
            color: #333;
            background-color: #d4d4d4 !important;
            border-color: #8c8c8c !important;
        }
        a:hover, .time-send-broadcast:hover{
            color: red !important;
            transition: 0.7s;
        }

        .table-message-senda-all::-webkit-scrollbar {
            height: 9px;
        }

        .table-message-senda-all::-webkit-scrollbar-track{
            border-radius: 8px
        }

        .table-message-senda-all::-webkit-scrollbar-thumb{
            background: #E0E0E0;
            border-radius: 8px;
        }

        .table-message-senda-all {
            overflow: auto;
            width: 100% !important;
            /*max-width: 1600px;*/
        }

        .wrap-scroll-table > table > * > tr > th:last-child, 
        .wrap-scroll-table > table > * > tr > td:last-child {
            width: 220px !important;
            position: sticky;
            right: 0;
            z-index: 1;
        }

        .wrap-scroll-table > table > * > tr > th:last-child:before,
        .wrap-scroll-table > table > * > tr > td:last-child:before {
            content: '';
            border-left: 1px solid #DDDDDD !important;
            position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
        }

        #table_broadcast {
            width: 1800px;
        }

        #table_broadcast th {
            height: 45px;
            padding: 5px;
            font-weight: 500;
            font-size:16px !important;
            color: #222222 !important;
            background-color: #F5F5F5 !important;
        }

        #table_broadcast.table_broadcast_sent th {
            height: 45px;
            padding: 5px;
            padding-left: 15px;
            font-weight: 500;
            font-size:16px !important;
            color: #222222 !important;
            background-color: #F5F5F5 !important;
        }

        #table_broadcast #table_broadcast_head {
            text-align: left !important;
        }

        #table_broadcast td{
            padding: 5px;
            text-align: left !important;
            border-bottom: 1px solid #DDDDDD !important;
            border-right: unset !important;
        }

        #table_broadcast.table_broadcast_sent td{
            padding: 5px;
            padding-left: 15px;
            text-align: left !important;
            border-bottom: 1px solid #DDDDDD !important;
            border-right: unset !important;
        }

        #table_broadcast_input {
            width: 55px;
        }

        #table_broadcast_input th {
            height: 45px;
            padding: 5px;
            font-weight: 500;
            font-size:16px !important;
            color: #222222 !important;
            background-color: #F5F5F5 !important;
        }

        #table_broadcast_input #table_broadcast_head {
            text-align: left !important;
        }

        #table_broadcast_input td{
            padding: 5px;
            text-align: left !important;
            border-bottom: 1px solid #F4F6F7 !important;
            border-right: unset !important;
        }

        #table_broadcast_action {
            width: 310px;
        }

        #table_broadcast_action.table_action_sent {
            width: 200px;
        }

        #table_broadcast_action th {
            height: 45px;
            padding: 5px;
            padding-left: 20px;
            font-weight: 500;
            font-size:16px !important;
            color: #222222 !important;
            background-color: #F5F5F5 !important;
        }

        #table_broadcast_action #table_broadcast_head {
            text-align: left !important;
        }

        #table_broadcast_action tr td{
            padding: 5px;
            padding-left: 20px;
            text-align: left !important;
            border-bottom: 1px solid #F4F6F7 !important;
            border-right: unset !important;
        }


        .btn-status {
            color: white;
            font-size: 12px;
            width: 70px;
            margin: auto;
            padding: 9px;
            border-radius: 1px;
        }

        .btn-create-broadcast {
            /* padding: 9px 35px ; */
            font-weight: 500;
            font-size: 14px;
            background: #5799DB;
            border-radius: 4px;
            color: white;
            height: 40px;
            width: 130px;
            line-height: 40px;
            cursor: pointer;
            border: unset;
        }

        .btn-create-broadcast:hover {
            opacity: 0.7;
        }
        .date-picker {
            background: url(/images/calendar.png) right 5px center no-repeat;
            appearance: none;
            -webkit-appearance: none; /* Support for Google Chrome và Safari. */
            -moz-appearance: none; /* Support for firefox. */
            -ms-appearance: none; /* Support for Internet Explorer. */
            -o-appearance: none; /* Support for Opera. */
        }

        .select_rich_menu {
            margin-left: 5px;
            height: 30px;
            white-space: nowrap;
            width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 100px;
            font-size: 14px;
            padding:0 25px 2px 5px;
            border: 1px solid rgba(128, 128, 128, 0.27);
            border-radius: 4px;
            cursor: pointer;
            background: url(/images/down.png) right 6px center no-repeat white;
        }

        .text-message {
            white-space: nowrap;
            width: 320px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .btn-add-message {
            font-size:12px;
            font-weight: bold;
            border-radius: 4px;
            padding: 9px 2px !important;
            background: rgba(87,153,219,1);
            color: white;
        }
        .btn-add-message:hover, .save-rich-menu:hover {
            color: white !important;
            background: rgb(49, 118, 186) !important;
        }

        .btn-add-message:focus {
            color: #FFFFFF;
        }

        .message-order {
            font-size: 12px;
            position: absolute;
            top: 0;
            left: 18px;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            justify-items: center;
        }

        .icon-edit-message, .icon-delete-message {
            font-size: 20px;
            color: rgba(170,170,170,1);
            cursor: pointer;
        }

        .icon-edit-message:hover, .preview-broadcast:hover {
            color: rgb(0, 160, 234) !important;
        }

        .delete-broadcast:hover, .icon-delete-message:hover{
            color: #de0b0b !important;
        }

        .send-test-broadcast:hover {
            background: #5f5ddc !important;
        }

        .modal-backdrop.in {
            display: none !important;
        }

        .btn-switch-status {
            background: rgba(244,67,54,1);
            color: white;
            cursor: pointer;
            width: 90px;
            padding:9px 5px !important;
            font-size: 12px;
            margin-left: 15px;
            font-weight: bold;
        }

        .btn-switch-status:hover {
            background: rgb(224, 50, 37);;
            color: white;
        }

        .modal-overlay {
            position: unset !important;
        }

        #newFunnelModal .modal-dialog {
            margin-top: 20px;
        }

        .modal-dialog {
            position: relative;
            margin-top: 7%;
            background-color: #fff;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border-radius: 6px;
            outline: 0;
            -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
            box-shadow: 0 3px 9px rgb(0 0 0 / 50%)
        }

        .modal-common {
            position: relative;
            margin-top: 7%;
            background-color: #fff;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 1px solid #999;
            border-radius: 6px;
            outline: 0;
            -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
            box-shadow: 0 3px 9px rgb(0 0 0 / 50%)
        }

        .action-broadcast{
            position: absolute;
            opacity: 0;
            visibility: hidden;
            transition: 0.5s;
            z-index: 0;
            display: none;
        }

        .btn:hover{
            opacity: 0.7;
        }

        .btn-group:hover .action-broadcast{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block;
        }

        .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;*/
            margin: 60px auto;
        }

        .modal-content input[type="text"] {
            width: 100% !important;
        }

        .taiou_gry {
            font-size: 14px;
            background-color: #7D9195 !important;
            min-width: 50px;
            padding: 5px !important;
            text-align: center;
        }

        #single_template_idSelector .listItemInFolder .checkbox{
            margin: 0;
        }
        #single_template_idSelector .listItemInFolder .checkbox label{
            font-weight: bold;
            padding: 10px;
            width: 100%;
        }
        #single_template_idSelector .listItemInFolder .checkbox input{
            top: 12px;
        }

        .list-group-item {
            position: relative;
            display: block;
            padding: 10px 15px;
            margin-bottom: -1px;
            background-color: #fff;
            border: 1px solid #ddd;
        }

        .active-folder {
            background: #08BF5A !important;
            color: #fff !important;
        }

        .non-active-folder {
            background: #F4FBF2 !important;
            color: #707070;
            border: 1px solid #707070;
        }

        #tagEditModaltagSelector .listFolder >*, #single_template_idSelector .listFolder >* {
            margin-bottom: 5px;
            border: none;
            border-radius: 4px;
            font-weight: bold;
            font-size: 15px;
            color: #51595C;
        }

        #single_template_idSelector .listItemInFolder .checkbox {
            margin: 0;
        }

        #single_template_idSelector .listItemInFolder .checkbox label {
            font-weight: bold;
            padding: 10px;
            width: 100%;
        }
        
        #tagEditModaltagSelector .listItemInFolder >*, #single_template_idSelector .listItemInFolder >* {
            margin-bottom: 5px;
            border: 1px solid #F6F6F6;
            border-radius: 4px;
            font-weight: bold;
            font-size: 15px;
            padding: 0;
            color: #51595C;
        }

        #templateDetail .message{
            text-align: center;
            background: #F2F2F2;
            padding: 25px;
            margin: 10px;
        }

        #templateDetail .bg_preview_wap {
            width: 100%;
            margin: auto;
            background: #fff;
            word-break: break-word;
        }

        #templateDetail .text_preview {
            padding: 16px !important
        }

        #templateDetail .preview_video_wap {
            border-radius: 5px;
            width: 60%;
            margin-left: 20%;
            background: #fff;
            min-height: 250px;
            overflow-y: scroll;
            padding-bottom: 10px
        }

        #templateDetail .video_wap_preview {
            width: 100%
        }

        #templateDetail .preview_thumb img {
            width: 150px;
            max-height: 200px;
            float: left;
            padding-left: 10px
        }

        #templateDetail .message .question_wap {
            border-radius: 5px;
            width: 370px;
            margin-left: 25%;
            background: #fff
        }

        #templateDetail .question_title {
            border-bottom: 1px solid #ccc;
            padding: 10px !important;
            overflow: hidden;
            word-break: break-all
        }

        #templateDetail .answer_question {
            min-height: 40px;
            overflow: auto;
        }
        .temp_name {
            font-size: 14px !important;
            font-weight: 700;
            margin: 0 10px;
        }

        #broadcast .message .container-btn-quick-reply {
            display: flex;
            flex-flow: row wrap;
            align-content: space-between;
            justify-content: space-between;
            padding: 0 10px;
        }

        #broadcast .message .container-btn-quick-reply .btn-quick-reply {
            margin-top: 8px !important;
            width: 110px;
            height: auto;
            background-color: #9A9FB2;
            border-radius: 10px;
            color: #FFFFFF;
        }

        #broadcast .message .container-btn-quick-reply .btn-quick-reply:nth-child(2n) {
            page-break-after: always;
            break-after: always;
        }

        #broadcast .message .question_wap .answer_button_2{
            display: flex;
            flex-flow: row wrap;
            align-content: space-between;
            justify-content: space-between;
            width: 95%;
            margin: 10px auto;
            padding-bottom: 10px;
        }

        #broadcast .message .question_wap .answer_button_2 p{
            width: 47%;
            margin-bottom: 10px;
            height: auto;
            word-wrap: break-word;
        }

        #broadcast .message .question_wap .answer_button_2 p:nth-child(1n) {
            page-break-after: always;
            break-after: always;
        }

        #broadcast .message .question_wap .button_type_image{
            position: relative;
        }

        #broadcast .message .question_wap .button_type_image p.buttons_title{
            top: 10px;
            left: 10px;
            padding: 3px 10px;
            border-radius: 10px;
        }

        #broadcast .message .question_wap .button_type_image p.buttons_content{
            bottom: 15px;
            transform: translate(-50%, 0);
            left: 50%;
            padding: 7px;
            width: 85%;
            text-align: center;
            border-radius: 10px;
        }

        .daterangepicker th {
            background-color: white !important;
            color: #222222 !important;
            border: 1px solid transparent !important;
        }

        .daterangepicker td {
            border: none !important;
        }

        .daterangepicker td.active, .daterangepicker td.active:hover {
            background-color: #08BF5A !important;
        }

        .daterangepicker td.in-range {
            background-color: #F4FBF2 !important;
        }

        .daterangepicker td.active.end-date {
            background-color: #08BF5A !important;
        }
        /*/images/ic-calendar_new.png*/
        #filter_send_all .filter-month {
            background: url(/images/calendar.png) right 5px center no-repeat;
            /*background: url(/images/ic-calendar_new.png) right  9px center no-repeat;*/
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            -o-appearance: none;
            position: relative;
            cursor:pointer !important;
        }
        #filter_send_all {
            position: relative;
            cursor:pointer !important;
        }
        #filter_send_all input[type="month"]::-webkit-inner-spin-button,
        #filter_send_all input[type="month"]::-webkit-calendar-picker-indicator {
            /*display: none;*/
            /*visibility: hidden;*/
            /*min-width: 0;*/
            /*max-width: 0;*/
            /*padding: 0;*/
            /*border: 0;*/
            background: none;
            width: 100%;
            position: absolute;
            /*-webkit-appearance: none;*/
            cursor:pointer !important;
        }
        .no-border::before {
            height: unset !important;
        }
        .no-border{
            text-align: center !important;
            font-size: 16px !important;
            font-weight: 300 !important;
            padding: 10px !important;
        }
    </style>
    <link rel="stylesheet" href="/css/broadcast/style.css?v={{config("sns-line.version")}}">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

@endpush
@section('content')
    <article class="" id="broadcast" v-cloak="">
        <section class="allsend">
            <input hidden id="flagImport" @if(!empty($flagImport)) value="{{ $flagImport }}" @endif>
            <div style="display: flex; padding-top: 10px;">
                <h2 style="font-weight: 600; font-size: 20px; color: #222222">メッセージ配信</h2>
                <div style="margin-left: auto;">
                    <a href="https://lme.jp/manual/" class="btn btn-sns-line btn-sns-line-lg btn_manual" target="_blank">
                        <img src="/images/copy.png" class="img-fluid" style="padding-right: 5px; height: 13px; margin-bottom: 3px;">マニュアル
                    </a>
                </div>
            </div>
            <p style="margin-bottom: 15px; font-weight: 300; font-size: 14px; color: #222222;">
                通信状況により配信予定時間から5~15分遅れて配信される場合があります。
            </p>
            <div class="table_option">
                <div class="type_send_all" :class="{activeTab: show_table == 'wait_to_send'}" v-on:click="openTabTable('wait_to_send')">配信予約</div>
                <div class="type_send_all" :class="{activeTab: show_table == 'draft'}" v-on:click="openTabTable('draft')">下書き</div>
                <div class="type_send_all" :class="{activeTab: show_table == 'delivered'}" v-on:click="openTabTable('delivered')">配信履歴</div>
            </div>
            <div style="display: flex; align-items: center" >
                <div class="btngroup" v-if="show_table == 'wait_to_send' || show_table == 'draft'" style="width: auto;">
                    <div class="btn-create-broadcast"  v-on:click=" location.href = '{{ route('addBroadcastV2') }}'" style="text-align: center">
                        <i class="fal fa-plus" style="color: #FFFFFF; margin-right: 5px;"></i>
                        新規作成
                    </div>
                    <div style="margin: 0 15px;" v-if="show_table == 'wait_to_send'">
                        <button class="btn btn-sns-line btn-sns-line-lg btn_all_data"
                                style="width: 107px !important;height: 40px"
                                @click="filterAll"
                        >
                            全期間
                        </button>
                    </div>

                    <div style="display: flex; margin-left: auto;">

                        <div class="month-filter" id="filter_send_all" v-if="show_table == 'wait_to_send'">
                            <input type="month" v-model="filter_month" class="form-control text-center filter-month"
                                   v-on:change="filterMonth()"
                                   style="width: 200px; border: 1px solid #E8E8E8; height: 40px">
{{--                            <span class="far fa-calendar" style="    font-size: 16px;--}}
{{--                                    position: absolute;--}}
{{--                                    right: 13px;--}}
{{--                                    top: 11px;"></span>--}}

{{--                            <i class="fas fa-chevron-left" v-on:click="preMonth()">--}}
{{--                            </i>--}}
{{--                            filter_month =  @{{ filter_month }}--}}
{{--                            <div class="position-relative" >--}}
{{--                                <div class="border-input-date">--}}
{{--                                <span id="text-month"--}}

{{--                                      style="font-size: 14px; font-weight: 400; color: #51595C;">--}}
{{--                                    @{{ filter_month ? moment(filter_month, 'YYYY-MM').format('YYYY年MM月'): '-' }}</span>--}}
{{--                                </div>--}}
{{--                                <i class="far fa-calendar" style="font-size: 16px; margin: auto; padding-right: 10px"></i>--}}
{{--                                <input type="month" id="filter_month" v-model="filter_month"--}}
{{--                                       style="opacity: 0; position: absolute; bottom: -2px; z-index: -1">--}}
{{--                            </div>--}}
{{--                            <i class="fas fa-chevron-right" v-on:click="nextMonth()"></i>--}}
                        </div>

                    </div>
                </div>

                <div v-show="show_table == 'draft'" style="margin-left: 20px; color: #222222 !important; font-weight: normal">配信予定日時が現在日時より前の場合でも、下書きの場合は配信されません。</div>
                <div v-show="show_table == 'wait_to_send'" style="margin-left: 20px; color: #222222 !important; font-weight: normal">※ 配信日時5分前から配信内容の編集はできません。</div>

                <div style="display: flex; margin-left: auto;">
{{--                    <div class="month-filter" v-if="show_table == 'wait_to_send'">--}}
{{--                        <i class="fas fa-chevron-left" v-on:click="preMonth()">--}}
{{--                        </i>--}}
{{--                        filter_month =  @{{ filter_month }}--}}
{{--                        <div class="position-relative" >--}}
{{--                            <div class="border-input-date">--}}
{{--                                <span id="text-month"--}}

{{--                                      style="font-size: 14px; font-weight: 400; color: #51595C;">--}}
{{--                                    @{{ filter_month ? moment(filter_month, 'YYYY-MM').format('YYYY年MM月'): '-' }}</span>--}}
{{--                            </div>--}}
{{--                            <input type="month" id="filter_month" v-model="filter_month"--}}
{{--                                style="opacity: 0; position: absolute; bottom: -2px; z-index: -1">--}}
{{--                        </div>--}}
{{--                        <i class="fas fa-chevron-right" v-on:click="nextMonth()"></i>--}}
{{--                    </div>--}}

                    <div v-if="show_table == 'wait_to_send' || show_table == 'draft'">
                        <button class="btn btn-sns-line btn-sns-line-lg btn_delete_bulk"
                            @click="deleteMultipleBroadCast"
                                :class="{'active-delete': selectedIds.length > 0}"
                            :disabled="selectedIds.length == 0"
                        >
                            <i class="fal fa-trash-alt" style="padding-right: 5px;"></i>一括削除
                        </button>
                    </div>
                </div>
            </div>


            @include('basic.broadcast.v2.wait-to-send')
            @include('basic.broadcast.v2.draff')
            @include('basic.broadcast.v2.delivered')

            <div style="text-align: center; margin-top: 20px">
                全@{{ pagination.total }}件中 @{{ (pagination.per_page * pagination.current_page) - pagination.per_page + 1 }}-@{{ (pagination.per_page * (pagination.current_page - 1)) + items.length }}件を表示
            </div>
            <nav style="margin-left: auto; padding-top: 5px; position: fixed; right: 10px; bottom: 20px"
                 class="text-center"
                 :class="{'pagination-devered': true}"
                 v-if="pagination.last_page > 1">
                <ul class="pagination">
                    <li v-if="pagination.current_page > 1">
                        <a href="#" aria-label="Previous" @click.prevent="changePage(pagination.current_page - 1)" style="font-size: 14px;">
                            <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-chevron-left" style="color: #DDDDDD !important;"></i></span>
                        </a>
                    </li>
                    <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active' : '']">
                        <a href="#" @click.prevent="changePage(page)" style="font-size: 14px;">@{{ page }}</a>
                    </li>
                    <li v-if="pagination.current_page < pagination.last_page">
                        <a href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)" style="font-size: 14px;">
                            <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-chevron-right" style="color: #DDDDDD !important;"></i></span>
                        </a>
                    </li>
                </ul>
            </nav>



            <input type="file" accept="image/jpeg,image/png" v-on:change="uploadFile(event)"
                   id="input-update-file" style="opacity: 0;position: absolute;z-index: -1;">


        </section>

{{--        @include('basic.broadcast.v2.edit-broadcast')--}}

        @include('basic.broadcast.modal_preview')
		@include('layout.modal_test_list.modal_list_test')

        <modal-preview-send-test ref="modal-preview-send-test"></modal-preview-send-test>
        <modal-preview-broadcast ref="modal-preview-broadcast"></modal-preview-broadcast>

        <div class="modal fade" id="setProfileModalV2" tabindex="-1" role="dialog fade in"
             aria-labelledby="setProfileModalV2">
            <div class="modal-dialog" role="document" style="width: 700px;">
                <div class="modal-header" style="border-bottom: none; padding-bottom: 0; padding-top: 30px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px; margin-left: auto; position: relative; bottom: 5px;">
                        <span class="line-icon line-icon-close" style="line-height: 40px;">
                            <i class="fas fa-times" style="color:#7D9195; background-color: unset; position: relative;"></i>
                        </span>
                    </button>
                    <h2 class="modal-title text-center" id="myModalLabel" style="font-weight: 600; font-size: 16px; color: #222222;">
                        送信者名設定
                    </h2>
                </div>
                <div class="modal-content-profile" style="padding: 25px; padding-top: 10px;">
                    <div class="set_profile_note"
                         style="background-color: #F2F2F2; font-weight: 300; font-size: 13px; color: #222222; border-radius: 5px; padding: 15px; padding-left: 25px; ">
                        <p>LINEヤフー株式会社のサービスと誤認されるようなワードの利用はできません。</p>
                        <p>友だちトーク画面には「<span class="text-mote-header-profile">送信者名from "LINE公式アカウント名"</span>」という形で表示されます。</p>
                    </div>
                    <div style="display: flex; margin: 20px 0;">
                        <div class="add_list_title" style="font-weight: 600; font-size: 16px; color: #222222; margin: auto; width: 100%;">追加済みスタッフ一覧</div>
                        <button class="btn btn-sns-line btn-sns-line-lg btn-sns-line-primary btn_toggle_add" v-on:click="addProfile">
                            <i class="fal fa-plus" style="padding-right: 5px;"></i>送信者追加
                        </button>
                    </div>
                    <div class="sender_list sender_list_scroll">
                        <table style="margin: 0;  border-collapse: separate; border-spacing: 0 6px; background: none">
                            <thead>
                            <tr>
                                <th class="sender_table_head" style="border-left: 1px solid #FCFCFC; min-width: 65px;">選択</th>
                                <th class="sender_table_head" style="width: 72px;">イメージ</th>
                                <th class="sender_table_head" style="width: 350px;">送信者名</th>
                                <th class="sender_table_head" style="width: 70px;"></th>
                                <th class="sender_table_head" style="width: 77px;"></th>
                            </tr>
                            </thead>

                            <tbody >
                            <template v-for="(item, index) in bots_profile"

                            >
                                <tr v-if="!item.is_new && index == 0"
                                    :class="{'row-default': item.is_default == 1}"
                                >
                                    <td class="sender_table_body_input" style="min-width: 65px;">
                                        <div class="input-radio">
                                            <input type="radio"
                                                   :value="item.id"
                                                   name="sender_picked"
                                                   v-model="selectedUser"
                                                   class="custom-radio" :id="'item-profile' + item.id">
                                            <label :for="'item-profile' + item.id"></label>
                                        </div>
                                    </td>
                                    <td class="sender_table_body td-bg" style="min-width: 72px;">
                                        <label for="input-update-file"  class="wrap-img-profile">
                                            <img v-show="!item.avt_path" @error="setAltImg"
                                                 @click="showModalChooseFile(index)"
                                                 src="/images/no-image-icon-23485.png" class="img-fluid default" style="  border-radius: 30px">
                                            <img v-show="item.avt_path" @error="setAltImg"
                                                 @click="showModalChooseFile(index)"
                                                 :src="(item.avt_path && item.avt_path.startsWith('http')) ? item.avt_path : '{{ env('URL_SERVER_MEDIA') }}' + item.avt_path" class="img-fluid avatar" style="  border-radius: 30px">
                                        </label>
                                    </td>
                                    <td class="sender_table_body td-bg" style="padding: 5px;"
                                        :colspan="item.is_default == 1 ? 1 : 2"
                                            {{--                                               :style="item.is_default != 1 ? { 'min-width' : '419px'} : {} "--}}
                                    >
                                        <div style="display: flex;">
                                            <input class="form-control sender_name"
                                                   v-model="item.nick_name"
                                                   :disabled="item.disable"
                                                   type="text">


                                            <div class="btn-group" v-if="item.is_default != 1" style="margin: auto;">
                                                    <span class="focus-pointer">
                                                        <i class="far fa-ellipsis-h" style="font-size: 17px; color: #8F9293;"></i>
                                                    </span>
                                                <ul class="dropdown-menu action-broadcast" style="min-width: 70px;padding: 6px 0;text-align: center;left: -20px; top: 18px">
                                                    <li class="focus-pointer">
                                                        <div style="font-weight: 300; font-size: 13px; color: #535657;">
                                                            編集
                                                        </div>
                                                    </li>
                                                    <li class="focus-pointer" >
                                                        <div style="font-weight: 300; font-size: 13px; color: #F44336;"
                                                             @click="deleteProfileBots(item)"
                                                        >
                                                            削除
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="sender_table_body"
                                        :class="{'not-default': item.is_default != 1}"
                                        :colspan="item.is_default == 1 ? 2 : 1"
                                        :style="item.is_default != 1 ? { 'min-width' : '58px'} : {} "
                                    >

                                        <template v-if="item.is_default == 1">初期設定</template>
                                        <template v-else>
                                            <i class="fal fa-bars item_icon" style="font-size: 20px; color: #DDDDDD;"></i>
                                        </template>
                                    </td>
                                </tr>

                            </template>
                            </tbody>

                        </table>
                        <table style="margin: 0;  border-collapse: separate; border-spacing: 0 6px;  margin-top: -6px; background: none">
                            <draggable v-model="bots_profile"
                                       @start="dragging = true"
                                       @end="dragging = false"
                                       @change="sortItemProfile" tag="tbody" id="body-profile-sort">
                                <template v-for="(item, index) in bots_profile"  >
                                    <tr v-if="!item.is_new && index > 0"
                                        class="row-item-sender"
                                        style="position: relative"
                                        :class="{'row-default': item.is_default == 1}"
                                    >
                                        <td class="sender_table_body_input" style="min-width: 65px;">
                                            <div class="input-radio">
                                                <input type="radio"
                                                       :value="item.id"
                                                       name="sender_picked"
                                                       v-model="selectedUser"
                                                       class="custom-radio" :id="'item-profile' + item.id">
                                                <label :for="'item-profile' + item.id"></label>
                                            </div>
                                        </td>
                                        <td class="sender_table_body td-bg" style="min-width: 72px;">
                                            <label for="input-update-file" class="wrap-img-profile">
                                                <img v-show="!item.avt_path" @error="setAltImg"
                                                     @click="showModalChooseFile(index)"
                                                     src="/images/no-image-icon-23485.png" class="img-fluid default" style="  border-radius: 30px">
                                                <img v-show="item.avt_path" @error="setAltImg"
                                                     @click="showModalChooseFile(index)"
                                                     :src="(item.avt_path && item.avt_path.startsWith('http')) ? item.avt_path : '{{ env('URL_SERVER_MEDIA') }}' + item.avt_path" class="img-fluid avatar" style="  border-radius: 30px">
                                            </label>
                                        </td>
                                        <td class="sender_table_body td-bg" style="padding: 5px; width: 635px;"
                                            :colspan="item.is_default == 1 ? 1 : 2"
                                            :style="item.is_default != 1 ? { 'min-width' : '419px'} : {} "
                                        >
                                            <div style="display: flex;">
                                                <input class="form-control sender_name"
                                                       :disabled="item.disable"
                                                       :ref="'input-name-' + index"
                                                       v-model="item.nick_name" type="text"
                                                       @focusout="focusOutInput(index)"
                                                >
                                                <div class="btn-group" v-if="item.is_default != 1" style="margin: auto;">
                                                            <span class="focus-pointer">
                                                                <i class="far fa-ellipsis-h" style="font-size: 17px; color: #8F9293;"></i>
                                                            </span>
                                                    <ul class="dropdown-menu action-broadcast" style="min-width: 70px;padding: 6px 0;text-align: center;left: -20px; top: 18px">
                                                        <li class="focus-pointer">
                                                            <div style="font-weight: 300; font-size: 13px; color: #535657;"
                                                                 @click="focusInput(index)"
                                                            >
                                                                編集
                                                            </div>
                                                        </li>
                                                        <li class="focus-pointer" >
                                                            <div style="font-weight: 300; font-size: 13px; color: #F44336;"
                                                                 @click="deleteProfileBots(item)"
                                                            >
                                                                削除
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>

                                        <td class="sender_table_body"
                                            :class="{'not-default': item.is_default != 1}"
                                            :colspan="item.is_default == 1 ? 2 : 1"
                                            :style="item.is_default != 1 ? { 'min-width' : '58px'} : {} "
                                        >

                                            <template v-if="item.is_default == 1">初期設定</template>
                                            <template v-else>
                                                <i class="fal fa-bars item_icon" style="font-size: 20px; color: #DDDDDD;"></i>
                                            </template>
                                        </td>
                                    </tr>
                                </template>
                            </draggable>
                        </table>

                        <table style="margin: 0; margin-top: 3px; background: none"
{{--                               v-show="show_add_profile" --}}

                               id="table-change-profile" class="table-profile-default">
                            <template v-for="(item, index) in bots_profileNew"
                            >

                                <tr class="row-default"
                                    v-if="item.is_new"
                                >
                                    <td class="sender_table_body_input" style="width: 65px; min-width: 65px"></td>
                                    <td class="sender_table_body">
                                        <label for="input-update-file" class="wrap-img-profile" style="position: relative;" id="change-img-profile">
                                            <img v-show="!item.avt_path" @error="setAltImg"
                                                 @click="showModalChooseFile(index, 'new')"
                                                 src="/images/no-image-icon-23485.png"
                                                 class="img-fluid default preview-default-profile-new"
                                                 style="  border-radius: 30px">

                                            <img v-show="item.avt_path" @error="setAltImg"
                                                 @click="showModalChooseFile(index, 'new')"
                                                 :src="(item.avt_path && item.avt_path.startsWith('http')) ? item.avt_path : '{{ env('URL_SERVER_MEDIA') }}' + item.avt_path"
                                                 class="img-fluid avatar preview-profile-new" style="  border-radius: 30px">
                                        </label>
                                    </td>
                                    <td colspan="2" class="sender_table_body">
                                        <div style="display: flex;">
                                            <input class="form-control sender_name input-change-name"
                                                   v-model="item.nick_name"
                                                   placeholder="送信者名を入力してください">
                                            <button class="btn btn-sns-line btn-sns-line-success btn_add_sender"
                                                    @click="saveBotProfileV2(index, 'new')"
                                            >登録</button>
                                        </div>
                                    </td>
                                    <td style="width: 58px; min-width: 58px">

                                    </td>
                                </tr>
                            </template>



                        </table>
                    </div>
                    <div>
                        <button class="btn btn-sns-line btn-sns-line-lg btn-sns-line-success"
                                @click="saveUserProfile"
                                style="margin: auto; margin-top: 25px; width: 150px; background-color: #E5F5EC; color: #08BF5A !important;">保存</button>
                    </div>

                    <input type="hidden" id="sort-profile">
                </div>
            </div>
        </div>

        <!--modal confirm add template-->
        <div class="modal fade" id="confirmAddTemplate"  data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog fade in"
                 aria-labelledby="confirmAddTemplate">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="border: 0;display: block;padding: 15px;">
                    <div class="modal-body modal-body-set-profile" style="max-height: 486px;overflow: auto;">
                        <div class="row">
                            <div class="option-add-template">
                                <div class="radio-cus">
                                    <input v-model="option_add_template" name="radio-add-template" type="radio" style="display: none;" value="1" id="option-add-template-1" checked/>
                                    <label for="option-add-template-1">テンプレートをそのまま利用する <br/>元のテンプレートが編集されたら、自動的に編集が適用されます</label>
                                </div>
                            </div>

                            <div class="option-add-template">
                                <div class="radio-cus">
                                    <input v-model="option_add_template" name="radio-add-template" type="radio" style="display: none;" value="2" id="option-add-template-2"/>
                                    <label for="option-add-template-2">テンプレートを引用して編集する <br/>元のテンプレートが編集されても、編集は適用されません</label>
                                </div>
                            </div>
                        </div>
                        <div style="text-align: center; display: flex; justify-content: center;">
                            <button @click="cancelAddTemplateToStepMessage()" class="btn btn-sns-line btn-sns-line-secondary" style="width:160px;margin-right: 20px;">戻る</button>
                            <button @click="showModalTemplate()" class="btn btn-sns-line btn-sns-line-primary" style="width:160px">テンプレート選択</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </article>

    <style>
        #list-choose-test-modal table td{
            border: 1px solid #eee !important;
        }
        #list-choose-test-modal table th{
            background: #3c8dbc !important;
        }
        #list-choose-test-modal table{
            margin: 10px 0 !important;
        }
        #list-choose-test-modal .box-search{
            display: flex;
            align-items: center;
        }
        #list-choose-test-modal {
            padding: 0 !important;
            display:none;
            font-size: 14px;
        }
    </style>
    <div id="list-choose-test-modal" class="modal fade "  data-keyboard="false"
         tabindex="-1" role="dialog" aria-labelledby="list-choose-test-modal">
        <span class="id_page" data-id="message-send-all"> </span>
        <span class="event-from-page" data-id="page"> </span>
        <span class="position_template" data-id="1"> </span>
            <div class="modal-dialog" >
                <div id="" class="modal-header">

                    <button type="button" aria-label="Close" class="close" data-dismiss="modal" style="opacity: unset;font-size: 34px;" v-on:click="closeModal()">
                        <span aria-hidden="true" style="color: black !important;">×</span>
                    </button>
                </div>

                <div id="media_modal_body" class="modal-body modal-body-main" style="max-height: 70vh; overflow-y: auto;">
                    <div class="inner">
                        <h3>設定済みテストアカウント</h3>
                        <table>
                            <thead>
                            <tr>
                                <th style="width: 20%;">配信</th>
                                <th>イメージ
                                </th>
                                <th>名前
                                </th>
                                <th style="width: 20%;"> </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-if="items_test.length > 0" v-for="(item, index) in items_test">
                                <td v-if="item"><input type="checkbox" name="check_item[]" :value="item.id" v-model="selectedTester"></td>
                                <td v-if="item"> <img :src="displayAvatar(item.avatar_url)" @error="setAltImg" alt="avt-img" class="img_responsive" style="max-width: 100px">
                                </td>
                                <td v-if="item"> @{{item.name}}</td>
                                <td v-if="item">
                                    <button class="btn btn-danger" type="button" v-on:click="removeTest(item.id)">削除</button>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                        <div class="text-center">
                            <button class=" btn btn-success center" type="button" v-on:click="sendForTest()">テスト送信
                            </button>
                        </div>


                        <h3>テストアカウント追加</h3>
                        <div class="box-search">
                            <input type="text"
                                   style="width: 50%;"
                                   name="keyword"
                                   id="keyword"
                                   v-model="keyword"
                                   placeholder="テストアカウント名">

                            <div class="btn">
                                <button type="button" v-on:click="searchLineUser()" class="btn btn-default" style="width: 100px; padding: 5px 12px;">検索
                                </button>
                            </div>
                        </div>


                        <table  v-if="items_line_uer_search.length > 0">
                            <thead>
                            <tr>
                                <th style="width: 20%;">配信</th>
                                <th>イメージ
                                </th>
                                <th>名前
                                </th>

                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in items_line_uer_search" >
                                <td v-if="item">
                                    <div class="btn" v-if="item.is_tester == 0">
                                        <button type="button" class="btn btn-success" style="width: 100px;" v-on:click="addTest(item.id)" >追加</button>
                                    </div>
                                    <div class="btn" v-else>
                                        <button type="button" class="btn btn-success" style="width: 100px;" disabled >追加済み</button>
                                    </div>
                                </td>
                                <td v-if="item"> <img :src="displayAvatar(item.avatar_url)" @error="setAltImg" alt="avt-img" class="img_responsive" style="max-width: 100px">
                                </td>
                                <td v-if="item"> @{{item.name}}</td>

                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
    </div>



    <div class="modal fade" id="editBroadCastModal" style="margin-left: 15%; margin-top: 5%">
        <div class="modal-dialog inner">
            <form class="form-horizontal" id="editBroadCastForm" autocomplete="off">
                {{ csrf_field() }}
                <input autocomplete="false" name="hidden_edit" type="text" class="hidden">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" style="color:#000;text-align: center;font-weight: bold;">【 配信タイミング設定 】</h4>
                </div>

                <div class="modal-body" style="margin: 10px 35px 10px 35px">
                    <input type="radio" name="setting_time_send_edit" id="now_send" value="0">メッセージ登録後すぐに配信
                    <br>
                    <div style="margin-bottom: 10px"></div>
                    <input type="radio" name="setting_time_send_edit" id="setting_send" value ="1" checked>配信予約
                    <span id="show_time_send_edit" style="display: none">
                    <input type="text" class="date-picker" id="setting_day_edit" data-provide="datepicker" readonly name="b_send_day_edit" style="border: 1px solid #bbb;width: 150px;height: 25px;border-radius: 4px">
                    <input type="text" class="scenario_time" id="setting_time_edit" name="b_send_time_edit" readonly style="border: 1px solid #bbb;width: 80px;height: 25px;border-radius: 4px"> に配信
                    </span>
                </div>
                <input type="hidden" id="broadCastEditId">
                <div class="modal-footer" style="text-align: center">
                    <button type="submit" class="btn btn-primary btn-create" style="border-radius: 20px;background-color: rgba(8,191,90,1);;width: 120px" >登録</button>
                </div>
            </form>
        </div>
    </div>
    <div class="modal-overlay" style="display: none"></div>
    <input type="hidden" id="broadcastFilter">
    @include('basic.template_v2.common.modal.modal-preview-send-test')
    @include('basic.template_v2.common.modal.broadcast.modal-preview-draff-delivered')
    @include('basic.step_message.preview_step')

    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')

    @include('basic.filter.filter_input')
@endsection
@push('js')
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/chat_files/bootstrap-timepicker.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <script>
        var token = "{!! csrf_token() !!}";
        var basic_home_new = [];
        var list_status = null;
        list_status.forEach(function (item) {
            basic_home_new.push({
                k: item.id,
                text: item.name_status,
                bg: item.color,
                'class': 'default',
                show: !1,
                stt: 1,
                value: item.id
            });
        });
        var params = [];
        var getScenario = null;
        var conversion = null;
        $( function() {
            if($('#flagImport').val() == 1){
                window.location.href = '/basic/message-send-all';
                alert('配信処理中です。編集できません。');
            }else if($('#flagImport').val() == 2){
                window.location.href = '/basic/message-send-all';
                alert('既に配信済のため変更できません。');
            }
        });
        $( function() {
            $( "#setting_day" ).datepicker({
                dateFormat: 'yy-mm-dd',
                language: 'ja',
                minDate: '0',
            });
        } );
        $( function() {
            $( "#setting_day_edit" ).datepicker({
                dateFormat: 'yy-mm-dd',
                language: 'ja',
                minDate: '0',
            });
        } );
        var token = "{!! csrf_token() !!}";
        $(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 () {
            $('input[name="setting_time_send"]:radio' ).change( function() {
                if($(this).val() == '0'){
                    $('#show_time_send').hide();
                }else{
                    $('#show_time_send').show();
                }
            });
        })

        $('input[name="setting_time_send_edit"]:radio' ).change( function() {
            if($(this).val() == '0'){
                $('#show_time_send_edit').hide();
            }else{
                $('#show_time_send_edit').show();
            }
        });

        $(function () {

            $('.scenario_time').timepicker({
                timeFormat: 'HH:mm',
                template: 'dropdown',
                appendWidgetTo: 'body',
                minuteStep: 1,
                showMeridian: false

            });
        });

        var typeTab = '{{ $typeTab ? $typeTab : 'wait_to_send' }}';
    </script>

    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

    <script src="/js/my_page/Sortable.min.js"></script>
    <script src="/js/my_page/vuedraggable.min.js"></script>

    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/chat_files/emojione.js?v={{config('sns-line.version')}}"></script>
    <script src="/chat_files/emojionearea.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/form_answer/vee-validate_ja.min.js"></script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{config('sns-line.version')}}"></script>
    <script type="application/javascript" src="/js/popup_send_test-message.js?v={{config('sns-line.version')}}"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/ja.js" integrity="sha512-V1Dk1yqQSdX0uqRNFeRWCKg29Zb4rqHiAkYxnj+c+s7ijh8FZlOPzjwbSLzccKncFyAs5rMYuuh6xsa8kHuB6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="application/javascript" src="/js/broadcast/index.js?v={{config('sns-line.version')}}"></script>

@endpush