@extends('layout.v2.basic.main')
@section('title', 'マニュアル')
@push('css')
@endpush
@section('content')

    <div style="width: 100%; height: 100vh; overflow: hidden;">
        <iframe src="https://lme.jp/manual/tutorial/" style="width: 100%; height: 100%; border: none;"></iframe>
    </div>
    <div class="modal fade" id="modalCampaign" tabindex="-1" role="dialog"  data-backdrop="static"
         data-keyboard="false"
         aria-labelledby="chatSettingStatus"
         style="background: rgba(136, 136, 136, 0.64);">
        <div class="modal-dialog " role="document"
             style=" top: 43%;transform: translateY(-50%) !important;">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom: unset; padding: 0">
                    <div class="border-top">
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="closeModalCampaignMD(event,1)">
                        <i class="fal fa-times " style="color: #1F1F1F;"></i></button>

                </div>
                <div class="modal-body" style="text-align: center; padding: 0">
                    <div class="text-center">
                        <img src="/images/cp_icon_top.png" width="32px" height="32px" style="margin-top: 10px">
                        <div class="d-flex cp_tt_top">
                            <img src="/images/cp_left.png" width="24px">
                            <div class="txt_hr">エルメデビュー!!</div>
                            <img src="/images/cp_right.png" width="24px">
                        </div>
                        <div class="cp-box-note">
                            登録日から１週間以内のご契約で
                        </div>
                        <div >
                            <img src="/images/cp_img_ct.png" width="275px">
                        </div>
                        <div class="cp_items">
                            <div class="item-child">
                                <img  src="/images/cp_content1.jpg" width="98px" style="margin-top: 15px;" >
                                <div class="child-bb">
                                    フォーム作成
                                </div>
                            </div>
                            <div class="item-child">
                                <img  src="/images/cp_content2.jpg" width="98px" style="margin-top: 27px;" >
                                <div class="child-bb">
                                    予約受付＆管理
                                </div>
                            </div>
                            <div class="item-child">
                                <img  src="/images/cp_content3.jpg" width="98px" style="margin-top: 11px;" >
                                <div class="child-bb">
                                    商品販売＆決済連携
                                </div>
                            </div>
                        </div>
                        <div>
                            <img src="/images/cp_icon_top.png" width="32px" height="32px" style="margin-bottom: 3px;">
                            <div class="chat-bubble">
                                エルメが今だけおトク
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_2234_1802)">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.72575 7.72824H8.57146C4.31146 7.72824 0.857178 6.19395 0.857178 4.29966C0.857178 2.40538 4.31146 0.871094 8.57146 0.871094C12.8315 0.871094 16.2857 2.40709 16.2857 4.29966C16.2857 4.91852 15.9189 5.49967 15.2743 5.99852C12.468 6.02252 10.0286 6.71167 8.72575 7.72824Z" fill="white"/>
                                        <path d="M8.74804 7.72838H8.57146C4.31146 7.72838 0.857178 6.19409 0.857178 4.2998V14.5855C0.857178 16.4712 4.28575 18.0141 8.57146 18.0141C12.8572 18.0141 16.2857 16.4712 16.2857 14.5855V12.8541C16.0046 12.8678 15.7189 12.8747 15.4286 12.8747C11.1686 12.8747 7.71432 11.3387 7.71432 9.44609C7.71432 8.82038 8.09146 8.23581 8.74804 7.73181V7.72838Z" fill="#FEF5E4"/>
                                        <path d="M15.2572 2.58675C13.254 1.35054 10.9223 0.752666 8.57146 0.872467C4.30289 0.872467 0.857178 2.41532 0.857178 4.30104C0.857178 5.31247 1.85146 6.22104 3.42861 6.87247" stroke="#FEA600" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M3.42861 17.1579C1.85146 16.5065 0.857178 15.5979 0.857178 14.5865V4.30078" stroke="#FEA600" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M3.42861 12.0158C1.85146 11.3643 0.857178 10.4558 0.857178 9.44434" stroke="#FEA600" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M15.4286 12.8571C19.6886 12.8571 23.1429 11.3229 23.1429 9.42857C23.1429 7.53429 19.6886 6 15.4286 6C11.1686 6 7.71436 7.53429 7.71436 9.42857C7.71436 11.3229 11.1686 12.8571 15.4286 12.8571Z" fill="white"/>
                                        <path d="M15.4286 12.8573C19.6886 12.8573 23.1429 11.323 23.1429 9.42871V19.7144C23.1429 21.6001 19.7144 23.143 15.4286 23.143C11.1429 23.143 7.71436 21.6001 7.71436 19.7144V9.42871C7.71436 11.323 11.1686 12.8573 15.4286 12.8573Z" fill="#FEF5E4"/>
                                        <path d="M15.4286 12.8571C19.6886 12.8571 23.1429 11.3229 23.1429 9.42857C23.1429 7.53429 19.6886 6 15.4286 6C11.1686 6 7.71436 7.53429 7.71436 9.42857C7.71436 11.3229 11.1686 12.8571 15.4286 12.8571Z" stroke="#FEA600" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M7.71436 9.42871V19.7144C7.71436 21.6001 11.1429 23.143 15.4286 23.143C19.7144 23.143 23.1429 21.6001 23.1429 19.7144V9.42871" stroke="#FEA600" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M23.1429 14.5713C23.1429 16.457 19.7144 17.9999 15.4286 17.9999C11.1429 17.9999 7.71436 16.457 7.71436 14.5713" stroke="#FEA600" stroke-linecap="round" stroke-linejoin="round"/>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_2234_1802">
                                            <rect width="24" height="24" fill="white"/>
                                        </clipPath>
                                    </defs>
                                </svg>

                            </div>
                        </div>

                    </div>
                </div>
                <a target="_blank" href="{{route('botAdd',['campaign_bot_id'=>Hashids::encode($botId)])}}">
                    <div style="position: absolute;left: 10px; bottom: 10px ;z-index: 1">
                        <div class="cp_ptn_detail">
                            詳しくはこちら
                            <img src="/images/cp_play.png" width="24px">
                        </div>
                    </div>
                </a>
                <div class="border_bottom" >
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="botIdCampaignTT" value="{{ $botId }}">
    <input type="hidden" id="botIdCampaignTTEncode" value="{{ Hashids::encode($botId) }}">

