@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;
                /*visibility: hidden;*/
            }
        }
    </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) }}" method="POST" enctype="multipart/form-data">
                            @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 class="col-3 col-form-label">Colors<span class="text-danger">*</span></label>
                                    <div class="col-9 col-form-label">
                                        <div class="radio-inline flex-wrap color-check">
                                            @foreach($template->colors as $color)
                                                <label class="radio">
                                                    <input required {{ ($template->color_id == $color->id)  ? 'checked' : '' }} value="{{ $color->hexadecimal }}" name="color_hexadecimal" data-color-class="{{ $color->pivot->color_class }}" onchange="changeColor(this)" 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>
                                                Want to display an "ADVERTISEMENT" disclaimer on top of your 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="65%">
                                        <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;">
                                                <iframe style="width:980px;height:615px;transform: scale(0.566);transform-origin:0 0 0;" sandbox="allow-scripts allow-same-origin" id="frame1" src="{{ url('admin/cpalanders/template-model/' . $template->id) }}" frameborder="0" scrolling="yes"></iframe>
                                            </div>
                                        </div>
                                    </div>
                                    @if($template->options->whereIn('name', 'Mobile') != '[]')
                                        <div id="mobile-frame">
                                            <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; display: block; width:100%;height:94%;margin-top:6%;background:#FFF url(/images/loading.gif) no-repeat center center / 120px auto">
                                                    <iframe style="display: block; width: 202%; transform: scale(0.5); height: 202%; margin-left: -50.5%; margin-top: -91%;" sandbox="allow-scripts allow-same-origin" id="frame2" src="{{ url('admin/cpalanders/template-model/' . $template->id) }}" frameborder="0" scrolling="yes"></iframe>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                                @if($template->options->whereIn('name', 'Opt-in') != '[]')
                                    <iframe style="display:none" sandbox="allow-scripts allow-same-origin" id="frame-thanks" src="{{ url('admin/cpalanders/template-thanks') }}" frameborder="0" scrolling="yes"></iframe>
                                @endif
                                <iframe style="display: none" sandbox="allow-scripts allow-same-origin" id="generate-html" src="{{ url('admin/cpalanders/template-model/' . $template->id) }}" frameborder="0" scrolling="yes"></iframe>
                            </div>
                            <div id="buttons_to_submit" class="pb-5" data-wizard-type="step-content">
                                <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 required type="text" class="form-control change-domain" name="page_name" value="page"/>
                                    </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 $key=>$domain)
                                                                <label class="radio">
                                                                    <input required value="{{ $domain['domains'] }}" {{ ($key == 0) ? 'checked' : ''}} type="radio" name="domain">
                                                                    <span></span>
                                                                    <div>{{ $domain['domains'] }}/</div><div class="change-domain-view">page</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'] }}" type="radio" name="domain">
                                                                    <span></span>
                                                                    <div>{{ $domain['domains'] }}/</div><div class="change-domain-view">page</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" value="Title page" />
                                    <span class="form-text text-muted">This is the title that will be displayed on the browser tab.</span>
                                </div>
                                @if($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($template->options->whereIn('name', 'Opt-in') != '[]')
                                    <h4 class="mb-10 font-weight-bold text-dark">Opt-In Settings</h4>
                                    <button type="button" class="btn btn-primary mb-4" data-toggle="modal" data-target="#formModal">
                                        Set up your form
                                    </button>
                                    <div class="form-group">
                                        <label>Form Code</label>
                                        <span class="form-text text-muted">Use the button above "Set up your form" to generate the form code</span>
                                        <textarea class="form-control" rows="3" name="formcode"><form id="form" action=""><input type="text" name="name" placeholder="Name" required=""/><input type="text" name="email" placeholder="E-mail" required=""/><div class="new_privacy"><input name="i_agree" type="checkbox" checked="checked" required=""/><label>I agree with your</label> <a href="privacy" target="_blank">privacy policy</a></div><input type="submit" id="submit" style="display:none"/></form></textarea>
                                    </div>
                                    <h4 class="mb-10 font-weight-bold text-dark">Thank You Page Settings</h4>
                                    <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>
                                @endif
                            </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">
                    <h5 class="modal-title" id="imageModalLabel">New Image</h5>
                    <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>
    {{--    Form Modal--}}
    <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="formModalLabel">Set Up Your Form</h5>
                    <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 class="form-group">
                        <label>Choose your form</label>
                        <div class="radio-inline flex-wrap">
                            <label class="radio">
                                <input type="radio" name="formcheck" value="aweber"/>
                                <span class="mb-2"></span>
                                Aweber
                            </label>
                            <label class="radio">
                                <input type="radio" name="formcheck" value="mailchimp"/>
                                <span class="mb-2"></span>
                                MailChimp
                            </label>
                            <label class="radio">
                                <input type="radio" name="formcheck" value="getresponse"/>
                                <span class="mb-2"></span>
                                GetResponse
                            </label>
                            <label class="radio">
                                <input type="radio" name="formcheck" value="activecampaign"/>
                                <span class="mb-2"></span>
                                Active Campaign
                            </label>
                            <label class="radio">
                                <input type="radio" name="formcheck" value="convertkit"/>
                                <span class="mb-2"></span>
                                Convert Kit
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" rows="10" name="setupform"></textarea>
                    </div>
                    <button onclick="changeForm(this)" class="btn btn-success btn-block mb-6">Submit</button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</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>
        window.onload = function() {
            var c = 0;
            var cropperData;

            // 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>' +
                        '</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: {
                        onChange: function (contents, $editable) {
                            var frame1 = $("#frame1").contents().find('#' + $(this).attr('id'));
                            frame1[0].innerHTML = contents.replace('<p>', '').replace('</p>', '');

                            @if($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($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);
            });

            // modifica a imagem
            $('#Image').change(function(res){
                $('#imageModal').modal('show');
                $('#imageModal').on('shown.bs.modal', function (event) {
                    var button = event.relatedTarget;
                    var reader = new FileReader();
                    reader.readAsDataURL(res.target.files[0]);
                    reader.onload = function(){
                        var dataURL = reader.result;
                        var output = document.getElementById('image');
                        if (output.classList.contains("cropper-hidden")) {
                            output.src= "";
                            output.cropper.destroy();
                        }
                        output.src = dataURL;

                        var cropper = new Cropper(output, {
                            aspectRatio: $("#frame1").contents().find('#Image')[0].width / $("#frame1").contents().find('#Image')[0].height,
                            autoCropArea: 1,
                            viewMode: 1,
                            crop(event) {
                                cropperData = cropper.getCroppedCanvas({
                                    width: ($("#frame1").contents().find('[data-rel*="file"]')[0].width),
                                    height: ($("#frame1").contents().find('[data-rel*="file"]')[0].height),
                                }).toDataURL('image/png');
                            },
                        });
                    };
                });


                $('#imageModal .modal-footer button').on('click', function(event) {
                    var $button = $(event.target);
                    if($button[0].id == 'change') {
                        $("#frame1").contents().find('#Image').attr('src', cropperData);
                        @if($template->options->whereIn('name', 'Mobile') != '[]')
                        $("#frame2").contents().find('#Image').attr('src', cropperData);
                        @endif
                        $("#generate-html").contents().find('#Image').attr('src', cropperData);
                    }
                });
            });
        };

        // formulários de captação
        var aweberForm;
        var getResponseForm;

        function changeForm(res) {
            var setForm = $(res).siblings()[1].children[0].value;
            // AWEBER
            if($('input[name=formcheck]:checked')[0].value == 'aweber') {
                //add user and email
                try {
                    if(setForm.includes('aweber') == false) {
                        throw new Error("foo error");
                    }

                    aweberForm = $($(setForm).siblings('form').children()[0]).after(
                        '<div>' +
                        '<input type="text" name="name" placeholder="Name" required/>' +
                        '</div>' +
                        '<div>' +
                        '<input type="text" name="email" placeholder="Email" required/>' +
                        '</div>' +
                        '<div class="new_privacy">' +
                        '<input name="i_agree" type="checkbox" checked required>' +
                        '<label>I agree with your</label>' +
                        '<a href="privacy" target="_blank">privacy policy</a>' +
                        '</div>'
                    );

                    //add image to the div
                    $(aweberForm).prepend($(setForm).siblings('form')[0].children[2].children[0].outerHTML);
                    //change redirect inpout
                    $(aweberForm).find("input[name='redirect']")[0].value = '';
                    //add meta_redirect_onList
                    $('<input type="hidden" name="meta_redirect_onlist" value="">').insertAfter($($(aweberForm).find("input[name='redirect']")[0]));
                    //add meta_forward_vars
                    $('<input type="hidden" name="meta_forward_vars" value="1">').insertAfter($($(aweberForm).find("input[name='meta_required']")[0]));
                    //add button input
                    $('<input type="submit" id="submit">').insertAfter($($(aweberForm).find("input[name='meta_forward_vars']")[0]));
                    //remove inputs
                    $(aweberForm).find("input[name='meta_split_id']").remove();
                    $(aweberForm).find("input[name='meta_tooltip']").remove();

                    let newForm = $($(aweberForm).parent())[0];
                    newForm.children[5].remove();
                    newForm.children[4].remove();
                    $(newForm).removeAttr('class');
                    $(newForm).removeAttr('target');
                    $(newForm).attr('id', 'form');

                    $('textarea[name=formcode]').val(newForm.outerHTML.replace(/^\s+|\r\n|\n|\r|(>)\s+(<)|\s+$/gm, '$1$2'));
                    $('#formModal').modal('hide');
                } catch(err) {
                    $(res).siblings()[1].children[0].value = 'Oops, there is something wrong with the code on your form! Please check and try again. If it doesn\'t work, contact our support.';
                }
            }
            // MAILCHIMP
            else if ($('input[name=formcheck]:checked')[0].value == 'mailchimp') {
                try {
                    if(setForm.includes('mailchimp') == false) {
                        throw new Error("foo error");
                    }

                    let newForm = $($(setForm)).find("form").empty().append(
                        '<div style="display:none">' +
                        '<input type="submit" id="submit">' +
                        '</div>' +
                        '<div>' +
                        '<input type="text" name="FNAME" placeholder="Name" required/>' +
                        '</div>' +
                        '<div>' +
                        '<input type="email" name="EMAIL" placeholder="Email" required/>' +
                        '</div>' +
                        '<div class="new_privacy">' +
                        '<input name="i_agree" type="checkbox" checked required>' +
                        '<label>I agree with your</label>' +
                        '<a href="privacy" target="_blank">privacy policy</a>' +
                        '</div>'
                    );

                    $(newForm).removeAttr('class');
                    $(newForm).removeAttr('target');
                    $(newForm).removeAttr('novalidate');
                    $(newForm).removeAttr('name');
                    $(newForm).attr('id', 'form');

                    $('textarea[name=formcode]').val(newForm[0].outerHTML.replace(/^\s+|\r\n|\n|\r|(>)\s+(<)|\s+$/gm, '$1$2'));
                    $('#formModal').modal('hide');
                } catch(err) {
                    $(res).siblings()[1].children[0].value = 'Oops, there is something wrong with the code on your form! Please check and try again. If it doesn\'t work, contact our support.';
                }
            }
            // GETRESPONSE
            else if ($('input[name=formcheck]:checked')[0].value == 'getresponse') {
                try {
                    if(setForm.includes('getresponse') == false) {
                        throw new Error("foo error");
                    }

                    getResponseForm = $(setForm).empty().append(
                        '<div style="display:none">' +
                        '<input type="hidden" name="campaign_token" value="'+ $($(setForm)).find("input[name='campaign_token']").val() +'">' +
                        '<input type="hidden" name="thankyou_url">' +
                        '<input type="submit" id="submit">' +
                        '</div>' +
                        '<div>' +
                        '<input type="text" name="name" placeholder="Name" required/>' +
                        '</div>' +
                        '<div>' +
                        '<input type="email" name="email" placeholder="Email" required/>' +
                        '</div>' +
                        '<div class="new_privacy">' +
                        '<input name="i_agree" type="checkbox" checked required>' +
                        '<label>I agree with your</label>' +
                        '<a href="privacy" target="_blank">privacy policy</a>' +
                        '</div>'
                    );

                    $(getResponseForm).attr('id', 'form');

                    $('textarea[name=formcode]').val(getResponseForm[0].outerHTML.replace(/^\s+|\r\n|\n|\r|(>)\s+(<)|\s+$/gm, '$1$2'));
                    $('#formModal').modal('hide');
                } catch(err) {
                    $(res).siblings()[1].children[0].value = 'Oops, there is something wrong with the code on your form! Please check and try again. If it doesn\'t work, contact our support.';
                }

                // ACTIVECAMPAIGN
            }  else if ($('input[name=formcheck]:checked')[0].value == 'activecampaign') {
                try {
                    if(setForm.includes('activecampaign') == false) {
                        throw new Error("foo error");
                    }

                    let newForm = $($(setForm).siblings('form'));
                    newForm.children('._form-thank-you').remove();
                    newForm.children('._form-branding').remove();
                    newForm.children('._form-content').remove();

                    newForm.append(
                        '<div style="display:none">' +
                        '<input type="submit" id="submit">' +
                        '</div>' +
                        '<div>' +
                        '<input type="text" name="firstname" placeholder="Name" required/>' +
                        '</div>' +
                        '<div>' +
                        '<input type="email" name="email" placeholder="Email" required/>' +
                        '</div>' +
                        '<div class="new_privacy">' +
                        '<input name="i_agree" type="checkbox" checked required>' +
                        '<label>I agree with your</label>' +
                        '<a href="privacy" target="_blank">privacy policy</a>' +
                        '</div>'
                    );

                    $(newForm).attr('id', 'form');
                    $(newForm).attr('class', '');
                    $(newForm).attr('novalidate', '');

                    $('textarea[name=formcode]').val(newForm[0].outerHTML.replace(/^\s+|\r\n|\n|\r|(>)\s+(<)|\s+$/gm, '$1$2'));
                    $('#formModal').modal('hide');
                } catch (err) {
                    $(res).siblings()[1].children[0].value = 'Oops, there is something wrong with the code on your form! Please check and try again. If it doesn\'t work, contact our support.';
                }

                // CONVERTKIT
            } else if ($('input[name=formcheck]:checked')[0].value == 'convertkit') {
                try {
                    if(setForm.includes('convertkit') == false) {
                        throw new Error("foo error");
                    }

                    let newForm = $($(setForm).siblings('form'));
                    $(newForm).removeAttr('data-options');
                    $(newForm).removeAttr('min-width');
                    $(newForm).removeAttr('data-format');
                    $(newForm).removeAttr('data-version');
                    $(newForm).attr('id', 'form');
                    $(newForm).attr('class', '');
                    $(newForm).children().remove();

                    newForm.append(
                        '<div style="display:none">' +
                        '<input type="submit" id="submit">' +
                        '</div>' +
                        '<div>' +
                        '<input type="text" name="fields[first_name]" placeholder="Name" required/>' +
                        '</div>' +
                        '<div>' +
                        '<input type="email" name="email_address" placeholder="Email" required/>' +
                        '</div>' +
                        '<div class="new_privacy">' +
                        '<input name="i_agree" type="checkbox" checked required>' +
                        '<label>I agree with your</label>' +
                        '<a href="privacy" target="_blank">privacy policy</a>' +
                        '</div>'
                    );

                    $('textarea[name=formcode]').val(newForm[0].outerHTML.replace(/^\s+|\r\n|\n|\r|(>)\s+(<)|\s+$/gm, '$1$2'));
                    $('#formModal').modal('hide');

                } catch(err) {
                    $(res).siblings()[1].children[0].value = 'Oops, there is something wrong with the code on your form! Please check and try again. If it doesn\'t work, contact our support.';
                }
            }
        }

        // select de todos os inputs
        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');
        }

        // seleciona a cor do template
        function changeColor(res) {
            ($("#frame1").contents().find('#css')[0]).innerHTML = "";
            ($("#frame1").contents().find('#css')[0]).append($(res).data('color-class'));
            @if($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'));
        }

        $('#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);
        });

        // verifica se o domínio já foi utilizado
        function checkAddress() {
            $.ajax({
                url: window.location.origin + '/members-area/cpalanders/check-domain',
                type: 'post',
                data: {_method: 'post', _token: $("input[name='_token']").val(), page_name: $('.change-domain').val()},
                success: function(res) {
                    if(res.length == 0) {
                        $('.change-domain').removeClass('is-invalid');
                        $('.change-domain').addClass('is-valid');
                    } else {
                        $('.change-domain').removeClass('is-valid');
                        $('.change-domain').addClass('is-invalid');
                    }
                },
                error: function(){
                    console.log('error');
                },
            });
        }

        // 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('#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()));
            $(html).find('#Tracking-code').append($("textarea[name='trackingcode']").val());
            $(html).find('#Retargeting-code').append($("textarea[name='retargetingcode']").val());
            $($(html).find('#Form-code')).empty();

            // redireções se possui um link smart
            if($("input[name='linksmart']").val() == '') {
                $(html).find('#Button').attr('target', '_blank');
            } else if($("input[name='linksmart']").val() == undefined) {
            } else {
                var smartLink = document.createElement("script");
                smartLink.type = "text/javascript";
                smartLink.id = "smart-link-id";
                smartLink.src = "https://cpatools.cc/js/linksmart.js";
                {{--smartLink.src = "{{ url('/js/linksmart.js') }}";--}}
                $(html).find('body').append(smartLink);
            }

            // caso exista um formulário de leads
            if($('input[name=formcheck]:checked')[0] != undefined) {
                // colocar thanks page automatica no aweber
                if($('input[name=formcheck]:checked')[0].value == 'aweber') {
                    $(aweberForm).find("input[name='redirect']")[0].value = 'https://' + $("input[name='domain']").val() + '/' + $("input[name='page_name']").val() + '-thanks';
                    $('<input type="hidden" name="meta_redirect_onlist" value="' + 'https://' + $("input[name='domain']").val() + '/' + $("input[name='page_name']").val() + '-thanks' + '">').insertAfter($($(aweberForm).find("input[name='redirect']")[0]));

                    $(html).find('#Form-code').append($($(aweberForm).parent())[0]);
                    // colocar thanks page automatica no getresponse
                } else if($('input[name=formcheck]:checked')[0].value == 'getresponse') {
                    $(getResponseForm).find("input[name='thankyou_url']")[0].value = 'https://' + $("input[name='domain']").val() + '/' + $("input[name='page_name']").val() + '-thanks';

                    $(html).find('#Form-code').append($(getResponseForm)[0]);
                    // sem pagina de thanks automatica
                } else {
                    $(html).find('#Form-code').append($("textarea[name='formcode']").val());
                }
                // caso exista um formulario, porem o usuario só utilizou o placeholder que não capta lead
            } else {
                $(html).find('#Form-code').append($("textarea[name='formcode']").val());
            }
            // remove este código
            $(html).contents().find('#acfifjfajpekbmhmjppnmmjgmhjkildl').remove();

            var element = document.createElement('a');
            element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent('<!doctype html><html>' + $(document.getElementById('frame1')).contents().find('html')[0].innerHTML));
            element.setAttribute('download', 'preview.html');
            element.style.display = 'none';
            document.body.appendChild(element);
            element.click();
            document.body.removeChild(element);

            @if($template->options->whereIn('name', 'Opt-in') != '[]')
            var thanks = $(document.getElementById('frame-thanks')).contents().find('html')[0];

            $(thanks).find('#container').append(
                '<h1>'+ ($("input[name='thanks_headline']").val()) +'</h1>' +
                '<p>' + ($("input[name='thanks_subheadline']").val()) + '</p>' +
                '<div>' +
                '<a href="' + ($("input[name='thanks_url_link']").val()) + '">' + ($("input[name='thanks_text_link']").val()) + '</a>' +
                '</div>'
            );
            $(thanks).find('.wrapper').append(($("textarea[name='thanks_tracking_code']").val()));

            var thankdownload = document.createElement('a');
            thankdownload.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent($(document.getElementById('frame-thanks')).contents().find('html')[0].innerHTML));
            thankdownload.setAttribute('download', 'preview-thanks.html');
            thankdownload.style.display = 'none';
            document.body.appendChild(thankdownload);
            thankdownload.click();
            $a = $(thanks).find('#container').children()[0];
            $(thanks).find('#container').empty();
            $(thanks).find('#container').append($a);
            document.body.removeChild(thankdownload);

            @endif
        });
    </script>
@endsection