@extends('layout.basic.main')
@section('title','アクションスケジュール実行（作成）')
@push('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">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
    <link rel="stylesheet" href="{{ asset('css/schedules/main.css') }}?v={{config('sns-line.version')}}">
    <style>
        .bor-title {
            border-left: 7px solid rgba(68, 203, 128, 1);
            padding: 7px;
            font-size: 15px;
            margin-bottom: 13px;
            margin-top: 30px;
            font-weight: bold;
        }

        .b-select {
            position: relative;
        }

        .b-select i {
            position: absolute;
            right: 9px;
            top: 7px;
            font-size: 22px;
        }

        input[type="text"],
        select {
            height: 37px !important;
        }

        .item-act-display {
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 300px;
            overflow: hidden;
            background-color: #F2F2F2;
            padding-bottom: 4px;
            padding-top: 4px;
            text-align: left !important;
            border-radius: 5px;
            margin-bottom: 4px !important;
            font-size: 14px;
        }

        #loading_overlay {
            z-index: 1;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 120%;
            background-color: rgba(0, 0, 0, .75)
        }

        #loading_overlay i {
            font-size: 30px;
            font-weight: 700;
            position: absolute;
            top: 40%;
            color: #00c900
        }

        .spin {
            -webkit-animation: spin 2s infinite linear;
            -moz-animation: spin 2s infinite linear;
            -o-animation: spin 2s infinite linear;
            animation: spin 2s infinite linear
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .btn:hover{
            opacity: 0.7;
        }

        .wrapper-section {
            border: 3px solid #F4F6F7;
            padding: 0px 20px 20px 20px;
            border-radius: 5px;
            margin-top: 15px;
        }

        #show_action_reply span {
            font-weight: 600;
            color: #51595C;
        }

        #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;
        }

        .bor-title-c {
            position: relative;
            padding: 7px 0px;
            font-size: 15px;
            margin-bottom: 13px;
            margin-top: 20px;
        }
        .bor-title-c:before {
            border: 5px solid rgba(68, 203, 128, 1);
            border-radius: 4px;
            position: absolute;
            content: '';
            top: 0px;
            height: 100%;
        }

        .bootstrap-timepicker-widget table td input {
            width: 35px !important;
        }

        input[type="checkbox"]{
            margin-right: 10px;
            margin-top: 2px;
            width: 18px;
        }

        .day input[type="checkbox"]{
            margin-right: 10px;
            margin-top: 2px;
            width: unset;
        }

        input, select{
            border: 2px solid #E8E8E8 !important;
            box-shadow: unset !important;
        }

        input:focus, select:focus{
            box-shadow: unset !important;
        }
        #show_action_reply{
            background-color: #f6f6f6;
            min-height: 80px;
            border-radius: 5px;
        }

        .edit_action:hover{
            color: #EF233C !important;
        }

        input[type=checkbox]:before {
            font-family: "FontAwesome";
            content: "\f00c";
            font-size: 15px;
            color: transparent !important;
            background: #fff;
            display: block;
            width: 18px;
            height: 18px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 7px;
        }

        input[type=checkbox]:checked:before {
            color: rgb(81, 89, 92) !important;
        }

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

        #vue_add_schedule input[type="date"]::-webkit-inner-spin-button,
        #vue_add_schedule input[type="date"]::-webkit-calendar-picker-indicator {
            display: none;
            -webkit-appearance: none;
        }
    </style>