@endsection
@push('js')
    <script>
        var currentUserId = '{{ getCurrentUser() }}';
        var botIdTutorial = '{{ $botId }}';
    </script>
<script>
    $(document).ready(function() {
        const params = new URLSearchParams(window.location.search);
        const bot_id_check = params.get('botId');
        var has_campaign_local = localStorage.getItem('has_campaign_' + currentUserId + '_' + bot_id_check);

        if (has_campaign_local != 0) {
            checkShowCampaign(bot_id_check);
        }
    });
    function checkShowCampaign(botId) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: '/ajax/check-show-campaign',
            beforeSend: function () {
                $.LoadingOverlay('show');
            },
            type: 'POST',
            data: {botId: botId }
        }).done(function (a, b, c) {
            console.log(a);
            if (a.success) {
                var has_campaign = a.has_campaign;
                localStorage.setItem('has_campaign_' + currentUserId + '_' + botId , has_campaign);
                if (has_campaign == 1) {
                    var typeShowCampaign = a.typeShowCampaign;
                    if (typeShowCampaign == 1) {
                        $("#modalCampaign").modal("show");
                    }
                    if (typeShowCampaign == 2) {
                        $(".campaignSmallBox").css('display', 'block');
                    }
                }

            }
            $.LoadingOverlay('hide');
        }).fail(function (a, b, c) {
            $.LoadingOverlay('hide');
        }).always(function (a, b) {
            $.LoadingOverlay('hide');
        });
    }
    function closeModalCampaignMD(event, type){
        if(type == 2){
            event.stopPropagation();
        }

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: '/ajax/close-md-campaign',
            beforeSend: function () {
                $.LoadingOverlay('show');
            },
            type: 'POST',
            data: {
                type_close: type, // close md popup
                botId: botIdTutorial
            },
        }).done(function (a, b, c) {
            if (a.success){
                if(type == 1){
                    $("#modalCampaign").modal("hide");
                    $(".campaignSmallBox").css('display', 'block');
                }else{
                    $(".campaignSmallBox").css('display', 'none');
                }
            }else{
                alert(a.error_message);
            }
            $.LoadingOverlay('hide');
        }).fail(function (a, b, c) {
            $.LoadingOverlay('hide');
        }).always(function (a, b) {
            $.LoadingOverlay('hide');
        });

    }

</script>
@endpush