@extends('layout.basic.main')
@section('title', (isset($item) && $item->type_payment == 0) ? '単品商品（商品詳細）': '継続商品（商品詳細）')
@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")}}">
    <style>

    </style>
@endpush
@section('content')
    <div class="container-fluid">
        <div id="single-item" v-cloak>
            <div class="row">
                <div class="col-sm-8" style="padding-right: 0; padding-left: 0px">
                    <div class="">
                        <h2 class="f-weight-bold d-inline-block">商品詳細</h2>
                        <a :href="'/basic/sales/index?typePayment='+ item.type_payment + '&tab=edit-item&itemId=' + item.hash_id + '&group_open=' + group_open + '&paymentMethod=' + paymentMethod" style="width: 140px; height: 40px; padding: 7px 15px;" class="btn btn-sns-line-primary btn-sns-line float-right btn-shadown-dropdown">商品編集</a>

                        <div class="info-item">
                            <div class="item">
                                <div :class="{'first-w-120': item.type_payment == 0, 'first-w-180': item.type_payment != 0}" class="f-weight-bold">商品名</div>
                                <div class="f-weight-bold">@{{ item.name }}</div>
                            </div>
                            <div class="item">
                                <div :class="{'first-w-120': item.type_payment == 0, 'first-w-180': item.type_payment != 0}" class="f-weight-bold">イメージ</div>
                                <div>
                                    <img v-if="item.image_product" class="img-w60-h60" :src="getFirstImage(item.image_product)" alt="">
                                    <div v-else class="wrapper-thumbnail text-center" style="border: 1px solid #E8E8E8; border-radius: 5px">
                                        <i class="fal fa-image"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div :class="{'first-w-120': item.type_payment == 0, 'first-w-180': item.type_payment != 0}" class="f-weight-bold">作成日</div>
                                <div class="f-weight-bold">
                                     @{{ moment(item.created_at).format('YYYY.MM.DD') }}
                                </div>
                            </div>
                            <div class="item">
                                <div :class="{'first-w-120': item.type_payment == 0, 'first-w-180': item.type_payment != 0}" class="f-weight-bold">決済システム</div>
                                <div>
                                     <span class="f-weight-bold" v-if="item.payment_method == 'stripe'">Stripe</span>
                                    <span class="f-weight-bold" v-else>UnivaPay</span>
                                </div>
                            </div>
                            <div class="item">
                                <div :class="{'first-w-120': item.type_payment == 0, 'first-w-180': item.type_payment != 0}" class="f-weight-bold">商品価格</div>
                                <div>
                                    <span class="f-weight-bold">@{{ formatNumber(item.amount) }}円（税込）</span>
                                </div>
                            </div>
                            <div v-if="item.type_payment != 0">
                                <div class="item">
                                    <div :class="{'first-w-120': item.type_payment == 0, 'first-w-180': item.type_payment != 0}" class="f-weight-bold">トライアル日数</div>
                                    <div>
                                        <span v-if="item.flag_trial == 1" class="f-weight-bold">@{{ item.time_trial }}日</span>
                                        <span v-else class="f-weight-bold">設定なし</span>
                                    </div>
                                </div>
                                <div class="item">
                                    <div :class="{'first-w-120': item.type_payment == 0, 'first-w-180': item.type_payment != 0}" class="f-weight-bold">初回トライアル価格</div>
                                    <div>
                                        <span v-if="item.flag_first == 1" class="f-weight-bold">@{{ item.amount_first }}円（税込）</span>
                                        <span v-else class="f-weight-bold">設定なし</span>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div :class="{'first-w-120': item.type_payment == 0, 'first-w-180': item.type_payment != 0}" class="f-weight-bold">在庫数</div>
                                <div>
                                    <span class="f-weight-bold" v-if="item.flag_use_stock">@{{ item.quantity_stock }}</span>
                                    <span class="f-weight-bold" v-else>設定なし</span>
                                </div>
                            </div>
                            <div class="item">
                                <div :class="{'first-w-120': item.type_payment == 0, 'first-w-180': item.type_payment != 0}" class="f-weight-bold">商品ページ</div>
                                <div class="view-link-order">
                                    <span class="f-weight-bold">
                                        <a href="" class="link-order">https://liff.line.me/@{{ liffAppId }}?product_id=@{{ item.id }}&type=product-detail&ts=@{{ timestamp }}</a>
                                    </span>
                                    <i @click="copyToClipboard('https://liff.line.me/' + liffAppId + '?product_id='+ item.id + '&type=product-detail&ts=' + timestamp, $event)" class="far fa-copy"></i>
                                </div>
                            </div>
                            <div v-if="item.type_payment != 0">
                                <div class="item">
                                    <div :class="{'first-w-120': item.type_payment == 0, 'first-w-180': item.type_payment != 0}" class="f-weight-bold">カード情報変更ページ</div>
                                    <div class="view-link-order">
                                        <span class="f-weight-bold">
                                            <a href="" class="link-order">https://liff.line.me/@{{ liffAppId }}?product_id=@{{ item.id }}&type=product-change&ts=@{{ timestamp }}</a>
                                        </span>
                                        <i @click="copyToClipboard('https://liff.line.me/' + liffAppId + '?product_id='+ item.id + '&type=product-change&ts=' + timestamp, $event)" class="far fa-copy"></i>
                                    </div>
                                </div>
                                <div class="item">
                                    <div :class="{'first-w-120': item.type_payment == 0, 'first-w-180': item.type_payment != 0}" class="f-weight-bold">解約用ページ</div>
                                    <div class="view-link-order">
                                        <span class="f-weight-bold">
                                            <a href="" class="link-order">https://liff.line.me/@{{ liffAppId }}?product_id=@{{ item.id }}&type=product-cancel&ts=@{{ timestamp }}</a>
                                        </span>
                                        <i @click="copyToClipboard('https://liff.line.me/' + liffAppId + '?product_id='+ item.id + '&type=product-cancel&ts=' + timestamp, $event)" class="far fa-copy"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div :class="{'first-w-120': item.type_payment == 0, 'first-w-180': item.type_payment != 0}" class="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>
                        <div class="sales-history">
                             <div class="d-flex justify-content-between">
                                 <h4 class="d-inline-block f-weight-bold">販売履歴</h4>
                                 <div class=" select-month">
                                     <i @click="monthChange('prev')" class="fas fa-chevron-left arrow"></i>
                                     <div class="view-month">
                                         <i @click="showMonth" class="fal fa-calendar"></i>
                                         <span class="txt-month">@{{ month }}</span>
                                         <input @change="getValueMonth" id="month" type="month">
                                     </div>
                                     <i @click="monthChange('next')" class="fas fa-chevron-right arrow"></i>
                                 </div>
                             </div>

                            <div>
                                <table id="table_sales-history" class="table vuelist-nanowrapper border-radius-table">
                                    <thead>
                                    <tr>
                                        <th style="width: 45%;" class="text-left">
                                            販売日時 / 友だち名
                                        </th>
                                        <th style="width: 13%; min-width: 125px;max-width: 200px; text-align: right !important;">注文番号</th>
                                        <th style="width: 13%; min-width:106px;text-align: right !important;">
                                            <span v-if="item.type_payment == 0">販売価格</span>
                                            <span v-else>販売価格(税込)</span>
                                        </th>
                                        <th style="width: 17%; text-align: right; min-width: 200px">
                                            <div class="d-inline-block">
                                                決済ステータス
                                            </div>
                                            <span class=" show-notify">
                        <i class="fas fa-question-circle f-size-20" style="color: #7D9195 "></i>
                        <div class="notify" style="top: -41px; width: 387px; text-align: left; left: -287px; right: 0px">
                            <span class="" style="font-size: 12px">ステータスクリックで決済システム管理ページが表示されます</span>
                        </div>
                    </span>
                                        </th>
                                        <th style="min-width:53px;"></th>
                                    </tr>
                                    </thead>
                                    <tbody >
                                        <tr v-for="(order, index) in salesHistory" :key="index">
                                            <td class="text-left">
                                                <div>
                                                    <span v-if="item.type_payment == 0" class="f-weight-bold created_date f-size-13">@{{ moment(order.payment_date).format('YYYY.MM.DD') }}</span>
                                                    <span v-else class="f-weight-bold created_date f-size-13">@{{ moment(order.created_at).format('YYYY.MM.DD') }}</span>
                                                    <span v-if="item.type_payment == 0" class="f-weight-bold  f-size-13">@{{ moment(order.payment_date).format('HH:mm:ss') }}</span>
                                                    <span v-else class="f-weight-bold  f-size-13">@{{ moment(order.created_at).format('HH:mm:ss') }}</span>
                                                </div>
                                                <div class="mt-2">
                                                    <img class="img-line-user" :src="order.line_user.avatar_url ? order.line_user.avatar_url : '/images/blank_avatar.png'" alt="">
                                                    <a style="cursor: pointer" :href="'/basic/friendlist/my_page/'+ order.line_user.id"
                                                       class="d-inline-block mb-2 f-weight-bold text-underline pl-3 f-size-16">@{{ order.line_user.name }}@{{ order.line_user.view_name ? '/' : '' }}@{{ order.line_user.view_name }}</a>
                                                </div>
                                            </td>
                                            <td class="text-right f-weight-bold">@{{ order.id }}</td>
                                            <td class="text-right f-weight-bold">
                                                <template v-if="item.type_payment == 0">
                                                    @{{  formatNumber(order.amount_order) }}円
                                                </template>
                                                <template v-else>
                                                    @{{ formatNumber(order.status_bill == 1 ? order.current_amount : order.amount_item) }}円
                                                </template>
                                            </td>
                                            <td style="padding-left: 37px !important">
                                                <template v-if="item.type_payment == 0">
                                                    <template v-if="item.payment_method == 'stripe'">
                                                        <a target="_blank" @if(!empty($accountPayment))
                                                            :href="order.payment_new == 0 ? ( order.flag_environment == 0
                                                                ? 'https://dashboard.stripe.com/{{$accountPayment}}/test/'+ (order.o_strip_charge_id ? 'payments' : 'customers') +'/' + (order.o_strip_charge_id ? order.o_strip_charge_id : order.o_strip_customer_id)
                                                                :  'https://dashboard.stripe.com/{{$accountPayment}}/'+ (order.o_strip_charge_id ? 'payments' : 'customers') +'/' + order.o_strip_charge_id ? order.o_strip_charge_id : order.o_strip_customer_id) : (
                                                                     order.flag_environment == 0
                                                                    ? 'https://dashboard.stripe.com/{{$accountPayment}}/test/'+ 'payments' +'/' + order.o_strip_charge_id
                                                                    :  'https://dashboard.stripe.com/{{$accountPayment}}/'+ 'payments' +'/' +  order.o_strip_charge_id
                                                                )"
                                                           @else
                                                               href="#"
                                                                @endif>
                                                            <label v-if="order.status_order == 1" class=" btn-status-bill-success btn-status-bill">決済成功</label>
                                                            <label v-else-if="order.status_order == 2" class=" btn-status-bill btn-status-bill-retry">返金済み</label>
                                                        </a>
                                                    </template>
                                                    <template v-else>
                                                        <a target="_blank" @if(!empty($univapayAppId)) :href="'https://merchant.univapay.com/dashboard/transactions/store/{{ $univapayAppId }}/charge/'+ order.o_univapay_charge_id" @else href="#" @endif>
                                                            <label v-if="order.status_order == 1" class=" btn-status-bill-success btn-status-bill">決済成功</label>
                                                            <label v-else-if="order.status_order == 2" class=" btn-status-bill btn-status-bill-retry">返金済み</label>
                                                        </a>
                                                    </template>
                                                </template>
                                                <template v-else>
                                                    <template v-if="item.payment_method == 'stripe'">
                                                        <a target="_blank" @if(!empty($accountPayment))
                                                            :href="order.flag_environment == 0
                                                                ? 'https://dashboard.stripe.com/{{$accountPayment}}/test/customers/' + order.c_strip_customer_id
                                                                :  'https://dashboard.stripe.com/{{$accountPayment}}/customers/' + order.c_strip_customer_id"
                                                           @else
                                                               href="#"
                                                                @endif >
                                                            <template v-if="order.status_trial == 0">
                                                                <template v-if="order.last_bill_id">
                                                                    <template v-if="order.status_bill == 1 && order.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="order.status_bill == 1 && order.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="!order.last_bill_id">
                                                                    <template v-if="order.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="order.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="order.status_trial == 1">
                                                                <template v-if="order.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="order.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="order.status_bill == 3">
                                                                {{--                               キャンセル済 huy bo--}}
                                                                <label class=" btn-sns-line-secondary btn-status-bill">キャンセル済</label>
                                                            </template>
                                                        </a>
                                                    </template>
                                                    <template v-else>
                                                        <a target="_blank" @if(!empty($univapayAppId)) :href="'https://merchant.univapay.com/dashboard/stores/{{ $univapayAppId }}/recurring-tokens/'+ order.c_univapay_token +'/general'" @else href="#" @endif>
                                                            <template v-if="order.status_trial == 0">
                                                                <template v-if="order.last_bill_id">
                                                                    <template v-if="order.status_bill == 1 && order.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="order.status_bill == 1 && order.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="!order.last_bill_id">
                                                                    <template v-if="order.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="order.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="order.status_trial == 1">
                                                                <template v-if="order.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="order.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="order.status_bill == 3">
                                                                {{--                               キャンセル済 huy bo--}}
                                                                <label class=" btn-sns-line-secondary btn-status-bill">キャンセル済</label>
                                                            </template>
                                                        </a>

                                                    </template>


                                                </template>

                                            </td>
                                            <td>
                                                <a v-if="item.type_payment == 0" class="link-detail text-underline f-weight-bold" :href="'/basic/sales/order-history-detail/' + order.hashId">詳細</a>
                                                <a v-if="item.type_payment != 0" class="link-detail text-underline f-weight-bold" :href="'/basic/sales/cycle-order-history-detail/' + order.hashId">詳細</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class=" mt-4">
                                    <nav class="text-center" style="clear: both">
                                        <div  v-if="last_page > 1" class="f-weight-bold f-size-18">
                                            全@{{totalRecord}}件中　@{{from}}～@{{to}}件を表示中
                                        </div>
                                        <div style="position: relative">
                                            <button @click="backToList" v-if="last_page > 1" style="padding: 12px 50px; width: 150px; height: 42px; position: absolute; left: 0; top: 50%;" :style="[last_page <= 1 ? { 'margin-top': '15px' } : {'margin-top': '-24px'}]" class="btn btn-sns-line btn-shadown-dropdown btn-sns-line-secondary">戻る</button>
                                            <ul class="pagination" v-if="last_page > 1">
                                                <li v-if="page > 1">
                                                    <a href="#" aria-label="Previous" @click.prevent="changePage(page - 1)">
                                                        <i style="color:#08BF5A" class="fas fa-arrow-left"></i>
                                                    </a>
                                                </li>
                                                <li v-for="page_item in pagesNumber" v-bind:class="[ page_item == isActived ? 'active' : '']">
                                                    <a href="#" @click.prevent="changePage(page_item)" class=font-weight-bold>@{{ page_item }}</a>
                                                </li>
                                                <li v-if="page < last_page">
                                                    <a href="#" aria-label="Next" @click.prevent="changePage(page + 1)">
                                                        <i style="color:#08BF5A" class="fas fa-arrow-right"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </nav>
                                </div>
                                <button @click="backToList" v-if="last_page <= 1" style="padding: 0px 50px; width: 150px; height: 42px; line-height: 42px; margin-top: 20px; margin-bottom: 20px"  class="btn btn-sns-line btn-shadown-dropdown btn-sns-line-secondary">戻る</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    {{--    <input type="hidden" id="folder_cookie"   value="{{$folderCookie}}" >--}}
@endsection
@push('js')
    <script>
        let item = @json($item);
        let liffAppId = '{{ $liffAppId }}';
        let timestamp = '{{ $timestamp }}';

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