@extends('layout.admin_v2.main')
@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="/chat_files/jquery-ui.min.css">
<style>
    .tab_right_top {
        display: flex;
        align-items: center;
        color: #51595C;
        font-weight: bold;
    }

    .tab_right_top i {
        background-color: #F2F2F2;
        border-radius: 5px;
        color: white;
        padding: 8px 7px;
        cursor: pointer;
        font-size: 23px;
    }

    .tab_right_top>* {
        margin-left: 9px;
    }

    .cancelTotal {
        width: 45%;
        margin-top: 35px;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .cancelReason {
        width: 45%;
        margin-top: 25px;
        margin-bottom: 40px;
        font-weight: bold;
    }

    .cancelList {
        width: 65%;
        margin-top: 20px;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .cancelList tr {
        border-bottom: 2px solid #F8F8F8;
    }

    .cancelList tr:first-child {
        border-bottom: none;
    }

    .cancelCmt {
        width: 65%;
        margin-top: 20px;
        margin-bottom: 20px;
        font-weight: bold;
    }

    #cancelCmtRow {
        background: #F2F2F2;
        width: 3%;
        text-align: left;
        border: none
    }

    #myChart {
        width: 100%;
        max-width: 45%;
        height: 100%;
        max-height: 70%;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 80px;
        margin-left: 30px;
        border: 1px solid #D3D3D3;
    }

    td[colspan] {
        vertical-align: top !important;
        text-align: left;
        padding-left: 20px;
        padding-right: 20px;
    }

    .btn-sns-line-outline-default {
        width: 150px;
        height: 40px;
        padding: 9px;
        padding-top: 12px;
        font-size: 15px;
        color: #7D9195;
        font-weight: bold;
        border: 2px solid #7D9195;
    }

    .btn-sns-line-dark {
        width: 150px;
        height: 45px;
        padding: 9px;
        padding-top: 12px;
        font-size: 15px;
        font-weight: bold;
        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(0, 0, 0, 0.19);
    }

    .btn-sns-line-secondary {
        width: 150px;
        height: 40px;
        padding: 9px;
        padding-top: 12px;
        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(0, 0, 0, 0.19);
    }

    .tab_data_right_top .activeTab {
        background-color: #7D9195;
        box-shadow: 0px 3px 6px #00000029;
        border-radius: 3px;
        color: #FFFFFF;
        /* padding: 8px; */
        /* margin-left: -15px; */
        width: 150px;
        height: 40px;
    }

    input[type="month"]::-webkit-calendar-picker-indicator {
        /*display: none;*/
        /*visibility: hidden;*/
        /*min-width: 0;*/
        /*max-width: 0;*/
        /*padding: 0;*/
        /*border: 0;*/
        background: none;
        width: 100%;
        position: absolute;
        -webkit-appearance: none;
    }
</style>
@endpush
@section('content')

