@extends('layout.default')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url('css/pages/wizard/wizard-3.css') }}">
    <link rel="stylesheet" href="{{ url('plugins/custom/cropper/cropper.bundle.css') }}">
    <style>
        @media (max-width: 780px) {
            #note-frame {
                display: none;
            }
        }
    </style>
@endsection
@section('content')
    <div class="card card-custom card-stretch">
        <div class="card-body p-0">
            <div class="wizard wizard-3" id="kt_wizard_v3" data-wizard-state="step-first" data-wizard-clickable="true">
                <div class="wizard-nav">

                    <div class="wizard-steps px-8 py-8 px-lg-15 py-lg-3">
                        <div class="wizard-step" data-wizard-type="step" data-wizard-state="current">
                            <div class="wizard-label">
                                <h3 class="wizard-title">
                                    <span>1.</span>Customization</h3>
                                <div class="wizard-bar"></div>
                            </div>
                        </div>
                        <div class="wizard-step" data-wizard-type="step">
                            <div class="wizard-label">
                                <h3 class="wizard-title">
                                    <span>2.</span>General Settings</h3>
                                <div class="wizard-bar"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center py-10 px-8 py-lg-12 px-lg-10">
                    <div class="col-xl-11">
                        <form class="form fv-plugins-bootstrap fv-plugins-framework" id="kt_form" action="{{ url('/members-area/cpalanders/templates/start-now/' . $template->id . '/page/' . $userLander->id) }}" method="POST" enctype="multipart/form-data">
                            {{ method_field('PUT') }}
                            @csrf
                            <div class="pb-5" id="newdiv" data-wizard-type="step-content" data-wizard-state="current">
                                @if ($errors->any())
                                    <div class="form-group mb-8">
                                        <div class="alert alert-custom alert-default" role="alert">
                                            <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
                                            <div class="alert-t">
                                                <ul>
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                <div class="form-group">
                                    <label>Colors<span class="text-danger">*</span></label>
                                    <div class="col-12 col-form-label">
                                        <div class="radio-inline flex-wrap color-check">
                                            @foreach($userLander->template->colors as $color)
                                                <label class="radio radio-success">
                                                    <input required value="{{ $color->hexadecimal }}" onchange="changeColor(this)" name="color_hexadecimal" data-color-class="{{ $color->pivot->color_class }}" type="radio" data-color-change="{{ $color->id }}"/>
                                                    <span class="mb-2" style="background: {{ $color->hexadecimal }}"></span>
                                                </label>
                                            @endforeach
                                        </div>
                                        <span class="form-text text-muted">Select the color</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-12 col-form-label">
                                        <div class="checkbox-inline">
                                            <label class="checkbox checkbox-lg">
                                                <input id="advertisement" type="checkbox" name="" value="yes" />
                                                <span></span>
                                                I want to display an "ADVERTISEMENT" disclaimer on top of my page (only check this option if you'll be promoting the page on an ad platform that requires this).
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="dropdown col-12">
                                        <div class="form-group">
                                            <label for="exampleSelectl">Select</label>
                                            <select onchange="inputHideShow(this)" class="form-control form-control-lg" id="select-change">
                                            </select>
                                        </div>
                                    </div>
                                    <div id="create-inputs" class="col-12"></div>
                                </div>
                                <div class="row" style="justify-content: center">
                                    <div id="note-frame" valign="middle" align="right" width="33%">
                                        <div style="background: url('/images/notebook.png') no-repeat center center / auto 700px;height:470px;padding:43px;position:relative;width:720px;overflow:hidden" align="center">
                                            <div style="font-weight:bold;position:absolute;font-size:10px;color:#FFF;left:90px;top:11px">Preview desktop/tablet</div>
                                            <div style="width:87.5%;height:100%;margin-top:-2.5%; url(/images/loading.gif) no-repeat center center / 60px auto;">
                                                @if($userLander->active == 1)
                                                <iframe sandbox="allow-scripts allow-same-origin" id="frame1" src="{{ url('/landingpages/' . $userLander->page_name . '.html') }}" frameborder="0" scrolling="yes" style="width:980px;height:615px;transform: scale(0.566);overflow:hidden;transform-origin:0 0 0;"></iframe>
                                                @else
                                                <iframe sandbox="allow-scripts allow-same-origin" id="frame1" src="{{ url('/landingpages/' . $userLander->deactivate . '-' . $userLander->page_name . '.html') }}" frameborder="0" scrolling="yes" style="width:980px;height:615px;transform: scale(0.566);overflow:hidden;transform-origin:0 0 0;"></iframe>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    @if($userLander->template->options->whereIn('name', 'Mobile') != '[]')
                                    <div id="mobile-frame" valign="middle" align="left" width="33%">
                                        <div style="background:url('/images/mobile.png') repeat center center / auto 560px;width:267px;height:470px;position:relative;padding:28px 24px;" align="center">
                                            <div style="font-weight:bold;position:absolute;font-size:10px;color:#FFF;left:25px;top:50px">Preview mobile</div>
                                            <div style="overflow:hidden; width:100%;height:94%;margin-top:6%;background:#FFF url(/images/loading.gif) no-repeat center center / 120px auto">
                                                @if($userLander->active == 1)
                                                <iframe style="display: block; width: 200%; transform: scale(0.5); height: 202%; margin-left: -50.5%; margin-top: -91%;" sandbox="allow-scripts allow-same-origin" id="frame2" src="{{  url('/landingpages/' . $userLander->page_name . '.html')  }}" frameborder="0" scrolling="yes" ></iframe>
                                                @else
                                                <iframe style="display: block; width: 200%; transform: scale(0.5); height: 202%; margin-left: -50.5%; margin-top: -91%;" sandbox="allow-scripts allow-same-origin" id="frame2" src="{{  url('/landingpages/' . $userLander->deactivate . '-' . $userLander->page_name . '.html')  }}" frameborder="0" scrolling="yes" ></iframe>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    @if($template->options->whereIn('name', 'Opt-in') != '[]')
                                        @if($userLander->active == 1)
                                        <iframe style="display:none" sandbox="allow-scripts allow-same-origin" id="frame-thanks" src="{{ url('/landingpages/' . $userLander->page_name . '-thanks.html') }}" frameborder="0" scrolling="yes"></iframe>
                                        @else
                                        <iframe style="display:none" sandbox="allow-scripts allow-same-origin" id="frame-thanks" src="{{ url('/landingpages/' . $userLander->deactivate . '-' . $userLander->page_name . '-thanks.html') }}" frameborder="0" scrolling="yes"></iframe>
                                        @endif
                                    @endif
                                </div>
                                @if($userLander->active == 1)
                                    <iframe sandbox="allow-scripts allow-same-origin" id="generate-html" src="{{ url('/landingpages/' . $userLander->page_name . '.html') }}" frameborder="0" scrolling="yes" style="display: none"></iframe>
                                @else
                                    <iframe sandbox="allow-scripts allow-same-origin" id="generate-html" src="{{ url('/landingpages/' . $userLander->deactivate . '-' . $userLander->page_name . '.html') }}" frameborder="0" scrolling="yes" style="display: none"></iframe>
                                @endif
                            </div>
                            <div id="buttons_to_submit" class="pb-5" data-wizard-type="step-content">
                                <p class="text-danger mb-15">
                                    Alert: If you notice that the information isn't updating properly, please, try to hard refresh your browser to clear your cache. Here's how to do it on different browsers and OS:
                                    <a target="_blank" href="https://filecamp.com/support/problem-solving/hard-refresh/">Click Here</a>
                                </p>
                                <div class="form-group">
                                    <label>Address<span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <button onclick="checkAddress(this)" type="button" class="btn btn-success">CLICK TO CHECK</button>
                                        </div>
                                        <input type="text" class="form-control change-domain" name="page_name" value="{{$userLander->page_name}}"/>
                                    </div>
                                    <span class="form-text text-muted">This will be part of your URL and will be visible for the visitors.</span>
                                    <span class="form-text text-danger">If the Address is already taken, the page will be reloaded and you will lost the modifications, <strong> PLEASE CHECK IT BEFORE SUBMIT!</strong></span>
                                </div>
                                <div class="form-group">
                                    <label>Domains<span class="text-danger">*</span></label>
                                    <div class="scroll scroll-pull" data-scroll="true" data-wheel-propagation="true" style="height: 250px; overflow: auto">
                                        <div class="col-12 col-form-label">
                                            <div class="form-group">
                                                @foreach($groups as $key=>$group)
                                                    @if($key == $template->group->id -1)
                                                        <b style="padding: 15px 0; display: block">{{$group->name}} <span class="italic" style="color: #31cdea">Recommended</span></b>
                                                        <div class="radio-list">
                                                            @foreach($group->domains as $domain)
                                                                <label class="radio">
                                                                    <input required value="{{ $domain['domains'] }}" {{ ($domain['domains'] == $userLander->main_domain) ? 'checked' : '' }}  type="radio" name="domain">
                                                                    <span></span>
                                                                    <div>{{ $domain['domains'] }}/</div><div class="change-domain-view">{{$userLander->page_name}}</div>
                                                                </label>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                @endforeach
                                                @foreach($groups as $key=>$group)
                                                    @if($key != $template->group->id -1)
                                                        <b style="padding: 15px 0; display: block">{{$group->name}}</b>
                                                        <div class="radio-list">
                                                            @foreach($group->domains as $domain)
                                                                <label class="radio">
                                                                    <input required value="{{ $domain['domains'] }}" {{ ($domain['domains'] == $userLander->main_domain) ? 'checked' : '' }} value="{{ $domain['domains'] }}" type="radio" name="domain">
                                                                    <span></span>
                                                                    <div>{{ $domain['domains'] }}/</div><div class="change-domain-view">{{$userLander->page_name}}</div>
                                                                </label>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Title Page<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="titlepage">
                                    <span class="form-text text-muted">This is the title that will be displayed on the browser tab.</span>
                                </div>
                                @if($userLander->template->options->whereIn('name', 'Smart') != '[]')
                                    <div class="form-group">
                                        <label>Link Offer</label>
                                        <input type="text" class="form-control" name="linkoffer" value="https://www.link-offer.com/">
                                        <span class="form-text text-muted">This is the page you want to send visitors to, normally the affiliate link.</span>
                                    </div>
                                    <div class="form-group">
                                        <label>Link Smart</label>
                                        <input type="text" class="form-control" name="linksmart">
                                        <span class="form-text text-muted">This is the smart link and you can leave it blank to disable the smart feature.</span>
                                    </div>
                                @endif
                                <div class="form-group">
                                    <label>Tracking Code</label>
                                    <textarea class="form-control" rows="3" name="trackingcode"></textarea>
                                    <span class="form-text text-muted">If you’re using a tracking tool and need to add a piece of code to your landing page, place it here.</span>
                                </div>
                                <div class="form-group">
                                    <label>Retargeting Code</label>
                                    <textarea class="form-control" rows="3" name="retargetingcode"></textarea>
                                    <span class="form-text text-muted">Here you can include the pixel code from Facebook or another retargeting platform.</span>
                                </div>
                                @if($userLander->template->options->whereIn('name', 'Opt-in') != '[]')
                                    <div class="form-group">
                                        <label>Key<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="key" value="{{ $userLander->key }}"/>
                                        <span class="form-text text-danger">This is the key to get your leads using the API. You can edit, but it must contain at least 10 characters. CHECK IT BEFORE SUBMIT!</span>
                                    </div>
                                    <h4 class="mb-10 font-weight-bold text-dark">Thank You Page Settings</h4>

                                    <div class="form-group">
                                        <div class="col-form-label">
                                            <div class="form-group">
                                                <div class="radio-inline change_thanks_page">
                                                    <label class="radio">
                                                        <input {{  ($userLander->url == null) ? 'checked' : '' }} value="cpatools_thanks" type="radio" name="thanks_page_type">
                                                        <span></span>
                                                        Use our default thank you page
                                                    </label>
                                                    <label class="radio">
                                                        <input {{  ($userLander->url != null) ? 'checked' : '' }} value="different_thanks" type="radio" name="thanks_page_type">
                                                        <span></span>
                                                        Redirect to a custom URL after form submission
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cpatools_thanks_page">
                                        <div class="form-group">
                                            <label>Headline</label>
                                            <input type="text" class="form-control" name="thanks_headline" value="THANK YOU"/>
                                        </div>
                                        <div class="form-group">
                                            <label>Subheadline</label>
                                            <input type="text" class="form-control" name="thanks_subheadline" value="Thank you very much for filling out the form." />
                                        </div>
                                        <div class="form-group">
                                            <label>Text Link</label>
                                            <input type="text" class="form-control" name="thanks_text_link"/>
                                        </div>
                                        <div class="form-group">
                                            <label>URL Link</label>
                                            <input type="text" class="form-control" name="thanks_url_link"/>
                                        </div>
                                        <div class="form-group">
                                            <label>Tracking Code</label>
                                            <textarea class="form-control" rows="3" name="thanks_tracking_code"></textarea>
                                        </div>
                                    </div>
                                    <div class="customize_thanks_page">
                                        <div class="form-group">
                                            <label>Redirect URL</label>
                                            <input type="url" class="form-control" name="url" value="{{ $userLander->url }}"/>
                                            <span class="form-text text-muted">Set the URL to be redirect after the user fill the form.</span>
                                        </div>
                                    </div>
                                @endif

                                <h4 class="mb-10 font-weight-bold text-dark">Parameters</h4>
                                <div class="row">
                                    <div class="form-group col-12 col-md-4">
                                        <label>First Parameter</label>
                                        <input type="text" class="form-control" name="parameter_1" value="name" />
                                        <span class="form-text text-muted">Click to overwrite first parameter.</span>
                                    </div>
                                    <div class="form-group col-12 col-md-4">
                                        <label>Second Parameter</label>
                                        <input type="text" class="form-control" name="parameter_2" value="email" />
                                        <span class="form-text text-muted">Click to overwrite second parameter.</span>
                                    </div>
                                    <div class="form-group col-12 col-md-4">
                                        <label>Third Parameter</label>
                                        <input type="text" class="form-control" name="parameter_3" value="trk" />
                                        <span class="form-text text-muted">Click to overwrite third parameter.</span>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between border-top mt-5 pt-10">
                                <div class="mr-2">
                                    <button type="button" class="btn btn-light-primary font-weight-bolder text-uppercase px-9 py-4" data-wizard-type="action-prev">Previous</button>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-success font-weight-bolder text-uppercase px-9 py-4 send-btn" data-wizard-type="action-submit">Submit</button>
                                    <button type="button" class="btn btn-primary font-weight-bolder text-uppercase px-9 py-4" data-wizard-type="action-next">Next</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{--    Image Modal--}}
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" data-backdrop="static"  aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 id="imageModalLabel" class="modal-title d-flex align-items-start flex-column">
                        <span class="mt-3 font-weight-bold">Image must be less than 2Mb</span>
                        <span class="font-weight-bold">Only jpeg, png and jpg.</span>
                    </h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div>
                        <div id="upload-demo" class="center-block"></div>
                        <img width="400px" height="320" id="image" alt=""/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="notchange" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
                    <button type="button" id="change" class="btn btn-primary font-weight-bold" data-dismiss="modal">Confirm</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script type="text/javascript" src="{{ asset('js/pages/custom/wizard/wizard-3.js') }}"></script>
    <script type="text/javascript" src="{{ asset('plugins/custom/cropper/cropper.bundle.js') }}"></script>
    <script type="text/javascript" src="{{ url('js/summernote-cleaner.js') }}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
    <script type="text/javascript" src="{{ url('js/check-page.js') }}"></script>
    <script>
        window.onload = function() {
            window.stop();
            var c = 0;
            let cropper = null;

            // encontra a cor que o template foi cadastrado
            $("input[name='color_hexadecimal']").each(function() {
               if($(this).data('color-class') == ($("#frame1").contents().find('#css')[0]).innerHTML) {
                   $(this).prop("checked", true);
               }
            });

            //modifica o advertisement
            if($("#frame1").contents().find('.adv-set').length) {
                $('#advertisement').prop('checked', true);
            }

            // modifica as configurações adicionais (step2) da página
            $("input[name='titlepage']").val($("#generate-html").contents().find('#Title-page')[0].innerHTML);
            $("input[name='linkoffer']").val($("#generate-html").contents().find('#Button').attr('href'));
            $("input[name='linksmart']").val($("#generate-html").contents().find('#Button').data('smart'));
            $("input[name='parameter_1']").val($("#generate-html").contents().find('#Param-name').data('value'));
            $("input[name='parameter_2']").val($("#generate-html").contents().find('#Param-email').data('value'));
            $("input[name='parameter_3']").val($("#generate-html").contents().find('#Param-trk').data('value'));
            if(($("#generate-html").contents().find('#Tracking-code'))[0] != undefined) {
                if($($("#generate-html").contents().find('#Tracking-code'))[0].innerHTML.includes('analytics') == true) {
                    $($("#generate-html").contents().find('#Tracking-code')[0].children[1]).remove();
                }
                $("textarea[name='trackingcode']").val($("#generate-html").contents().find('#Tracking-code')[0].innerHTML);
            }
            if(($("#generate-html").contents().find('#Retargeting-code'))[0] != undefined) {
                if($($("#generate-html").contents().find('#Retargeting-code'))[0].innerHTML.includes('analytics') == true) {
                    $($("#generate-html").contents().find('#Retargeting-code')[0].children[1]).remove();
                }
                $("textarea[name='retargetingcode']").val($("#generate-html").contents().find('#Retargeting-code')[0].innerHTML);
            }
            if(($("#generate-html").contents().find('#Form-code'))[0] != undefined) {
                $("textarea[name='formcode']").val($("#generate-html").contents().find('#Form-code')[0].innerHTML);
            }

            // modifica os inputs do thanks
            @if($template->options->whereIn('name', 'Opt-in') != '[]' && File::exists(public_path() . '/landingpages/' . $userLander->page_name . '-thanks.html'))
            $("input[name='thanks_headline']").val($("#frame-thanks").contents().find('h1').text());
            $("input[name='thanks_subheadline']").val($("#frame-thanks").contents().find('p').text());
            $("input[name='thanks_text_link']").val($("#frame-thanks").contents().find('a').text());
            $("input[name='thanks_url_link']").val($("#frame-thanks").contents().find('a').attr('href'));
            if($($("#frame-thanks").contents().find('.thanks_code'))[0].innerHTML.includes('analytics') == true) {
                $($("#frame-thanks").contents().find('.thanks_code')[0].children[1]).remove();
            }
            $("textarea[name='thanks_tracking_code']").val($("#frame-thanks").contents().find('.thanks_code')[0].innerHTML);
            @endif

            // cria os inputs baseados no iframe
            $("#frame1").contents().find('[data-rel]').map(function() {
                $('#select-change').append(
                    '<option>' + this.id + '</option>'
                );

                if ($(this).data('rel') == 'textarea') {
                    var displayType = $('#create-inputs').append(
                        '<div style="display: none" class="col-12 ' + this.id + '">' +
                        '<div class="form-group fv-plugins-icon-container">' +
                        '<label>' + this.id + '</label>' +
                        '<textarea id="' + this.id + '" class="form-control summernote-' + this.id + '">' + this.innerHTML + '</textarea>' +
                        '<div class="fv-plugins-message-container"></div>' +
                        '</div>' +
                        '</div>'
                    );
                } else if ($(this).data('rel') == 'file') {
                    var displayType = $('#create-inputs').append(
                        '<div style="display: none" class="col-12 ' + this.id + '">' +
                        '<div class="form-group fv-plugins-icon-container">' +
                        '<label>' + this.id + '</label>' +
                        '<input type="file" id="' + this.id + '" accept="image/*" class="form-control">' +
                        '<div class="fv-plugins-message-container"></div>' +
                        '</div>' +
                        '<span class="font-weight-bold">Image must be less than 2Mb. Only jpeg, png and jpg.</span>' +
                        '</div>'
                    );
                } else if ($(this).data('rel') == 'video') {
                    var displayType = $('#create-inputs').append(
                        '<div style="display: none" class="col-12 ' + this.id + '">' +
                        '<div class="form-group fv-plugins-icon-container">' +
                        '<label>' + this.id + '</label>' +
                        '<textarea id="' + this.id + '" rows="5" class="form-control">' + this.innerHTML + '</textarea>' +
                        '<div class="fv-plugins-message-container"></div>' +
                        '</div>' +
                        '</div>'
                    );
                }
                if (c == 0) {
                    $(displayType[0]).children().css('display', 'block');
                }
                c++

                $('.summernote-' + this.id).summernote({
                    height: 80,
                    disableDragAndDrop: true,
                    tabDisable: true,
                    lineHeights: ['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.8', '1.0', '1.2', '1.4', '1.5', '2.0', '3.0'],
                    toolbar: [
                        ['font', ['bold', 'underline', 'clear']],
                        ['color', ['color']],
                        ['height', ['height']],
                        ['insert', ['link']],
                        ['view', ['undo', 'redo']],
                        ['misc', ['clearAll']],
                    ],
                    cleaner: {
                        action: 'both', // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
                        icon: '<i class="note-icon"><svg xmlns="http://www.w3.org/2000/svg" id="libre-paintbrush" viewBox="0 0 14 14" width="14" height="14"><path d="m 11.821425,1 q 0.46875,0 0.82031,0.311384 0.35157,0.311384 0.35157,0.780134 0,0.421875 -0.30134,1.01116 -2.22322,4.212054 -3.11384,5.035715 -0.64956,0.609375 -1.45982,0.609375 -0.84375,0 -1.44978,-0.61942 -0.60603,-0.61942 -0.60603,-1.469866 0,-0.857143 0.61608,-1.419643 l 4.27232,-3.877232 Q 11.345985,1 11.821425,1 z m -6.08705,6.924107 q 0.26116,0.508928 0.71317,0.870536 0.45201,0.361607 1.00781,0.508928 l 0.007,0.475447 q 0.0268,1.426339 -0.86719,2.32366 Q 5.700895,13 4.261155,13 q -0.82366,0 -1.45982,-0.311384 -0.63616,-0.311384 -1.0212,-0.853795 -0.38505,-0.54241 -0.57924,-1.225446 -0.1942,-0.683036 -0.1942,-1.473214 0.0469,0.03348 0.27455,0.200893 0.22768,0.16741 0.41518,0.29799 0.1875,0.130581 0.39509,0.24442 0.20759,0.113839 0.30804,0.113839 0.27455,0 0.3683,-0.247767 0.16741,-0.441965 0.38505,-0.753349 0.21763,-0.311383 0.4654,-0.508928 0.24776,-0.197545 0.58928,-0.31808 0.34152,-0.120536 0.68974,-0.170759 0.34821,-0.05022 0.83705,-0.07031 z"/></svg></i>',
                        keepHtml: true,
                        keepTagContents: ['span'], //Remove tags and keep the contents
                        badTags: ['applet', 'col', 'colgroup', 'embed', 'noframes', 'noscript', 'script', 'style', 'title', 'meta', 'link', 'head'], //Remove full tags with contents
                        badAttributes: ['bgcolor', 'border', 'height', 'cellpadding', 'cellspacing', 'lang', 'start', 'style', 'valign', 'width', 'data-(.*?)'], //Remove attributes from remaining tags
                        limitChars: 0, // 0|# 0 disables option
                        limitDisplay: 'both', // none|text|html|both
                        limitStop: false, // true/false
                        notTimeOut: 850, //time before status message is hidden in miliseconds
                        imagePlaceholder: 'https://via.placeholder.com/200'
                    },
                    callbacks: {
                        onInit: function() {
                            //The trick:
                            var textarea = $(this);
                            textarea.val(textarea.summernote("code"));
                        },
                        onChange: function (contents, $editable) {
                            var frame1 = $("#frame1").contents().find('#' + $(this).attr('id'));
                            frame1[0].innerHTML = contents.replace('<p>', '').replace('</p>', '');

                            @if($userLander->template->options->whereIn('name', 'Mobile') != '[]')
                            var frame2 = $("#frame2").contents().find('#' + $(this).attr('id'));
                            frame2[0].innerHTML = contents.replace('<p>', '').replace('</p>', '');
                            @endif

                            var generateHtml = $("#generate-html").contents().find('#' + $(this).attr('id'));
                            generateHtml[0].innerHTML = contents.replace('<p>', '').replace('</p>', '');
                        }
                    }
                }).on("summernote.enter", function(we, e) {
                    $(this).summernote('pasteHTML', '<br><br>');
                    e.preventDefault();
                });
            });

            // modifica o video
            $('#Video-code').keyup(function(res){
                $("#frame1").contents().find('#Video-code').children().remove();
                $("#frame1").contents().find('#Video-code').append(res.target.value);

                @if($userLander->template->options->whereIn('name', 'Mobile') != '[]')
                $("#frame2").contents().find('#Video-code').children().remove();
                $("#frame2").contents().find('#Video-code').append(res.target.value);
                @endif

                $("#generate-html").contents().find('#Video-code').children().remove();
                $("#generate-html").contents().find('#Video-code').append(res.target.value);
            });

            $('#Image').change(function(res) {

                $('#error-message').text('');

                const file = res.target.files[0];
                const maxSize = 2 * 1024 * 1024;

                if (file.size > maxSize) {
                    $('#error-message').text('Image must be less than 2MB.');
                    return;
                }


                const validTypes = ['image/png', 'image/jpeg', 'image/jpg'];
                if (!validTypes.includes(file.type)) {
                    $('#error-message').text('Format invalid. Only PNG, JPG ou JPEG are allowed.');
                    return;
                }

                $('#imageModal').modal('show');
                $('#imageModal').off('shown.bs.modal').on('shown.bs.modal', function () {
                    const reader = new FileReader();
                    reader.readAsDataURL(res.target.files[0]);
                    reader.onload = function() {
                        const dataURL = reader.result;
                        const output = document.getElementById('image');
                        output.src = dataURL;

                        if (cropper !== null) {
                            cropper.destroy();
                            cropper = null;
                        }

                        cropper = new Cropper(output, {
                            aspectRatio: 1,
                            autoCropArea: 1,
                            viewMode: 1,
                        });
                    };
                });
            });

            $('#imageModal .modal-footer button').on('click', function(event) {
                const $button = $(event.target);

                if ($button[0].id === 'change') {
                    const croppedCanvas = cropper.getCroppedCanvas();

                    croppedCanvas.toBlob(function(blob) {
                        const formData = new FormData();
                        formData.append('image', blob, 'image.png');

                        $.ajax({
                            url: window.location.origin + '/members-area/cpalanders/upload-image',
                            type: 'post',
                            data: formData,
                            processData: false,
                            contentType: false,
                            headers: {
                                'X-CSRF-TOKEN': $("input[name='_token']").val()
                            },
                            success: function(response) {

                                $("#frame1").contents().find('#Image').attr('src', response.url);
                                @if($userLander->template->options->whereIn('name', 'Mobile') != '[]')
                                $("#frame2").contents().find('#Image').attr('src', response.url);
                                @endif
                                $("#generate-html").contents().find('#Image').attr('src', response.url);

                                $('#imageModal').modal('hide');
                            },
                            error: function(xhr, status, error) {
                                console.error('Error to load the image:', error);
                            }
                        });
                    }, 'image/png');
                }
            });
        };

        if($('input[name=thanks_page_type]').length > 0) {
            if ($('input[name=thanks_page_type]:checked')[0].value == 'cpatools_thanks') {
                $('.cpatools_thanks_page').show();
                $('.customize_thanks_page').hide();
            }
            if ($('input[name=thanks_page_type]:checked')[0].value == 'different_thanks') {
                $('.cpatools_thanks_page').hide();
                $('.customize_thanks_page').show();
            }
        }

        function inputHideShow(res){
            var i;
            for(i = 0; i < $(res).find(':not(:selected)').length; i++){
                $('.' + $(res).find(':not(:selected)')[i].value).css('display', 'none');
            }
            $('.' + $(res).find(':selected').text()).css('display', 'block');
        }

        function changeColor(res) {
            setTimeout(function(){
                ($("#frame1").contents().find('#css')[0]).innerHTML = "";
                ($("#frame1").contents().find('#css')[0]).append($(res).data('color-class'));
                @if($userLander->template->options->whereIn('name', 'Mobile') != '[]')
                ($("#frame2").contents().find('#css')[0]).innerHTML = "";
                ($("#frame2").contents().find('#css')[0]).append($(res).data('color-class'));
                @endif

                ($("#generate-html").contents().find('#css')[0]).innerHTML = "";
                ($("#generate-html").contents().find('#css')[0]).append($(res).data('color-class'));

            }, 500);
        }

        $('#advertisement').on('click', function() {

            if($(this).is(':checked')) {
                $($("#frame1").contents().find('.wrapper')[0]).prepend($('<div class="adv-set" style="text-align: center; padding-top: 5px;">ADVERTISEMENT</div>').css('color', $("#frame1").contents().find('#Headline').css('color')));
                @if($template->options->whereIn('name', 'Mobile') != '[]')
                $($("#frame2").contents().find('.wrapper')[0]).prepend($('<div class="adv-set" style="text-align: center; padding-top: 5px">ADVERTISEMENT</div>').css('color', $("#frame1").contents().find('#Headline').css('color')));
                @endif
                $($("#generate-html").contents().find('.wrapper')[0]).prepend($('<div class="adv-set" style="text-align: center; padding-top: 5px">ADVERTISEMENT</div>').css('color', $("#frame1").contents().find('#Headline').css('color')));
            } else {
                $("#frame1").contents().find('.adv-set').remove();
                @if($template->options->whereIn('name', 'Mobile') != '[]')
                $("#frame2").contents().find('.adv-set').remove();
                @endif
                $("#generate-html").contents().find('.adv-set').remove();
            }
        });

        // modifica o dominio
        $('.change-domain').keyup(function(res) {
            this.value = this.value.replace(/[^a-zA-Z0-9]/g,'_');
            $('.change-domain-view').html(this.value);
        });

        // modifica thanks page para customizável
        $('.change_thanks_page').change(function() {
            if ($('input[name=thanks_page_type]:checked')[0].value == 'cpatools_thanks') {
                $('.cpatools_thanks_page').show();
                $('.customize_thanks_page').hide();
            }
            if ($('input[name=thanks_page_type]:checked')[0].value == 'different_thanks') {
                $('.cpatools_thanks_page').hide();
                $('.customize_thanks_page').show();
            }
        });

        // envia o formulário
        $('.send-btn').click(function() {
            // coloca o spinner para não enviar 2 vezes
            $(this).addClass('spinner spinner-white spinner-right');
            $(this).prop('disabled',true);

            // seleciona o iframe que será gerado
            var html = $(document.getElementById('generate-html')).contents().find('html')[0];

            // coloca as configurações adicionais
            $(html).find('#Key').value = ($("input[name='key']").val());
            $(html).find('#Title-page')[0].innerHTML = ($("input[name='titlepage']").val());
            $(html).find('#Button').attr('href', ($("input[name='linkoffer']").val()));
            $(html).find('#Button').attr('data-smart', ($("input[name='linksmart']").val()));
            if(($("#generate-html").contents().find('#Tracking-code'))[0] != undefined) {
                $(html).find('#Tracking-code').empty();
            }
            if(($("#generate-html").contents().find('#Retargeting-code'))[0] != undefined) {
                $(html).find('#Retargeting-code').empty();
            }
            $(html).find('#Tracking-code').append($("textarea[name='trackingcode']").val());
            $(html).find('#Retargeting-code').append($("textarea[name='retargetingcode']").val());

            $(html).find('#Param-name').attr('data-value', $("input[name='parameter_1']").val());
            $(html).find('#Param-email').attr('data-value', $("input[name='parameter_2']").val());
            $(html).find('#Param-trk').attr('data-value', $("input[name='parameter_3']").val());

            // redireções se possui um link smart
            if(
                $("input[name='linksmart']").val() != undefined
                && $("input[name='linksmart']").val()?.trim() !== ''
            ) {
                var smartLink = document.createElement("script");
                smartLink.type = "text/javascript";
                smartLink.id = "smart-link-id";
                smartLink.src = window.location.origin + "/js/linksmart.js";
                $(html).find('body').append(smartLink);
            }

            //form
            @if($template->options->whereIn('name', 'Opt-in') != '[]')
                $(html).find('#form').attr('action', window.location.origin + '/api/save/' + $("input[name='page_name']").val());
            @endif

            // remove este código
            $(html).contents().find('#acfifjfajpekbmhmjppnmmjgmhjkildl').remove();

            // coloca o iframe como um input para enviar ao controller
            $('#kt_form').append('<textarea style="display:none" name="template" value="'+ $(html)[0].outerHTML +'" </textarea>');
            $('#kt_form').submit();
        });
    </script>
@endsection