@extends('layout.basic.main')
@section('title','アクションスケジュール実行（実行履歴）')
@push('css')
    <link rel="stylesheet" href="/css/reply/style.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="{{ asset('css/schedules/main.css') }}">
    <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="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        #item_vuelist .group_list .group_list_head {
            background: white !important;
            padding: 10px 0 !important;
        }
        #item_vuelist .primary_list_head {
            background: white !important;
        }

        #item_vuelist .group_list .tag_group .glyphicon {
            margin: 0!important;
        }

        .search-inputs {
            background: white !important;
        }

        table {
            margin: 0 !important;
        }

        .btn-group>.btn+.dropdown-toggle {
            padding: 0 10px !important;
        }

        .space-col {
            padding: 0 2px 0 8px;
        }

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

        #list-auto-reply, #list-auto-reply table td, #list-auto-reply span {
            color: #51595C;
            font-weight: 600;
        }
        #list-auto-reply .box-ic-sort i {
            line-height: 2px;
            font-size: 24px;
            padding: 9px 3px !important;
        }
        #list-auto-reply .box-ic-sort i:hover {
            background-color: #96ADB2 !important;
            color: #FFFFFF !important;
            padding: 9px 3px !important;
            border-radius: 4px;
        }

        .nav>li>a:focus, .nav>li>a:hover {
            background-color: white;
            color: #08BF5A !important;
        }

        .table th, td {
            font-weight: bold !important;
        }

        .table>tbody>tr:first-child>td{
            border-top: 0px !important;
        }

        .table>thead>tr>th{
            border-bottom: 0px !important;
        }

        #plan {
            position: relative;
        }

        .note {
            padding: 10px;
            position: absolute;
            left: 100%;
            height: 130px;
            margin-left: 10px;
            box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 19%);
            width: 270px;
            top: -92px;
            text-align: left;
            opacity: 0;
            font-size: 13px;
        }
        .fa-question:hover {
            cursor: pointer;
        }
        .fa-question:hover{
            opacity: 1;
        }
        .table>tbody>tr>td{
            border-top: 2px solid #F4F6F7;
        }

        .table>tbody>tr:last-child>td{
            border-bottom: 2px solid #F4F6F7;
        }

        @media screen and (min-width: 1300px) {
            .col-lg-9{
                max-width: 1000px;
            }
        }

        input[type="date"]::-webkit-inner-spin-button,
        input[type="date"]::-webkit-calendar-picker-indicator {
            display: none;
            -webkit-appearance: none;
        }

        input[type="date"] {
            height: 30px;
            padding: 5px;
            border: 1px solid #bbb;
            font-size: 12px;
        }

        .close {
            opacity: 1 !important;
        }
    </style>
