@push('css')
@endpush
<div class="mb-[23px]" v-if="bot.plan_type == 2">
    <div class="w-[650px] h-[60px] border border-solid border-[#08BF5A] rounded-[10px] bg-[#F4FBF2] flex flex-col items-center justify-center mb-[8px]"
         v-cloak>
        <div class="font-[600] text-[18px] text-[#222222]">
            この機能のご利用は有料プランへの<a
                    class="font-[600] text-[#5799DB] hover:text-[#5799DB] focus:text-[#5799DB] underline hover:underline hover:opacity-70"
                    :href="'/admin/bot-add?upgrade_bot_id=' + bot.hashId" target="_blank">アップグレード</a>が必要です。
        </div>
    </div>
</div>
<div class="text-[14px] text-[#222222] font-[300] w-[650px]" id="lp-poster-tab">
    <div class="h-[40px] font-[600] text-[16px] text-[#222222] bg-[#F8F8F8] px-[15px] rounded-[5px] flex items-center">
        <div>LP連携</div>
    </div>
    <div class="ml-[15px] mt-[12px] text-[16px]">
        <span class="font-[600] text-[#F44336]">
            この機能は主に複数の広告を出稿している方向けの機能です。
        </span>
        広告のクリック先として<br>LPを登録している場合に、広告（流入経路）ごとにQRコード(URL)を分ける必要がなく<br>なり、1つのQRコードで流入経路を記録することができます。
    </div>

    <div v-if="!lp_poster.data.length"
         class="h-[30px] font-[600] text-[14px] text-[#222222] bg-[#F8F8F8] px-[15px] rounded-[5px] flex items-center mt-[42px] mb-[20px] flex justify-content-between">
        <div>LP連携一覧</div>
    </div>
    <div v-if="lp_poster.data.length"
         class="h-[30px] font-[600] text-[14px] text-[#222222] bg-[#F8F8F8] px-[15px] rounded-[5px] flex items-center mt-[42px] mb-[20px] flex justify-content-between">
        <div>連携LP一覧</div>
        <div class="font-[300]">
            計測結果は データ詳細 > <a :href="'/basic/landing/show/' + id + '?tab=tab3'" target="_blank"
                                       class="text-[#5799DB] hover:text-[#5799DB] focus:text-[#5799DB] underline hover:underline">LP連携</a>
            よりご確認いただけます。
        </div>
    </div>

    <div class="w-full bg-white rounded-[10px]" v-if="!lp_poster.data.length">
        <div class="mb-[18px]">
            <a :href="plan_type == 1 ? '{{ route('landing.v2.edit.poster', $id) }}' : 'javascript:void(0)'"
               class="font-[400] border border-solid rounded-[5px] w-[110px] h-[40px] flex items-center justify-center hover:opacity-[0.7]"
               :class="plan_type == 1 ? 'border-[#5799DB] text-[#5799DB] focus:text-[#5799DB] hover:text-[#5799DB]' : 'text-[#C4C4C4] hover:text-[#C4C4C4] focus:text-[#C4C4C4] border-[#DDDDDD] bg-[#F8F8F8] cursor-not-allowed'">
                <svg class="mr-[3px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                     fill="none" viewBox="0 0 24 24">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M5 12h14m-7 7V5"/>
                </svg>
                新規登録
            </a>
        </div>
        <div>
            <div class="w-[650px] h-[40px] px-[18px] rounded-[5px] flex items-center"
                 style="border-bottom: 1px solid #DDDDDD">
                <div class="mr-[61px] font-[400]">流入経路（広告）名</div>
                <div class="mr-[162px] font-[400]">LP名</div>
                <div class="font-[400]">設置用URL</div>
            </div>
            <div class="text-center mt-[29px]">
                <div class="flex justify-center mb-[19px]">
                    <img src="/images/group_4483.svg" alt="">
                </div>
                <div class="font-[400] text-[16px] text-[#8C8C8C]">まだ登録がありません</div>
                <div class="mb-[9px]" v-if="plan_type == 1">
                    <a href="{{ route('landing.v2.edit.poster', $id) }}" target="_blank"
                       class="text-[#5799DB] underline hover:text-[#5799DB] hover:opacity-70 focus:text-[#5799DB] hover:underline font-[300]">新規登録</a>
                    <span class="text-[#B7B7B7]">するとここにデータが表示されます</span>
                </div>
                <div class="mt-[13px] font-[600] flex items-center justify-center" v-if="plan_type == 2">
                    <svg class="mr-[6px] text-[#5799DB] mb-[2px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                         width="18" height="18" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                    </svg>
                    この機能を利用するには、有料プランへの<a
                            class="text-[#5799DB] hover:text-[#5799DB] focus:text-[#5799DB] hover:opacity-70"
                            target="_blank"
                            :href="'/admin/bot-add?upgrade_bot_id=' + bot_hash_id">アップグレード</a>が必要です。
                </div>
            </div>
        </div>
    </div>

    <div class="w-full" v-if="lp_poster.data.length && plan_type == 1">
        <a href="{{ route('landing.v2.edit.poster', $id) }}"
           class="font-[400] border border-solid border-[#5799DB] rounded-[5px] text-[#5799DB] hover:text-[#5799DB] w-[110px] h-[40px] flex items-center justify-center hover:opacity-[0.7]">
            <svg class="mr-[6px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                 fill="none" viewBox="0 0 24 24">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"/>
            </svg>
            編集
        </a>
        <div class="mt-[24px]">
            <div class="font-[400] flex">
                <div class="w-[190px] mr-[18px] font-[400]">
                    流入経路（広告）名
                </div>
                <div class="w-[165px] mr-[21px] font-[400]">
                    LP名
                </div>
                <div class="w-[250px] font-[400]">
                    設置用URL
                </div>
            </div>

            <hr class="text-[#DDDDDD] my-[18px]">

            <div class="flex" v-for="(data, index) in lp_poster.data">
                <div class="w-[200px] mr-[17px] px-[11px] mb-[15px] flex items-center rounded-[5px] bg-[#E0E0E0] overflow-hidden">
                    <div class="overflow-hidden text-ellipsis whitespace-nowrap font-[600]" :title="data.poster_name">
                        @{{ data.poster_name }}
                    </div>
                </div>
                <div>
                    <div class="flex" v-for="(landing_connect, key) in data.landing_connected">
                        <div class="w-[170px] mr-[17px] h-[40px] rounded-[5px] bg-[#F8F8F8] mb-[15px] px-[11px] flex items-center">
                            <div class="overflow-hidden text-ellipsis whitespace-nowrap"
                                 :title="landing_connect.landing_name">
                                @{{ landing_connect.landing_name }}
                            </div>
                        </div>
                        <div class="w-[255px]">
                            <div class="w-full h-[40px] border border-solid border-[#E0E0E0] rounded-[5px] pl-[17px] pr-[11px] flex items-center justify-content-between mb-[15px]">
                                <div class="overflow-hidden text-ellipsis whitespace-nowrap"
                                     :title="landing_connect.landing_url">
                                    @{{ landing_connect.landing_url }}
                                </div>
                                <div @click="copyParam(landing_connect.landing_url)"
                                     class="bg-[#F8F8F8] rounded-[50%] w-[25px] h-[25px] flex items-center justify-center text-[#888888] cursor-pointer">
                                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                         fill="none" viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linejoin="round" stroke-width="2"
                                              d="M14 4v3a1 1 0 0 1-1 1h-3m4 10v1a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h2m11-3v10a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V7.87a1 1 0 0 1 .24-.65l2.46-2.87a1 1 0 0 1 .76-.35H18a1 1 0 0 1 1 1Z"/>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="d-flex justify-content-start align-items-center mt-[27px]">
    <button v-on:click="submitLpPosterTab()" class="btn-blue-hover text-[--blue] w-[120px] h-[40px] flex items-center justify-center rounded-[5px]
                bg-white border-[2px] border-[#5799DB] mr-[20px]">
        <span class="font-[600] text-[14px]">保存</span>
    </button>
    <div class="btn-redirect-index" @click="redirectPageIndex()">一覧に戻る</div>
</div>