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

        label:after {
            content: '';
        }

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

        #table_edit_cycle_order {
            background: rgba(229,229,229,1);
            padding: 15px !important;
            border-radius: 5px;
        }

        #table_cycle_order {
            background: rgba(229,229,229,1);
            padding: 15px !important;
            border-radius: 5px;
        }

        .row-order {
            margin: 10px 10px 20px 10px;
            min-height: 35px;
            background: rgba(255,255,255,1);
            display: flex;
        }

        .row-order-header {
            margin: 10px 10px 15px 10px;
            height: 35px;
            background: rgba(0,165,172,1);
            padding-bottom: 15px;
            text-align: center;
            border-radius: 5px;
        }



        .head-order {
            text-align: center !important;
            color: white;
            background: rgba(0,165,172,1) !important;
            min-height: 35px;
            border-radius: 5px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .body-order {
            color: black;
            padding: 10px;
            min-height: 35px;
            background: rgba(255,255,255,1);
        }

        .table-striped td {
            background: unset;
        }

        .button-cancel {
            background-color: rgba(244,67,54,1);
            padding: 4px;
            width: 160px !important;
            color: white;
            border-radius: 5px;
            float: right;
        }
        .btn-back{
            margin-left: 15px;
            width: 100px;
            background-color: #e5d1d1;
            color: black;
        }

        .cell-order {
            background: rgba(0,165,172,1);
            color: white;
        }

        .btn-status {
            color: white;
            padding: 3px;
            border-radius: 5px;
            margin: 0 auto;
        }

        .btn-refund {
            color: white;
            padding: 3px;
            width: 70%;
            border-radius: 5px;
            margin: 0 auto;
        }

    </style>
@endpush
@section('content')
    <article class="">
        <section id="edit-cycle-order">
            <p style="margin-bottom: 15px; font-size: 15px; color: #222222"></p>
            <div class="listfillter">
                <div class="listtop_l">
                    <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 20px 0">注文詳細</h2>
                </div>
                <div class="listtop_r">
                    @if($cycle->status_bill == 1 && $cycle->cycle_payment != 0 && $cycle->status_trial == 1)<button class="btn button-cancel" data-cancel_type="trial" id="button_cancel" data-cycle_id="{{$cycle->id}}">継続キャンセル（解約）</button> @endif
                    @if($cycle->status_bill == 1 && $cycle->cycle_payment != 0 && $cycle->status_trial == 0)<button class="btn button-cancel" data-cancel_type="" id="button_cancel" data-cycle_id="{{$cycle->id}}">継続キャンセル（解約）</button> @endif
                </div>
            </div>
            <div id="table_edit_cycle_order">
                <div class ="row-order row">
                    <div class="head-order col-md-3" width="20%">継続注文番号</div>
                    <div class="body-order col-md-9" width="80%"> {{$cycle->id}}</div>
                </div>
                <div class ="row-order row">
                    <div class="head-order col-md-3" width="20%">商品名</div>
                    <div class="body-order col-md-9" width="80%"><a href="{{route('editItem',['id' => $cycle->item_id])}}" target="_blank"> {{$cycle->name_item}}</a></div>
                </div>
                <div class ="row-order row">
                    <div class="head-order col-md-3" width="20%">商品価格</div>
                    <div class="body-order col-md-9" width="80%"> {{number_format($cycle->status_bill == 1 ? $cycle->current_amount : $cycle->amount_item)}}円</div>
                </div>
                <div class ="row-order row">
                    <div class="head-order col-md-3" width="20%">初回トライアル価格</div>
                    @if($cycle->status_bill != 1)
                        <div class="body-order col-md-9" width="80%">
                            @if(isset($cycle->amount_first) && $cycle->amount_first != 0) {{number_format($cycle->amount_first)}}円 @endif
                            @if((!isset($cycle->amount_first)) || ( isset($cycle->amount_first) && $cycle->amount_first == 0)) 設定なし@endif
                        </div>
                    @endif
                    @if($cycle->status_bill == 1)
                        <div class="body-order col-md-9" width="80%">
                            @if(isset($cycle->current_amount_first) && $cycle->current_amount_first != 0) {{number_format($cycle->current_amount_first)}}円 @endif
                            @if((!isset($cycle->current_amount_first)) || ( isset($cycle->current_amount_first) && $cycle->current_amount_first == 0)) 設定なし@endif
                        </div>
                    @endif
                </div>
                <div class ="row-order row">
                    <div class="head-order col-md-3" width="20%">トライアル日数</div>
                    <div class="body-order col-md-9" width="80%">
                        @if(isset($cycle->number_trial_date)) {{$cycle->number_trial_date}}日 @endif
                        @if(!isset($cycle->number_trial_date)) 設定なし @endif
                     </div>
                </div>
{{--                <div class ="row-order row">--}}
{{--                     <div class="head-order col-md-3" width="20%">購入者名</div>--}}
{{--                     <div class="body-order col-md-9" width="80%"> {{$cycle->name_friend}} </div>--}}
{{--                </div>--}}
                <div class ="row-order row">
                    <div class="head-order col-md-3" width="20%">LINE登録名</div>
                    <div class="body-order col-md-9" width="80%"><a href="{{route('friendlistMypage',['id' => $cycle->line_user_id])}}" target="_blank">{{$cycle->name}}</a></div>
                </div>
                <div class ="row-order row">
                    <div class="head-order col-md-3" width="20%">初回購入日時</div>
                    <div class="body-order col-md-9" width="80%">{{$cycle->c_register_date}}</div>
                </div>
                <div class ="row-order row">
                    <div  class="head-order col-md-3" width="20%">本番/テスト</div>
                    <div class="body-order col-md-9" width="80%">
                        @if($cycle->flag_environment == 0) テスト @endif
                        @if($cycle->flag_environment == 1) 本番 @endif
                    </div>
                </div>
{{--                <div class ="row-order row">--}}
{{--                    <div class="head-order col-md-3" width="20%">メールアドレス</div>--}}
{{--                    <div class="body-order col-md-9" width="80%">{{$cycle->email_friend}}</div>--}}
{{--                </div>--}}
{{--                <div class ="row-order row">--}}
{{--                    <div class="head-order col-md-3" width="20%">電話番号</div>--}}
{{--                    <div class="body-order col-md-9" width="80%">{{$cycle->phone_friend}}</div>--}}
{{--                </div>--}}
                <div class ="row-order row">
                    <div class="head-order col-md-3" width="20%">カード情報</div>
                    <div class="body-order col-md-9" width="80%" >{{$cycle->c_strip_brand_name}} **** **** **** {{$cycle->c_strip_last4}}</div>
                </div>
                <div class ="row-order row" style="min-height: 35px">
                    <div class="head-order col-md-3" width="20%">キャンセル</div>
                    <div class="body-order col-md-9" width="80%" id="text_cancel">
                        @if($cycle->status_bill == 3) キャンセル済 - {{ $cycle->c_cancel_date }} @endif
                    </div>
                </div>
                @foreach($infoUser as $info)
                    <div class ="row-order row">
                        <div class="head-order col-md-3" width="20%">{{ $info->title }}</div>
                        <div class="body-order col-md-9" width="80%"><div>{{ $info->value }}</div></div>
                    </div>
                @endforeach
            </div>
            <div class="listfillter" style="margin-top: 30px">
                <div class="listtop_l">
                    <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">決済履歴</h2>
                </div>
            </div>
            <div id="table_cycle_order">
                <div class="row-order-header row">
                    <div class="body-order cell-order col-md-2" style="border-top-left-radius: 5px;border-bottom-left-radius: 5px">決済回数</div>
                    <div class="body-order cell-order col-md-2">注文番号</div>
                    <div class="body-order cell-order col-md-2">請求日</div>
                    <div class="body-order cell-order col-md-2">決済日</div>
                    <div class="body-order cell-order col-md-2">ステータス</div>
                    <div class="body-order cell-order col-md-2" style="border-top-right-radius: 5px;border-bottom-right-radius: 5px">返金</div>
                </div>
                @foreach($orderDetail as $order)
                    <div class ="row-order row" style="border-radius: 5px;text-align: center">
                        <div class="body-order col-md-2" style="border-radius: 5px;display: flex;align-items: center;justify-content: center;">{{ count($orderDetail)-($loop->index) }}</div>
                        <div class="body-order col-md-2" style="display: flex;align-items: center;justify-content: center;">{{$order->id}}</div>
                        <div class="body-order col-md-2" style="display: flex;align-items: center;justify-content: center;">{{ date('Y-m-d', strtotime($order->payment_date)) }}</div>
                        <div class="body-order col-md-2" style="display: flex;align-items: center;justify-content: center;">
                            @if(!empty($order->bill_success_date)) {{ date('Y-m-d', strtotime($order->bill_success_date)) }} @endif
                            @if(empty($order->bill_success_date)) - @endif
                        </div>
                        <div class="body-order col-md-2" style="display: flex;align-items: center;justify-content: center;">
                            @if($order->status_trial == 0)
                                @if(!empty($accountPayment))
                                    @if($order->flag_environment == 0)
                                        <a href="https://dashboard.stripe.com/{{$accountPayment}}/test/customers/{{$order->o_strip_customer_id}}" target="_blank">
                                            @endif
                                            @if($order->flag_environment == 1)
                                                <a href="https://dashboard.stripe.com/{{$accountPayment}}/customers/{{$order->o_strip_customer_id}}" target="_blank">
                                                    @endif
                            @if($order->status_order != 3)<div class="btn-status" style="background: rgba(0,165,172,1);">支払い済</div> @endif
                            @if($order->status_order == 3)<div class="btn-status" style="background: rgba(244,67,54,1)">延滞中</div> @endif
                                                </a>
                                @endif
                                @endif
                             @if($order->status_trial == 1)
                                                <div class="btn-status" style="background: rgb(224,220,19);">トライアル</div>
                             @endif
                        </div>
                        <div class="body-order col-md-2" style="border-radius: 5px;display: flex;align-items: center;justify-content: center;">
                            @if($order->status_order == 2)<div class="btn-refund" style="background: rgba(172,172,172,1)">返金済</div> @endif
                            @if($order->status_order == 1)<div class="btn-refund" style="background: rgba(244,67,54,1);cursor: pointer" onclick="OrderCancelButton({{$order->id}})">返金</div> @endif
                        </div>
                    </div>
                 @endforeach
            </div>
            <a href="{{route('cycleOrderHistory')}}"><button class="btn btn-back" style="margin-left: unset;margin-top: 20px">戻る</button></a>
        </section>
    </article>

@endsection
@push('js')
    <script>
        $(function () {
            $("#edit-cycle-order").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) {
                        if (data.success) {
                            alert(cancel_type + "をキャンセルしました");
                            // $('#status_cancel').html(cancel_type + 'をキャンセルしました');
                            window.location.reload();
                        } else {
                            alert("キャンセル失敗しました");
                        }
                    },
                    error: function () {
                        alert("キャンセル失敗しました");
                    }
                });
            });
        });
        function OrderCancelButton(cancel_order_id) {
            if(!confirm("この注文をキャンセルしてよいですか？\n\nstripe決済手数料は返還されませんので、ご注意ください")) return;
            var $btn = $(this);
            var data = new FormData();
            data.append("order_id", cancel_order_id);
            $.ajax({
                url:"/ajax/cancel-order",
                type:"post",
                data:data,
                processData:false,
                contentType:false,
                cache:false,
                async:false,
                dataType:"json",
                success: function(order){
                    if(order.success) {
                        alert("注文をキャンセルしました");
                        // $('#btn-cancel').html('注文をキャンセルしました');
                        window.location.reload();
                    } else {
                        alert("キャンセル失敗しました");
                    }
                },
                error: function(){
                    alert("キャンセル失敗しました");
                }
            });
        };
        function SaveCycleOrder(cycle_order_id) {
            var data = new FormData();
            data.append("name_friend", $('#name_input').val());
            data.append("email_friend", $('#email_input').val());
            data.append("phone_friend", $('#phone_input').val());
            data.append("cycle_order_id", cycle_order_id);
            $.ajax({
                url:"/ajax/save-cycle-order",
                type:"post",
                data:data,
                processData:false,
                contentType:false,
                cache:false,
                async:false,
                dataType:"json",
                success: function(data){
                    if(data.success) {
                        window.location.href="/basic/cycle-order-history";
                    } else {
                        alert("失敗を保存");
                    }
                },
                error: function(){
                    alert("失敗を保存");
                }
            });
        };
    </script>
@endpush