@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_edit_order  {
            background: rgba(229,229,229,1);
            padding: 15px !important;
            border-radius: 5px;
        }

        .button-cancel {
            background-color: #dd4b39;
            padding: 5px;
            width: 80px !important;
            color: white;
            float: right;
            border-radius: 5px;
        }
        .btn-back{
            margin-left: 15px;
            width: 100px;
            background-color: #e5d1d1;
            color: black;
        }

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

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

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

    </style>
@endpush
@section('content')
    <article class="">
        <section class="edit-order">
            <div class="listfillter">
                <div class="listtop_l">
                    <div style="font-size: 20px; color: #222222; font-weight: bold; padding: 20px 10px 10px 0">注文詳細</div>
                </div>
                <div class="listtop_r">
                    @if($order->status_trial == 0 && $order->status_order == 1)<button class="btn button-cancel" onclick="OrderCancelButton({{$order->id}})" id="button_refund">返金</button> @endif
                </div>
            </div>
            <div id="table_edit_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%">{{$order->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' => $order->item_id])}}" target="_blank">{{$order->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($order->amount_order)}} 円</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%">{{$order->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' => $order->line_user_id])}}" target="_blank">{{$order->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%">{{$order->payment_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($order->flag_environment == 0) テスト @endif
                        @if($order->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%">{{$order->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%">{{$order->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%">
                        @if(!empty($order->o_strip_brand_name) && !empty($order->o_strip_last4))
                            {{$order->o_strip_brand_name}} **** **** **** {{$order->o_strip_last4}}
                        @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%" id="text_refund">@if($order->status_order == 2) 返金済 - {{ $order->refund_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>
{{--                    <td width="20%">注文キャンセル:</td>--}}
{{--                    <td width="80%" id="status_cancel">--}}
{{--                        @if($order->status_trial == 0 && $order->status_order == 2) キャンセル済 {{$order->cancel_date}} @endif--}}
{{--                        @if($order->status_trial == 0 && $order->status_order == 3) 失敗決済はキャンセルできません @endif--}}
{{--                        @if($order->status_trial == 1) 0円決済はキャンセルできません @endif--}}
{{--                    </td>--}}
                </div>
            </div>
{{--            <button class="btn btn-primary" style="width: 100px" onclick="SaveOrder({{$order->id}})">変更</button>--}}
            <a href="{{route('orderHistory')}}" ><button class="btn btn-back" style="margin-top: 20px;margin-left: unset">戻る</button></a>
            <div class="text-center">
            </div>
        </section>
    </article>

@endsection
@push('js')
    <script>
            function OrderCancelButton(cancel_order_id) {
                if(!confirm("この注文をキャンセルしてよいですか？\n\nstripe決済手数料は返還されませんので、ご注意ください")) return;
                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("注文をキャンセルしました");
                            $('#button_refund').hide();
                            $('#text_refund').text('返金済');
                            window.location.reload();
                        } else {
                            alert("キャンセル失敗しました");
                        }
                    },
                    error: function(){
                        alert("キャンセル失敗しました");
                    }
                });
            };
            function SaveOrder(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("order_id", order_id);
                $.ajax({
                    url:"/ajax/save-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/order-history";
                        } else {
                            alert("失敗を保存");
                        }
                    },
                    error: function(){
                        alert("失敗を保存");
                    }
                });
            };
    </script>
@endpush