@extends('layout.basic.main')
@push('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: 40%;
        margin-top: 35px;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .cancelReason {
        width: 40%;
        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: 9%; 
        text-align: left; 
        border: none
    }

    #myChart {
        width: 100%;
        max-width:50%;
        height: 100%; 
        max-height: 70%;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 80px;
        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;
        font-weight: bold;
        border: 2px solid #7D9195;
        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-dark{
        width: 150px;
        height: 40px;
        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: 45px;
        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);
    }
    
</style>
@endpush
@section('content')
<article>
    <section>
        <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;" 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; border: 1px solid #E8E8E8; height: 40px; font-size: 17px">
                <i class="fas fa-chevron-right" v-on:click="nextMonth()"></i>
            </div>
            <span style="margin-left: 20px;">
                <button type="button" class="btn btn-sns-line btn-sns-line-dark" 
                style="width: 100px; height:40px; padding: 8px; font-size: 15px;font-weight: bold;">全期間
                </button>
            </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>50</td>
                        <td>100</td>
                        <td>2</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: #7D9195; color: #FFFFFF; width: 20.5vw;">選択肢</td>
                        <td style="background: #7D9195; color: #FFFFFF; width: 6vw">選択数</td>
                        <td style="background: #7D9195; color: #FFFFFF; width: 6vw">割合 ⇅</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">1.LINE公式アカウントだけで運用ができる</td>
                        <td>4</td>
                        <td>4%</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">2.売上拡大など想定していた効果が得られなかった</td>
                        <td>11</td>
                        <td>11%</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">3.料金が高い</td>
                        <td>15</td>
                        <td>15%</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">4.利用したい機能がない</td>
                        <td>12</td>
                        <td>12%</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">5.システムが使いにくい / 使い方がわからない</td>
                        <td>5</td>
                        <td>5%</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">6.LINE公式アカウント自体が利用停止になった</td>
                        <td>8</td>
                        <td>8%</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">7.他社のサービスに乗り換える</td>
                        <td>14</td>
                        <td>14%</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">8.LINE公式アカウント自体を利用しなくなった</td>
                        <td>9</td>
                        <td>9%</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">9.サービス・サポートが悪い</td>
                        <td>3</td>
                        <td>3%</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">10.間違えて契約した</td>
                        <td>16</td>
                        <td>16%</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">11.その他</td>
                        <td>3</td>
                        <td>3%</td>
                    </tr>
                    <tr>
                        <td style="background: #F6F6F6; text-align: left;">合計</td>
                        <td style="background: #F6F6F6;">100%</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 id="btn-group-a">
            <button type="button" class="btn btn btn-sns-line btn-sns-line-outline-default " id="listBtn" >一覧</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-dark " id="commentBtn">コメント</button>
        </div>
        <div>
            <table class="cancelList table-hover table-responsive"  id="cancelList" style="background: none; display: none;">
                <tbody>
                    <tr>
                        <td style="border-radius: 5px 0px 0px 5px; background: #F2F2F2; width: 20%; text-align: left; ">解約日時</td>
                        <td style="background: #F2F2F2; width: 10%;">継続回数</td>
                        <td style="background: #F2F2F2; width: 20%; text-align: left;">ユーザー名</td>
                        <td style="border-radius: 0px 5px 5px 0px; background: #F2F2F2; width: 50%; text-align: left;">選択肢</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">2023-01-01</td>
                        <td>1</td>
                        <td style="text-align: left;"><a>ユーザー名</a></td>
                        <td style="text-align: left;">1</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">2023-01-01</td>
                        <td>2</td>
                        <td style="text-align: left;"><a>ユーザー名</a></td>
                        <td style="text-align: left;">2,3</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">2023-01-01</td>
                        <td>1</td>
                        <td style="text-align: left;"><a>ユーザー名</a></td>
                        <td style="text-align: left;">2,3,7</td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">2023-01-01</td>
                        <td>2</td>
                        <td style="text-align: left;"><a>ユーザー名</a></td>
                        <td style="text-align: left;">4,7,9</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div>
            <table class="cancelCmt table-hover table-bordered table-responsive" id="cancelCmt">
                <tbody>
                    <tr >
                        <td id="cancelCmtRow">解約日時</td>
                        <td id="cancelCmtRow">2023-01-05</td>
                        <td id="cancelCmtRow">18:00</td>
                        <td id="cancelCmtRow"><a>ユーザー名</a></td>
                        <td style="background: #F2F2F2; width: 67%; border: none;"></td>
                    </tr>
                    <tr>
                        <td colspan="5" style="height: 100px;  ">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントココメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメメントコメントコメントコメ</td>
                    </tr>
                    <tr>
                        <td id="cancelCmtRow">解約日時</td>
                        <td id="cancelCmtRow">2023-01-05</td>
                        <td id="cancelCmtRow">18:30</td>
                        <td id="cancelCmtRow"><a>ユーザー名</a></td>
                        <td style="background: #F2F2F2; width: 67%; border: none;"></td>
                    </tr>
                    <tr>
                        <td colspan="5" style="height: 100px; ">コメントコメントコメントコメコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメ</td>
                    </tr>
                    <tr>
                        <td id="cancelCmtRow">解約日時</td>
                        <td id="cancelCmtRow">2023-01-05</td>
                        <td id="cancelCmtRow">19:00</td>
                        <td id="cancelCmtRow"><a>ユーザー名</a></td>
                        <td style="background: #F2F2F2; width: 67%; border : none"></td>
                    </tr>
                    <tr>
                        <td colspan="5" style="height: 100px; ">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメ</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <a class="btn btn-sns-line btn-sns-line-secondary" href="">戻る</a>
    </section>
