{% extends 'admin\\baseadmin.html.twig' %}
{% trans_default_domain 'templates' %}

{% block stylesheets %}
{{parent()}}
        {# Font Awesome #}
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
        {# Artgris FileManager #}
        <link rel="stylesheet" href="{{ asset('bundles/artgrisfilemanager/libs/blueimp-file-upload/css/jquery.fileupload.css') }}">
        {# Import fengyuanchen/cropper #}
        <link rel="stylesheet" href="{{ asset('bundles/artgrismedia/libs/cropperjs-1.4.1/cropper.min.css') }}">
        {# Then the default bundle's CSS #}
        <link rel="stylesheet" href="{{ asset('bundles/artgrismedia/css/media.css') }}">
{% endblock %}

{% block aside %}
    {% include 'admin\\stdpages\\aside.html.twig' %}
{% endblock %}

{% block header %}
    <form id="formpage-structure-content" class="d-none"></form>

    {{ form_start(form,{"attr":{"autocomplete":"off","accept-charset":"UTF-8","id":form.vars.id}}) }}

    <div class="page-onscroll-options shadow transition d-none d-sm-block">
        <div class="p-5 p-l-15 p-r-15">
            <div class="row justify-content-end">
                {# <div class="col-md-2 float-right">
                    <select class="form-control select2-style" id="lang-select">
                        <option value="">English</option>
                        <option value="">Portuguese</option>
                        <option value="">French</option>
                    </select>
                </div> #}
                <div class="col-md-2">
                    <button disabled name="std_templates_form[save]" class="btn-primary btn float-right std_pages_form_save">{% trans %}Save{% endtrans %}</button>
                </div>
            </div>
        </div>
    </div>

    <!--START PAGE HEADER -->
    <header class="page-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h1>{{ title }}</h1>
            </div>
            <ul class="actions top-right">
                <li class="dropdown">
                    {# <a href="javascript:void(0)" class="btn btn-fab" data-toggle="dropdown" aria-expanded="false">
                        <i class="la la-ellipsis-h"></i>
                    </a> #}
                    <button disabled name="std_templates_form[save]" class="btn-primary btn float-left std_pages_form_save">{% trans %}Save{% endtrans %}</button>
                    {# <button class="btn btn-primary qt-loader qt-loader-mini qt-loader-right float-left">Save</button> #}
                    {# <button class="btn btn-primary btn-preview float-left m-r-15">Preview</button> #}
                </li>
            </ul>
        </div>
    </header>
    <!--END PAGE HEADER -->

{% endblock %}

{% block content%}
    <section class="page-content container-fluid">
        <div class="row">
            <div class="col-lg-9 col-xl-9">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-4">
                                {{ form_label(form.name) }}
                                {{ form_widget(form.name) }}
                            </div>
                            <div class="col-sm-4">
                                {{ form_label(form.content_type, "Content Type") }}
                                {{ form_widget(form.content_type) }}
                            </div>
                            <div class="col-sm-4">
                                {{ form_label(form.layout) }}
                                {{ form_widget(form.layout) }}
                            </div>
                        </div>

                    </div>
                </div>

                <!-- START PAGE STRUCTURE -->
                {% if (form.vars.value.id) %}
                    <!-- EDIT -->
                    {% set labelExpand = "Expand all" %}
                    {% set classExpand = "" %}
                {% else %}
                    <!-- NEW -->
                    {% set labelExpand = "Collapse all" %}
                    {% set classExpand = "expand" %}
                {% endif %}
                <div class="card">
                    <div class="card-header">
                        {% trans %}Template Structure{% endtrans %} <button class="m-l-15 btn btn-primary btn-sm" data-q-action="page-aside-blocks-open" type="button">{% trans %}Add Block{% endtrans %}</button>
                        <button class="btn btn-primary btn-sm float-right btn-expand-collapse {{ classExpand }}" data-q-action="expand-collapse-all" data-expand="Expand all" data-collapse="Collapse all" type="button">{{ labelExpand }}</button>
                        <ul class="actions top-right">
                            <li><a href="javascript:void(0)" data-q-action="card-collapsed"><i class="icon dripicons-chevron-up"></i></a></li>
                        </ul>
                    </div>

                    <div class="card-body bg-light connectedSortable" id="page-structure-content">
                        <input type="hidden" id="formMenu" value="templates">
                        {% include 'admin\\stdpages\\pagestructure.html.twig' %}
                    </div>
                </div>
                <!-- END PAGE STRUCTURE -->
            </div>

            <div class="col-lg-3">

                <!--START STATUS CARD -->
                <div class="card">
                    <div class="card-header">
                        {% trans %}Status{% endtrans %}
                        <ul class="actions top-right">
                            <li><a href="javascript:void(0)" data-q-action="card-collapsed"><i class="icon dripicons-chevron-up"></i></a></li>
                            <li><a href="javascript:void(0)" data-qt-block=".block-el"><i class="icon dripicons-clockwise"></i></a></li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12">
                                {% if form.vars.value.isActive == true %}
                                    {% set checked = "checked" %}
                                {% else %}
                                    {% set checked = "" %}
                                {% endif %}
                                <label>{% trans %}Active{% endtrans %}</label>
                                <input type="checkbox" class="tgl tgl-light tgl-primary" id="cbactive" name="cbactive" {{ checked }}>
                                <label class="tgl-btn" for="cbactive"></label>
                            </div>
                            {% if form.vars.value.createdBy is null %}
                                {% set createdBy = app.user.name %}
                                {% set createdDated = "now"|date("d/m/Y h:i A") %}
                                {% set updatedBy = "" %}
                                {% set updatedDated = "" %}
                            {% else %}
                                {% set createdBy = form.vars.value.createdBy.name %}
                                {% set createdDated = form.vars.value.createdDate|date("d/m/Y h:i A") %}
                                {% set updatedBy = form.vars.value.updatedBy.name %}
                                {% set updatedDated = form.vars.value.updatedDate|date("d/m/Y h:i A") %}
                            {% endif %}
                            <div class="col-12 m-t-15">
                                <div class="form-group">
                                    <label for="inputDisabled">{% trans %}Author{% endtrans %}</label>
                                    <input type="text" class="form-control" id="inputDisabled" autocomplete="name" placeholder="{{ createdBy }}" disabled="">
                                    <span class="text-small p-l-15">{{ createdDated }}</span>
                                </div>
                                <div class="form-group">
                                    <label for="inputDisabled">{% trans %}Last update{% endtrans %}</label>
                                    <input type="text" class="form-control" id="inputDisabled" autocomplete="name" placeholder="{{ updatedBy }}" disabled="">
                                    <span class="text-small p-l-15">{{ updatedDated }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--END STATUS CARD -->
                <div style="display: none">
                    {{ form_rest(form) }}
                </div>
                <input type="hidden" id="structure-content" name="structure-content">
                {{ form_end(form) }}
            </div>
        </div>
    </section>
    {# Modal Upload Block Data #}
    {% include 'admin\\stdpages\\modaluploadblockdata.html.twig' %}
    {# End Modal Upload Block Data #}

    {# Modal Attributes #}
    {% include 'admin\\stdpages\\modalattributes.html.twig' %}
    {# End Modal Attributes #}

{% endblock %}
{% block javascripts %}
    {{parent()}}
    <script src="https://rawgit.com/bevacqua/dragula/master/dist/dragula.js"></script>

    {#  Jqueri UI #}
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    {# jquery.collection.js #}
    <script type="text/javascript" src="{{ asset('js/jquery.collection.js') }}"></script>
    {# Import fengyuanchen/cropper #}
    {# <script src="{{ asset('bundles/artgrismedia/libs/cropperjs-1.4.1/cropper.min.js') }}"></script> #}
    {# Then the default bundle's JavaScript: #}
    {% include '@ArtgrisMedia/assets/include_js.html.twig' %}
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script>
        if( $("#maxHotspotCounter").val() > 0 ){
            var contador = $("#maxHotspotCounter").val();
        } else {
            var contador = 0;
        }
        var alturaQuadrado = 15;
		var larguraQuadrado = 15;
        $(function() {

			$('.std_pages_form_save').each(function( ) {				
				$(this).removeAttr("disabled");
			});

            // configure hotspot
            $(".card-body").on("mouseover", ".hotspot-field", function() {
                element = $(this);
                element.children('a').attr("style","position:relative;display:block");
                if(element.children().hasClass("js-crop crop-hover")){
                    element.children().removeClass("js-crop crop-hover");
                    element.children().removeAttr("data-target");
                    // element.children().removeAttr("data-toggle");
                    element2 = element.children();
                    if (element2.children("span").length > 0){
                        //element2.children("span").remove();
                        var content = $(this).closest(".card-body").find(".block-content");
                        element2.children("span").replaceWith("<div id='divHotspots_"+content.attr("counter")+"'></div>");
                    }
                }
            });

            // insert new hotspot
            $(".card-body").on("click", ".hotspot-field", function(e) {
                contador++;
                var offset = $(this).offset();
                var x = e.pageX - offset.left - (larguraQuadrado/2);
                var y = e.pageY - offset.top - (alturaQuadrado/2);
                var xpercent = (Math.abs(x)*100)/$(this).width();
                var ypercent = (Math.abs(y)*100)/$(this).height();
                var content = $(this).closest(".card-body").find(".block-content");
                var counter = content.attr("counter");
                if( counter.indexOf(":") > 0 ){
                    res = counter.replace(":", "\\:");
                    counter = res;
                }

                // $('#divHotspots_'+content.attr("counter")).append('<div class="hotspot" data-idproduto="" data-contador="'+contador+'" style="position:absolute;top:'+ypercent+'%;left:'+xpercent+'%;width:'+larguraQuadrado+'px;height:'+alturaQuadrado+'px;">'+contador+'</div>');
                $('#divHotspots_'+counter).append('<div class="hotspot" data-contador="'+contador+'" style="position:absolute;top:'+ypercent+'%;left:'+xpercent+'%;width:'+larguraQuadrado+'px;height:'+alturaQuadrado+'px;">'+contador+'</div>');
                
                var hiddenDivHotspots = $(this).closest(".form-group").find(".hotspots");
                hiddenDivHotspots.val($('#divHotspots_'+counter).html());
                
                addCombo(contador, $(this));
                return false;
            });
            
            // Delete hotspot item
            $(".card-body").on("click", ".dripicons-trash.item-hotspot", function(e) {
                if( confirm("Are you sure?") ){
                    var card = $(this).closest(".card");
                    var item = $(this).attr("it-index");
                    var content = $(this).closest(".card-body").find(".block-content");
                    var hiddenDivHotspots = content.find(".hotspots");

                    $("#hotspot_"+item).remove();
                    card.remove();

                    // update DIV
                    hiddenDivHotspots.val($('#divHotspots_'+content.attr("counter")).html());
                }
                return false;
            });

            // Add hotspot combo
            function addCombo(contador, element){
                var $form = $(this).closest('form');
                var dataSearch = {};
                
                var cont = element.closest(".block-content");
                var block = cont.attr("block");
                var counter = cont.attr("counter");
                var counter2 = counter;
                dataSearch['block'] = block;
                dataSearch['counter'] = counter;
                dataSearch['repeatable'] = 1;
                if( counter.indexOf(":") > 0 ){
                    counter2 = counter.replace(":", "\\:");
                }

                // Find the repeatable components
                $.ajax({
                    url : "/{{ app.request.getLocale() }}/admin/content/pages/new",
                    type: $form.attr('method'),
                    type: "POST",
                    data : dataSearch,
                    success: function(html) {
                        var target = "";
                        var blockcontent = $('.block-content').filter('[block="'+block+'"]').filter('[counter="'+counter2+'"]'),
                            lastitemindex = blockcontent.find(".item-repeatable").length,
                            itemindex = parseInt((lastitemindex ? lastitemindex : 0))+1;

                        blockcontent.find(".repeatables-wrap").append('<div class="card m-b-10 item-repeatable"><div class="item-repeatable-index">'+itemindex+'</div><ul class="actions top-right"> <li><a href="javascript:void(0)" data-q-action="card-collapsed"><i class="icon dripicons-chevron-up"></i></a></li> <li><a href="javascript:void(0)" data-q-action="card-remove-hotspot" ><i class="icon dripicons-trash item-hotspot" it-index="'+contador+'"></i></a></li> </ul><div class="card-body"><div id="pagecontent_'+block+'_'+counter+'"></div></div></div></div>');
                        var elements = $(html).find('[id^=std_pages_form_ajax-page-content-_-'+counter2+'-_-block_hotspot-_-repeatable]').closest('.form-group');
                        $('#pagecontent_'+block+'_'+counter2).replaceWith(
                            elements
                        );
                        $(".select2-style").select2();
                    }
                });

            }

            // Initialize Colorpicker
            $(".colorpicker").spectrum({
                showInput: true,
                showAlpha: true,
                showInitial: true,
                allowEmpty:true,
                showPalette: true,
                showSelectionPalette: true,
                palette: [
                    [$bodycolor, $textcolor],
                    [$primary, $secondary, $tertiary],
                    [$info, $light, $dark], 
                    [$success, $warning, $danger]
                ],
                preferredFormat: "hsl",
            });

            $("button[name='std_templates_form[save]']").on("click",function(e){
                if (!$("#std_pages_form").valid()) {
                    Swal.fire({
                        text: '{% trans %}form_is_not_valid{% endtrans %}',
                        type: 'error'
                    });
                    return false;
                }
                $(this).addClass("qt-loader qt-loader-mini qt-loader-right");
                $("#formpage-structure-content").append($("#page-structure-content"));
                if(typeof CKEDITOR != "undefined"){
                    Object.keys(CKEDITOR.instances).forEach(element => {
                        CKEDITOR.instances[element].updateElement();
                    });
                }
                $("#structure-content").val($("#formpage-structure-content").serialize());
            });

            $('.datepicker-single').prop('readonly', true).daterangepicker({
                singleDatePicker: true,
                timePicker: true,
                autoUpdateInput: false,
                locale: {
                    format: 'DD/MM/YYYY hh:mm A',
                    cancelLabel: 'Clear'
                }
            });

            $('.datepicker-single').on('apply.daterangepicker', function(ev, picker) {
				var t = $(this), 
					format = (t.data("format") == "" ? "DD/MM/YYYY hh:mm A" : t.data("format")),
					changeorder = t.data("changeorder");
				if(changeorder)
				    $("#std_pages_form_order_value").val(picker.startDate.format('YYYYMMDD'));
                $(this).val(picker.startDate.format(format));
            });

            $('.datepicker-single').on('cancel.daterangepicker', function(ev, picker) {
				var t = $(this), changeorder = t.data("changeorder");
				if(changeorder)
					$("#std_pages_form_order_value").val('');
                $(this).val('');
            });

            // Disable CKEDITOR when initialize a new block
            if( typeof CKEDITOR!= "undefined"){
                CKEDITOR.on('instanceReady', function(ev) {
                    editor = ev.editor;
                    var idElement = editor.name;
                    var check = $('[id="'+idElement+'"]').closest('.card-body.block-card-master').find(".disabled-items");
                    var checkValue = $('input:checkbox[name="'+check[0].name+'"]').is(':checked');
                    if( checkValue == 1 ){
                        // Enabled
                        editor.setReadOnly(true);
                    } else {
                        // Disabled
                        editor.setReadOnly(false);
                    }
                });
            }
            // Disable COLORPICKER when initialize a new block
            $(".colorpicker").each(function(){
                idElement = $(this)[0].id;
                var check = $('[id="'+idElement+'"]').closest('.card-body').find(".disabled-items");
                if(check.length > 0){
                    var checkValue = $('input:checkbox[name="'+check[0].name+'"]').is(':checked');
                    if( checkValue == 1 ){
                        // Enabled
                        $(this).spectrum("enable");
                    } else {
                        // Disabled
                        $(this).spectrum("disable");
                    } 
                }
            });

            // Disable / Enable form
            $(".card-body").on("click", ".disabled-items", function () {
                var check = $(this);
                var enable = $(this).prop("checked");
                var target = $(this).closest(".card-body").find(".form-group");

                target.each(function () {
                    var plus = $(this).closest(".structure-block").find(".dripicons-plus");
                    var bottom_plus = $(this).closest(".structure-block").find(".js-add-repeatable");
                    console.log(bottom_plus);
                    if (enable) {
                        $(this).find("input, select").removeAttr("disabled");
                        $(this).find("input, select").removeAttr("readonly");
                        if(typeof CKEDITOR != "undefined"){
                            var cke = $(this).find("textarea");
                            if (cke.length > 0) {
                                var ckeId = cke.attr("id");
                                editor = CKEDITOR.instances[ckeId];
                                editor.setReadOnly(false);
                            }
                        }

                        var color = $(this).find(".colorpicker");
                        if (color) {
                            color.each(function () {
                            if ($(this).length > 0) {
                                $(this).spectrum({
                                showInput: true,
                                showAlpha: true,
                                showInitial: true,
                                allowEmpty: true,
                                showPalette: true,
                                showSelectionPalette: true,
                                palette: [
                                    [$bodycolor, $textcolor],
                                    [$primary, $secondary, $tertiary],
                                    [$info, $light, $dark],
                                    [$success, $warning, $danger],
                                ],
                                preferredFormat: "hsl",
                                disabled: false,
                                });
                            }
                            });
                        }
                        plus.show();
                        bottom_plus.show();
                    } else {
                        $(this).find("input, select").attr("disabled", true);
                        $(this).find("input, select").attr("readonly", true);
                        if(typeof CKEDITOR != "undefined"){
                            var cke = $(this).find("textarea");
                            if (cke.length > 0) {
                                var ckeId = cke.attr("id");
                                editor = CKEDITOR.instances[ckeId];
                                editor.setReadOnly(true);
                            }
                        }
                        var color = $(this).find(".colorpicker");
                        if (color) {
                            if ($(this).length > 0) {
                            color.spectrum({
                                disabled: true,
                            });
                            }
                        }

                        check.removeAttr("disabled");
                        plus.hide();
                        bottom_plus.hide();
                    }
                });
            });

            // Pages Combo creates Skin Combo
            $(document).on('change', '.combo-pages', function() {
                var $form = $(this).closest('form');
                var counter = $(this).attr("counter");
                var counter2 = $(this).attr("counter2");
                var value = $(this).val();
                var divClosest = $(this).closest('.form-group');

                var pagesCombo = {};
                pagesCombo['block'] = $(this).closest('.block-content').attr('block');
                pagesCombo['counter'] = counter;
                pagesCombo['counter2'] = counter2;
                pagesCombo['pageId'] = value;

                if( !counter2 ){
                    var counter2 = counter;
                }

                $.ajax({
                    url : "/{{ app.request.getLocale() }}/admin/content/pages/new",
                    type: "POST",
                    data : pagesCombo,
                    success: function(html) {
                        var local = $(".combo-content-skin").filter('[counter2="'+counter2+'"]').closest('.form-group');
                        local.children().each(function(){
                            if( $(this).is('[class^="select2"]') ){
                                $(this).remove();
                            }
                        });

                        // Skin
                        var element = $(html).find('.combo-content-skin').filter('[counter2="'+counter2+'"]').filter('[id*="ajax-page-content-_-'+counter+'"]');

                        $(".combo-content-skin").filter('[counter2="'+counter2+'"]').replaceWith(element);
                        $(".combo-content-skin").select2();
                    }
                });
            });

            // Category Combo creates Pages Combo
            $(document).on('change', '.combo-category', function() {
                var $form = $(this).closest('form');
                var counter = $(this).attr("counter");
                var counter2 = $(this).attr("counter2");
                var value = $(this).val();
                var divClosest = $(this).closest('.form-group');

                var pagesCombo = {};
                pagesCombo['block'] = $(this).closest('.block-content').attr('block');
                pagesCombo['counter'] = counter;
                pagesCombo['counter2'] = counter2;
                pagesCombo['relationId'] = value;

                if( !counter2 ){
                    var counter2 = counter;
                }

                $.ajax({
                    url : "/{{ app.request.getLocale() }}/admin/content/pages/new",
                    type: "POST",
                    data : pagesCombo,
                    success: function(html) {
                        var local = $(".combo-pages").filter('[counter2="'+counter2+'"]').closest('.form-group');
                        local.children().each(function(){
                            if( $(this).is('[class^="select2"]') ){
                                $(this).remove();
                            }
                        });

                        // Pages
                        var element = $(html).find('.combo-pages').filter('[counter2="'+counter2+'"]').filter('[id*="ajax-page-content-_-'+counter+'"]');

                        $(".combo-pages").filter('[counter2="'+counter2+'"]').replaceWith(element);
                        $(".combo-pages").select2();

                        var local = $(".combo-content-skin").filter('[counter2="'+counter2+'"]').closest('.form-group');
                        local.children().each(function(){
                            if( $(this).is('[class^="select2"]') ){
                                $(this).remove();
                            }
                        });

                        // Skin
                        var element = $(html).find('.combo-content-skin').filter('[counter2="'+counter2+'"]').filter('[id*="ajax-page-content-_-'+counter+'"]');

                        $(".combo-content-skin").filter('[counter2="'+counter2+'"]').replaceWith(element);
                        $(".combo-content-skin").select2();
                    }
                });
            });

            // Content Type Combo creates Category, Skin and Pages Combos
            $(document).on('change', '.combo-content-type', function() {
                if ( $(this).val() > 0){
                    var $form = $(this).closest('form');
                    var counter = $(this).attr("counter");
                    var counter2 = $(this).attr("counter2");
                    var value = $(this).val();
                    var divClosest = $(this).closest('.form-group');
                    
                    var categoryCombo = {};
                    categoryCombo['block'] = $(this).closest('.block-content').attr('block');
                    categoryCombo['counter'] = counter;
                    categoryCombo['counter2'] = counter2;
                    categoryCombo['contentTypeCategory'] = value;

                    if( !counter2 ){
                        var counter2 = counter;
                    }
                    
                    $.ajax({
                        url : "/{{ app.request.getLocale() }}/admin/content/pages/new",
                        type: "POST",
                        data : categoryCombo,
                        success: function(html) {
                            var local = $(".combo-category").filter('[counter2="'+counter2+'"]').closest('.form-group');
                            local.children().each(function(){
                                if( $(this).is('[class^="select2"]') ){
                                    $(this).remove();
                                }
                            });

                            // Category
                            var element = $(html).find('.combo-category').filter('[counter2="'+counter2+'"]').filter('[id*="ajax-page-content-_-'+counter+'"]');

                            $(".combo-category").filter('[counter2="'+counter2+'"]').replaceWith(element);
                            $(".combo-category").select2();

                            var local = $(".combo-content-skin").filter('[counter2="'+counter2+'"]').closest('.form-group');
                            local.children().each(function(){
                                if( $(this).is('[class^="select2"]') ){
                                    $(this).remove();
                                }
                            });

                            // Skin
                            var element = $(html).find('.combo-content-skin').filter('[counter2="'+counter2+'"]').filter('[id*="ajax-page-content-_-'+counter+'"]');

                            $(".combo-content-skin").filter('[counter2="'+counter2+'"]').replaceWith(element);
                            $(".combo-content-skin").select2();

                            var local = $(".combo-pages").filter('[counter2="'+counter2+'"]').closest('.form-group');
                            local.children().each(function(){
                                if( $(this).is('[class^="select2"]') ){
                                    $(this).remove();
                                }
                            });

                            // Pages
                            var element = $(html).find('.combo-pages').filter('[counter2="'+counter2+'"]').filter('[id*="ajax-page-content-_-'+counter+'"]');

                            $(".combo-pages").filter('[counter2="'+counter2+'"]').replaceWith(element);
                            $(".combo-pages").select2();
                        }
                    });
                }
            });
    
            $('.card-body').on('click', '.dripicons-gear-created', function(){
                $('.datepicker-single-created').each(function (){
                    $(this).daterangepicker({
                        singleDatePicker: true,
                        timePicker: true,
                        autoUpdateInput: false,
                        locale: {
                            format: 'DD/MM/YYYY hh:mm A',
                            cancelLabel: 'Clear'
                        }
                    });
                });
                
                $('.datepicker-single').on('apply.daterangepicker', function(ev, picker) {
                    $(this).val(picker.startDate.format('DD/MM/YYYY hh:mm A'));
                });

                $('.datepicker-single').on('cancel.daterangepicker', function(ev, picker) {
                    $(this).val('');
                });
            });
            
            // Add repeatable block
            $('.card-body').on('click', '.dripicons-plus', function(){

                var block = $(this).attr("block-repeat");
                var counter = $(this).attr("counter");
                var counter2 = counter.substring(3);

                var $form = $(this).closest('form');
                var data = {};
                data['block'] = block;
                data['counter'] = counter;
                data['repeatable'] = 1;

                // Find the repeatable components
                $.ajax({
                    url : "/{{ app.request.getLocale() }}/admin/content/pages/new",
                    type: $form.attr('method'),
                    data : data,
                    success: function(html) {
                        var blockcontent = $('.block-content').filter('[block="'+block+'"]').filter('[counter="'+counter+'"]');
                        lastitemindex = blockcontent.find(".item-repeatable").length;
                            itemindex = parseInt((lastitemindex ? lastitemindex : 0))+1;
                        blockcontent.append('<div class="card m-b-10 item-repeatable"><div class="item-repeatable-index">'+itemindex+'</div><div class="card-body"><ul class="actions top-right"><li><a href="javascript:void(0)" data-q-action="card-remove"><i class="icon dripicons-cross"></i></a></li></ul><div id="pagecontent_'+block+'_'+counter2+'"></div></div></div></div>');
                        
                            console.log(lastitemindex);
                        $("html, body").animate({ scrollTop: blockcontent.find(".item-repeatable").last().offset().top - 75}, 400);
                        
                        var element = $(html).find('[id^="std_pages_form_ajax-page-content-_-'+counter+'-_-"]');
                        var target = element.closest('.div-component');
              
                        $('#pagecontent_'+block+'_'+counter2).replaceWith(
                            target
                        );
                        initFileUpload('.fileupload.alone');
                        if( (html.search('colorpicker') > 0)){
                            $(".colorpicker").spectrum({
                                showInput: true,
                                showAlpha: true,
                                showInitial: true,
                                allowEmpty:true,
                                showPalette: true,
                                showSelectionPalette: true,
                                palette: [
                                    [$bodycolor, $textcolor],
                                    [$primary, $secondary, $tertiary],
                                    [$info, $light, $dark], 
                                    [$success, $warning, $danger]
                                ],
                                preferredFormat: "hsl",
                            });
                        }
                        $(".select2-style").select2();
                    }
                });
            });
        });

        // MODAL BLOCK DATA START

            // Upload block data
            $(".card-body").on("click", ".block-data-icon-upload", function(e) {
                var block = $(this).attr("block");
                var counter = $(this).attr("counter-excel");

                $("#block-id-upload-data").val( block );
                $("#counter-upload-data").val( counter );

                // open modal
                $(".upload-block-data").modal("show");
            });

            $("body").on("click", ".export-block-data", function() {
                var block = $("#block-id-upload-data").val();
                var counter = $("#counter-upload-data").val();
                var $form = $(this).closest('form');

                var pageId = $("#pageId").val();

                if( pageId == "" ){
                    window.location.href="/admin/exportblockdata?block="+block+"&counter="+counter+"&type=new";
                } else {
                    window.location.href="/admin/exportblockdata?page="+pageId+"&block="+block+"&counter="+counter+"&type=edit";
                }
            });

            // Submit form data via Ajax
            $(document).on('click','#upload-block-data',function(e){
                e.preventDefault();

                Swal.fire({
                    text: 'Qualquer dado preenchido será sobrescrito. Deseja continuar?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Sim',
                    cancelButtonText: 'Não'
                }).then((result) => {
                    if (result.value) {

                        var block = $("#block-id-upload-data").val();
                        var counter = $("#counter-upload-data").val();

                        var formData = new FormData();
                        // Attach file
                        formData.append('excel-upload', $('#excel-upload')[0].files[0]); 
                        formData.append('block', block); 
                        formData.append('counter', counter); 
                        $.ajax({
                            type: 'POST',
                            url: '/upload_excel_block_data',
                            data: formData,
                            dataType: 'html',
                            contentType: false,
                            cache: false,
                            processData:false,
                            success: function(response){ 
                                if(response=="ERR-WRONG-SHEET" || response=="ERR-BLANK-DATA"){
                                    if( response=="ERR-WRONG-SHEET" ){
                                        message = 'A planilha importada não é do mesmo tipo do bloco selecionado.';
                                    } else {
                                        message = 'Faltam dados na planilha anexada.';
                                    }
                                    Swal.fire({
                                        type: 'error',
                                        title: 'Oops...',
                                        text: message
                                    });
                                } else {
                                    var structure = $(".block-content[block="+block+"][counter="+counter+"]").closest(".structure-block");
                                    structure.replaceWith( response );
                                    initFileUpload('.fileupload.alone');
                                    initFileUpload('.ui-sortable-handle .fileupload');
                                    if( (response.search('colorpicker') > 0)){
                                        $(".colorpicker").spectrum({
                                            showInput: true,
                                            showAlpha: true,
                                            showInitial: true,
                                            allowEmpty:true,
                                            showPalette: true,
                                            showSelectionPalette: true,
                                            palette: [
                                                [$bodycolor, $textcolor],
                                                [$primary, $secondary, $tertiary],
                                                [$info, $light, $dark], 
                                                [$success, $warning, $danger]
                                            ],
                                            preferredFormat: "hsl",
                                        });
                                    }
                                    $(".select2-style").select2();
                                    if (typeof CKEDITOR != "undefined") {
                                        var cke = structure.find("textarea");
                                        if( cke.length > 0 ){
                                            cke.each(function(){
                                                // For each CKE in block
                                                var ckeId = $(this).attr("id");
                                                editor = CKEDITOR.instances[ckeId];
                                                var config = editor.config;
                                                editor.destroy();
                                                CKEDITOR.replace(ckeId, config);
                                            });
                                        }
                                    }
    
                                    // Hide modal
                                    $(".upload-block-data").modal("hide");
                                }
                            }
                        });
                    }
                });
            });

        // MODAL BLOCK DATA END
    </script>
{% endblock %}