<article class="sub" id="managementDailySales" v-cloak>
    <section class="masteredit">
        <h2 style="font-size: 25px; color: #51595C; font-weight: bold; margin-top: 20px">解約理由</h2>
        <div class="" style="display: flex; justify-content: space-between; margin-top: 25px; width: 25%;">
            <div class="tab_right_top">
                <i class="fas fa-chevron-left" style="margin-left: 0; height: 45px; line-height: 30px" v-on:click="preMonth()"></i>
                <input type="month" v-model="filter_month" class="form-control text-center filter-month" v-on:change="filterMonth" style="width: 200px; padding: 22px 10px; border: 1px solid #E8E8E8; height: 40px; font-size: 17px;">
                <i class="fas fa-chevron-right" style="height: 45px; line-height: 30px" v-on:click="nextMonth()"></i>
            </div>
            <span style="margin-left: 20px;">
                <a :href="'/admin/list-cancel-contract?filter_time='+filter_month" type="button" class="btn btn-sns-line btn-sns-line-dark" style="background-color: #7D9195; width: 100px; height: 45px; margin-left: 20px ; line-height: 20px; text-decoration: none;"> 全期間</a>
            </span>
        </div>
        <div>
            <table class="cancelTotal table table-hover table-bordered table-responsive table-striped">
                <tbody>
                    <tr>
                        <td style="background: #F2F2F2; width: 33.3%;">解約件数</td>
                        <td style="background: #F2F2F2; width: 33.3%;">選択件数</td>
                        <td style="background: #F2F2F2; width: 33.3%;">1人あたり平均選択数</td>
                    </tr>
                    <tr>
                        <td>@{{monthCancel}}</td>
                        <td>@{{total}}</td>
                        <td>@{{cancel}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div>
            <table class="cancelReason table-hover table-bordered table-responsive table-striped" style="display: inline-block; margin-right: 35px;">
                <tbody>
                    <tr>
                        <td style="background: #96ADB2; color: #FFFFFF; width: 26.5vw;">選択肢</td>
                        <td style="background: #96ADB2; color: #FFFFFF; width: 6vw">選択数</td>
                        <td style="background: #96ADB2; color: #FFFFFF; width: 6vw">
                            <button type="button" v-on:click="sortFucntion" id="myBtn" style="padding: 0;border: none;background: none;">割合 ⇅</button>
                        </td>
                    </tr>
                    <tr v-for="(item, index) in list_title">
                        <!-- <td style="text-align: left;">@{{index + 1}}.@{{item.title}}</td> -->
                        <td style="text-align: left;">@{{item.title}}</td>
                        <td>@{{item.total}}</td>
                        <td>@{{item.rate}}%</td>
                    </tr>
                    <tr>
                        <td style="background: #F6F6F6; text-align: left;">合計</td>
                        <td style="background: #F6F6F6;">@{{total}}</td>
                        <td style="background: #F6F6F6;">100%</td>
                    </tr>
                </tbody>
            </table>
            <!-- <div id="chartContainer" width="250px" height="100px"></div> -->
            <!-- <span style="display: inline-block;"><div id="chartContainer" ></span> -->
            <canvas id="myChart" style="display: inline-block;"></canvas>
        </div>
        <div class="col-sm-12">
            <div style="display: flex; align-items: center">
                <div class="tab_data_right_top">
                    <div type="button" class="btn btn-sns-line-outline-default " v-bind:class="(type_display == 0) ? 'activeTab' : ''" v-on:click="openTabContent(0)" style="padding-bottom: 31px; margin-left: -15px;">一覧</div>
                    <div type="button" class="btn btn-sns-line-outline-default " v-bind:class="(type_display == 1) ? 'activeTab' : ''" v-on:click="openTabContent(1)" style="padding-bottom: 31px;margin-left: 10px;">コメント</div>
                </div>
            </div>
        </div>
        <div v-if="type_display == 0">
            <table class="cancelList table-hover table-responsive" id="cancelList" style="margin-top:55px; background-color: #FFFFFF;">
                <tr>
                    <td style=" background-color: #F2F2F2 ; border-radius: 5px 0px 0px 5px; width: 19%; text-align: left; ">解約日時</td>
                    <td style="background: #F2F2F2; width: 17%;">継続回数</td>
                    <td style="background: #F2F2F2; width: 19%; text-align: left;">ユーザー名</td>
                    <td style="border-radius: 0px 5px 5px 0px; background: #F2F2F2; width: 45%; text-align: left;">選択肢</td>
                </tr>
                <tr v-if="list_cancel.length > 0" v-for="(item, index) in list_cancel">
                    <td style="text-align: left;">
                        @{{ formatDate(item.time_cancel) }}
                    </td>
                    <td>@{{item.totalBill}}</td>
                    <td style="text-align: left;">
                        <a :href="'manage-payment/' +item.id + '?form_p=3' " style="text-decoration: underline; font-weight: bold;"> @{{ item.username }}</a>
                    </td>
                    <td style="text-align: left;">
                        <template v-for="(sub_item, index) in   item.reason">
                            <span v-if="index == item.reason.length -1 "> @{{sub_item.index}} </span>
                            <span v-else> @{{sub_item.index}}, </span>
                        </template>
                        <span></span>
                    </td>
                </tr>
            </table>
        </div>
        <div v-if="type_display == 1">
            <table class="cancelCmt table-hover table-bordered table-responsive" id="cancelCmt" style="margin-top:55px;">
                <template v-if="list_cmt.length > 0" v-for="(item, index) in list_cmt">
                    <!-- <template v-if="list_cancel.length > 0" v-for="(item, index) in list_cancel"> -->
                    <tr v-if="item.note">
                        <!-- <tr > -->
                        <td style="background: #F2F2F2; width: 2.5%; text-align: left; border: none">解約日時</td>
                        <td style="background-color:#F2F2F2 ;width: 5%;text-align: left; border: none ">
                            @{{ formatDate(item.time_cancel) }}
                        </td>
                        <td style="background-color:#F2F2F2 ;width: 9%;text-align: left; border: none; ">
                            <a :href="'manage-payment/' +item.id + '?form_p=3'" style="text-decoration: underline; font-weight: bold;"> @{{ item.username }}</a>
                        </td>
                    </tr>
                    <tr v-if="item.note">
                        <!-- <tr > -->
                        <td colspan="5" style="height: 100px;">@{{ item.note }}</td>
                    </tr>
                </template>
            </table>
        </div>
        <a :href="'/admin/list-cancel-contract?filter_time='+filter_month" type="button" class="btn " style="background-color: #96ADB2; color: #FFFFFF; font-weight: bold; width: 150px; height: 47px; line-height: 35px; margin-left: 15px; text-decoration: none; margin-left: -1px;"> 戻る</a>
    </section>

</article>

@endsection
@push('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="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="/js/vue-paginate.js"></script>
<script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
<script src="{{asset('js/affiliate_info/manage_aff_v2.js')}}?v={{config("sns-line.version")}}"></script>
<script type="application/javascript" src="/js/park_template/index.js?v={{config("sns-line.version")}}"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-pie.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="application/javascript" src="/js/admin/cancel_contracts_reason.js?v={{config("sns-line.version")}}"></script>

<script>
    $(document).ready(function() {
        var datePickerObj = {
            format: 'yyyy-mm-dd',
            todayHighlight: true,
            autoclose: true
        };

        $('.datepicker').datepicker(datePickerObj);
    });
</script>


@endpush