</article>
@endsection
@push('js')
<script type="text/javascript">
var xValues =  ["その他","その他","その他","その他","その他"];
var yValues = [16, 15, 14, 12, 11, 9, 8, 5, 4, 3, 3];
var barColors = [
    '#5383EC' ,
    '#D85140' ,
    '#F1BF42' ,
    '#58A65C' ,
    '#ED762F' ,
    '#69BBC4' ,
    '#85A9F1' ,
    '#E18176' ,
    '#F5D266' ,
    '#84C08C' ,
    '#F19E5C' 
];

new Chart("myChart", {
  type: "doughnut",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues,
      borderWidth: 0
    }],
  },
});

document.getElementById('listBtn').addEventListener("click",function(){
    showTable('cancelList');
});
document.getElementById('commentBtn').addEventListener("click",function(){   
    showTable('cancelCmt');
});

function showTable(table){
    var tables =['cancelList','cancelCmt'];    
    for(var i=0;i<2;i++){
        document.getElementById(tables[i]).style.display = "none";    
    }
    document.getElementById(table).style.display = "block";
    
}

    $(function(){
        $('#listBtn').click(function(){
            if ($(this).hasClass("btn btn-sns-line btn-sns-line-outline-default")){
                    $(this).removeClass('btn btn-sns-line btn-sns-line-outline-default').addClass('btn btn-sns-line btn-sns-line-dark');
                    $('#commentBtn').removeClass('btn btn-sns-line btn-sns-line-dark').addClass('btn btn-sns-line btn-sns-line-outline-default');
            } else {
                    $(this).removeClass('btn btn-sns-line btn-sns-line-dark').addClass('btn btn-sns-line btn-sns-line-outline-default');
                    $('#commentBtn').removeClass('btn btn-sns-line btn-sns-line-outline-default').addClass('btn btn-sns-line btn-sns-line-dark');
            }
        });
    });

    $(function(){
        $('#commentBtn').click(function(){
            if ($(this).hasClass("btn btn-sns-line btn-sns-line-dark")){
                    $(this).removeClass('btn btn-sns-line btn-sns-line-dark').addClass('btn btn-sns-line btn-sns-line-outline-default');
                    $('#listBtn').removeClass('btn btn-sns-line btn-sns-line-outline-default').addClass('btn btn-sns-line btn-sns-line-dark');
            } else {
                    $(this).removeClass('btn btn-sns-line btn-sns-line-outline-default').addClass('btn btn-sns-line btn-sns-line-dark');
                    $('#listBtn').removeClass('btn btn-sns-line btn-sns-line-dark').addClass('btn btn-sns-line btn-sns-line-outline-default');
            }
        });
    });

// window.onload = function () {
//     var chart = new CanvasJS.Chart("chartContainer",
//     {
//       data: [
//       {
//        type: "doughnut",
//        dataPoints: [
//        {  y: 16, indexLabel: "test" },
//        {  y: 15, indexLabel: "test" },
//        {  y: 14, indexLabel: "test" },
//        {  y: 12, indexLabel: "test" },
//        {  y: 11, indexLabel: "test" },
//        {  y: 9, indexLabel: "Others" },
//        {  y: 8, indexLabel: "Others" },
//        {  y: 5, indexLabel: "Others" },
//        {  y: 4, indexLabel: "Others" },
//        {  y: 3, indexLabel: "Others" },
//        {  y: 3, indexLabel: "Others" },
//        ]
//      }
//      ]
//    });
//     chart.render();
//   }
</script>
@endpush
@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 src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.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>