@extends('layout.basic.main')
@push('css')
    <style>

        .modal-title-header {
            margin-top: 15px;
            padding: 5px 15px;
            /*border-bottom: 1px solid #e5e5e5;*/
            background-color: #2ab27b;
            color: #ffffff;
            font-weight: bold;
        }

        .sub h4 {
            margin: 0;
        }

        .hasbtn a:hover {
            cursor: pointer;
        }

        .listtop_l ul li.time_now {
            margin-top: 5px;
        }

        @media screen and (max-width: 1023px) {
            .listtop_r {
                width: 40%;
            }
        }

        @media screen and (min-width: 1024px) {
            .listtop_r {
                width: 36%;
            }
        }

        @media screen and (min-width: 1280px) {
            .listtop_r {
                width: 20%;
            }
        }

        label:after {
            content: '';
        }

        .input-sm {
            line-height: 1.5 !important;
        }

        #table_cycle_order th {
            padding: 2px;
            background-color: rgba(8,191,90,1) !important;
        }

        #table_cycle_order td {
            padding: 2px;
            background: unset;
        }

        #table_cycle_order td .btn {
            padding: 4px !important;
            width: 90px;
        }

        .button-cancel {
            background-color: #dd4b39;
            padding: 2px;
            width: 160px !important;
            color: white;
            border-radius: 3px;
        }

        .table th {
            vertical-align: middle !important;
        }

        #table_cycle_order_filter{
            float: right;
        }

        .btn-status-bill {
            width: 100px;
            padding: 5px;
            border-radius: 5px;
            color: white;
            margin: auto;
            text-align: center;
        }

    </style>
@endpush
@section('content')
    <article class="">
        <section id="cycle-order-history">
            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">継続商品販売履歴</h2>
            <p style="margin-bottom: 15px; font-size: 15px; color: #222222"></p>
            <div class="listfillter">
                <div class="listtop_l">
                </div>
                <div class="listtop_r" style="text-align: right !important;margin-bottom: 15px">
                    <a href="/basic/cycle-order-history/export-csv" class="btn btn-xs btn-success" style="margin-top: 4px;;padding: 10px;background: rgba(172,172,172,1);;color: white;border: unset">
                        CSV書出し
                    </a>
                </div>
            </div>
            <table class="table table-striped" id="table_cycle_order">
                <thead>
                <tr>
                    <th style="width: 15%">最新決済日時</th>
                    <th style="width: 5%">継続注文番号</th>
                    <th style="width: 6%">本番/テスト</th>
                    <th style="width: 15%">商品名</th>
                    <th style="width: 10%">販売価格</th>
                    <th style="width: 12%">支払いサイクル</th>
{{--                    <th style="width: 12%">購入者</th>--}}
                    <th style="width: 12%">LINE名</th>
                    <th style="width: 10%">ステータス</th>
                    <th style="width: 5%">注文詳細</th>
                </tr>
                </thead>
                <tbody>
                @foreach($cycleOrder as $cycle)
                    <tr>
                        <td> @if(!empty($cycle->last_bill_id))
                                {{$cycle->last_bill_time}}
                            @endif
                            @if(empty($cycle->last_bill_id))
                                {{$cycle->c_register_date}}
                            @endif
                        </td>
                        <td>{{$cycle->id}}</td>
                        <td>
                            @if($cycle->flag_environment == 0) テスト @endif
                            @if($cycle->flag_environment == 1) 本番 @endif
                        </td>
                        <td><a href="{{route('editItem',['id' => $cycle->item_id])}}"
                               target="_blank">{{$cycle->name_item}}</a></td>
                        <td>{{number_format($cycle->status_bill == 1 ? $cycle->current_amount : $cycle->amount_item)}}円</td>
                        <td>
                            @if($cycle->cycle_payment == config('sns-line.item_type_payment.weekly')) 毎週 @endif
                            @if($cycle->cycle_payment == config('sns-line.item_type_payment.monthly')) 毎月 @endif
                            @if($cycle->cycle_payment == config('sns-line.item_type_payment.3month')) 3ヶ月毎 @endif
                            @if($cycle->cycle_payment == config('sns-line.item_type_payment.6month')) 6ヶ月毎 @endif
                            @if($cycle->cycle_payment == config('sns-line.item_type_payment.yearly')) 毎年 @endif
                        </td>
{{--                        <td>{{ $cycle->name_friend }}</td>--}}
                        <td><a href="{{route('friendlistMypage',['id' => $cycle->line_user_id])}}"
                               target="_blank">{{$cycle->name}}</a></td>
                        <td style="text-align: center">
                            @if(!empty($accountPayment))
                                @if($cycle->flag_environment == 0)
                                    <a href="https://dashboard.stripe.com/{{$accountPayment}}/test/customers/{{$cycle->c_strip_customer_id}}" target="_blank">
                                        @endif
                                        @if($cycle->flag_environment == 1)
                                            <a href="https://dashboard.stripe.com/{{$accountPayment}}/customers/{{$cycle->c_strip_customer_id}}" target="_blank">
                                                @endif
                                                @if($cycle->status_trial == 0)
                                                    @if(!empty($cycle->last_bill_id))
                                                        @if($cycle->status_bill == 1 && $cycle->status_order != 3)<div class="btn-status-bill" style="background: rgba(0,165,172,1);"> 継続中 </div> @endif
                                                        @if($cycle->status_bill == 1 && $cycle->status_order == 3)<div class="btn-status-bill" style="background: rgba(244,67,54,1);"> 延滞中 </div> @endif
                                                    @endif
                                                    @if(empty($cycle->last_bill_id))
                                                            @if($cycle->status_bill == 1)<div class="btn-status-bill" style="background: rgba(0,165,172,1);"> 継続中</div> @endif
                                                    @endif
                                                        @if($cycle->status_bill == 2)<div class="btn-status-bill" style="background: rgb(19,199,70);"> 完了済 </div> @endif
                                                @endif
                                                @if($cycle->status_trial == 1)
                                                    @if($cycle->status_bill == 1)<div class="btn-status-bill" style="background: rgba(254,195,0,1);"> トライアル </div> @endif
                                                    @if($cycle->status_bill == 2)<div class="btn-status-bill" style="background: rgb(19,199,70);"> 完了済 </div> @endif
                                                @endif
                                                @if($cycle->status_bill == 3)<div class="btn-status-bill" style="background: rgba(172,172,172,1);"> キャンセル済  </div> @endif
                                            </a>
                                @endif

                        </td>
{{--                        <td>--}}
{{--                            @if(!empty($cycle->last_bill_id))--}}
{{--                                @if($cycle->status_order != 3) 成功 @endif--}}
{{--                                @if($cycle->status_order == 3) 失敗 @endif--}}
{{--                            @endif--}}
{{--                        </td>--}}
{{--                        <td>--}}
{{--                            @if($cycle->status_trial == 1 && $cycle->status_bill == 1)--}}
{{--                                <button class="btn button-cancel" data-cancel_type="trial"--}}
{{--                                        data-cycle_id="{{$cycle->id}}"> トライアルキャンセル--}}
{{--                                </button> @endif--}}
{{--                            @if($cycle->status_trial == 0 && $cycle->status_bill == 1 && $cycle->cycle_payment != 0)--}}
{{--                                <button class="btn button-cancel" data-cycle_id="{{$cycle->id}}"> 継続注文キャンセル--}}
{{--                                </button>  @endif--}}
{{--                            @if($cycle->status_trial == 0 && $cycle->status_bill == 1 && $cycle->cycle_payment == 0)--}}
{{--                                 <button class="btn button-cancel" data-cycle_id="{{$cycle->id}}"> 注文キャンセル--}}
{{--                                 </button>  @endif--}}
{{--                        </td>--}}
                        <td>
                            <div class="btn"><a href="{{ route('editCycleOrder',['id' => $cycle->id]) }}"
                                                style="background-color: rgba(87,153,219,1)">詳細</a></div>
                        </td>
                    </tr>
                @endforeach

                </tbody>
            </table>
        </section>
    </article>