@endpush
@section('content')
    <div class="container-fluid" id="vue-plan" v-cloak>
        <div class="row">
            <div class="col-xs-12 col-md-11 col-lg-9" style="padding-right: 0">
                <div style="margin-left: -15px">
                    <h2 style="font-size: 20px; font-weight: bold; padding: 10px 10px 10px 0; color: #51595C; letter-spacing: 0px;">{{ $actionSchedule->name }} 実行予定・履歴</h2>
                    <div v-show="schedule.action_id != null && detail_action_schedule && detail_action_schedule.length > 0" class="group-item-reply" style="background-color: rgb(246, 246, 246);border-radius: 5px;padding: 5px 0;">
                        <div id="show_action_reply">
                            <div style="padding: 6px 15px; background: rgb(246, 246, 246); font-size: 14px; font-weight: 600; margin-top: 0px; border-radius: 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap"
                                 v-for="(item, indexAction) in detail_action_schedule"
                                 v-if="item.type" :class="indexAction > 2 ? 'toggle-detail-action-reply' : ''" >
                                 @include('layout.modal_setting.label_action')
                                                {{-- <span v-if="iAc.type == 'tag'" >【タグ】
                                                    <span v-for="(itemTag, indexTag) in iAc.list_tags">@{{  indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span
                                                            v-if="iAc.data.action == 1">つける</span><span v-else>はずす</span>
                                                </span>

                                <span v-else-if="iAc.type == 'scenario'" >【ステップ】<span v-if="iAc.data.action != 1">@{{ iAc.data.scenario_name }}</span>
                                                                    <span v-else>購読停止・予約キャンセル</span>
                                                </span>
                                <span v-else-if="iAc.type == 'template'" >【テンプレート】
                                                    <span>@{{ iAc.data.template_name }}</span>
                                                </span>
                                <span v-else-if="iAc.type == 'text'" >【テキスト】
                                                    <span>@{{ iAc.data.content | shortContent }}</span>
                                                </span>
                                <span v-else-if="iAc.type == 'richmenu'" >【リッチメニュー】
                                                    <span v-if="iAc.data.action != 1">@{{ iAc.data.richmenu_name }} 表示</span>
                                                                    <span v-else>表示を停止</span>
                                                </span>
                                <span v-else-if="iAc.type == 'remind'" >【リマインド】
                                                    <span>@{{ iAc.data.remind_name }}</span>
                                                </span>
                                <span v-else-if="iAc.type == 'bookmark'">
                             <span class="action-title">【ブックマーク】</span>
                              <span v-if="iAc.data.action == 1">ブックマークする</span>
                              <span v-else>ブックマークを外す</span>
                            </span>
                                                        <span v-else-if="iAc.type == 'block'">
                              <span class="action-title">【ブロック・非表示】</span>
                              <span v-if="iAc.data.action == 1">ブロックする</span>
                              <span v-if="iAc.data.action == 2">ブロック解除</span>
                               <span v-if="iAc.data.action == 3">表示</span>
                              <span  v-if="iAc.data.action == 4">非表示</span>
                            </span>
                                <span v-else-if="iAc.type == 'compliant_status'">
                              <span class="action-title">【対応ステータス】</span>
                              <span v-if="iAc.data.action == 1">@{{ iAc.data.content }}をつける</span>
                              <span v-else> ステータスを外す</span>
                            </span>
                                <span v-else-if="iAc.type == 'friend_info'" >【友だち情報】
                                                    <span>@{{ iAc.data.name }}</span>
                                                    <span v-if="iAc.data.action == 1"> 登録情報を削除</span>
                                                    <span v-else> @{{ iAc.data.content }}</span>
                                                </span> --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-11 col-lg-9" style="padding-right: 0; margin-top: 35px">
                <div style="margin-left: -15px">
                    <ul class="nav nav-tabs" role="tablist" id="tabs-schedule" style="border-bottom: 3px solid #E8E8E8; padding-bottom: 10px">
                        <li role="presentation" class="active tab-item" style="padding-right: 10px">
                            <a @click="showTab('plan')" href="#plan" aria-controls="home" role="tab" data-toggle="tab" style="border: unset;">
                                <span style="font-weight: bold">実行予定</span>
                            </a>
                            <div v-show="tabActive == 'plan'" style="border: 2px solid #08BF5A; border-radius: 5px;"></div>
                        </li>
                        <li role="presentation" class="tab-item" style="border-bottom: unset;text-align: center;margin-bottom: 0; padding-left: 10px">
                            <a @click="showTab('history')" href="#history" aria-controls="profile" role="tab" data-toggle="tab" style="border: unset;">
                                <span style="font-weight: bold">実行履歴</span>
                            </a>
                            <div v-show="tabActive == 'history'" style="border: 2px solid #08BF5A; border-radius: 5px;"></div>
                        </li>
                        <li style="float: right; display: flex; align-items: center;">
                            <div style="width: 230px; display: flex; align-items: center; margin-right: 15px" v-show="tabActive == 'plan'">
                                <label for="start_date" style="font-size: 14px; color: #51595C; padding-right: 10px; font-weight: bold">表示期間</label>
                                <div style="position: relative; display: inline-block; flex: 1;">
                                    <input v-model="currentDate" type="date" id="current_date" class="form-control" v-on:change="filterDatePlan" style="width: 100%; padding-left: 40px;font-weight: bold;">
                                    <i style="position: absolute; left: 8px; top: 5px; color: #B9B9B9;" class="fal fa-calendar"></i>
                                </div>
                            </div>
                            <div style="width: 202px; display: flex; align-items: center;" v-show="tabActive == 'plan'">
                                <label for="start_date" style="font-size: 14px; color: #51595C; padding-right: 10px; font-weight: bold">から</label>
                                <div style="position: relative; display: inline-block; flex: 1;">
                                    <input v-model="nextDate" type="date" id="next_date" class="form-control" v-on:change="filterDatePlan" style="width: 100%;padding-left: 40px;font-weight: bold">
                                    <i style="position: absolute; left: 8px; top: 5px; color: #B9B9B9;" class="fal fa-calendar"></i>
                                </div>
                            </div>

                            <div style="width: 230px; display: flex; align-items: center; margin-right: 15px" v-show="tabActive == 'history'">
                                <label for="before" style="font-size: 14px; color: #51595C; padding-right: 10px; font-weight: bold">表示期間</label>
                                <div style="position: relative; display: inline-block; flex: 1;">
                                    <input v-model="beforeDate" type="date" id="before" class="form-control" v-on:change="filterDateHistory" style="width: 100%; padding-left: 40px; font-weight: bold">
                                    <i style="position: absolute; left: 8px; top: 5px; color: #B9B9B9;" class="fal fa-calendar"></i>
                                </div>
                            </div>
                            <div style="width: 202px; display: flex; align-items: center;" v-show="tabActive == 'history'">
                                <label for="current_date_history" style="font-size: 14px; color: #51595C; padding-right: 10px; font-weight: bold">から</label>
                                <div style="position: relative; display: inline-block; flex: 1;">
                                    <input v-model="currentDateHistory" type="date" id="current_date_history" v-on:change="filterDateHistory" class="form-control" style="width: 100%;padding-left: 40px; font-weight: bold">
                                    <i style="position: absolute; left: 8px; top: 5px; color: #B9B9B9;" class="fal fa-calendar"></i>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div id="wapper-table-content" style="margin-top: 20px">
                        <div id="plan" style="background-color: white !important;" v-show="tabActive === 'plan'">
                            <table id="table_list_reply" class="table vuelist-nanowrapper">
                                <thead>
                                <tr style="min-height: 40px">
                                    <th style="width: 30%;text-align: left !important; border-radius: 5px 0px 0px 5px; padding-left: 20px">実行予定日時</th>
                                    <th style="width: 150px;">実行予定対象数</th>
                                    <th style="width: 37%;text-align: left !important;"></th>
                                    <th style="width: 150px; text-align: center; border-radius: 0px 5px 5px 0px">稼働設定
                                        <i style="margin-left: 15px;background-color: white; text-align: center; line-height: 20px; color: #08BF5A; display: inline-block; width: 20px; height: 20px; border-radius: 50%" class="fas fa-question"></i>
                                    </th>
                                </tr>
                                </thead>

                                <tbody>
                                <tr class="item_tr" v-for="(item, index) in schedulePlan" :key="item.plan">
                                    <td style="text-align: left !important; font-weight: bold; color: #51595C; height: 43px; font-size: 16px !important; padding-left: 20px">
                                        @{{ item.plan }}
                                    </td>
                                    <td style=" color: #51595C; font-weight: normal; font-size: 16px !important;">
                                        <a href="#" @click="showNumberFilter()" style="text-decoration: underline; width: 70px; display: inline-block;font-weight: bold;"> @{{ dataFilter.number_filter }}人 </a>
                                    </td>
                                    <td class="text-left">
                                        <button v-if="index == 0" @click="getDataFilter" type="button" class="btn btn-sns-line btn-sns-line-primary" style="margin-bottom: 0px;">現時点での実行対象数を再計算</button>
                                    </td>
                                    <td style="text-align: center; color: #FF00F5;">
                                        <label class="switch" style="left: -5px;" >
                                            <input hidden type="checkbox" :value="item.date + ' ' + schedule.start_time" v-model="skipDate" @change="changeStatus()">
                                            <span class="slider"></span>
                                        </label>
                                    </td>
                                </tr>
                                </tbody>

                            </table>
                            <a href="{{ route('action-schedules.index') }}" class="btn btn-sns-line btn-sns-line-secondary btn-shadown-dropdown"
                               style="min-height: 42px; line-height: 31px; margin-top: 20px; width: 150px;">戻る</a>
                            <div class="note">
                                <span style="font-weight: bold">OFFに設定した場合、そのスケジュール 実行をスキップすることができます。事項スケジュール直前の変更は対応できない場合がありますので、実行直前の変更は行わないでください。</span>
                            </div>
                        </div>
                        <div id="history" style="background-color: white !important;" v-show="tabActive === 'history'">
                            <table id="table-schedule-history" class="table vuelist-nanowrapper">
                                <thead>
                                <tr>
                                    <th style="width: 28%;text-align: left !important; border-radius: 5px 0px 0px 5px !important; padding-left: 20px">実行済日時</th>
                                    <th style="width: 150px;text-align: center !important;">実行済友だち数</th>
                                    <th style="width: 55%; border-radius: 0px 5px 5px 0px"></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="item_tr" v-for="item in actionScheduleHistory" :key="item.id">
                                    <td style="text-align: left !important; color: #51595C; font-size: 16px !important;  padding-left: 20px">
                                        <span style="font-weight: bold">@{{ getSendDate(item.sent_date) }}</span>
                                    </td>
                                    <td style="text-align: center !important; color: #51595C; font-size: 16px !important;">
                                        <a :href="'/basic/action-schedules/custom/getUsersActionScheduleHistory/' + item.id" v-if="item.skip == 0"
                                           style="text-decoration: underline; font-weight: bold; display: inline-block; width: 70px; text-align: right;">
                                            <span  >@{{ item.total_number_user }}人</span>
                                        </a>
                                        <span v-else style="font-weight: bold; display: inline-block;">スキップ</span>
                                    </td>
                                    <td style="padding-right: 0px">
                                        <button v-if="item.skip == 0" type="button" style="margin-bottom: 0; float: right" class="btn btn-sns-line btn-sns-line-secondary" @click="previewAction(item.id)">実行済アクション
                                        </button>
                                    </td>
                                </tr>
                                </tbody>

                            </table>
                            <a href="{{ route('action-schedules.index') }}" class="btn btn-sns-line btn-sns-line-secondary btn-shadown-dropdown"
                               style="min-height: 42px; line-height: 31px; margin-top: 20px; width: 150px;">戻る</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-overlay" style="display: none;"></div>

            <div class="modal fade" id="preview-action" tabindex="-1" role="dialog" aria-labelledby="preview-action" style="margin: 60px auto;">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" style="color: rgba(125,145,149,1);" data-dismiss="modal" aria-hidden="true">
                                <i class="fas fa-times hover-icon-action" style="color: rgba(125,145,149,1);padding: 5px 10px;border-radius: 4px"></i></button>
                            <h2 class="text-center" style="font-weight: bold !important">実行済みアクション</h2>
                        </div>
                        <div class="modal-body">
                            <div class="row" style="padding: 30px; padding-top: 0px">
                                <div class="col-sm-12 preview-action_content" style="background-color:#F2F2F2; text-align: left; padding-top: 5px; padding-bottom: 10px; border-radius: 5px; min-height: 120px">

                                </div>
                            </div>
                            <div class="text-center">
                                <button type="button" class="btn btn-sns-line btn-sns-line-secondary" data-dismiss="modal" style="padding: 6px 40px;">閉じる</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('js')
    <script>
        $(function () {
            $('.link_my_page').on('click', function(e){
                e.stopPropagation();
            });
            $.datepicker.setDefaults($.datepicker.regional["ja"]);
        });

        let firstDayRunning = '{{ $firstDayRunning }}';

        console.log(firstDayRunning)


        let actionSchedule = @json($actionSchedule);
        let actionScheduleHistory = @json($actionScheduleHistory);

        console.log('Lịch sử', actionScheduleHistory)
    </script>
    <script src="/chat_files/bootstrap-timepicker.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/js/schedules/plan.js?v={{config("sns-line.version")}}"></script>

    <script>
        // $('#current_date').val(moment(new Date()).format('YYYY-MM-DD'))
        // $('#next_date').val(moment(new Date()).add(3, 'months').format('YYYY-MM-DD'))
        //
        // $('#before').val(moment(new Date()).subtract(3, 'months').format('YYYY-MM-DD'))
        // $('#current_date_history').val(moment(new Date()).format('YYYY-MM-DD'))
        const input = document.querySelectorAll("input[type=date]");
        input.forEach((button) => {
            console.log(button)
            button.addEventListener("click", (event) => {
                try {
                    button.showPicker();
                } catch (error) {
                    window.alert(error);
                }
            });
        });
    </script>

@endpush