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


{% 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') }}">
        <style>
            .readonly { background: #eee; pointer-events: none; touch-action: none; }
            .language{ height: 30px; width: 30px; text-align:center; float:left; margin-right:3px; padding-top:3px; cursor:pointer; }
            .language:hover{ background-color :#5accca; -webkit-border-radius: 100px 100px 100px 100px; border-radius: 100px 100px 100px 100px; height: 30px; width: 30px; text-align:center; float:left; margin-right:3px; color:#fff !important; }
            .language a{ color: #999; }
            .language a:hover{ color: #fff; }
            .language_actions i{ color:#000; font-size:18px }   
            .more_language{
                -webkit-box-shadow: 3px 5px 3px 0px rgba(214,214,214,0.85);
                -moz-box-shadow: 3px 5px 3px 0px rgba(214,214,214,0.85);
                box-shadow: 3px 5px 3px 0px rgba(214,214,214,0.85);
                float:right; background:#81cdcc; position:relative; height:35px; width:35px; margin-right:-35px; top:-31px; border-left:none;
            }
            .plus{
                -webkit-border-radius: 100px 100px 100px 100px;
                border-radius: 100px 100px 100px 100px;
                font-size:18px; height: 28px; width: 28px; cursor:pointer; background:#e5eefd; float:left; text-align:center; padding-top:1px; color:#77c2c7;
            }
        </style>
{% 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,"pages_url": pages_url}}) }}
    <input type='hidden' name='preview' value='0' id="preview">

<!--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 class="btn btn-primary btn-preview float-left m-r-15">{% trans %}preview{% endtrans %}</a> #}
        <button disabled name="std_snippets_form[save]" class="btn-primary btn float-left std_snippets_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-6">
                                            {{ form_label(form.name) }}
                                            {{ form_widget(form.name) }}
                                        </div>
                                        <div class="col-sm-6">
                                            {{ form_label(form.languageCode) }}
                                            {{ form_widget(form.languageCode) }}
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            {{ form_label(form.description) }}
                                            {{ form_widget(form.description) }}
                                        </div>
                                    </div>

                                </div>
                            </div>
                            
                            <div class="card">
                                <div class="card-header">
                                    {% set displayAddButton = "" %}
                                    {% if form.vars.value is not null and form.vars.value.id is not empty %}
                                        <!-- EDIT -->
                                        {% set labelExpand = "Expand all" %}
                                        {% set classExpand = "" %}
                                    {% else %}
                                        <!-- NEW -->
                                        {% set labelExpand = "Collapse all" %}
                                        {% set classExpand = "expand" %}
                                    {% endif %}
                                {{ 'Page Structure'|trans({},'pages')}} <button class="m-l-15 btn btn-primary btn-sm add-blocks" data-q-action="page-aside-blocks-open" {{ displayAddButton|raw }} type="button">{{ 'Add Block'|trans({},'pages')}}</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|trans({},'pages')}}</button>
                                    <ul class="actions top-right">
                                        <li><a href="javascript:void(0)" data-q-action="card-collapsed"><i class="icon dripicons-chevron-up" style="line-height: 40px;"></i></a></li>
                                    </ul>
                                </div>

                                <div class="card-body bg-light connectedSortable" id="page-structure-content">
                                    {% include 'admin\\stdpages\\pagestructure.html.twig' with {'form_name': 'std_pages_form', 'menuType': 'snippets'} %}
                                </div>
                            </div>


                            
                            <!-- END PAGE STRUCTURE -->
                            {# <button type="submit" id="std_snippets_form_save" name="std_snippets_form[save]" class="btn-primary btn">Save</button> #}
                        </div>

                        <!-- LANGUAGE MENU -->
                        <div class="col-lg-3">

                            <!--START LANGUAGE CARD -->
                            {# <div class="card">
                                <div class="card-body p-b-0 p-t-0">
                                    <div class="row">
                                        <div class="col-12">
                                            <ul class="list-group list-group-flush list-group-lang d-block p-b-0" style="width:100%">
                                                <li class="list-group-item list-lang-item p-l-10 p-r-0 active" data-q-action="lang-switch">
                                                    <div class="row align-items-center">
                                                        <div class="col-sm-8">
                                                            <div class="icon dripicons-checkmark"></div>
                                                            <span class="text-color-primary">English</span>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            <div class="lang-switcher">
                                                                <input class="tgl tgl-light tgl-primary" id="lang-en" type="checkbox" checked="">
                                                                <label class="tgl-btn float-right" for="lang-en"></label>
                                                            </div>
                                                            <div class="lang-status float-right"></div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="list-group-item list-lang-item p-l-10 p-r-0" data-q-action="lang-switch">
                                                    <div class="row align-items-center">
                                                        <div class="col-sm-8">
                                                            <div class="icon dripicons-checkmark"></div>
                                                            <span class="text-color-primary">Portuguese</span>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            <div class="lang-switcher">
                                                                <input class="tgl tgl-light tgl-primary" id="lang-pt" type="checkbox" checked="">
                                                                <label class="tgl-btn float-right" for="lang-pt"></label>
                                                            </div>
                                                            <div class="lang-status active float-right"></div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="list-group-item list-lang-item p-l-10 p-r-0" data-q-action="lang-switch">
                                                    <div class="row align-items-center">
                                                        <div class="col-sm-8">
                                                            <div class="icon dripicons-checkmark"></div>
                                                            <span class="text-color-primary">French</span>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            <div class="lang-switcher">
                                                                <input class="tgl tgl-light tgl-primary" id="lang-fr" type="checkbox">
                                                                <label class="tgl-btn float-right" for="lang-fr"></label>
                                                            </div>
                                                            <div class="lang-status float-right"></div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div> #}
                            <!--END LANGUAGE CARD -->

                            <!--START STATUS CARD -->
                            {% if usedLanguages is defined  %}
                            <div class="card">
                                <div class="card-header">
                                {{'languages'|trans({},'studio')}}
                                </div>
                                <div class="card-body">
                                
                                    {% for language in usedLanguages %}

                                    <div class="language">
                                        <a href='{{ url("admin_snippets_edit",{"language_code" : language, "id": form.vars.value.id}) }}'>{{language}}</a>
                                    </div>                                     
                                    {% endfor %}

                                    <div class="plus"><a href="{{ url("admin_snippets_edit",{"language_code" : 0, "id": form.vars.value.id}) }}">+</a></div> 
                                </div>
                            </div>
                             {% endif %}

                            <div class="card">
                                <div class="card-header">
                                    Status
                                    <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">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label for="{{form.children.isActive.vars.id}}">{{ 'Active'|trans({},'components')}}</label>
                                                    {{ form_widget(form.isActive) }}
                                                </div>  
                                            </div>   
                                        </div>
                                        {% set now = "now"|date("Y-m-d h:i:s", "Europe/Lisbon") %}
                                        {% set publishDate = "" %}
                                        {% set expireDate = "" %}
                                        
                                        
                                        {% if form.vars.value is null or 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">{{ 'Author'|trans({},'components')}}</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">{{ 'Last update'|trans({},'components')}}</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 -->

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

                            {# Modal Publish/Expire Date #}
                            {% include 'admin\\stdpages\\modalpublishexpiredate.html.twig' %}
							{# End Modal Publish/Expire Date #}

							{# Modal Friendly Url #}
							{% include 'admin\\stdpages\\modalfriendlyurl.html.twig' %}
							{# End Modal Friendly Url #}

							{# Modal Choose Friendly Url #}
							{% include 'admin\\stdpages\\modalchoosefriendlyurl.html.twig' %}
							{# End Modal Choose Friendly Url #}

                            {# Modal Upload Block Data #}
							{% include 'admin\\stdpages\\modaluploadblockdata.html.twig' %}
							{# End Modal Upload Block Data #}
                            <div style="display: none">
                                {{ form_rest(form) }}
							</div>
							
                            <input type="hidden" id="structure-content" name="structure-content">
                            {{ form_end(form) }}
                        </div>
                    </div>
                    

                </section>

{% 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>
        let pagesUrl = $("#std_snippets_form").attr('pages_url');

        if( $("#maxHotspotCounter").val() > 0 ){
            var contador = $("#maxHotspotCounter").val();
        } else {
            var contador = 0;
        }
        var alturaQuadrado = 24;
		var larguraQuadrado = 24;

        function getMachineName(str){
                return str.toLowerCase().trim().replace(/[^a-z \/\-\u00a1-\uffff0-9]/gi, "").replace(/[ ]+/g,"-");

        }

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

            // configure hotspot
            $(".card-body").on("mouseover", ".hotspot-field", function() {
                element = $(this);
                if(element.children().hasClass("js-crop crop-hover")){
                    var cont =  element.children('a').html(),
                        content = $(this).closest(".card-body").find(".block-content");
                    element.children('a').remove();
                    element.html(cont);
                    element.find("span").replaceWith("<div id='divHotspots_"+content.attr("counter")+"'></div>");
                }
            });

            // insert new hotspot
            var loadItemHotspot=true;
            $(".card-body").on("click", ".hotspot-field img", function(e) {
                if( loadItemHotspot ){
                    loadItemHotspot = false;
                    contador++;
                    var $this = $(this),
                        offset = $this.offset()
                        x = e.pageX - offset.left - (larguraQuadrado/2),
                        y = e.pageY - offset.top - (alturaQuadrado/2),
                        xpercent = (Math.abs(x)*100)/$this.width(),
                        ypercent = (Math.abs(y)*100)/$this.height(),
                        content = $this.closest(".card-body").find(".block-content"),
                        hotspotField = $this.parent(".hotspot-field");

                    drawHotspot(content,xpercent,ypercent,contador,true);

                    $( ".hotspot" ).draggable({
                        containment: hotspotField,
                        stop: function( event, ui ) {
                            content = $(this).closest(".card-body").find(".block-content");
                            var new_left = parseInt($(this).css("left")) / (hotspotField.width() / 100);
                            var new_top = parseInt($(this).css("top")) / (hotspotField.height() / 100);
                            $(this).css("left", parseInt($(this).css("left")) / (hotspotField.width() / 100) + "%");
                            $(this).css("top", parseInt($(this).css("top")) / (hotspotField.height() / 100) + "%");
                            drawHotspot(content,new_left,new_top,$(this).data('contador'));
                        }
                    });

                    addCombo(contador, $this);

                    jQuery(document).ajaxComplete(function(){
                        loadItemHotspot = true;
                    });
                }
                return false;
            });

            function drawHotspot(content,xpercent,ypercent,contador,novo){
                output = $('#divHotspots_'+content.attr("counter"));
                if (novo){
                    lastRepeatable = content.find(".item-repeatable").last(),
                    itemindexHtml = lastRepeatable.find(".item-repeatable-index").html(),
                    itemindex = parseInt((itemindexHtml ? itemindexHtml : 0))+1;
                    output.append('<div type="hotspot" class="hotspot hotspot_'+contador+'" data-contador="'+contador+'" style="position:absolute;top:'+ypercent+'%;left:'+xpercent+'%;"><div class="hotspot-circle"><span>'+itemindex+'</span></div></div>');
                }else{
                    $('#divHotspots_'+content.attr("counter")).find(".hotspot_"+contador).css({'top': ypercent+'%', 'left': xpercent+'%'});
                }

                content.find(".hotspots").val(output.html());

            }

            $( "body .hotspot" ).draggable({
                containment: $(this).closest(".hotspot-field"),
                stop: function( event, ui ) {
                    content = $(this).closest(".card-body").find(".block-content");
                    var hotspotField = content.find(".hotspot-field");
                    var new_left = parseInt($(this).css("left")) / (hotspotField.width() / 100);
                    // if (new_left > hotspotField.width())
                    var new_top = parseInt($(this).css("top")) / (hotspotField.height() / 100);
                    $(this).css("left", parseInt($(this).css("left")) / (hotspotField.width() / 100) + "%");
                    $(this).css("top", parseInt($(this).css("top")) / (hotspotField.height() / 100) + "%");
                    drawHotspot(content,new_left,new_top,$(this).data('contador'),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 blockName = cont.attr("block-name");
                var blockcontent = $('.block-content').filter('[block="'+block+'"]').filter('[counter="'+counter+'"]');
                dataSearch['block'] = block;
                dataSearch['counter'] = counter;
                dataSearch['repeatable'] = 1;

                // Find the repeatable components
                $.ajax({
                    url : pagesUrl,
                    type: $form.attr('method'),
                    type: "POST",
                    data : dataSearch,
                    success: function(html) {
                        var target = "";
                        var blockcontent = $('.block-content').filter('[block="'+block+'"]').filter('[counter="'+counter+'"]'),
                            lastRepeatable = blockcontent.find(".item-repeatable").last();
                            itemindexHtml = lastRepeatable.find(".item-repeatable-index").html();
                            itemindex = parseInt((itemindexHtml ? itemindexHtml : 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 find = $(html).find('[id^=std_pages_form_ajax-page-content-_-'+counter+'-_-'+blockName+'-_-repeatable]');
                        var elements = find.closest('.form-group');
                        

                        
                        if( find[0] ){
                            var counterRepeatable = $(find[0]).attr("counter");
                            var counter2Repeatable = $(find[0]).attr("counter2");
                            elementsHidden = $('<input type="hidden" id="std_pages_form_ajax-page-content-_-'+counterRepeatable+'-_-'+blockName+'-_-repeatable-_-'+counter2Repeatable+'-_-input_hotspot_id" name="std_snippets_form[ajax-page-content-_-'+counterRepeatable+'-_-'+blockName+'-_-repeatable-_-'+counter2Repeatable+'-_-input_hotspot_id]" value="'+contador+'">');
                        }
                        $('#pagecontent_'+block+'_'+counter).replaceWith(
                            elementsHidden.add(elements)
                        );

                        
                        $(".select2-style").select2();
                    }
                });

            }

            $(".show-modal-attributes").on("click", function(){
                $(".show-attributes").modal("show");
            });

            // DATES
            $(".show-date").on("hidden.bs.modal", function () {
                //clear modal body
                $(this).find(".modal-body").html("");
            });
            // Publish/Expire date modal
            $(".card-body").on("click", ".card-clock", function(){
                const $closestDate = $(this).closest(".structure-block").find(".fields-date");
                dateModal($(this), $closestDate);
            });
            // Item Publish/Expire date modal
            $(".card-body").on("click", ".clock-item", function(){
                const $closestDate = $(this).closest(".item-repeatable").find(".fields-date-item");
                dateModal($(this), $closestDate);
            });

            // show date Modal
            function dateModal(clock, closestDate) {
                $(".show-date .modal-body").html( $(closestDate).html() );
                const $field = $(".show-date .modal-body").find('.datepicker-single');
                $field.daterangepicker({
                    singleDatePicker: true,
                    timePicker: true,
                    autoUpdateInput: false,
                    locale: {
                        format: 'DD/MM/YYYY hh:mm A',
                        cancelLabel: 'Clear'
                    }
                });
                $(".show-date").modal("show");

                $field.on('apply.daterangepicker', function(ev, picker) {
                    var idEl = $(this).attr("id");
                    $(this).val(picker.startDate.format('DD/MM/YYYY hh:mm A'));
                    $("#"+idEl).val(picker.startDate.format('DD/MM/YYYY hh:mm A'));
                    $("#"+idEl).attr("value", picker.startDate.format('DD/MM/YYYY hh:mm A'));

                    clockState( $(this), clock, Date.parse(new Date()), Date.parse(picker.startDate) );
                });

                $field.on('cancel.daterangepicker', function(ev, picker) {
                    var idEl = $(this).attr("id");
                    $(this).val('');
                    $("#"+idEl).val('');
                    $("#"+idEl).attr("value", '');

                    if( $(this).hasClass('js-settings-expiredate'))
                        clockState( $(this), clock, "", ""  );
                });
            }

            // change state of clock icon
            function clockState(ele, clock, todayDate, pickerDate) {
                if($(ele).hasClass('js-settings-publishdate')) {
                    if( pickerDate > todayDate && !$(clock).hasClass("clock-red") ){
                        $(clock).addClass("clock-yellow");
                    }else{
                        $(clock).removeClass("clock-yellow");
                    }
                    
                    return true;
                }

                if($(ele).hasClass('js-settings-expiredate')) {
                    if( todayDate <= pickerDate ){
                        $(clock).removeClass("clock-red");
                    }else{
                        $(clock).addClass("clock-red");
                    }
            
                    return true;
                }
            }

            $('.datepicker-single').prop('readonly', true).daterangepicker({
                singleDatePicker: true,
                timePicker: true,
                showDropdowns: 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_snippets_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_snippets_form_order_value").val('');
                $(this).val('');
            });

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

            // 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",
                                            localStorageKey: "spectrum.masterconfig",
                                        });
                                    }
                                    $(".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

            // Add repeatable block
            $('.card-body').on('click', '.dripicons-plus', function(){
            // $('.dripicons-plus').click(function(){

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

                var $form = $(this).closest('form');
                var data = {};
                data['block'] = block;
                data['counter'] = counter;
                data['repeatable'] = 1;
                // Find the repeatable components
                $.ajax({
                    url : $form.attr('pages_url'),
                    type: $form.attr('method'),
                    data : data,
                    success: function(html) {
                        var counter2 =$(html).find('[class="js-counter2"]').val();
                        var blockcontent = $('.block-content').filter('[block="'+block+'"]').filter('[counter="'+counter+'"]'),
                            lastRepeatable = blockcontent.find(".item-repeatable").last();
                            itemindexHtml = lastRepeatable.find(".item-repeatable-index").html();
                            itemindex = parseInt((itemindexHtml ? itemindexHtml : 0))+1;
                        blockcontent.find(".repeatables-wrap").append('<div class="card m-b-10 item-repeatable"><div class="item-repeatable-index">'+itemindex+'</div><input type="hidden" value="'+counter+'" class="js-counter"><input type="hidden" value="'+counter2+'" class="js-counter2"><ul class="actions top-right"> <li><a href="javascript:void(0)" data-q-action="card-date"><i class="icon dripicons-clock clock-item"></i></a></li><li class="card-move-to-top"><a href="javascript:void(0)"><i class="icon dripicons-arrow-up"></i></a></li><li><a href="javascript:void(0)" ><i class="icon dripicons-move move-item"></i></a></li><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"><i class="icon dripicons-trash"></i></a></li> </ul><div class="card-body"><div id="pagecontent_'+block+'_'+counter+'"></div></div></div></div>');

                        // blockcontent.find(".repeatables-wrap").prepend('<div class="card m-b-10 item-repeatable"><div class="item-repeatable-index">'+itemindex+'</div><input type="hidden" value="'+counter+'" class="js-counter"><input type="hidden" value="'+counter2+'" class="js-counter2"><ul class="actions top-right"> <li><a href="javascript:void(0)" data-q-action="card-date"><i class="icon dripicons-clock clock-item"></i></a></li><li><a href="javascript:void(0)" ><i class="icon dripicons-move move-item"></i></a></li><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"><i class="icon dripicons-trash"></i></a></li> </ul><div class="card-body"><div id="pagecontent_'+block+'_'+counter+'"></div></div></div></div>');
                        $("html, body").animate({ scrollTop: blockcontent.find(".item-repeatable").last().offset().top - 75}, 400);
                        // $("html, body").animate({ scrollTop: blockcontent.find(".item-repeatable").first().offset().top - 75}, 400);

                        var element = $(html).find('[id^="std_pages_form_ajax-page-content-_-'+counter+'-_-"]');
                        var target = element.closest('.div-component');
                        $('#pagecontent_'+block+'_'+counter).replaceWith(
                            target
                        );
                        //alterar os nomes dos repeatables para não entrar em conflito
                        var oldname="--_--1--_--";
                        var re = new RegExp(oldname,"g");
                        var replace= blockcontent.find(".item-repeatable:eq("+(itemindex-1)+")").find(".card-body");
                        replace.html(replace.html().replace(re, '--_--'+itemindex+'--_--'));

                        initFileUpload('.fileupload.alone');
                        initFileUpload('.ui-sortable-handle .fileupload');
                        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",
                                localStorageKey: "spectrum.masterconfig",
                            });
                        }

                        $(".select2-style").select2();
                    }
                });
            });
            
            
            // 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 : pagesUrl,
                    type: "POST",
                    data : pagesCombo,
                    success: function(html) {
                        var local = $(".combo-content-skin").filter('[counter="'+counter+'"]').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('[counter="'+counter+'"]').filter('[counter2="'+counter2+'"]').filter('[id*="ajax-page-content-_-'+counter+'"]');

                        $(".combo-content-skin").filter('[counter="'+counter+'"]').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 : pagesUrl,
                    type: "POST",
                    data : pagesCombo,
                    success: function(html) {
                        var local = $(".combo-pages").filter('[counter="'+counter+'"]').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('[counter="'+counter+'"]').filter('[counter2="'+counter2+'"]').filter('[id*="ajax-page-content-_-'+counter+'"]');

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

                        var local = $(".combo-content-skin").filter('[counter="'+counter+'"]').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('[counter="'+counter+'"]').filter('[counter2="'+counter2+'"]').filter('[id*="ajax-page-content-_-'+counter+'"]');

                        $(".combo-content-skin").filter('[counter="'+counter+'"]').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() {
                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 : pagesUrl,
                    type: "POST",
                    data : categoryCombo,
                    success: function(html) {
                        var local = $(".combo-category").filter('[counter="'+counter+'"]').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('[counter="'+counter+'"]').filter('[counter2="'+counter2+'"]').filter('[id*="ajax-page-content-_-'+counter+'"]');

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

                        var local = $(".combo-content-skin").filter('[counter="'+counter+'"]').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('[counter="'+counter+'"]').filter('[counter2="'+counter2+'"]').filter('[id*="ajax-page-content-_-'+counter+'"]');

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

                        var local = $(".combo-pages").filter('[counter="'+counter+'"]').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('[counter="'+counter+'"]').filter('[counter2="'+counter2+'"]').filter('[id*="ajax-page-content-_-'+counter+'"]');

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

			$(document).on('click', '.card-move-to-top', function() {
				let $this = $(this);
				let currentElementParent = $this.closest(".repeatables-wrap");
				let currentElement = $this.closest(".item-repeatable");				
				currentElementParent.prepend(currentElement);

				$("html, body").animate({ scrollTop: currentElementParent.find(".item-repeatable").first().offset().top - 75}, 400);
			});

            // Disable CKEDITOR when initialize a Master Block
            if( typeof CKEDITOR!= "undefined"){
                CKEDITOR.on('instanceReady', function(ev) {
                    editor = ev.editor;
                    var idElement = editor.name;
                    var check = $('[id="'+idElement+'"]').closest('.structure-block').find('[name*="isMaster"]');
                    check.each(function(){
                        if( $(this).length > 0 ){
                            // Disable Master
                            editor.setReadOnly(true);
                        }
                    });
                });
            }
            // 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",
                localStorageKey: "spectrum.masterconfig",
            });
            // Disable COLORPICKER when initialize a new block
            $(".colorpicker").each(function(){
                idElement = $(this)[0].id;
                var check = $('[id="'+idElement+'"]').closest('.structure-block').find('[name*="isMaster"]');
                check.each(function(){
                    if( $(this).length > 0 ){
                        // Disabled
                        $(this).spectrum("disable");
                    }
                });
			});

            $("body").on("click", ".block-title", function() {
                $(this).hide();
                $(this).next().show().focus();
            });
            $("body").on("focusout","input.blockname",function(){
                var blocktitle = $(this).parent().find(".block-title"),
                    blocktitle_original = blocktitle.data("title");
                if($(this).val() != ""){
                    blocktitle.html($(this).val() + " <small>[" + blocktitle_original + "]</small><i title=\"Edit Block Name\" class=\"la la-edit\"></i>");
                }
                blocktitle.show();
                $(this).hide();
            });

            /*$("body").on("change",".std-template",function(){
                var layout = $(this).find("option:selected").data("layout");
                console.log(layout);
                
                $(".std-layout").val("dummy").trigger('change');
            })*/

            // SAVE
            $("button[name='std_snippets_form[save]']").on("click",function(e){
                if (!$("#std_snippets_form").valid()) {
                    Swal.fire({
                        text: '{% trans %}form_is_not_valid{% endtrans %}',
                        type: 'error'
                    });
                    return false;
                }
                //form#formpage-structure-content is a secondary form to which the blocks are loaded (appended)
                $("#formpage-structure-content").append($("#page-structure-content"));
                //update all CKEDITOR instances
                if(typeof CKEDITOR != "undefined"){
                    Object.keys(CKEDITOR.instances).forEach(element => {
                        CKEDITOR.instances[element].updateElement();
                    });
                }
                //input#structure-content will hold the serialized data of the blocks to then be submitted
                $("#structure-content").val($("#formpage-structure-content").serialize());
                $(this).addClass("qt-loader qt-loader-mini qt-loader-right");
            });
			
		});

    </script>
{% endblock %}