@extends('layout.admin.main')
@section('title', '見積書発行')
@push('css')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/plan_estimation/style.css?v={{config('sns-line.version')}}">
<style>
    #test_pdf *{
        font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif, "Apple Color Emoji", emojisymbols, "Glyphicons Halflings" !important;
    }
</style>
@endpush
@section('content')
<article class="sub">
    <section class="masteredit" id="plan_estimation" v-cloak>
        <h2 style="font-weight: bold; padding-left: 0;">見積書発行 <p style="font-size: 18px; display: inline;">見積書の自動発行ができます。</p>
        </h2>
        <div class="estimate_name">
            <div class="title title_name">① 宛名を入力</div>
            <div class="col-md-9">
                <input class="textBox form-control" name="invoice_name_db" v-model="invoice_name_db">
            </div>
            <div class="col-md-3">
                <select class="select_title form-control " v-model="type_customer_db">
                    <option id="test13" name="radio-group-3" value="1" style="font-weight: bold;"><label for="test13">御中</label></option>
                    <option id="test23" name="radio-group-3" value="2" style="font-weight: bold;"><label for="test23">様</label></option>
                    <option id="test33" name="radio-group-3" value="3" style="font-weight: bold;"><label for="test33">なし</label></option>
                </select>
            </div>
        </div>
        <div class="estimate_plan">
            <div class="title title_plan">② お申し込み予定プランを選択</div>
            <div class="col-sm-5">
                <div class="custom_select form-control">
                    <div class="name" v-on:click="showOption" style="font-weight: bold;">@{{ name_bot ? name_bot : '選択してください' }}</div>
                    <i class="far fa-chevron-down" style="top: 4px;"></i>
                    <div class="box_option_cus" v-if="isShowOption">
                        <div class="option" v-for="item in plan" v-bind:value=" item.id " v-on:click="chooseOption(item)" style="font-weight: bold;">
                            @{{ item.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-5" v-if="selected_plan == 3">
                <div class="custom_select form-control">
                    <div class="name" v-on:click="showOptionEp" style="font-weight: bold;">@{{ name_bot_ep ? name_bot_ep : '選択してください' }}</div>
                    <i class="far fa-chevron-down" style="top: 4px;"></i>
                    <div class="box_option_cus" v-if="isShowOptionEp">
                        <div class="option" v-for="enter_item in enterprise_plan" v-bind:value=" enter_item.id " v-on:click="chooseOptionEp(enter_item)" style="font-weight: bold;">
                            @{{ enter_item.name }}
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="estimate_bill">
            <div class="title title_bill">③ 決済期間を選択</div>
            <div class="flag-environment">
                <div class="col-sm-5">
                    <div class="environment-item form-control" :class="{active: contract_term == 0}">
                        <label class="c-radio">毎月払い
                            <input type="radio" value="0" v-model="contract_term" name="contract_term" id="month_value">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                </div>
                <div class="col-sm-5">
                    <div class="environment-item form-control" :class="{active: contract_term == 1}">
                        <label class="c-radio">年間一括払い
                            <input type="radio" value="1" v-model="contract_term" name="contract_term" id="year_value">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="estimate_account">
            <div>
                <span v-if="selected_plan == 3">
                    <div class="title title_acc">④ 契約する接続枠数を選択</div>
                    <select class="accountBox form-control select_acc" v-model="number_slot">
                        <option v-for="number_item in number" v-bind:value=" number_item.value " style="font-weight: bold;">
                            @{{ number_item.name }}
                        </option>
                    </select>
                </span>
                <span v-else>
                    <div class="title title_acc">④ エルメに接続するLINE公式アカウント数（接続枠数）を選択</div>
                    <input type="number" class="accountBox form-control" min="0" v-model="quantity" oninput="this.value = !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
                </span>

            </div>
        </div>
        <div class="estimate_money">
            <div class="estimate_btn col-sm-6">
                <button type="submit" class="btn btn-sns-line btn-sns-line-primary btn-sns-line-lg btn-shadown-dropdown btn_money" @click="handleAmount()">料金を計算</button>
                <div style=" margin-top: 30px;">
                    <span v-if="selected_plan == 3">
                        <button type="button" v-on:click="showText(); downloadPdf()" class="btn btn-sns-line btn-sns-line-lg btn-shadown-dropdown btn_bill_ep" 
                        style="background-color: #E0E0E0; font-weight: bold; color: #FFFFFF !important; outline: none !important;">見積書をダウンロード</button>
                    </span>
                    <span v-else>
                        <button type="button" v-on:click="showText(); downloadPdf()" class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg btn-shadown-dropdown btn_bill">見積書をダウンロード</button>
                    </span>
                </div>
            </div>
            <div class="col-sm-6" style="border-bottom: 1px solid #8F9293 !important; padding-bottom: 10px; padding-left: 0;">
                <div class="bill_money col-sm-7">お支払い金額（税込）</div>
                <span>
                    <div class="money_bill col-sm-5"> @{{ formatCurrency(fee_by_plan) }} 円</div>
                </span>
            </div>
        </div>

        <div class="pdf_page " id="test_pdf" style="display: none;">
            <h3 style="text-align: center;">見積書</h3>
            <div>
                <div class="information">
                    <div class="pdf_name col-sm-8">@{{invoice_name_db}} @{{ textAfter }}</div>
                    <div class="pdf_date col-sm-4">発行日 @{{filter_date}}　</div>
                </div>
                <div class="information_left">
                    <div class="col-sm-4" style="border-bottom: 1px solid rgb(206, 206, 206);padding: 0;    padding-bottom: 9px;">
                       <div class="col-sm-6 pdf_address" style="padding: 0;"> 御見積金額 </div>
                        <span>
                            <div class="col-sm-6 pdf_address" style="text-align: right; padding: 0;"> @{{ formatCurrency(fee_by_plan) }} 円 </div>
                        </span>
                    </div>
                    <div class="col-sm-4"></div>
                    <div class="pdf_address col-sm-4">
                        株式会社ミショナ <br>
                        〒810-0001 <br>
                        福岡県福岡市中央区天神2-2-12 <br>
                        T&Jビルディング 7F
                    </div>
                </div>
            </div>
            <div style="margin-top: 15px; font-weight: bold;display: inline-block;">L Messageシステム利用料</div>
            <div class="table" style="padding-top: 30px; ">
{{--                <div class="table_head">--}}
{{--                    <div class="col-sm-12" style="border-bottom: 1px solid #CECECE; padding-left: 3px ; padding-bottom: 6px; margin-bottom: 15px; font-weight: bold;">御見積金額 @{{ formatCurrency(fee_by_plan) }}円</div>--}}
{{--                </div>--}}
                <div class="table_head">
                    <div class="col-sm-6" style="border-bottom: 1px solid #CECECE; padding-left: 3px ; padding-bottom: 6px; margin-bottom: 15px; font-weight: bold;">品目</div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; padding-bottom: 6px; font-weight: bold; text-align: center;">単価</div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; padding-bottom: 6px; margin-bottom: 15px; font-weight: bold;">数量</div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; padding-bottom: 6px; margin-bottom: 15px; font-weight: bold; text-align: right;">金額</div>
                </div>
                <div class="table_content">
                    <div class="col-sm-6" style="border-bottom: 1px solid #CECECE; padding-left: 3px; padding-bottom: 6px; margin-bottom: 15px; font-weight: bold;">@{{ text_plan }}</div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; padding-bottom: 6px;; font-weight: bold;">@{{ formatCurrency(fee_by_pdf) }}</div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; padding-bottom: 6px;margin-bottom: 15px; font-weight: bold;">
                        <span v-if="selected_plan == 3">
                            @{{number_slot}}
                        </span>
                        <span v-else>
                            @{{quantity}}
                        </span>
                    </div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; padding-bottom: 6px; margin-bottom: 15px; font-weight: bold; text-align: right;">@{{ formatCurrency(fee_by_plan) }}</div>
                </div>
                <div class="table_vat">
                    <div class="col-sm-6" style="margin-bottom: 15px;"></div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; padding-bottom: 6px; margin-bottom: 15px; font-weight: bold;">小計</div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; margin-top: 28px;"></div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; padding-bottom: 6px; margin-bottom: 15px; font-weight: bold; text-align: right;">@{{ formatCurrency(fee_by_plan_tax) }}円</div>
                </div>
                <div class="table_vat">
                    <div class="col-sm-6" style="margin-bottom: 15px;"></div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; padding-bottom: 6px; margin-bottom: 15px; font-weight: bold;">うち消費税</div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; margin-top: 27px;"></div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; padding-bottom: 6px; margin-bottom: 15px; font-weight: bold; text-align: right;">@{{ formatCurrency(fee_tax) }}円</div>
                </div>
                <div class="table_total">
                    <div class="col-sm-6" style="margin-bottom: 15px;"></div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; padding-bottom: 6px; margin-bottom: 15px; font-weight: bold;">合計</div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; margin-top: 28px;"></div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; padding-bottom: 6px; margin-bottom: 15px; font-weight: bold; text-align: right;">@{{ formatCurrency(fee_by_plan) }}円</div>
                </div>
                <div class="table_total">
                    <div class="col-sm-6" style="margin-bottom: 15px;"></div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; margin-top: 9px; padding-bottom: 18px; margin-bottom: 15px; font-weight: bold;">内訳</div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-bottom: 18px; font-weight: bold; font-size: 14px; margin-top: 10px;">10%対象</div>
                    <div class="col-sm-2" style="border-bottom: 1px solid #CECECE; padding-left: 0; padding-bottom: 7px; margin-bottom: 15px; font-weight: bold; text-align: right; margin-top: 4px;">
                        <p>@{{ formatCurrency(fee_by_plan_tax) }}円</p>
                        <p style="font-size: 11px;">消費税@{{ formatCurrency(fee_tax) }}円</p>
                    </div>
                </div>
            </div>
            <div class="notes" style="clear: both;">
                <div class="note_title">備考</div>
                <div class="note_box">
                    <p style="margin-bottom: 2px;"> 請求書の発行は行なっておりません。料金プランが変更された場合、本見積書に記載の金額は無効となります。L Message利用料金は株式会社ユニヴァ・ペイキャストの提供する決済代行システムを利用して請求されます。銀行振込でのお支払いの場合、振込先口座名義は「ｶ)ﾕﾆｳﾞｱﾍﾟｲｷﾔｽﾄ」となります。</p>
                </div>
            </div>
        </div>
    </section>
</article>

@endsection
@push('script')
<script>
    const basic_fee = '{{ $basicFee }}';
    const plan_pro_fee = '{{ config("sns-line.plan_pro_fee") }}';
    var contractType = '{{ $contractType }}';
    var billType = '{{ $billType }}';
    var botId = '{{ $botId }}';
    var botName = '{{ $botName }}';
    var bot = null;
    var contract = null;
</script>
<script src="https://widget.univapay.com/client/checkout.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="/js/vue-paginate.js"></script>
<script src="/js/media/vue.min.js"></script>
<script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="{{asset('js/html2pdf.min.js')}}"></script>
<script src="/js/admin/plan_estimation.js?v={{config('sns-line.version')}}"></script>
<script src="/js/admin/bot.js?v={{config('sns-line.version')}}"></script>

<script>
    function showText() {
        if (document.getElementById('test_pdf').style.display === "none") {
            document.getElementById('test_pdf').style.display = "block";
        }
    }

    function hideText() {
        if (document.getElementById('test_pdf').style.display === "block") {
            document.getElementById('test_pdf').style.display = "none";
        }
    }
</script>
@endpush