@extends('layout.admin.main')
@section('title', '契約情報・領収書')
@push('css')
    <link rel="stylesheet" href="{{asset('css/form_answer/common-v3.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/_assets/commons/css/pagination.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="{{asset('css/payment_history/style.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush
@section('content')
    <div class="mt-4" id="payment_history" v-cloak>
        <span class="tooltipp download-single">領収書ダウンロード</span>
        <div class="font-s18 font-w-bold color-text">決済履歴・領収書のダウンロード</div>
        <div class="d-flex" style="margin-top: 20px; height: calc(-200px + 100vh);">
            <div class="tab-filter-year" v-if="type == TYPE_PAYMENT.YEAR">
                <div class="d-flex justify-content-between" style="margin-bottom: 18px">
                    <pick-year :current_year="year" @selected_year="selectedYear"></pick-year>
                    <div class="type-payment hover" @click="changeTypePayment(TYPE_PAYMENT.MONTH)">
                        <i class="fas fa-list-ul"></i>
                        <span>年間決済一覧</span>
                    </div>
                </div>
                <div class="list-data list-month" style="height: calc(-70px + 100%);">
                    <div class="scrollable" style="height: 100%; overflow: auto">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="text-align: left; width: 120px">年月</th>
                                    <th style="text-align: right">ご請求額</th>
                                    <th style="text-align: left"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(value, month) in arrPaymentYear">
                                    <td style="text-align: left">@{{ formatDate(month, 'YYYY年MM月分') }}</td>
                                    <td style="text-align: right">@{{ formatCurrency(value) }} 円</td>
                                    <td class="" style="text-align: right;">
                                        <div style="width: 100%; display: flex; justify-content: end;">
                                            <div class="detail-month hover-bg-blue" v-if="value > 0" @click="resetFilter(), loadItemMonth(splitMonth(month))">詳細を確認 ></div>
                                            <div class="detail-month detail-month-disabled" v-else>詳細を確認 ></div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-data">
                <div class="d-flex justify-content-between align-items-start header">
                    <div class="d-flex align-items-start" style="height: fit-content" v-if="type == TYPE_PAYMENT.YEAR">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-sort-up fa-rotate-90" style="margin-right: 10px"></i>
                            <span class="font-s16 font-w-bold color-text">@{{ year }}年@{{ month }}月 詳細</span>
                        </div>
                        <div class="type-export">
                            <div class="all" @click="changeTypeExport(1)" :class="{ 'active': type_export == 1 }">一括発行</div>
                            <div class="selected" @click="changeTypeExport(2)" :class="{ 'active': type_export == 2 }">個別発行</div>
                        </div>
                    </div>
                    <div class="d-flex" v-if="type == TYPE_PAYMENT.MONTH">
                        <div class="d-flex flex-column mr-2">
                            <div class="d-flex justify-content-start align-items-center">
                                <div class="time-range-container" style="padding: 0px; margin-right: 10px">
                                    <input type="text" id="filter-range"
                                           class="form-control dateranger tab1" readonly>
                                    <i class="far fa-calendar" @click="$('#filter-range').click()" style="color: #E0E0E0"></i>
                                </div>
                                <div class="btn-get-all font-s14" :class="{ 'active': get_all == 1 }" @click="getAll()">全期間</div>
                            </div>
                        </div>
                        <div class="btn-filters mr-2" :class="{ 'active': isFilters() }" @click="showModalFilters()">
                            <svg class="mr-2" id="filter-outlined" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                <rect id="矩形" width="16" height="16" opacity="0"/>
                                <path id="形状" d="M8.3,11.188H4.2a.5.5,0,0,1-.5-.5V6.928L.068.75a.5.5,0,0,1,0-.5A.492.492,0,0,1,.5,0H12a.492.492,0,0,1,.43.249.5.5,0,0,1,0,.5L8.8,6.928v3.759A.5.5,0,0,1,8.3,11.188ZM4.821,7.625h0v2.438H7.677l0-2.438H4.821Zm-3.249-6.5,3.1,5.241.148.259H7.679l.149-.259,3.1-5.241Z" transform="translate(1.751 2.406)"/>
                            </svg>
                            絞り込み
                            <svg class="clear-filter" @click.stop="clearFiltersLoadItems()" xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">
                                <circle cx="8.5" cy="8.5" r="8.5" fill="#ff4d4f"/>
                                <g stroke="#ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="5" y1="5" x2="12" y2="12"/>
                                    <line x1="12" y1="5" x2="5" y2="12"/>
                                </g>
                            </svg>
                        </div>
                        <div class="type-payment hover" style="height: 40px" @click="changeTypePayment(TYPE_PAYMENT.YEAR)">
                            <i class="fas fa-list-ul"></i>
                            <span>月次決済一覧</span>
                        </div>
                    </div>
                   <div class="d-flex justify-content-end">
                       <div class="btn-download" :class="{ 'active': isDownloadInvoice() }" @click="showModalDownloadInvoice()">
                           <svg id="download-outlined" class="icon-download" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                               <rect width="16" height="16" opacity="0"/>
                               <path d="M11.188,11H.5a.5.5,0,0,1-.5-.5V7.406a.125.125,0,0,1,.125-.125h.938a.125.125,0,0,1,.124.125V9.813H10.5V7.406a.125.125,0,0,1,.125-.125h.937a.125.125,0,0,1,.125.125V10.5A.5.5,0,0,1,11.188,11ZM5.844,7.876a.123.123,0,0,1-.1-.048L4,5.612a.123.123,0,0,1-.014-.131.125.125,0,0,1,.113-.071H5.249V.125A.125.125,0,0,1,5.373,0h.938a.125.125,0,0,1,.125.125V5.413H7.593a.125.125,0,0,1,.113.071.123.123,0,0,1-.014.131L5.942,7.828A.123.123,0,0,1,5.844,7.876Z" transform="translate(2.156 2.5)"/>
                           </svg>
                           <span>一括ダウンロード</span>
                       </div>
                   </div>
               </div>
                <div class="list-data" style="flex: 1 1 auto; height: calc(-150px + 100%);">
                    <span class="tooltipp t-bot-name"></span>
                   <div class="scrollable" style="max-height: 100%; overflow: auto">
                       <table class="table table-striped">
                           <thead>
                           <tr>
                               <th style="width: 50px;text-align: left" v-if="type_export == 2">
                                   <label class="c-checkbox">
                                       <input type="checkbox" name="" value="" v-model="selectAll">
                                       <span class="checkmark"></span>
                                   </label>
                               </th>
                               <th style="width: 150px;text-align: left; padding-left: 15px">
                                   <div style="display: flex; align-items: center">
                                       契約(更新)日
                                       <div class="sort" style="display: grid; position: relative; bottom: 2px; margin-left: 5px" @click="sort('created_at')">
                                           <i class="fal fa-angle-up" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                           <i class="fal fa-angle-down" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                       </div>
                                   </div>
                               </th>
                               <th style="width: 250px; text-align: left !important;">LINE公式アカウント名</th>
                               <th v-if="type == TYPE_PAYMENT.MONTH" style="width: 100px; text-align: left !important;">LINE ID</th>
                               <th style="width: 170px;text-align: right !important;">利用料 (税込)</th>
                               <th style="width: 150px; text-align: left !important; padding-left: 30px">契約プラン</th>
                               <th style="width: 170px; text-align: left">支払い</th>
                               <th style="width: 300px; text-align: left">決済方法</th>
                               <th style="width: 300px; text-align: left">備考</th>
                               <th style="width: 350px; text-align: left">課金ID</th>
                               <th class="pending-position" v-if="type_export == 2" style="width: 100px;"></th>
                           </tr>
                           </thead>
                           <tbody>
                               <tr :class="{ 'selected-invoice': selected.includes(item.id) }" v-for="(item, index) in arrPaymentMonth">
                                   <td class="input_check" style="text-align: left" v-if="type_export == 2">
                                       <label class="c-checkbox">
                                           <input type="checkbox" name="check_item[]" :value="item.id"
                                                  v-model="selected"
                                           >
                                           <span class="checkmark"></span>
                                       </label>
                                   </td>
                                   <td style="text-align: left; padding-left: 15px">@{{ formatDate(item.created_at, 'YYYY/MM/DD') }}</td>
                                   <td style="text-align: left">
                                       <div v-if="item.bot_contract.view_name || item.bot_name"  class="d-flex align-items-center box-tooltip bot" @mousemove="showTooltipBotName($event, item.bot_contract.view_name ? item.bot_contract.view_name : item.bot_name)" @mouseleave="hideTooltipHover('.t-bot-name')">
                                           <img v-if="item.bot_contract.bot_image" :src="item.bot_contract.bot_image" class="mr-2" @error="altImage($event)" alt="">
                                           <img v-else src="/images/user-outlined.svg"  class="mr-2" alt="">
                                           <span class="bot-namee text-truncate">@{{ item.bot_contract.view_name ? item.bot_contract.view_name : item.bot_name }}</span>

                                       </div>
                                       <div v-else style="margin-left: 15px">-</div>
                                   </td>
                                   <td v-if="type == TYPE_PAYMENT.MONTH" style="text-align: left">@{{ item.bot_contract.premium_id ? item.bot_contract.premium_id : (item.bot_contract.line_id ? item.bot_contract.line_id : '-') }}</td>
                                   <td style="text-align: right">@{{ formatCurrency(item.bot_contract.bill_type_old ? getAmountContract(item.bot_contract) : item.amount) }} 円</td>
                                   <td style="text-align: left; padding-left: 30px">
                                       <span>@{{ planText(item.reason) }}</span>
                                   </td>
                                   <td style="text-align: left">
                                       <span v-if="item.remain_day > 30 || item.reason.includes('year')">年間一括払い</span>
                                       <span v-else-if="item.remain_day < 365 || item.reason.includes('month')">毎月払い</span>
                                       <span v-else>-</span>
                                   </td>
                                   <td style="text-align: left">
                                       <span v-if="item.type_bill == 3">銀行振込</span>
                                       <span v-else-if="item.bot_contract && (item.last_four_card || item.bot_contract.univa_last_four_card)">クレジットカード (下4桁 @{{ item.last_four_card ? item.last_four_card : item.bot_contract.univa_last_four_card }})</span>
                                       <span v-else>-</span>
                                   </td>
                                   <td style="text-align: left">
                                       <span>@{{ note(item) }}</span>
                                   </td>
                                   <td style="text-align: left">
                                       <span v-if="item.type_bill == 1">@{{ item.stripe_charge_id }}</span>
                                       <span v-if="item.type_bill == 2">@{{ item.univa_charge_id }}</span>
                                       <span v-if="item.type_bill == 3">-</span>
                                   </td>
                                   <td class="pending-position" v-if="type_export == 2">
                                       <div class="d-flex justify-content-center c-tooltip-container" @mousemove="showTooltipHover($event, '.download-single', 'flex')" @mouseleave="hideTooltipHover('.download-single')">
                                           <div class="btn-download btn-download-single-iv active" @click="showModalDownloadInvoice(item.id)">
                                               <svg id="download-outlined" class="icon-download" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                                   <rect width="16" height="16" opacity="0"/>
                                                   <path d="M11.188,11H.5a.5.5,0,0,1-.5-.5V7.406a.125.125,0,0,1,.125-.125h.938a.125.125,0,0,1,.124.125V9.813H10.5V7.406a.125.125,0,0,1,.125-.125h.937a.125.125,0,0,1,.125.125V10.5A.5.5,0,0,1,11.188,11ZM5.844,7.876a.123.123,0,0,1-.1-.048L4,5.612a.123.123,0,0,1-.014-.131.125.125,0,0,1,.113-.071H5.249V.125A.125.125,0,0,1,5.373,0h.938a.125.125,0,0,1,.125.125V5.413H7.593a.125.125,0,0,1,.113.071.123.123,0,0,1-.014.131L5.942,7.828A.123.123,0,0,1,5.844,7.876Z" transform="translate(2.156 2.5)"/>
                                               </svg>
                                           </div>
                                       </div>
                                   </td>
                               </tr>
                           </tbody>
                       </table>
                   </div>
               </div>
                <div class="d-flex justify-content-end mt-4" :class="{ 'show-box-pagination': pagination.last_page > 1 }" style="flex: 0 0 auto; justify-content: end">
                    <pagination :pagination="pagination" @change_page="changePage" @change_limit="changeLimit" end_text_limit="/page"></pagination>
                </div>
            </div>
        </div>

        @include('basic.payment_history.modals.download_invoices')
        @include('basic.payment_history.modals.setting_invoice_name')
        @include('basic.payment_history.modals.filters')
        @include('basic.payment_history.invoice_pdf')
    </div>
@endsection

@push('script')
    <script src="/js/media/vue.min.js"></script>
    <script>
        var user = @json($user);
        var basic_fee = '{{ $basic_fee }}';
        var plan_pro_fee = '{{ $planProFee }}';
    </script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="/_assets/commons/js/pagination.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/common/components/pickYear.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/modules/bill/js/mixins/invoices.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/payment_history/index.js?v={{config("sns-line.version")}}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
@endpush