@endsection
@push('js')
    <script>
        $(document).ready(function () {
            $('#table_cycle_order').DataTable({
                responsive: true,
                language: {
                    url: '/css/plugins/datatables/dt_i18n/Japanese.lang',
                },
                columnDefs: [
                    {
                        "searchable": false,
                        "targets": [0, 2, 5, 8]
                    },
                    {
                        "sortable": false, "targets": [6, 8]
                    }
                ],
                // "lengthChange": false,
                // order:  [[ 0, "desc" ]],
                iDisplayLength: 10,
                aLengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "すべて"]],
            });
        });
        $(function () {
            $("#cycle-order-history").on("click", ".btn.button-cancel", function (event) {
                var cancel_type = "継続注文";
                if ($(this).data("cancel_type") == "trial") cancel_type = "トライアル";
                if (!confirm("この" + cancel_type + "をキャンセルしてよいですか？\n\n一度キャンセルすると再開できませんので、ご注意ください")) return;
                var $btn = $(this);
                var data = new FormData();
                data.append("cycle_order_id", $btn.data("cycle_id"));
                $.ajax({
                    url: "/ajax/cancel-cycle-order",
                    type: "post",
                    data: data,
                    processData: false,
                    contentType: false,
                    cache: false,
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data.success) {
                            alert(cancel_type + "をキャンセルしました");
                            console.log($btn);
                            $("a", $btn.closest("td").prev().prev()).text('キャンセル済');
                            $btn.remove();
                        } else {
                            alert("キャンセル失敗しました");
                        }
                    },
                    error: function () {
                        alert("キャンセル失敗しました");
                    }
                });
            });
        });
    </script>
@endpush