@extends('layout.basic.main')
@section('title', 'QRコードアクション（編集）')

@push('js')
    <script src="/js/tailwindcss.js"></script>
@endpush
@push('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <style>
        body {
            background: #F5F7FA;
        }

        #lp-poster-page {
            input {
                font-size: 14px;
            }

            input:focus {
                outline: none;
                box-shadow: none;
            }

            input::placeholder {
                color: #E0E0E0;
            }

            button:hover {
                opacity: 0.7;
            }

            a:hover {
                color: #F44336;
            }

            .button:hover {
                color: #888;
            }

            i.fa-trash {
                color: #1F1F1F;
            }

            i.fa-trash:hover {
                color: #F44336;
            }

            #step_lp_btn:hover {
                color: #5799DB;
            }
        }

        [v-cloak] {
            display: none;
        }

        .toastMessage::before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            background-image: url('/images/circle-check.svg');
            background-size: cover;
            margin-right: 3px;
        }
    </style>
@endpush
@section('content')
    <div id="lp-poster-page" class="text-[#222222] text-[14px] font-[300] mx-[21px] my-[20px] w-[1137px]" v-cloak>
        @include('basic.qr_code.v2.components.header_landing')
        <div class="w-[1137px] h-[100px] pt-[13px] px-[26px] bg-white rounded-[10px] mb-[15px]">
            <div class="font-[600] text-[16px]">
                <span class="mr-[19px]">LP連携</span>
            </div>
            <hr class="text-[#DDDDDD] my-[6px]">
            <span href="#"
                  class="font-[600] text-[#F44336]">この機能は主に複数の広告を出稿している方向けの機能です。</span>広告のクリック先としてLPを登録している場合に、広告（流入経路）ごとにQRコードアクションを分ける必要がなくなり、1つのQRコードアクションで流入経路を記録することができます。
        </div>

        <div class="flex">
            <div class="w-[230px] h-[600px] bg-white px-[26px] py-[24px] rounded-[8px] mr-[20px]">
                <div class="flex items-center"
                     :class="[
                        currentStep > 1 ? 'cursor-pointer' : ''
                     ]"
                     id="lp-poster-step-1" @click="currentStep > 1 ? setStep(1) : null">
                    <div class="rounded-[50%] w-[24px] h-[24px] font-[400] flex items-center justify-center mr-[7px]"
                         :class="[
                            currentStep == 1 ? 'bg-[#5799DB] text-white' : (currentStep > 1 ? 'bg-[#EDF4FB] text-white' : 'bg-[#E7E7E7] text-[#8C8C8C]')
                         ]"
                    >1
                    </div>
                    <div :class="[
                        currentStep > 1 ? 'text-[#888888] underline' : 'font-[600] text-[#1F1F1F]'
                    ]">広告の管理名を登録
                    </div>
                </div>
                <div class="my-[7px] bg-[#D1D1D1] w-[1px] h-[22px] ml-[11px]"></div>

                <div class="flex items-center"
                     :class="[
                        currentStep > 2 ? 'cursor-pointer' : ''
                     ]"
                     id="lp-poster-step-2" @click="currentStep > 2 ? setStep(2) : null">
                    <div class="rounded-[50%] w-[24px] h-[24px] font-[400] flex items-center justify-center mr-[7px]"
                         :class="[
                            currentStep == 2 ? 'bg-[#5799DB] text-white' : (currentStep > 2 ? 'bg-[#EDF4FB] text-white' : 'bg-[#E7E7E7] text-[#8C8C8C]')
                         ]">2
                    </div>
                    <div :class="[
                        currentStep == 2 ? 'font-[600] text-[#1F1F1F]' : (currentStep > 2 ? 'text-[#888888] underline' : 'font-[400] text-[#8C8C8C]')
                    ]">LPの登録
                    </div>
                </div>
                <div class="my-[7px] bg-[#D1D1D1] w-[1px] h-[22px] ml-[11px]"></div>

                <div class="flex items-center"
                     :class="[
                        currentStep > 3 ? 'cursor-pointer' : ''
                     ]"
                     id="lp-poster-step-3" @click="currentStep > 3 ? setStep(3) : null">
                    <div class="rounded-[50%] w-[24px] h-[24px] font-[400] flex items-center justify-center mr-[7px]"
                         :class="[
                            currentStep == 3 ? 'bg-[#5799DB] text-white' : (currentStep > 3 ? 'bg-[#EDF4FB] text-white' : 'bg-[#E7E7E7] text-[#8C8C8C]')
                         ]">3
                    </div>
                    <div :class="[
                        currentStep == 3 ? 'font-[600] text-[#1F1F1F]' : (currentStep > 3 ? 'text-[#888888] underline' : 'font-[400] text-[#8C8C8C]')
                    ]">コード埋め込み
                    </div>
                </div>
                <div class="my-[7px] bg-[#D1D1D1] w-[1px] h-[22px] ml-[11px]"></div>

                <div class="flex items-center"
                     :class="[
                        currentStep > 4 ? 'cursor-pointer' : ''
                     ]"
                     id="lp-poster-step-4" @click="currentStep > 4 ? setStep(4) : null">
                    <div class="rounded-[50%] w-[24px] h-[24px] font-[400] flex items-center justify-center mr-[7px]"
                         :class="[
                            currentStep == 4 ? 'bg-[#5799DB] text-white' : (currentStep > 4 ? 'bg-[#EDF4FB] text-white' : 'bg-[#E7E7E7] text-[#8C8C8C]')
                         ]">4
                    </div>
                    <div :class="[
                        currentStep == 4 ? 'font-[600] text-[#1F1F1F]' : (currentStep > 4 ? 'text-[#888888] underline' : 'font-[400] text-[#8C8C8C]')
                    ]">URL発行
                    </div>
                </div>
            </div>
            <template v-if="currentStep == 1">@include('basic.qr_code.v2.components.pl_poster.step1')</template>
            <template v-if="currentStep == 2">@include('basic.qr_code.v2.components.pl_poster.step2')</template>
            <template v-if="currentStep == 3">@include('basic.qr_code.v2.components.pl_poster.step3')</template>
            <template v-if="currentStep == 4">@include('basic.qr_code.v2.components.pl_poster.step4')</template>
        </div>
    </div>
@endsection
@push('js')
    <script>
        var landingId = {{ $landingId }};
        var landing = @if(!empty($landing)) null @else null @endif;
        var landingEditRoute = '';
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/mode/javascript/javascript.min.js"></script>
    <script src="/js/form_answer/vue.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

    <script src="/js/qr_code/v2/mixins/lp_poster/step1.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/qr_code/v2/mixins/lp_poster/step2.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/qr_code/v2/mixins/lp_poster/step3.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/qr_code/v2/mixins/lp_poster/step4.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/qr_code/v2/mixins/header_landing.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/qr_code/v2/lp_poster.js?v={{config('sns-line.version')}}"></script>
@endpush