@extends('layout.admin_v2.main')
@section('title')
    クーポンコードの発行
@endsection
@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="{{asset('css/form_answer/common-v3.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="{{asset('css/qr_code/pagination.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="{{asset('css/admin/coupon_management.css')}}?v={{config("sns-line.version")}}">
    <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="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/style.css">
    <link rel="stylesheet" href="/_assets/commons/css/calendar_control.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/style.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/index.js"></script>
    <script src="/js/tailwind/browser@4.js"></script>
    <style>
        .date-box::after {
            pointer-events: none;
        }
        .flatpickr-current-month input.cur-year{
            font-size: 14px !important;
            font-weight: 700 !important;
        }
        .popconfirm-content{
            font-weight: 500;
            font-size: 14px;
        }
        .popconfirm-actions button{
            font-weight: 500;
            font-size: 14px;
        }
    </style>
@endpush
@section('content')
    <article class="sub" style="padding-bottom: 0">
        <section class="masteredit " id="couponManagement" v-cloak>
            <div>
                <h2 style="font-weight: 600;padding-left: 0; font-size: 20px;margin-bottom: 0px;color: #222222">クーポンコードの発行</h2>
                <div>
                    <div class="tab_header">
                        <div class="box_tab">
                            <div class="tab_c" :class="tab_active == 0 ? 'active' : ''" @click="changeTabActive(0)">未使用者</div>
                            <div class="tab_c" :class="tab_active == 1 ? 'active' : ''" @click="changeTabActive(1)">使用済み</div>
                        </div>
                    </div>
                    <div v-show="tab_active == 0">
                        <div>
                            <button class="button button03_blue" data-toggle="modal"
                                    data-target="#modal-add-coupon" @click="openModalCreateCoupon()">新規発行</button>
                            <div class="wrap-scroll-table">
                                <table id="table_list" >
                                    <thead style="border-radius: 5px; background: unset">
                                    <tr style="border-radius: 5px; border-bottom: 1px solid #ffffff">
                                        <th class="btnth" style="width: 150px">
                                            <div style="display: flex; align-items: center">
                                                発行日
                                                <div class="sort" style="display: grid; position: relative; bottom: 2px; margin-left: 5px" @click="sort('created_at')">
                                                    <i class="fas fa-caret-up" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                                    <i class="fas fa-caret-down" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th class="siteth" style="width: 200px; text-align: left !important;">
                                            発行先ユーザー名
                                        </th>
                                        <th class="siteth" style="width: 225px; text-align: left !important;">
                                            発行理由
                                        </th>
                                        <th class="siteth" style="width:210px; text-align: left !important;">
                                            クーポンコード
                                        </th>
                                        <th class="siteth" style="width:210px; text-align: left !important;">
                                            発行者
                                        </th>
                                        <th class="siteth" style="width:100px; text-align: center !important;">
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item, index) in items"  style="cursor: pointer">
                                        <td>@{{ formatDate(item.created_at) }}</td>
                                        <td> <div class="reason">
                                                @{{ item.name_user_use }}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="reason">
                                                @{{ item.reason }}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="col-code">
                                                <div style="width: 80px">
                                                    @{{ item.coupon_code }}
                                                </div>

                                                <div class="tooltip_e"
                                                     data-tooltip="コピーしました">
                                                    <button class="button button05" @click="copyText(item.coupon_code)">
                                                        <i class="fal fa-copy"></i>
                                                        コピー
                                                    </button>
                                                </div>
                                            </div>

                                        </td>
                                        <td>@{{ item.email_admin }}</td>
                                        <td>
                                            <div class="tooltip_delete"
                                                 data-tooltip="削除" >
                                                <i class="far fa-trash"  @click.stop="open(item, $event)"></i>
                                            </div>
                                            <div class="mouseover mouseover01" v-show="activeId == item.id">
                                                <div class="popconfirm-wrap" @click.stop >
                                                    <div
                                                            class="popconfirm"
                                                            :style="{ top: top + 'px', left: left + 'px' }"
                                                            :class="{ show: (activeId == item.id), hiding: hiding }"
                                                    >
                                                        <div class="popconfirm-content">
                                                            本当に削除しますか？
                                                        </div>

                                                        <div class="popconfirm-actions">
                                                            <button
                                                                    class="btn-cancel"
                                                                    :disabled="loading"
                                                                    @click="cancel"
                                                            >
                                                                キャンセル
                                                            </button>

                                                            <button
                                                                    class="btn-ok"
                                                                    :disabled="loading"
                                                                    :class="{ 'btn-loading': loading }"
                                                                    @click="confirm(item.id)"
                                                            >
                                                                削除する
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </td>

                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="text-center" style="    margin-top: 75px;" v-if="items.length == 0">
                            <div class="flex justify-center" style="margin-bottom: 19px">
                                <img src="/images/group_4483.svg" alt="">
                            </div>
                            <div style="color: #8C8C8C; font-weight: 700; font-size: 16px; margin-bottom: 7px">まだデータがありません</div>
                            <div style="margin-bottom: 9px; font-size: 14px; font-weight: 400">
                                <span style="color: #B7B7B7">新規作成するとここにデータが表示されます</span>
                            </div>
                        </div>

                    </div>
                    <div v-show="tab_active == 1">
                        <div class="box_filter" style="">
                            <div class="radio-group">
                                <label class="radio-item">
                                    <input type="radio" name="date_type" v-model="type_filter" value="0" v-on:change="filterType">
                                    <span class="custom-radio"></span>
                                    <span class="label-text">発行日</span>
                                </label>

                                <label class="radio-item">
                                    <input type="radio" name="date_type" v-model="type_filter" value="1" v-on:change="filterType">
                                    <span class="custom-radio"></span>
                                    <span class="label-text">使用日</span>
                                </label>
                            </div>
                            <div class="date date04 mr-2">
                                <div class="date-box" style="padding: 0; height: 40px">
                                    <input type="text" name="datepicker" id="js-datepicker04" placeholder="開始日 → 終了日" autocomplete="off" style="width: 355px; cursor: pointer; height: 40px">
                                    <button class="clear-btn" @click="clearFilterDate" >
                                        <i class="far fa-times-circle"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="wrap-scroll-table">
                            <table id="table_list" >
                                <thead style="border-radius: 5px; background: unset">
                                <tr style="border-radius: 5px; border-bottom: 1px solid #ffffff">
                                    <th class="btnth" style="width: 120px">
                                        <div style="display: flex; align-items: center">
                                            発行日
                                            <div class="sort" style="display: grid; position: relative; bottom: 2px; margin-left: 5px" @click="sortTabUsed('created_at')">
                                                <i class="fas fa-caret-up" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                                <i class="fas fa-caret-down" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                            </div>
                                        </div>
                                    </th>
                                    <th class="btnth" style="width: 120px">
                                        <div style="display: flex; align-items: center">
                                            使用日
                                            <div class="sort" style="display: grid; position: relative; bottom: 2px; margin-left: 5px" @click="sortTabUsed('datetime_use')">
                                                <i class="fas fa-caret-up" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                                <i class="fas fa-caret-down" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                            </div>
                                        </div>
                                    </th>
                                    <th class="siteth" style="width: 160px; text-align: left !important;">
                                        メールアドレス
                                    </th>
                                    <th class="siteth" style="width: 180px; text-align: left !important;">
                                        発行先ユーザー名
                                    </th>
                                    <th class="siteth" style="width: 230px; text-align: left !important;">
                                        発行理由
                                    </th>
                                    <th class="siteth" style="width: 200px; text-align: left !important;">
                                        LOA名
                                    </th>
                                    <th class="siteth" style="width:100px; text-align: left !important;">
                                        クーポンコード
                                    </th>
                                    <th class="siteth" style="width:210px; text-align: left !important;">
                                        発行者
                                    </th>

                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item, index) in items" >
                                    <td>@{{ formatDate(item.created_at) }}</td>
                                    <td>@{{ formatDate(item.datetime_use) }}</td>
                                    <td>@{{ item.user_email }}</td>
                                    <td> <div class="reason">
                                            @{{ item.name_user_use }}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="reason">
                                            @{{ item.reason }}
                                        </div>
                                    </td>
                                    <td><div class="reason">@{{ item.bot_name }}</div></td>
                                    <td>
                                        <div class="col-code">
                                            @{{ item.coupon_code }}
                                        </div>
                                    </td>
                                    <td>@{{ item.email_admin }}</td>

                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center" style="    margin-top: 75px;" v-if="items.length == 0">
                            <div class="flex justify-center" style="margin-bottom: 19px">
                                <img src="/images/group_4483.svg" alt="">
                            </div>
                            <div style="color: #8C8C8C; font-weight: 700; font-size: 16px; margin-bottom: 7px">まだデータがありません</div>

                        </div>

                    </div>
                    <div style="display: flex; margin-top: 20px;margin-bottom: 20px;justify-content: end">
                        <div class="text-center" style="line-height: 80px;"></div>
                        <pagination :pagination="pagination"
                                    @change-page="changePage"
                                    @change-per-page="changePerPage">
                        </pagination>
{{--                        <pagination :pagination="pagination" @change_page="changePage" @change_limit="changeLimit">--}}
{{--                            --}}
{{--                        </pagination>--}}
                    </div>
                </div>


                <div class="modal fade" id="modal-add-coupon" tabindex="-1" role="dialog"
                     aria-labelledby="chatSettingStatus">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header" style="border: 0;padding: 24px 37px 15px 50px;">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                        style="opacity: 1;font-size: 30px">
                                    <span class="line-icon line-icon-close" style="line-height: 38px">
                                        <i class="fal fa-times"></i>
                                    </span>
                                </button>
                                <h2 class="text-left" style="color: #222222; margin-bottom: 0; padding: 0!important; font-size: 18px; font-weight: 600; margin-top: 10px;">クーポンコードの発行</h2>
                            </div>
                            <div class="modal-body" style="    padding: 10px 50px;">

                                <div class="form-group">
                                    <div class="tt_md_b">発行先ユーザー名</div>
                                    <input type="text" class="form-control inp_coupon" v-model="name_user_use">
                                </div>
                                <div class="form-group">
                                    <div class="tt_md_b">発行理由</div>
                                    <input type="text" class="form-control inp_coupon" v-model="reason">

                                </div>

                            </div>
                            <div class="text-center gr__btn_bottom">
                                <button class="button button05" style="width: 120px" @click="closeCreateCoupon()">閉じる</button>
                                <button class="button button01" style="width: 150px; margin-left: 20px" @click="createCoupon()">発行する</button>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </article>
@endsection
@push('script')
    <script src="/js/axios.min.js"></script>
    <script src="/js/moment.min.js"></script>
    <script src="/js/media/vue.min.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/validate/config.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="/_assets/commons/js/datetime.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/admin/components/pagination.js"></script>
    <script src="/js/admin/coupon_management.js?v={{config("sns-line.version")}}"></script>
{{--    <script src="/js/qr_code/v2/pagination.js?v={{config('sns-line.version')}}"></script>--}}

@endpush