@extends('layout.basic.main')
@section('title','リッチメニュー（表示・停止の設定）')
@push('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="{{asset('css/form_answer/common-v3.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">
    <link rel="stylesheet" href="/_assets/commons/css/lme_custom.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/breadcrumbs.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/calendar_control.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/css/menu_rich/v2/setting_display.css?v={{config("sns-line.version")}}" type="text/css">
@endpush
@section('content')
    <div id="setting-display" v-cloak>
        <div class="mt-4">
{{--            <div class="card-br">--}}
{{--                <a class="font-s14 cursor-pointer" @click="backToList()">TOP</a>--}}
{{--                <span class="color-gray1 font-s14">></span>--}}
{{--                <span class="color-text font-s14">リッチメニュー表示・停止の設定</span>--}}
{{--            </div>--}}
            <nav class="breadcrumb breadcrumb01">
                <ul>
                    <li><a href="/basic/rich-menu">TOP</a></li>
                    <li>リッチメニュー表示・停止の設定</li>
                </ul>
            </nav>
            <div class="page-title">@{{ richMenu.name }}</div>
        </div>
        <div class="head box-content">
            <div class="title mt-2">
                <span class="font-s16 color-text">このリッチメニューが表示されている友だち</span>
                <div v-if="richMenu.count_line_user > 0">
                    <a class="txt-a-link font-s20" target="_blank" :href="'/basic/friendlist?rich_menu_id=' + idRich">@{{ richMenu ? formatNumber(richMenu.count_line_user) : 0 }}</a>
                    <span>人</span>
                </div>
                <div v-if="richMenu.count_line_user == 0">
                    <span>0人</span>
                </div>
            </div>
            <img v-if="richMenu.url_image" class="img-rich mt-3"   :src="'{{ e(env('URL_SERVER_MEDIA')) }}' + richMenu.url_image"
                 :alt="richMenu.url_image">
            <div class="title mt-3">リッチメニュー 表示・停止の操作</div>
            <div class="gr-btn-choose d-flex justify-content-start mt-3">
                <span class="btn-item ":class="richMenu.status_rich == 1 ? 'active' : ''" v-on:click="changeTabDisplay(1)"><i class="fal fa-mobile"></i> 表示する</span>
                <span class="btn-item" :class="richMenu.status_rich == 0 ? 'active' : ''" v-on:click="changeTabDisplay(0)"><i class="fal fa-ban"></i>停止する</span>
            </div>
            <div class="setting-time">
                <div class="title mt-4">@{{ richMenu.status_rich == 1 ? '表示予約' : '停止予約' }}</div>
                <div class="mt-4 ml-2" style="font-size: 14px; font-weight: 300; color: #222222;" v-if="richMenu.status_rich == 1">表示日時が到来すると、自動的にこのリッチメニューを表示します。</div>
                <div class="mt-4 ml-2" style="font-size: 14px; font-weight: 300; color: #222222;" v-else>
                    <div>停止日時が到来すると、自動的にこのリッチメニューの表示を停止します。</div>
                    <div v-if="richMenu.status_rich == 0 && history.type == 2">※ 対象人数が多い場合、処理完了まで数分かかる場合があります。</div>
                </div>
                {{-- [#38867] CR-06: 2 radio 表示予約 xếp cùng một hàng ngang --}}
                <div class="radio radio02 radio-inline mt-2 ml-2">
                    <div class="radioList">
                        <input type="radio" value="1" name="history-type" id="type-now" v-model="history.type">
                        <label class="font-s14 color-text" for="type-now">
                            @{{ richMenu.status_rich == 1 ? '表示日時を設定しない（すぐに表示する）' : '停止日時を設定しない（すぐに停止する）' }}
                        </label>
                    </div>
                    <div class="radioList">
                        <input type="radio" value="2" name="history-type" id="type-timer" v-model="history.type" @change="changeHistoryType()">
                        <label class="font-s14 color-text" for="type-timer">
                            @{{ richMenu.status_rich == 1 ? '表示日時を設定する' : '停止日時を設定する' }}
                        </label>
                    </div>
                </div>
                <div class="d-flex flex-column" v-if="history.type == 2">
                    <div class="form-date">
                        <div class="label">@{{ richMenu.status_rich == 1 ? '表示開始日時' : '停止日時' }}</div>
                        <div class="date date01">
                            <div class="date-box">
                                <input type="text"
                                       id="e_datepicker01"
                                       placeholder="日付を選択"
                                       autocomplete="off">
                                <button class="clear-btn" @click="setMessageErrorDateSetting()">
                                    <i class="far fa-times-circle"></i>
                                </button>
                            </div>
                        </div>
                        <div class="timepicker timepicker01">
                            <div class="timepicker-box">
                                <input type="text"
                                       id="e_timepicker01"
                                       placeholder="時間を選択"
                                       autocomplete="off">
                                <button class="clear-btn" @click="setMessageErrorDateSetting()">
                                    <i class="far fa-times-circle"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="error-date" class="font-s14 font-w-normal color-red ml-2"></div>
                </div>
            </div>
            <div v-show="richMenu.status_rich == 1">
                <div class="title mt-4">リッチメニューを表示する友だちを選択</div>
                <div class="mt-2 d-flex align-items-center font-s14 font-w-medium color-text ml-2">
                    <svg class="mr-2" id="info-circle-outlined" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                        <rect id="矩形" width="16" height="16" fill="#F44336" opacity="0"/>
                        <path id="形状" d="M7,14a7,7,0,1,1,7-7A7.008,7.008,0,0,1,7,14ZM7,1.187A5.813,5.813,0,1,0,12.812,7,5.82,5.82,0,0,0,7,1.187Z" transform="translate(1 1)" fill="#F44336"/>
                        <path id="形状-2" data-name="形状" d="M1.125,7H.375A.125.125,0,0,1,.25,6.875V2.625A.125.125,0,0,1,.375,2.5h.75a.125.125,0,0,1,.125.125v4.25A.127.127,0,0,1,1.125,7ZM.75,1.5A.75.75,0,1,1,1.5.75.751.751,0,0,1,.75,1.5Z" transform="translate(7.25 4.5)" fill="#F44336"/>
                    </svg>他のリッチメニューが表示されている場合も、このリッチメニューに切り替わります。
                </div>
                {{-- [#38867] CR-04: đổi nhãn radio type_filter=0 (chỉ đổi chữ, value giữ nguyên) --}}
                {{-- [#38867] CR-05: dòng link 「（今後追加される友だちへの表示方法はこちら）」 --}}
                <div class="radio radio02 radio-stack mt-4 ml-2">
                    <div class="radioList radioList-auto">
                        <input type="radio" value="0" name="radio" id="radio01" v-model="type_filter">
                        <label class="font-s14 color-text" for="radio01">
                            現在エルメ上に表示されている友だち全員
                        </label>
                    </div>
                    <div class="note-friend-add font-s14">
                        （今後追加される友だちへの表示方法は<a href="https://lme.jp/manual/friend-add-richmenu/" target="_blank">こちら</a>）
                    </div>
                    <div class="radioList">
                        <input type="radio" value="1" name="radio" id="radio02" v-model="type_filter" >
                        <label class="font-s14 color-text" for="radio02">
                            個別に選択する
                        </label>
                    </div>
                </div>
{{--                <div class="mt-3 font-s16 font-w-medium color-text">※他のリッチメニューが表示されている場合も切り替わります</div>--}}
                <div class="filter mt-4" v-if="type_filter == 1">
                    <div class="f-head d-flex justify-content-between align-items-center">
                        <div class="d-flex">
                            <span class="font-s14 font-w-bold color-text mr-3">対象人数</span>
                            <a class="font-s14 font-w-bold txt-a-link" id="count_filter" @click="showNumberFilter()" >@{{ formatNumber(count_filter) }}人</a>
                        </div>

                        <div class="c-btn btn-filter-friend" v-if="type_filter == 0">絞り込み条件 登録・編集</div>
                        <div @click="openModalFilter()"  class="c-btn btn-filter-friend-active" v-if="type_filter == 1">絞り込み条件 登録・編集</div>
                    </div>
                    <div class="f-content">
                        <div v-if="list_preview_filter.length == 0" class="none-friend">絞り込み条件が登録されていません</div>
                        <div v-else class="has-filter-box">
                            <div v-for="(preview, index) in list_preview_filter" >
                                @{{ preview }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-show="richMenu.status_rich == 0">
                <div class="title mt-4">リッチメニューを停止する友だち</div>
                <div class="radio radio02 mt-4">
                    <div class="radioList" style="width: 320px">
                        <input type="radio" value="1" name="is_stop_all" id="is_stop_all" v-model="is_stop_all">
                        <label class="font-s14 color-text" for="is_stop_all">
                            このリッチメニューが表示されている全員
                        </label>
                    </div>
                    <div class="radioList font-w-bold">
{{--                        対象人数 <a class="txt-a-link font-s14 ml-2" href="/basic/friendlist" target="_blank">@{{ formatNumber(allFriend) }}人</a>--}}
{{--                        <span class="title">対象人数</span> <a class="txt-a-link font-s14 ml-2"  :href="'/basic/friendlist?rich_menu_id=' + idRich" target="_blank">@{{ richMenu ? formatNumber(richMenu.count_line_user) : 0 }}人</a>--}}
                    </div>
                </div>
                <div class="font-s14 color-text font-w-medium ">友だちごとにリッチメニューを停止したい場合は、<a class="underline" href="https://lme.jp/manual/rich_menu_display/#multiple" target="_blank">友だちリストから一括操作</a>を行なってください。</div>

            </div>

            <div class="d-flex justify-content-between mt-4 mb-3">
                <div class="c-btn btn-back" @click="backToList">戻る</div>
                <div class="c-btn btn-confirm" v-on:click="showModalConfirmDisplay()">リッチメニュー表示の確認にすすむ <span class="ml-x">></span></div>
{{--                <div class="c-btn btn-confirm"  v-show="richMenu.status_rich == 0" v-on:click="showModalConfirmStop()">リッチメニュー停止の確認にすすむ<span class="ml-x">></span></div>--}}
            </div>

        </div>
        @include('basic.rich_menu.v2.modals.confirm_setting_display')
        @include('basic.rich_menu.v2.modals.setting_display_success')
        @include('basic.rich_menu.v2.modals.confirm_setting_stop')
        @include('basic.rich_menu.v2.modals.setting_stop_success')
        @include('basic.rich_menu.v2.modals.confirm_upgrade_filter')
    </div>
    @include('layout.modal_filter_v2')
@endsection

@push('js')
    <script>
        var idRich = '{{$idRich}}';
        var params = [];
        var basic_home_new = [];
    </script>
    <script src="/chat_files/bootstrap-timepicker.js"></script>
    <script src="/_assets/commons/js/datetime.js?v={{config("sns-line.version")}}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></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/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{config('sns-line.version')}}"></script>
    <script src="/_assets/commons/js/lme.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/menu_rich/v2/setting_display.js?v={{config("sns-line.version")}}"></script>
@endpush