@extends('layout.basic.main')
@section('title', '単品商品（注文詳細）')
@push('css')
    <link rel="stylesheet" href="/css/base/main.css?v={{config("sns-line.version")}}">
    <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="/css/sales/v2/single-item-detail.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/sales/v2/order-history-detail.css?v={{config("sns-line.version")}}">
    <style>

    </style>
@endpush
@section('content')
    <div class="container-fluid">
        <div id="order-history-detail" v-cloak>
            <div class="row">
                <div class="col-sm-8" style="padding-right: 0; padding-left: 0px">
                    <div class="mt-3">
                        <h3 class="f-weight-bold d-inline-block">注文詳細</h3>
                        <div class="info-item">
                            <div class="item">
                                <div class="f-weight-bold first-w-120">購入者名</div>
                                <div class="f-weight-bold">
                                    <div v-if="item.line_user">
                                        <img class="img-line-user" :src="item.line_user.avatar_url ? item.line_user.avatar_url : '/images/blank_avatar.png'" alt="">
                                        <a :href="'/basic/friendlist/my_page/' + item.line_user.id" target="_blank" style="line-height: 40px;text-decoration: underline" class="text-underline; f-weight-bold">@{{ item.line_user.name }}@{{ item.line_user.view_name ? '/' : '' }}@{{ item.line_user.view_name }}</a>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="f-weight-bold first-w-120">商品名</div>
                                <div>
                                    <a :href="'/basic/sales/get-single-item-detail/' + product.hashId + '?typePayment=0&screen=history'" class="text-underline f-weight-bold">@{{ item.name_item }}</a>
                                </div>
                            </div>
{{--                            <div class="item">--}}
{{--                                <div class="f-weight-bold first-w-120">販売価格</div>--}}
{{--                                <div>--}}
{{--                                    <span class="f-weight-bold">@{{ formatNumber(product.amount) }}円</span>--}}
{{--                                </div>--}}
{{--                            </div>--}}
                            <div class="item">
                                <div class="f-weight-bold first-w-120">商品価格</div>
                                <div>
                                    <span class="f-weight-bold">@{{ formatNumber(product.amount) }}円（税込）</span>
                                </div>
                            </div>
                            <div class="item" v-if="product.type_payment == 0">
                                <div class="f-weight-bold first-w-120">購入個数 </div>
                                <div>
                                    <span class="f-weight-bold">@{{ item.quantity_purchased }}</span>
                                </div>
                            </div>
                            <div class="item" v-if="product.type_payment == 0">
                                <div class="f-weight-bold first-w-120">決済金額 </div>
                                <div>
                                    <span class="f-weight-bold">@{{ formatNumber(item.amount_order) }}円（税込）</span>
                                </div>
                            </div>

                            <div class="item">
                                <div class="f-weight-bold first-w-120">ステータス</div>
                                <div>

                                    @if($product->payment_method == 'stripe')
                                        <a
                                            @if(!empty($accountPayment))
                                               target="_blank"  :href="item.payment_new == 0 ? 'https://dashboard.stripe.com/{{$accountPayment}}/' + (item.flag_environment == 0 ? 'test/' : '') + (item.o_strip_charge_id ? 'payments' : 'customers') +'/' + (item.o_strip_charge_id ? item.o_strip_charge_id : item.o_strip_customer_id) :
                                               'https://dashboard.stripe.com/{{$accountPayment}}/' + (item.flag_environment == 0 ? 'test/' : '') + 'payments' +'/' +  item.o_strip_charge_id"
                                            @else
                                                href="javascript:void(0)"
                                            @endif
                                        >
                                        @else
                                            <a
                                               @if(!empty($univapayAppId))
                                                   target="_blank"  :href="'https://merchant.univapay.com/dashboard/transactions/store/{{ $univapayAppId }}/charge/'+ item.o_univapay_charge_id"
                                               @else
                                                   href="javascript:void(0)"
                                                @endif
                                            >
                                    @endif

                                                <label v-if="item.status_order == 1" class="btn-status-bill-success btn-status-bill ">
                                                    @{{ [0, 3, 4].includes(item.status_webhook) ? '決済処理中' : '決済成功' }}
                                                </label>
                                                <label v-else-if="item.status_order == 2" class=" btn-sns-line-secondary btn-status-bill ">
                                                    返金済み
                                                </label>
                                        </a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="first-w-120 f-weight-bold">購入日時</div>
                                <div class="f-weight-bold">
                                    @{{ moment(item.payment_date).format('YYYY.MM.DD') }} <span class="pl-3"> @{{ moment(item.payment_date).format('HH:mm:ss') }}</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="first-w-120 f-weight-bold">注文番号</div>
                                <div class="f-weight-bold">
                                    @{{ item.id }}
                                </div>
                            </div>
                            <div class="item">
                                <div class="first-w-120 f-weight-bold">本番/テスト</div>
                                <div>
                                    <span class="f-weight-bold" v-if="item.flag_environment == 0">テスト</span>
                                    <span class="f-weight-bold" v-else>本番決済</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="f-weight-bold first-w-120">カード情報</div>
                                <div class="f-weight-bold">
                                    <span v-if="item.o_strip_brand_name && item.o_strip_last4">@{{item.o_strip_brand_name}} **** **** **** @{{item.o_strip_last4}}</span>
                                    <span v-if="item.o_univapay_brand_name && item.o_univapay_last4">@{{item.o_univapay_brand_name}} **** **** **** @{{item.o_univapay_last4}}</span>
                                </div>
                            </div>
{{--                            <div class="item">--}}
{{--                                <div class="f-weight-bold first-w-120">領収書</div>--}}
{{--                                <div>--}}
{{--                                    <button class="btn btn-sns-line-success btn-shadown-dropdown w-150 btn-sns-line">ダウンロード</button>--}}
{{--                                </div>--}}
{{--                            </div>--}}
                        </div>
                        <div class="sales-history" v-if="item.detail_info_user.length > 0">
                            <div>
                                <h3 class="d-inline-block f-weight-bold">友だち情報</h3>
                            </div>
                            <div class="mt-4">
                                <div class="info-friend">
                                    <div v-for="(friendInfo, index) of item.detail_info_user" :key="friendInfo.id" class="item-info-friend">
                                        <div class="f-weight-bold">
                                            @{{ friendInfo.title }}
                                        </div>
                                        <div class="f-weight-bold">
                                            @{{ friendInfo.value }}
                                        </div>
                                    </div>
                                </div>
                             </div>
                        </div>
                        <div>
                            <button @click="history.back()" style="float: left; padding: 0px 50px;margin-top: 30px; height: 42px; width: 150px; line-height: 42px" class="btn btn-sns-line btn-shadown-dropdown btn-sns-line-secondary">戻る</button>
                            <button v-if="item.status_order == 1 && ![0, 3, 4].includes(item.status_webhook)" @click="showModalConfirmRefund()" data-toggle="modal" data-target="modalConfirmRefund" style="float: right; padding: 0px 50px;margin-top: 30px; height: 42px; width: 150px; line-height: 42px" class="btn btn-sns-line btn-shadown-dropdown btn-sns-line-danger">返金する</button>
                        </div>
                     </div>
                </div>
            </div>
            <div class="modal fade" id="modalConfirmRefund"
                 tabindex="-1" role="dialog"
                 data-backdrop="static"
                 data-keyboard="false"
                 aria-labelledby="chatSettingStatus">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true" style="opacity: 1;font-size: 27px"
                            >
                                <i class="fas fa-times hover-icon-action" style="color: rgba(125,145,149,1); padding: 5px 10px; border-radius: 4px;"></i></button>
                            <h3 class="text-center" style="font-weight: bold">返金確認</h3>

                        </div>
                        <div class="modal-body scroll-modal">
                            <div class="content-confirm-refund">
                                <h3 class="text-center"><span>注意</span></h3>
                                <div>
                                    <p style="margin-bottom: 10px" class="f-weight-bold">・返金金額は、連携している決済システム内の売上残高から差し引かれます。</p>
                                    <p style="margin-bottom: 10px" class="f-weight-bold">・連携している決済システム内の売上残高が不足している場合は、返金エラーとなりますので 　予め売上残高をご確認下さい。</p>
                                    <p style="margin-bottom: 10px" class="f-weight-bold">・この画面から返金を行った場合、友だちが支払った全額が返金されます。（決済手数料差し引　きでの返金等を行いたい場合は、決済システム管理画面から返金を行ってください）</p>
                                </div>
                            </div>
                            <div class="mt-4 action-refund">
                                <div class="action-refund-item" :class="{active: autoRefund == 1}">
                                    <label class="c-radio">この画面から返金を行う（決済金額全額が返金されます）
                                        <input type="radio" value="1" v-model="autoRefund">
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                                <div class="action-refund-item mt-3" :class="{active: autoRefund == 0}">
                                    <label class="c-radio">
                                        返金は決済システム管理画面から行い、エルメ上のステータスのみ返金済みに変更する <br>
                                        （決済システム管理画面からの返金の場合、返金金額が自由に設定できます）
                                        <input type="radio" value="0" v-model="autoRefund">
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="text-center">
                            <button @click="OrderCancelButton(orderRefundId)" class="btn btn-sns-line btn-sns-line-danger btn-confirm-refund">決定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection
@push('js')
    <script>
        let item = @json($orderHistory);
        let product = @json($product);
        console.log(product)
        console.log('item',item)

    </script>
    <script src="/js/sales/v2/order-history-detail.js?v={{config("sns-line.version")}}"></script>
@endpush