@extends('layout.basic.main')
@push('css')

    <style>


        a:hover {
            color: red !important;
        }

        .choice_detail label {
            display: block;
            font-weight: 100;
        }

        .btngroup .btn {
            width: 48%;
        }


        .btn-new-group {
            color: #fff !important;
            background-color: #5bc0de;
            border-color: #46b8da;
        }


    </style>
@endpush
@section('content')
    <article class="">

        <section class="taglist tmp" id="list-history-invoice" v-cloak>
            <h2 class="title">支払履歴</h2>
            <p>有料プランの支払い履歴の確認・領収書の発行ができます。</p>

            <h3 class="title mt-2 bd-title">決済履歴</h3>
            <div class="row ">
                <div class="col-xs-7">
                    <div class="main-table mt-2">
                        <div class="text-center">
                            <a v-on:click="previousYear()">
                                <span class="glyphicon glyphicon-triangle-left bg-base"></span>
                            </a> @{{year}} 年<a v-on:click="nextYear()">
                                <span class="glyphicon glyphicon-triangle-right bg-base"></span>
                            </a>
                        </div>
                        <table class="table table-striped" >
                            <thead>
                            <tr>
                                <th class="text-center">
                                    決済日
                                </th>
                                <th>
                                    決済額
                                </th>
                                <th>
                                    領収書（PDF）
                                </th>

                            </tr>
                            </thead>
                            <tbody><!---->
                            <tr v-for="(item,index) in items">
                                <td class="text-center">
                                    @{{formatDate(item.created_at)}}
                                </td>
                                <td class="text-right">
                                    @{{formatCurrency(item.amount)}}円
                                </td>


                                <td class="text-center">
                                    <div><a
                                                v-on:click="downloadPdf(item)"
                                                class="btn btn-xs btn-success" style="margin-top: 4px;">
                                            ダウンロード
                                        </a></div>
                                </td>
                            </tr>
                            <tr v-show="items.length == 0">
                                <td colspan="9"> データがありません。</td>
                            </tr>
                            </tbody>
                        </table>
                        <button class="btn btn-success" :disabled="next_page == 1" v-on:click="nextPage(next_page)">次の20件へ
                        </button>
                        <p class="mt-2">領収書に記載する宛名を設定（未入力の場合は、宛名が空欄で発行されます。）</p>
                        <div class="box-search">
                            <input type="text"
                                   style="width: 49%; height: 35px;"
                                   name="invoice_name"
                                   v-model="invoice_name">

                            <div class="btn">
                                <button type="button" v-on:click="saveSettingInvoice()" class="btn btn-success"
                                        style="width: 100px; margin-bottom: 7px">保存
                                </button>
                            </div>
                            <select style="padding: 5px;border: 1px solid #bbb;" v-model="type_customer">
                                <option value="1">御中</option>
                                <option value="2">様</option>
                            </select>
                        </div>
                    </div>
                    <div id="invoice_page" >
                        <div class="box-invoice">
                            <h2 class=" text-center title-iv " >領収書</h2>
                            <div class="row p-iv">
                                <div class="col-xs-6">
                                    <div class="invoice_infor"> @{{invoice_name_db}} @{{type_customer_db == 1 ? '御中' :'様'}}</div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="date-bill"> 発行日　<span id="created_at_bill">@{{formatDateInvoice(item.created_at)}}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="" style="display: flex;justify-content: center;">
                                <label class="box-total">
                                    <span style="margin-right: 70px"> 合計金額 </span> ¥ <span
                                            id="amount_total"> @{{formatCurrency(item.amount)}}</span>（税込）
                                </label>

                            </div>
                            <p class="text-center p-iv" >但 L Message利用料として上記正に領収いたしました。</p>
                            <div class="row box-bottom">
                                <div class="col-xs-6">
                                    <div class="w-left" >
                                        <div class="border-text">内訳</div>
                                        <div class="pb-text-iv">税抜金額 <span style="float:right">¥@{{formatCurrency(item.amount*0.9)}}</span>
                                        </div>
                                        <div class="border-text pb-text-iv" >消費税額 <span style="float:right">¥@{{formatCurrency(item.amount*0.1)}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div  class="text-address-iv"> 株式会社ミショナ <br> 150-0044 <br>東京都渋谷区円山町5番5号<br>
                                        Navi渋谷V3階
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>


                </div>
                <div class="col-xs-4">

                </div>
            </div>


        </section>
    </article>
@endsection
@push('js')
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAU9JfuYb5j2Xtr_v5__89wY5flXr0ai5I&libraries=places&callback=initMap&language={{App::getLocale()}}"
            async defer>
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script src="/js/vue-paginate.js"></script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/msg_template/vee-validate_ja.min.js"></script>
    <script src="/chat_files/bootstrap-timepicker.js"></script>

    <script>
        var token = "{!! csrf_token() !!}";
    </script>
    <script type="application/javascript" src="/js/download_invoice/index.js?v={{config("sns-line.version")}}"></script>
@endpush