@endpush
@section('content')
    <div class="container-fluid" id="vue_add_schedule" v-cloak>
        <div class="row">
            <div id="loading_overlay" class="loading-overlay text-center" style="display: none">
                <i class="glyphicon glyphicon-refresh spin"></i>
            </div>
            <div class="col-xs-12" style="padding-top: 20px">
                <h2 style="font-weight: bold">アクションスケジュール登録</h2>
            </div>
        </div>
        <input type="hidden" id="schedule_id" @if(!empty($schedule_id)) value="{{ $schedule_id }}" @endif>
        <input type="hidden" id="copy_id" @if(!empty($copy_id)) value="{{ $copy_id }}" @endif>
        <div class="row">
            <div class="col-md-11 col-lg-9">
                <div class="row" style="margin-top: 25px">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <div>
                                <label for="schedule_name" style="font-size: 18px;">スケジュール名（管理用）</label>
                                <small style="float: right; font-size: 13px;margin-top: 5px;">@{{ countName }}/20文字</small>
                            </div>
                            <input type="text" v-validate="'required'"
                                   v-model="schedule.name"
                                   class="form-control"
                                   style="margin-top: 5px" id="schedule_name"
                                   name="schedule.name"
                            >
                            <span class="text-danger"
                                  v-show="errors.name">@{{ errors.name }}</span>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <div>
                                <label for="category_id" style="font-size: 18px;">フォルダ</label>
                                <select class="form-control my_class" style="margin-top: 5px; text-align: center" v-model="schedule.category_id" id="category_id" name="category_id">
                                    <option :selected="schedule.category_id == 0" value="0" >未分類</option>
                                    <option v-for="category in categories" :selected="schedule.category_id == category.id" :key="category.id" :value="category.id">@{{ category.name }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top: 10px">
                    <div class="col-sm-12">
                        <h4><span>アクション設定</span></h4>
                        <div class="wrapper-section">
                            <div>
                                <div class="bor-title-c">
                                    <span style="padding-left: 20px">アクション稼働対象絞り込み</span>
                                </div>
                                <div>
                                    <button id="openFilterModal" @click="openModalFilter()" class="btn btn btn-sns-line btn-sns-line-primary" style="margin: 10px 0px; padding: 6px 40px;" >
                                        絞込み
                                    </button>
                                    <div style="padding: 15px; background: rgb(246, 246, 246); font-size: 14px; font-weight: 600; margin-top: 10px; border-radius: 5px;" >
                                        <div class="group-item-reply" style="margin-bottom: 15px; display: flex; align-items: center">
                                            <div style="font-weight: 600">対象人数</div>
                                            <div v-show="count_filter >= 0" id="count_filter" style="margin-left: 50px" 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: 100px;padding-right: 0">絞り込み条件</div>
                                            <div class="col-sm-9" id="preview_filter" style="width: 80%;padding-right: 0">
                                                <div  v-if="list_preview_filter.length == 0">
                                                    全員
                                                </div>
                                                <div v-else>
                                                    <div v-for="(preview, index) in list_preview_filter" style="font-weight: 600">
                                                        @{{ preview }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="bor-title-c">
                                    <span style="padding-left: 20px">アクション設定</span>
                                </div>
                                <div>
                                    <h5 style="display: inline-block; margin-right: 40px"><span>エルメアクション</span></h5>
                                    <div style="display: inline-block">
                                        <div style="text-align: right; margin-bottom: 10px" v-show="schedule.action_id != null && detail_action_schedule && detail_action_schedule.length > 0">
                                        <span class="edit_action" style="cursor: pointer;width:100px;color: #5799DB;text-decoration-line: underline"
                                              v-on:click="openSettingAction(schedule.action_id)">
                                            <span class="edit_action" v-if="detail_action_schedule && detail_action_schedule.length > 3" style="color: rgb(87, 153, 219)">
                                                その他@{{ detail_action_schedule.length - 3 }}件
                                            </span>編集</span>
                                        </div>
                                        <button v-show="schedule.action_id == null || !detail_action_schedule || detail_action_schedule.length == 0" type="button" id="btn_open_action" class="btn btn-sns-line btn-sns-line-warning" style="outline: unset;display: none;border: unset;width: 100px; background-color: rgba(254,195,0,1);font-weight: 600"
                                                v-on:click="openSettingAction(schedule.action_id)">編集</button>
                                        <span class="text-danger" v-show="errors.action_id">@{{ errors.action_id }}</span>
                                    </div>
                                    <div class="group-item-reply" >
                                        <div v-show="schedule.action_id != null && detail_action_schedule && detail_action_schedule.length > 0" id="show_action_reply">
                                            <div style="padding: 10px 15px;
                                            border-radius: 5px; background: rgb(246, 246, 246);
                                            font-size: 14px; font-weight: 600; 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' : ''" :hidden="indexAction > 2">
                                                @include('layout.modal_setting.label_action')
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h4 style="margin-top: 30px"><span>スケジュール設定</span></h4>
                        <div class="wrapper-section">
                            <div>
                                <div class="bor-title-c">
                                    <span style="padding-left: 20px">開始日時</span>
                                </div>
                                <div style="margin-top: 15px;display: flex;">
                                    <div style="width: 170px; display: inline-block">
                                        <div style="position: relative; display: inline-block; width: 100%">
                                            <input type="date" v-model="schedule.start_date" min="{{ date('Y-m-d') }}" value="{{ date('Y-m-d') }}" id="start_date" class="form-control" style="width:100%; padding-left: 40px; background-color: white">
                                            <i style="position: absolute; left: 8px; top: 10px; color: #B9B9B9;" class="fal fa-calendar"></i>
                                            <span class="text-danger"
                                                  v-show="errors.start_date">@{{ errors.start_date }}</span>
                                        </div>
                                    </div>
                                    <div style="width: 300px; display: inline-block; margin-left: 20px;">
                                        <div style="position: relative; display: inline-block; width: 100%; ">
                                            <input type="text" id="start_time" v-model="schedule.start_time" class="form-control timepicker" style="width: 120px; padding-left: 40px">
                                            <i style="position: absolute; left: 8px; top: 10px; color: #B9B9B9;" class="fal fa-clock"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="bor-title-c">
                                    <span style="padding-left: 20px">終了設定</span>
                                </div>
                                <div style="display: flex; margin-top: 20px">
                                    <div style=" flex-basis: 300px">
                                        <label class="wrapper-custom-radio">
                                            <input type="radio" class="form-control" value="unlimited" v-model="schedule.end_date_type" checked name="due-schedule">
                                            <span class="checkmark"></span>
                                            <span>設定しない（無期限）</span>
                                        </label>
                                    </div>
                                    <div style=" flex-basis: 300px">
                                        <label class="wrapper-custom-radio">
                                            <input type="radio" class="form-control" value="day_limit" v-model="schedule.end_date_type" name="due-schedule">
                                            <span class="checkmark"></span>
                                            <span>
                                                日付指定（基準時 0:00）
                                            </span>
                                        </label>
                                        <div style="width: 170px; display: inline-block; margin-left: 40px; margin-top: 20px" v-show="schedule.end_date_type == 'day_limit'">
                                            <div style="position: relative; display: inline-block; width: 100%">
                                                <input type="date" min="{{ date('Y-m-d') }}" v-model="schedule.end_date" value="{{ date('Y-m-d') }}" id="due_date_pattern2" class="form-control" style="width: 100%; padding-left: 40px; background-color: white">
                                                <i style="position: absolute; left: 8px; top: 10px; color: #B9B9B9;" class="fal fa-calendar"></i>
                                                <span class="text-danger" v-show="errors.end_date">@{{ errors.end_date }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div style=" flex-basis: 300px">
                                        <label class="wrapper-custom-radio">
                                            <input type="radio" class="form-control" value="times" v-model="schedule.end_date_type" name="due-schedule">
                                            <span class="checkmark"></span>
                                            <span>回数指定</span>
                                        </label>
                                        <div style="margin-left: 40px; margin-top: 20px" v-show="schedule.end_date_type == 'times'">
                                            <input type="number" min="1" v-model="schedule.number_of_repetitions" style="width: 80px; height: 36px; display: inline-block" id="number_time" class="form-control" >
                                            <div style="display: inline-block" >回実行で終了</div>
                                            <span class="text-danger" style="display: block" v-show="errors.number_of_repetitions">@{{ errors.number_of_repetitions }}</span>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wrapper-section">
                            <div class="bor-title-c">
                                <span style="padding-left: 20px">繰り返し設定</span>
                            </div>
                            <div class="" style="display: flex; align-items: center">
                                <div class="" style="margin-right: 20px">
                                    <div class="d-flex" style="align-items: center;">
                                        <div class="" style="margin-right: 15px;">
                                            <input type="number" max="31" min="1" class="form-control" v-model="schedule.numberType" style="width: 80px; height: 36px;" id="number-type" name="numberType" value="" >
                                            <span class="text-danger" v-show="errors.numberType">@{{ errors.numberType }}</span>
                                        </div>
                                        <div class="">
                                            <div>
                                                <select class="form-control my_class" v-model="schedule.repeat_type" style="width: 150px; text-align: center" @change="tabActive($event)">
                                                    <option value="day">日ごと</option>
                                                    <option value="week">週ごと</option>
                                                    <option value="month">ヶ月ごと</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="">
                                    <div class="schedule-pattern2" v-show="tabConfigSchedule == 'week'">
                                        <div style="margin-right: 15px" class="day">
                                            <label for="itemcheck" style="display: flex">
                                                <input id="check-all" v-model="selectAll" type="checkbox" name=""><span style="color: #51595C;">全選択</span>
                                            </label>
                                        </div>
                                        <div style="margin-right: 18px" class="day"
                                             v-for="(day, index) in dayWeeks"
                                             :key="index"
                                        >
                                            <label :for="'itemcheck-' + index" style="display: flex">
                                                <input v-model="schedule.day_of_week_repeat" class="item-day" :class="'itemcheck-' + index" :value="day.val" :id="'itemcheck-' + index" type="checkbox" name=""><span style="color: #51595C;">@{{ day.name }}</span>
                                            </label>
                                        </div>
                                        <span class="text-danger" style="display: block" v-show="errors.day_of_week_repeat">@{{ errors.day_of_week_repeat }}</span>
                                    </div>
                                    <div class="schedule-pattern3" v-show="tabConfigSchedule == 'month'" >
                                        <div style="display: flex; align-items: center">
                                            <label for="select-monthly">毎月</label>
                                            <select v-model="schedule.date_repeat_after_number_of_month" class="form-control my_class" style="width: 180px; margin-left: 20px" id="select-monthly" @change="">
                                                <option v-for="(day, index) in monthlyRepeatData" :key="day" :value="day.obj">@{{ day.name }}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>

                            </div>
                        </div>
                        <div>
                            <button type="button" @click="store" class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg btn-shadown-dropdown" style="width: 200px; margin-top: 30px; margin-bottom: 20px;">保存</button>
                            <p>
                                <a href="/basic/action-schedules" class="btn btn-sns-line  btn-sns-line-lg btn-sns-line-dark btn-shadown-dropdown" style="width: 140px; margin-bottom: 30px">戻る</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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_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;

        var currentStartDate = moment().format('YYYY-MM-DD');
        var currentEndDate = moment().format('YYYY-MM-DD');

        var actionSchedule = null;
        @if(!empty($actionSchedule))
        actionSchedule = `{{ json_encode($actionSchedule) }}`;
        currentStartDate = actionSchedule ? actionSchedule.start_date : moment().format('Y-m-d');
        currentEndDate = actionSchedule ? actionSchedule.end_date : moment().format('Y-m-d');
        @endif

    </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/friendlist/modal_filter_v2.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/schedules/add_schedule.js?v={{config('sns-line.version')}}"></script>

    <script>

        const startDate = document.getElementById("start_date");

        startDate.addEventListener("click", () => {
            try {
                startDate.showPicker();
            } catch (error) {
            }
        });

        const endDate = document.getElementById("due_date_pattern2");

        endDate.addEventListener("click", () => {
            try {
                endDate.showPicker();
            } catch (error) {
            }
        });

    </script>


@endpush