@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>
        .hover-icon-action:hover {
            background-color: #96ADB2 !important;
            color: white !important;
        }

        .hover-icon-action {
            display: inline-block;
            width: 39px;
            padding: 2px 6px 0;
            border-radius: 4px;
        }
        @media (max-width: 1366px){
            .col-sm-8 {
                width: 73%;
            }
        }

    </style>
@endpush
@section('content')
    <div class="container-fluid">
        <div id="cycle-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-180">購入者名</div>
                                <div class="f-weight-bold">
                                    <div v-if="cycle.line_user">
                                        <img class="img-line-user" :src="cycle.line_user.avatar_url ? cycle.line_user.avatar_url : '/images/blank_avatar.png'" alt="">
                                        <a :href="'/basic/friendlist/my_page/' + cycle.line_user.id" target="_blank" style="line-height: 40px"
                                           class="text-underline; f-weight-bold">@{{ cycle.line_user.name }}@{{ cycle.line_user.view_name ? '/' : '' }}@{{ cycle.line_user.view_name }}</a>
                                    </div>
                                 </div>
                            </div>
                            <div class="item">
                                <div class="f-weight-bold first-w-180">商品名</div>
                                <div>
{{--                                    <a :href="'/basic/sales/index?typePayment=1&tab=edit-item&itemId=' + cycle.hashItemId" class="text-underline f-weight-bold">@{{ cycle.name_item }}</a>--}}
                                    <a :href="'/basic/sales/get-single-item-detail/' + cycle.hashItemId + '?screen=history'" class="text-underline f-weight-bold">@{{ cycle.name_item }}</a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="f-weight-bold first-w-180">販売価格</div>
                                <div>
                                    <div>@{{  formatNumber(cycle.current_amount) }}円</div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="f-weight-bold first-w-180">商品価格</div>
                                <div>
                                    <span class="">@{{ formatNumber(cycle.status_bill == 1 ? cycle.current_amount * cycle.quantity_purchased : cycle.amount_item * cycle.quantity_purchased) }}円（税込）</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="f-weight-bold first-w-180">トライアル日数</div>
                                <div>
                                    <span v-if="cycle.number_trial_date" class="">@{{ cycle.number_trial_date }}日</span>
                                    <span v-else class="">設定なし</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="f-weight-bold first-w-180">初回トライアル価格</div>
                                <div>
                                    <span v-if="cycle.status_bill != 1" class="">@{{ cycle.amount_first != 0 ? formatNumber(cycle.amount_first) + '円（税込）' : '設定なし' }}</span>
                                    <span v-else class="">@{{ (cycle.flag_first == 1 && cycle.current_amount_first != 0) ? formatNumber(cycle.current_amount_first) + '円（税込）' : '設定なし' }}</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="f-weight-bold first-w-180">ステータス</div>
                                <div>

                                    <a
                                        @if(!empty($item) && $item->payment_method == 'stripe' && !empty($accountPayment))
                                           :href="cycle.flag_environment == 0
                                            ? 'https://dashboard.stripe.com/{{$accountPayment}}/test/customers/' + cycle.c_strip_customer_id
                                            :  'https://dashboard.stripe.com/{{$accountPayment}}/customers/' + cycle.c_strip_customer_id"
                                        @elseif(!empty($item) && $item->payment_method == 'univapay' && !empty($univapayAppId))
                                            :href="'https://merchant.univapay.com/dashboard/stores/{{ $univapayAppId }}/recurring-tokens/'+ cycle.c_univapay_token +'/general'"
                                        @else
                                           href="#"
                                        @endif

                                       target="_blank"
                                    >
                                        <template v-if="cycle.status_trial == 0">
                                            <template v-if="cycle.last_bill_id">
                                                <template v-if="cycle.status_bill == 1 && cycle.status_order != 3">
                                                    {{--                                    継続中  dang hop dong--}}
                                                    <label style="background-color: #E0EFFF; color: #5799DB !important;" class=" btn-shadown-dropdown btn-status-bill ">継続中</label>
                                                </template>
                                                <template v-if="cycle.status_bill == 1 && cycle.status_order == 3">
                                                    {{--   bill that baij nhung chua het 3 lan thu               延滞中                    qua han--}}
                                                    <label style="background-color: #FFF1F0; color: #F44336 !important;" class=" btn-status-bill btn-shadown-dropdown ">延滞中</label>
                                                </template>
                                            </template>
                                            <template v-if="!cycle.last_bill_id">
                                                <template v-if="cycle.status_bill == 1">
                                                    {{--                                    継続中  dang hop dong--}}
                                                    <label style="background-color: #E0EFFF; color: #5799DB !important;" class=" btn-shadown-dropdown btn-status-bill ">継続中</label>
                                                </template>
                                            </template>
                                            <template v-if="cycle.status_bill == 2">
                                                {{--                                           hoàn thành --}}
                                                <label style="background-color: #F2F2F2; color: #7D9195 !important;" class=" btn-shadown-dropdown btn-status-bill ">決済終了</label>
                                            </template>
                                        </template>
                                        <template v-if="cycle.status_trial == 1">
                                            <template v-if="cycle.status_bill == 1">
                                                {{--                                   トライアル中 thu nghiem--}}
                                                <label style="background-color: #FFF6DD; color: #FEBA00 !important;" class=" btn-status-bill btn-shadown-dropdown ">トライアル中</label>
                                            </template>
                                            <template v-if="cycle.status_bill == 2">
                                                {{--                                   トライアル中 hoàn thành--}}
                                                <label style="background-color: #F2F2F2; color: #7D9195 !important;"
                                                       class=" btn-shadown-dropdown btn-status-bill">決済終了</label>
                                            </template>
                                        </template>
                                        <template v-if="cycle.status_bill == 3">
                                            {{--                              決済終了 huy bo--}}
                                            <label class=" btn-sns-line-secondary btn-status-bill ">キャンセル済</label>
                                        </template>
                                    </a>

                                </div>
                            </div>
                            <div class="item">
                                <div class="first-w-180 f-weight-bold">購入日時</div>
                                <div class="">
                                    @{{ moment(cycle.c_register_date).format('YYYY.MM.DD') }} <span class="pl-3"> @{{ moment(cycle.c_register_date).format('HH:mm:ss') }}</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="first-w-180 f-weight-bold">次回決済予定日</div>
                                <div class="">
                                    @{{ cycle.c_expired_date ? moment(cycle.c_expired_date).format('YYYY.MM.DD') : moment(cycle.trial_expired_time).add(1, 'day').format('YYYY.MM.DD') }} <span class="pl-3">07:00</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="first-w-180 f-weight-bold">注文番号</div>
                                <div class="">
                                    @{{ cycle.id }}
                                </div>
                            </div>
                            <div class="item">
                                <div class="first-w-180 f-weight-bold">本番/テスト</div>
                                <div>
                                    <span class="" v-if="cycle.flag_environment == 0">テスト</span>
                                    <span class="" v-else>本番決済</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="f-weight-bold first-w-180">カード情報</div>
                                <div class="">
                                    <span v-if="cycle.c_strip_brand_name && cycle.c_strip_last4">@{{cycle.c_strip_brand_name}} **** **** **** @{{cycle.c_strip_last4}}</span>
                                    <span v-if="cycle.c_univapay_brand_name && cycle.c_univapay_last4">@{{ cycle.c_univapay_brand_name }} **** **** **** @{{cycle.c_univapay_last4}}</span>

                                </div>
                            </div>
                        </div>
                        <div class="sales-history" v-if="cycle.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 cycle.detail_info_user" :key="index" 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>
                </div>
                <div class="col-sm-8" style="padding-right: 0px; padding-left: 0px; margin-top: 50px">
                    <h3 class="d-inline-block f-weight-bold">決済履歴</h3>
                    <table id="table_sales-history" class="table vuelist-nanowrapper border-radius-table">
                        <thead>
                        <tr>
                            <th style="width: 80px" class="text-center">
                                決済回数
                            </th>
                            <th style="width: 110px; text-align: left !important;">請求日</th>
                            <th style="width: 110px;text-align: left !important;">
                                決済日
                            </th>
                            <th style="text-align: right; width: 80px">
                                注文番号
                            </th>
                            <th style="text-align: right; width: 150px">
                                決済額(税込)
                            </th>
                            <th style="text-align: center; width: 90px">
                                ステータス
                            </th>
{{--                            <th style="text-align: center; width: 170px">--}}
{{--                                領収書--}}
{{--                            </th>--}}
                            <th style="width: 120px;"></th>
                        </tr>
                        </thead>
                        <tbody >
                        <tr v-for="(item, index) in orderDetail" :key="index">
                            <td class="text-center f-weight-bold">@{{ index + 1 }}</td>
                            <td class="text-left f-weight-bold">
                                @{{ moment(item.payment_date).format('YYYY.MM.DD') }}
                            </td>
                            <td class="text-left f-weight-bold">
                                @{{ item.bill_success_date ? moment(item.bill_success_date).format('YYYY.MM.DD') : '' }}
                            </td>
                            <td class="text-right f-weight-bold">@{{ item.id }}</td>
                            <td class="text-right f-weight-bold">@{{ formatNumber(item.amount_order) }}円</td>
                            <td class="text-center f-weight-bold">
                                <span v-if="item.status_order == 1">
                                    @{{ [0, 3, 4].includes(item.status_webhook) ? '支払い処理中' : '支払い済' }}
                                </span>
                                <span v-else-if="item.status_order == 2">返金済</span>
                                <span v-else-if="cycle.status_bill == 1 && item.status_order == 3" class="text-danger">延滞中</span>
                                <span class="text-danger" v-else>キャンセル済</span>
                            </td>
{{--                            <td>--}}
{{--                                <a :href="'/basic/sales/preview-invoice/' + item.hashId" target="_blank" class="btn w-btn btn-sns-line btn-sns-line-success w-140 btn-shadown-dropdown ">ダウンロード</a>--}}
{{--                            </td>--}}
                            <td>
                                <a class="link-detail text-underline f-weight-bold" v-if="item.status_order == 1 && ![0, 3, 4].includes(item.status_webhook)" style="color: #5799DB !important" @click="orderRefundId = item.id" href="#modalConfirmRefund" data-toggle="modal">この決済を返金</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <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 data-target="#modalConfirmCancelOrder" style="float: right; padding: 0px 10px;margin-top: 30px; font-size: 13px; height: 42px; width: 150px; line-height: 42px" class="btn button-cancel btn-sns-line btn-shadown-dropdown btn-sns-line-danger" v-if="cycle.status_bill == 1 && cycle.cycle_payment != 0 && cycle.status_trial == 1" data-cancel_type="trial" id="button_cancel" data-toggle="modal">継続キャンセル（解約）</button>
                        <button data-target="#modalConfirmCancelOrder" style="float: right; padding: 0px 10px;margin-top: 30px; font-size: 13px; height: 42px; width: 150px; line-height: 42px" class="btn button-cancel btn-sns-line btn-shadown-dropdown btn-sns-line-danger" v-if="cycle.status_bill == 1 && cycle.cycle_payment != 0 && cycle.status_trial == 0" data-cancel_type="trial" id="button_cancel" data-toggle="modal">継続キャンセル（解約）</button>
                    </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>
                            <h2 class="text-center" style="font-weight: bold">返金確認</h2>

                        </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 class="modal fade" id="modalConfirmCancelOrder"
                 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>
                            <h2 class="text-center" style="font-weight: bold">継続決済を終了（解約）する</h2>

                        </div>
                        <div class="modal-body scroll-modal">
                            <div class="w-confirm-cancel-order">
                                <h3 class="mb-3 text-center">解約時アクションを実行しますか？</h3>
                                <div class="d-flex justify-content-around">
                                    <label class="c-radio">実行する
                                        <input type="radio" value="1" v-model="flagExecuteAction">
                                        <span class="checkmark"></span>
                                    </label>
                                    <label class="c-radio">実行しない
                                        <input type="radio" value="0" v-model="flagExecuteAction">
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="text-center">
                            <button @click="cancelContract" class="btn btn-sns-line btn-sns-line-danger btn-confirm-execute-action">決定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        let cycle = @json($cycle);
        let orderDetail = @json($orderDetail);
    </script>
    <script src="/js/sales/v2/cycle-order-history-detail.js?v={{config("sns-line.version")}}"></script>
@endpush