@extends('layout.basic.main')
@section('title',empty($reply_id)? '自動応答（作成）':'自動応答（編集）')
@push('css')
    <link rel="stylesheet" href="/css/reply/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>
        #tab-menu-mypage select {
            appearance: auto!important;
        }
        .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-backdrop.in {
            display: none !important;
        }

        #newFunnelModal .left-button .fa-plus-circle {
            font-size: 14px;
            font-weight: 600;
            align-items: center;
            top: 16px;
        }
        #newFunnelModal .close {
            top: 0 !important;
        }

        #newFunnelModal .tem_choice {
            width: 100%;
            display: flex;
            display: -webkit-flex;
        }

        #newFunnelModal .tem_choice > ul {
            width: 40%;
            height: 150px;
            overflow: scroll;
            margin-right: 2%;
            border: 1px solid #eee;
        }

        #show_action_reply span {
            font-weight: 600;
            color: #51595C;
        }
    </style>
@endpush
@section('content')
    <div class="container-fluid">
        <div class="row" id="detail_auto_reply">
            <div class="col-xs-12">
                <div class="row">
                    @if(empty($reply_id))
                    <h2 style="font-size: 20px; font-weight: bold; padding: 10px 10px 0 0">自動応答</h2>
                    @endif
                        @if(!empty($reply_id))
                            <h2 style="font-size: 20px; font-weight: bold; padding: 10px 10px 0 0">自動応答編集</h2>
                            @endif
                </div>
            </div>
            <input type="hidden" id="reply_id" @if(!empty($reply_id)) value="{{ $reply_id }}" @endif>
            <input type="hidden" id="copy_id" @if(!empty($copy_id)) value="{{ $copy_id }}" @endif>
            <div class="col-xs-12 col-sm-12 col-md-12" style="padding-right: 0">
                <div class="row">
                    <div class="col-sm-12" style="margin-left: -14px">
                        <br>
                        <form method="POST" action="{!! route('storeItemReply') !!}"
                              accept-charset="UTF-8"
                              class="msgform">
                            <input name="_token" type="hidden"
                                   value="{!! csrf_token() !!}">

                            <div class="row">
                                <div class="col-sm-6 ">
                                    <div class="group-item-reply" style="margin-bottom: 0">
                                        <div class="bor-title">
                                            アクション稼働対象絞り込み
                                        </div>

                                    </div>
                                    <div style="display: flex;
                                                align-items: center;
                                                justify-content: space-between;
                                                width: calc(65% + 170px);
                                                margin-bottom: 15px;">
                                        <div>
                                            <input type="radio" name="is_apply_active_friend"
                                                   v-model="data_reply.is_apply_active_friend"
                                                    value="1"><span style="font-weight: 600;color: #51595C">有効友だち</span>
                                            <input type="radio" name="is_apply_active_friend" style="margin-left: 27px;"
                                                   v-model="data_reply.is_apply_active_friend"
                                                   value="0"><span style="font-weight: 600;color: #51595C">ブロックした友だち</span>

                                        </div>
                                       <div class="" style="padding-top: 0; margin-left: 60px">
                                            <a id="openFilterModal" @click="openModalFilter()" class="btn btn-primary" style="border: unset;font-weight: 600;width: 104px; font-size: 14px; background: #5799DB"
                                            >絞込み</a>
                                        </div>
                                    </div>
                                    <div style="padding: 15px;background: #F6F6F6; font-size: 14px;font-weight: 600;width: calc(65% + 170px);">
                                        <div class="group-item-reply" style="margin-bottom: 15px">
                                           <div style="font-weight: 600">対象人数</div>
                                            <div v-show="count_filter >= 0" id="count_filter" style="margin-left: 20px" hidden><a href="#" style="cursor: pointer;font-weight: 600;text-decoration: underline" @click="showNumberFilter()">@{{ count_filter }}人</a></div>
                                        </div>
                                        <div class="row" style="margin-bottom: 0">
                                            <div class="col-sm-2" style="font-weight: 600;width: 77px;padding-right: 0">対象条件</div>
                                            <div class="col-sm-9" id="preview_filter" style="width: 80%;padding-right: 0" hidden>
                                                <div v-for="(preview, index) in list_preview_filter" style="font-weight: 600">
                                                    @{{ preview }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6" style="padding-left: 0">
                                    <div class="group-item-reply" style="margin-bottom: 0">
                                        <div class="bor-title">
                                            フォルダ
                                        </div>
                                    </div>
                                    <div class="group-item-reply" style=";margin-bottom: 50px;width: calc(65% + 180px);">
                                            <select class="form-control" name="group_choose" id="type_reaction" v-model="data_reply.category_id">
                                                <option value="0">未分類</option>
                                                @if(!empty($group) && count($group) > 0)
                                                    @foreach($group as $item)
                                                        <option value="{{$item->id}}">{!! $item->name !!}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 ">
                                    <div class="bor-title">
                                        キーワード設定
                                    </div>
                                    <div class="group-item-reply" style="margin-bottom: 0;">
                                        <div class="title-child">利用設定</div>
                                        <div style="width: 65%">
                                            <select  class="form-control" name="keyword_reaction_type" id="type_reaction" @change="changeTypeReaction('keyword')" v-model="data_reply.keyword_reaction_type">
                                                <option value="0">全てのメッセージに反応</option>
                                                <option value="1">設定したキーワードに反応</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="group-item-reply" style="margin-top: 10px; margin-bottom: 30px;">
                                        <div class="title-child" style="padding: 0;"></div>
                                        <div style="width: 65%">
                                            <label>
                                                <input type="checkbox" name="is_no_reply_button" v-model="data_reply.is_no_reply_button"/>【〇〇】のメッセージには反応させない
                                            </label>
                                        </div>
                                    </div>
                                    <div class="group-item-reply" v-show="data_reply.keyword_reaction_type == 1">
                                        <div class="title-child">反応条件</div>
                                        <div style="width: 65%">
                                            <select class="form-control" name="condition_reply" id="condition_reply" v-model="data_reply.logical">
                                                <option value="1">全てのキーワードに当てはまる時に反応</option>
                                                <option value="0">どれか1つのキーワードに当てはまる時に反応</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div v-show="data_reply.keyword_reaction_type == 1" v-for="(word,indexWord) in list_keyword" :style="indexWord != (list_keyword.length -1) ? 'margin-bottom: 10px' : ''">
                                        <div class="group-item-reply" style="margin-bottom: 0">
                                        <div class="title-child" v-if="indexWord == 0">キーワード</div>
                                        <div class="title-child" style="background: unset"  v-if="indexWord != 0"></div>
                                            <input class="form-control input_keyword" onfocusout="shortKeyword(this)" style="width: 35%"  name="keyword" v-model="word.keyword">
                                            <div style="width: 2%"></div>
                                            <div style="width: 15%">
                                                <select class="form-control" name="type_map_keyword" id="type_reaction" v-model="word.logical">
                                                    <option value="0">完全一致</option>
                                                    <option value="1">部分一致</option>
                                                </select>
                                            </div>
                                            <div class="icon-setting" v-if="list_keyword.length > 1">
                                                <i class="fal fa-trash-alt hover-icon-action" style="font-size: 21px;padding: 6px 6px 6px 7px" v-on:click="removeKeyword(indexWord)"></i>
                                            </div>
                                            <div class="icon-setting" v-if="indexWord == (list_keyword.length -1)">
                                                <i class="fal fa-plus-circle hover-icon-action" v-on:click="addKeyWord()"></i>
                                            </div>
                                        </div>
                                        <div class="group-item-reply" style="margin-bottom: 0">
                                            <div class="title-child" style="background: unset"></div>
                                            <div class="error-reply error-word" :id="'error_keyword_'+indexWord"></div>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-sm-6 " style="padding: 0">
                                    <div class="bor-title">
                                        スケジュール設定
                                    </div>
                                    <div class="group-item-reply">
                                        <div class="title-child">反応設定</div>
                                        <div style="width: 65%">
                                            <select class="form-control" name="time_reaction_type" id="condition_reply" @change="changeTypeReaction('time')" v-model="data_reply.time_reaction_type">
                                                <option value="0">常に（24時間/365日）反応する</option>
                                                <option value="1">反応する曜日・時間を設定する</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="group-item-reply" v-show="data_reply.time_reaction_type == 1" style="margin-bottom: 0">
                                        <div class="title-child">曜日設定</div>
                                        <div class="checkbox-inline">
                                            <label style="font-weight: 600">
                                                <input type="checkbox" id="check_all_day" name="check_all" value="all" @change="checkAllDay()" >全選択
                                            </label>
                                        </div>
                                        <div class="checkbox-inline">
                                            <label style="font-weight: 600">
                                                <input type="checkbox" class="week" name="list_day" id="week_1" value="1" @change="checkDay('1')"> 月
                                            </label>
                                        </div>
                                        <div class="checkbox-inline">
                                            <label style="font-weight: 600">
                                                <input type="checkbox" class="week" name="list_day" id="week_2" value="2" @change="checkDay('2')"> 火
                                            </label>
                                        </div>
                                        <div class="checkbox-inline">
                                            <label style="font-weight: 600">
                                                <input type="checkbox" class="week" name="list_day" id="week_3" value="3" @change="checkDay('3')"> 水
                                            </label>
                                        </div>
                                        <div class="checkbox-inline">
                                            <label style="font-weight: 600">
                                                <input type="checkbox" class="week" name="list_day" id="week_4"  value="4" @change="checkDay('4')"> 木
                                            </label>
                                        </div>
                                        <div class="checkbox-inline">
                                            <label style="font-weight: 600">
                                                <input type="checkbox" class="week" name="list_day" id="week_5" value="5" @change="checkDay('5')"> 金
                                            </label>
                                        </div>
                                        <div class="checkbox-inline">
                                            <label style="font-weight: 600">
                                                <input type="checkbox" class="week" name="list_day" id="week_6" value="6" @change="checkDay('6')"> 土
                                            </label>
                                        </div>
                                        <div class="checkbox-inline">
                                            <label style="font-weight: 600">
                                                <input type="checkbox" class="week" name="list_day" id="week_0" value="0" @change="checkDay('0')" > 日
                                            </label>
                                        </div>
                                    </div>
                                    <div class="group-item-reply" style="margin-bottom: 0">
                                        <div class="title-child" style="background: unset"></div>
                                        <div class="error-reply" id="error_week"></div>
                                    </div>
                                    <div class="group-item-reply" v-show="data_reply.time_reaction_type == 1" style="margin-top: 22px;margin-bottom: 0">
                                        <div class="title-child">時間帯設定</div>
                                        <div class="input-group" style="display: flex">
                                            <div>
                                            <input style="width: 150px;border-radius: 4px;padding-left: 55px;height: 34px" class="form-control timepicker_min" name="hour_from" id="hour_from" type="text">
                                            <i class="icon-time fal fa-clock-o" style="left: 7px; top:8px"></i>
                                            </div>
                                            <div style="margin:7px;font-size: 12px;font-weight: 600">から</div>
                                            <div>
                                            <input style="width: 150px;border-radius: 4px;padding-left: 55px;height: 34px" class="form-control timepicker_min" name="hour_to" id="hour_to" type="text">
                                            <i class="icon-time fal fa-clock-o" style="left: 195px;top:8px"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="group-item-reply" style="margin-bottom: 10px">
                                        <div class="title-child" style="background: unset"></div>
                                        <div class="error-reply" id="error_time"></div>
                                    </div>

                                </div>

                            </div>
                            <div class="row">
                                <div class="col-sm-8 ">
                                    <div class="group-item-reply" style="margin-bottom: 10px">
                                        <div class="bor-title">
                                            アクション設定
                                        </div>
                                        <input type="radio" name="number_action" v-model="data_reply.response_number" style="margin: 0 7px 3px 50px" value="1"><span style="font-weight: 600;color: #51595C">1度のみアクション稼働</span>
                                        <input type="radio" name="number_action" v-model="data_reply.response_number" style="margin: 0 7px 3px 30px"  value="0"><span style="font-weight: 600;color: #51595C">何度でもアクション稼働</span>
                                    </div>
                                    <div class="group-item-reply" style="margin-left: 23px">
                                        <div v-show="data_reply.action_id != null && detail_action_reply && detail_action_reply.length > 0" style="width: 280px;display: none" id="show_action_reply">
                                            <div style="text-align: right;width: 280px;margin-bottom: 10px">
                                        <span style="cursor: pointer;width:100px;color: #5799DB;text-decoration-line: underline"
                                              v-on:click="openSettingAction(data_reply.action_id)">
                                            <span v-if="detail_action_reply && detail_action_reply.length > 3" style="color: rgb(87, 153, 219)">
                                                その他@{{ detail_action_reply.length - 3 }}件
                                            </span> 編集</span>
                                            </div>
                                            <div class="item-act-display" style=""
                                                 v-for="(item, indexAction) in detail_action_reply"
                                                 v-if="item.type" :class="indexAction > 2 ? 'toggle-detail-action-reply' : ''" :hidden="indexAction > 2">
                                                 @include('layout.modal_setting.label_action')
                                            </div>
                                        </div>
                                        <button v-show="data_reply.action_id == null || !detail_action_reply || detail_action_reply.length == 0" type="button" id="btn_open_action" class="btn btn-warning btn-sm" style="outline: unset;display: none;border: unset;width: 100px; background-color: rgba(254,195,0,1);font-weight: 600"
                                                v-on:click="openSettingAction(data_reply.action_id)">設定する</button>

                                    </div>
                                </div>
                            </div>
                            <br>
                            <br>
                            <br>
                            <div class="text-center">
                                <a href="{!! route('basicReply') !!}" class="btn btn-lg btn-success" style="font-weight: 600;border: unset;background-color: #F6F6F6;color: #51595C;width: 200px" >戻る</a>
                                <button class="btn btn-lg btn-success" style="border: unset;margin-left: 20px;background-color: #08BF5A;width: 200px;font-weight: 600" type="button" @click="saveReply()">登録</button>
                            </div>
                        </form>
{{--                        <a href="{!! route('basicReply') !!}">戻る</a>--}}
                    </div>
                </div>
            </div>
        </div>
    </div>
{{--    @include('basic.filter.modal_filter')--}}
    <span class="id_page" data-id="basic-reply-new"> </span>
    <input type="hidden" name="botIdCurrent" id="botIdCurrent"  @if(!empty($bot_id)) value="{{$bot_id}}" @endif/>
    @include('layout.modal_setting.modal_select_action')
{{--    @include('layout.modal_test_list.modal_list_test')--}}
    @include('layout.modal_filter_v2')
@endsection
@push('js')
    <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;
        var group_id = null;
    </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/friendlist/modal_filter_v2.js?v={{config('sns-line.version')}}"></script>
{{--    <script src="/js/reply/filter.js?v={{config('sns-line.version')}}"></script>--}}
    <script src="/js/reply/create.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/reply/core_autoreply.js?v={{config('sns-line.version')}}"></script>

@endpush