{% 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}}) }}
    <input type='hidden' name='preview' value='0' id="preview">
    <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">
                    <button class="btn btn-primary btn-preview float-left m-r-15">{% trans %}preview{% endtrans %}</button>
                </div> #}
                <div class="col-md-2">
                {% if fromNavigation|default(false) %}
                    <a href="{{path('admin_navigation_relation',{'relation':relation})}}" class="btn btn-primary float-left m-r-15">{% trans %}back{% endtrans %}</a>
                {% else %}
                    <a href="{{path('admin_pages',{'content_type':machineName})}}" class="btn btn-primary float-left m-r-15">{% trans %}back{% endtrans %}</a>
                {% endif %}
                </div>
                <div class="col-md-2">
                    <button disabled name="std_pages_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 class="btn btn-primary btn-preview float-left m-r-15">{% trans %}preview{% endtrans %}</a> #}
        {% if form.vars.value.id is not empty %}
            {% if pageContent|default %} {% set viewPageUrl = pageContent.getCanonicalUrl() %}
                {% if viewPageUrl != "" %} <a href="{{ viewPageUrl }}" target="_blank" class="btn btn-primary btn-preview float-left m-r-15">
                    {% trans %}view_page{% endtrans %}</a>
                {% endif %} 
            {% endif %} 
        {% endif %} 
        {% if fromNavigation|default(false) %} 
            <a href="{{path('admin_navigation_relation',{'relation':relation})}}" class="btn btn-primary float-left m-r-15">{% trans %}back{% endtrans %}</a>
            {% else %} 
            <a href="{{path('admin_pages',{'content_type':machineName})}}" class="btn btn-primary float-left m-r-15">{% trans %}back{% endtrans %}</a> 
        {% endif %} 
        <button disabled name="std_pages_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.template_id, "Template") }}
                                            {{ form_widget(form.template_id) }}
                                        </div>
                                        <div class="col-sm-4">
                                            {{ form_label(form.layout) }}
                                            {{ form_widget(form.layout) }}
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-8">
                                            {{ form_label(form.title) }}
                                            {{ form_widget(form.title) }}
                                        </div>
                                        <div class="col-sm-4">
                                            {{ form_label(form.languageCode) }}
                                            {{ form_widget(form.languageCode) }}
                                        </div>
                                    </div>

                                </div>
                            </div>
							{% if machineName != 'menus' %}
                            <div class="card">
                                <div class="card-header">
                                    SEO
                                </div>
                                <div class="card-body block-el">
                                    <div class="row">
                                        <div class="col-3">
                                            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                                <a class="nav-link active show" id="v-pills-seo-url-tab" data-toggle="pill" href="#v-pills-seo-url" role="tab" aria-controls="v-pills-seo-url" aria-selected="true">{% trans %}URL{% endtrans %}</a>
                                                <a class="nav-link" id="v-pills-seo-metas-tab" data-toggle="pill" href="#v-pills-seo-metas" role="tab" aria-controls="v-pills-seo-metas" aria-selected="false">{% trans %}Metas{% endtrans %}</a>
                                                <a class="nav-link" id="v-pills-seo-opengraph-tab" data-toggle="pill" href="#v-pills-seo-opengraph" role="tab" aria-controls="v-pills-seo-opengraph" aria-selected="false">{% trans %}Open Graph{% endtrans %}</a>
                                                <a class="nav-link" id="v-pills-seo-scripts-tab" data-toggle="pill" href="#v-pills-seo-scripts" role="tab" aria-controls="v-pills-seo-scripts" aria-selected="false">{% trans %}Scripts{% endtrans %}</a>
                                            </div>
                                        </div>
                                        <div class="col-9">
                                            <div class="tab-content" id="v-pills-tabContent">
                                                <div class="tab-pane fade active show" id="v-pills-seo-url" role="tabpanel" aria-labelledby="v-pills-seo-url-tab">
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                {{ form_label(form.url) }}
                                                                <div class="input-group mb-3">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text" id="basic-addon3">https://example.com/pages/</span>
                                                                    </div>
                                                                    {{ form_widget(form.url) }}
                                                                </div>
                                                            </div>
														</div>
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                {{ form_label(form.canonical_url) }}
                                                                {{ form_widget(form.canonical_url) }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="v-pills-seo-metas" role="tabpanel" aria-labelledby="v-pills-seo-metas-tab">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                            <div class="row">
                                                               <div class="col-lg-6"> {{ form_label(form.meta_title) }}</div>
                                                               <div class="col-lg-6 text-right" id="span_meta_title_char_counter" ><span></span></div>
                                                                </div>
                                                                {{ form_widget(form.meta_title) }}
                                                                <small class="form-text text-muted fw-lighter">{% trans %}title_seo_opt{% endtrans %}</small>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                {{ form_label(form.meta_keywords) }}
                                                                {{ form_widget(form.meta_keywords) }}
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-lg-6">{{ form_label(form.meta_description) }}</div>
                                                               <div class="col-lg-6 text-right" id="span_meta_desc_char_counter" ><span></span></div>  
                                                               </div>
                                                                {{ form_widget(form.meta_description) }}
                                                                <small class="form-text text-muted fw-lighter">{% trans %}desc_seo_opt{% endtrans %}</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="v-pills-seo-opengraph" role="tabpanel" aria-labelledby="v-pills-seo-opengraph-tab">
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            <div class="form-group">
                                                                {{ form_label(form.og_title) }}
                                                                {{ form_widget(form.og_title) }}
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="form-group">
                                                                {{ form_label(form.og_url) }}
                                                                {{ form_widget(form.og_url) }}
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                {{ form_label(form.og_image) }}
                                                                {{ form_widget(form.og_image) }}
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                {{ form_label(form.og_description) }}
                                                                {{ form_widget(form.og_description) }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="v-pills-seo-scripts" role="tabpanel" aria-labelledby="v-pills-seo-scripts-tab">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="help-text">
                                                                <div class="icon dripicons-information"></div>
                                                                <small class="form-text text-muted fw-lighter">{% trans %}script_info{% endtrans %}</small>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                {{ form_label(form.script_head) }}
                                                                {{ form_widget(form.script_head) }}
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                {{ form_label(form.script_body) }}
                                                                {{ form_widget(form.script_body) }}
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                {{ form_label(form.script_footer) }}
                                                                {{ form_widget(form.script_footer) }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
							{% endif %}
                            <!-- START PAGE CONTENT TYPES -->
                            {% if contentTypeComponents[0].contentTypeId.name is defined %}
                            <div class="card">
                                <div class="card-header">
                                    {{ contentTypeComponents[0].contentTypeId.name }}
                                </div>

                                <div class="card-body block-el">
                                    {% include 'admin\\stdpages\\pagescontenttypes.html.twig' %}
                                </div>
                            </div>
                            <!-- END PAGE CONTENT TYPES -->
                            {% endif %}

                            <!-- START PAGE STRUCTURE -->
                            
                            
                            <div class="card">
                                <div class="card-header">
                                    {% set displayAddButton = "" %}
                                    {% set displayEnableTemplate = 'style="display: none;"' %}
                                    {% if form.template_id.vars.value > 0 %}
                                        {% set displayAddButton = 'style="display: none;"' %}
                                        {% set displayEnableTemplate = "" %}
                                    {% endif %}
                                    {% if (form.vars.value.id) %}
                                        <!-- 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="m-l-15 btn btn-primary btn-sm enable-template" {{ displayEnableTemplate|raw }} type="button">{{ 'Enable Template'|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' %}
                                </div>
                            </div>
                            <!-- END PAGE STRUCTURE -->
                            {# <button type="submit" id="std_pages_form_save" name="std_pages_form[save]" class="btn-primary btn">Save</button> #}
                        </div>

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

                            <!--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_pages_edit",{"content_type" : machineName,"language_code" : language, "page_id": form.vars.value.id}) }}'>{{language}}</a>
                                    </div>                                     
                                    {% endfor %}
                                    <div class="plus"><a href="{{ url("admin_pages_edit",{"content_type" : machineName,"language_code" : 0, "page_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">
                                            {% set checked = "checked" %}
                                            {% if pageContent.pageId is defined  %}
                                                {% if pageContent.pageId.isActive == true %}
                                                    {% set checked = "checked" %}
                                                {% else %}
                                                    {% set checked = "" %}
                                                {% endif %}
                                            {% endif %}

                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label>{{ 'Active'|trans({},'components')}}</label>
                                                    <input type="checkbox" class="tgl tgl-light tgl-primary" id="cbactive" name="cbactive" {{ checked }}>
                                                    <label class="tgl-btn" for="cbactive"></label>
                                                 </div>  
                                                 
                                               
                                                 {% set checked_includedsitemap = "checked" %}
                                                {% if pageContent.pageId is defined  %}
                                                    {% if pageContent.pageId.includeSitemap == true %}
                                                        {% set checked_includedsitemap = "checked" %}
                                                    {% else %}
                                                        {% set checked_includedsitemap = "" %}
                                                    {% endif %}
                                                {% endif %}


                                                <div class="col-md-4"> 
                                                    <label>{{ 'sitemap'|trans({},'components')}}</label>
                                                    <input type="checkbox" class="tgl tgl-light tgl-primary" id="cbincludedsitemap" name="cbincludedsitemap" {{ checked_includedsitemap }}>
                                                    <label class="tgl-btn" for="cbincludedsitemap"></label>
                                                 </div>
                                                 

                                                   {% if favorite|default  %}                                                
                                                    {% set checked_favorite = "checked" %}
                                                    {% else %}
                                                        {% set checked_favorite = "" %}
                                                    {% endif %}

                                                <div class="col-md-4">
                                                    <label>{{ 'Favorite'|trans({},'components')}}</label>
                                                    <input type="checkbox" class="tgl tgl-light tgl-primary" id="favorite" name="favorite" {{ checked_favorite }}>
                                                    <label class="tgl-btn" for="favorite"></label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label for="ordervalue">{{ 'Order'|trans({},'components')}}</label>
                                                {{ form_widget(form.order_value) }}
                                            </div>
                                        </div>
                                        {% set now = "now"|date("Y-m-d h:i:s", "Europe/Lisbon") %}
                                        {% set publishDate = "" %}
                                        {% set expireDate = "" %}
                                        {% if dates['postdaterange'] %}
                                            {% set postDate = dates['postdaterange'] %}
                                            {% set publishDate = dates['postdaterange']|replace({"/": "-"})|date("Y-m-d h:i:s") %}
                                        {% else %}
                                            {% set postDate = "now"|date("d/m/Y h:i A") %}
                                        {% endif %}
                                        {% if dates['expiredaterange'] %}
                                            {% set expireDate = dates['expiredaterange']|replace({"/": "-"})|date("Y-m-d h:i:s") %}
                                        {% endif %}
                                        {% if publishDate == "" and expireDate == "" %}
                                            {% set classColorDate = "" %}
                                        {% else %}
                                            {% if now < publishDate %}
                                                {% set classColorDate = "clock-yellow" %}
                                            {% else %}
                                                {% set classColorDate = "clock-green" %}
                                            {% endif %}
                                            {% if expireDate and now > expireDate %}
                                                {% set classColorDate = "clock-red" %}
                                            {% endif %}
                                        {% endif %}
                                        <div class="col-12">
                                            <div class="form-group">
                                                <div>
                                                    <label class="d-inline-block" for="metatitle">{{ 'Post Date'|trans({},'components')}}</label>
                                                    <span class="icon dripicons-clock page-date position-absolute {{ classColorDate }}"></span>
                                                </div>
                                                <input type="text" class="form-control pull-right datepicker-single" id="post-date" name="postdaterange" value="{{ postDate }}">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="metatitle">{{ 'Expire Date'|trans({},'components')}}</label>
                                                <input type="text" class="form-control pull-right datepicker-single" id="expire-date" name="expiredaterange" value="{{ dates['expiredaterange'] }}">
                                            </div>
                                        </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">{{ '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 -->

                            <!--START ATTRIBUTES CARD -->
                            <div class="card">
                                <div class="card-header">
                                    {{ 'Attributes'|trans({},'pages')}}
                                    <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-12">
                                            <div class="form-group">
                                                <select id="attributes" name="attributes" disabled class="select2-style form-control select2-hidden-accessible select-attribute" multiple="" tabindex="-1" aria-hidden="true">
                                                {% if attributes is defined and attributes is iterable %}
                                                    {% for attribute in attributes %}
                                                        {% if attribute.selected %}
                                                            <option value="{{ attribute.attributeId }}" {{ attribute.selected }}>{{ attribute.attributeName }}</option>
                                                        {% endif %}
                                                    {% endfor %}
                                                {% endif %}
                                                </select>
                                                <div class="selected-attributes-hidden d-none">
                                                    {% if attributes is defined and attributes is iterable %}
                                                        {% for attribute in attributes %}
                                                            <label for="std_pages_form_attributes_{{ attribute.attributeId }}" value-label="{{ attribute.attributeId }}">{{ attribute.attributeName }}</label>
                                                            <select id="std_pages_form_attributes_{{ attribute.attributeId }}" name="pages_attributes[attributes|||{{ attribute.attributeMachineName }}][]" class="form-control select2-hidden-accessible select-attribute-value" multiple="" tabindex="-1" aria-hidden="true">
                                                                {% if attribute.values is defined and attribute.values is iterable  %}
                                                                    {% for value in attribute.values %}
                                                                        <option value="{{ value.valueValue }}" {{ value.selected }}>{{ value.valueLabel }}</option>
                                                                    {% endfor %}
                                                                {% endif  %}
                                                            </select>
                                                        {% endfor %}
                                                    {% endif %}
                                                </div>
                                                <button type="button" id="show-list" name="show-list" class="btn-primary btn mt-3" data-toggle="modal" data-target="#attributes-modal">{{ 'Select Attributes'|trans({},'pages')}}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {# Modal Categories #}
                            {% include 'admin\\stdpages\\modalcategories.html.twig' %}
							{# End Modal Categories #}

                            {# Modal Categories Move #}
                            {% include 'admin\\stdpages\\modalcategories_move.html.twig' %}
							{# End Modal Categories Move #}

                            {# 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 #}

                            <!--END ATTRIBUTES CARD -->
							{% if machineName != 'menus' %}
                            <!--START CATEGORY CARD -->
                            <div class="card">
                                <div class="card-header">
                                    {{'category'|trans({},'studio')}}
                                    <ul class="actions top-right">
                                        <li><a href="javascript:void(0)"><i class="icons dripicons-network-3" data-toggle="modal" data-target="#categories-modal"></i></a></li>
                                        <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 block-el category-menu">
                                    <div class="preloader position-absolute transform50X pl-xs pls-primary d-none"><svg class="pl-circular" viewBox="25 25 50 50"><circle class="plc-path" cx="50" cy="50" r="20"></circle></svg></div>
                                    <div class="row">                                    
                                        <input type="hidden" name="menu-parent-category" id="menu-parent-category" value="{{ pagesRelations.values }}">
                                        <input type="hidden" name="menu-parent-category-updated" id="menu-parent-category-updated" value="{}">
                                        <ul class="col category-association-list {% if not pagesRelations.associations|default %} empty {% endif %}">
                                            {% if pagesRelations.associations|default %}
                                                {% for association in pagesRelations.associations %}
                                                    <li class="association-li" data-id="{{ association.relation_id|default }}">
                                                        <div class="col pl-0">
                                                            <div class="association-name">{{ association.name|default }}</div>
                                                            <div class="association-breadcrumb">
                                                                {{'raiz'|trans({},'studio')}} {% if association.breadcrumb|default %}> {{ association.breadcrumb }}{% endif %}
                                                            </div>
                                                        </div>
                                                        <div class="col-auto pr-0 association-actions">
                                                            <a href="javascript:void(0)"><i class="icons dripicons-network-3" data-toggle="modal" data-target="#categories-move-modal"></i></a>
                                                            <a href="javascript:void(0)"><i class="icons dripicons-trash js-remove-association"></i></a>
                                                        </div>
                                                    </li>
                                                {% endfor %}
                                            {% else %}
                                                <li class="empty-li">
                                                    <p>{{ 'no_associated_categories'|trans({},"studio") }}</p>
                                                    <div class="btn btn-primary" data-toggle="modal" data-target="#categories-modal">{{ 'associar'|trans({},"studio") }}</div>
                                                </li>
                                            {% endif %} 
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!--END CATEGORY CARD -->
							{% endif %}

							{% if machineName != 'menus' %}
                            <!--START MENUS CARD -->
                            <div class="card">
                                <div class="card-header">
                                    Menus
                                    <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 block-el">
                                    <div class="form-group row">
                                        <input type="hidden" name="menu-parent-menu" id="menu-parent-menu" value="{{ pagesRelationsMenu.menuValues }}">
                                        <input type="hidden" name="menu-parent-menu-url" id="menu-parent-menu-url" value="{{menuFriendlyUrl}}">
                                        <div class="std-search-wrap"> 
                                            <input type="text" name="std-search-menus" id="std-search-menus" class="form-control">
                                            <i class="icons dripicons-search"></i>
                                        </div> 
										<div class="treeSelector tree-menus"></div>
									</div>
                                </div>
                            </div>
                            <!--END MENUS CARD -->
							{% endif %}

                            <div class="daterangepicker dropdown-menu ltr single opensleft">
                                <div class="calendar left single" style="display: block;">
                                    <div class="daterangepicker_input">
                                        <input class="input-mini form-control" type="text" name="daterangepicker_start" value="" style="display: none;">
                                        <i class="fa fa-calendar glyphicon glyphicon-calendar" style="display: none;"></i>
                                        <div class="calendar-time">
                                            <div></div>
                                            <i class="fa fa-clock-o glyphicon glyphicon-time"></i>
                                        </div>
                                    </div>
                                    <div class="calendar-table"></div>
                                </div>
                                <div class="calendar right" style="display: none;">
                                    <div class="daterangepicker_input">
                                        <input class="input-mini form-control" type="text" name="daterangepicker_end" value="" style="display: none;">
                                        <i class="fa fa-calendar glyphicon glyphicon-calendar" style="display: none;"></i>
                                        <div class="calendar-time">
                                            <div></div>
                                            <i class="fa fa-clock-o glyphicon glyphicon-time"></i>
                                        </div>
                                    </div>
                                    <div class="calendar-table"></div>
                                </div>
                                <div class="ranges">
                                    <div class="range_inputs">
                                        <button class="applyBtn btn btn-sm btn-success" disabled="disabled" type="button">Apply</button>
                                        <button class="cancelBtn btn btn-sm btn-default" type="button">Cancel</button>
                                    </div>
                                </div>
                            </div>
                            <div style="display: none">
                                {{ form_rest(form) }}
							</div>
							{% if friendlyUrl is not empty %}
								<input type="hidden" id="pageId" value="{{friendlyUrl[0].pageId.getId()}}">
							{% else %}
								<input type="hidden" id="pageId" value="">
							{% endif %}
                            <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>
        if( $("#maxHotspotCounter").val() > 0 ){
            var contador = $("#maxHotspotCounter").val();
        } else {
            var contador = 0;
        }
        var alturaQuadrado = 24;
		var larguraQuadrado = 24;

		$(function() {			

            //CATEGORIES MODAL - ON OPEN ========
            var getRelationsReq;
            $(document).on("shown.bs.modal","#categories-modal",function(e){
                var t = $(this), 
                    relatedTarget = $(e.relatedTarget);
                if(!t.hasClass("loaded")){
                    loadCategoriesToModal();
                } 

            });

            function loadCategoriesToModal(callback=null){
                var t = $("#categories-modal"),
                    dataForm = {};
                dataForm["machineName"] = "{{ contentTypeMachineNameCategories|default }}";
                if (getRelationsReq) {
                    getRelationsReq.abort();
                }
                {% if form.vars.value.id|default %}
                    var urlReq = "{{ path('admin_pages_get_pages_relations',{'page': form.vars.value.id }) }}";
                {% else %}
                    var urlReq = "{{ path('admin_pages_get_pages_relations_new') }}";
                {% endif %}
                getRelationsReq = $.ajax({
                    url : urlReq,
                    type: "GET",
                    data : dataForm,
                    success: function(data) {
                        drawCategoryTree(data);
                        t.find(".preloader").addClass("d-none");
                        t.addClass("loaded");
                        if(callback){
                            callback();
                        }

                    }
                });
            }

            //CATEGORIES MODAL - ON CLOSE ========
            var getNavigationXHR;
            $(document).on("hide.bs.modal","#categories-modal",function(e){
                var t = $(this), 
                    selected_values = [],
                    new_values = [],
                    category_menu = $(".category-menu"),
                    association_list = category_menu.find(".category-association-list");
                t.find(".treeSelector-input-box .title-item").each(function(e,item){
                    selected_values.push($(item).data("value"));
                });
                category_menu.find(".preloader").removeClass("d-none");
                //remove the association that is already listed on category menu
                association_list.find("li").each(function(e,item){
                    var item_id = $(item).data("id"),
                        index = $.inArray(item_id, selected_values);
                    if (index !== -1){
                        selected_values.splice(index, 1);
                    } else {
                        $(item).remove();
                    }
                });
                new_values = selected_values;
                //If the values changed, we will get the Breadcrumb for each relation
                if(new_values != ""){
                    getNavigationXHR = $.ajax({
                        url : "{{ path('admin_pages_get_info_navigation') }}",
                        type: "POST",
                        data : {"ids":new_values},
                        success: function(data) {
                            if(data){
                                //Append the new associations to category menu
                                association_list.append(drawCategoryOption(data));
                                association_list.removeClass("empty");                                                  
                            } 
                            //Update Friendly Url's
                            updateComboCanonical();  
                            category_menu.find(".preloader").addClass("d-none");
                        }
                    });
                } else {
                    //Add the empty message on Association List if the list is empty
                    if( association_list.find("li").length == 0 || association_list.find(".empty-li").length > 0 ){
                        association_list.addClass("empty");
                        association_list.append(`
                            <li class="empty-li">
                                <p>{{ 'no_associated_categories'|trans({},"studio") }}</p>
                                <div class="btn btn-primary" data-toggle="modal" data-target="#categories-modal">{{ 'associar'|trans({},"studio") }}</div> 
                            </li>`);
                    }
                }
                if(getNavigationXHR == undefined || getNavigationXHR.readyState == 4)
                    category_menu.find(".preloader").addClass("d-none");
            });

            //CATEGORY REMOVE ASSOCIATION ========
            $(document).on("click",".js-remove-association",function(){
                var t = $(this);
                Swal.fire({
                    text: '{{ "warning_delete_category"|trans({},"studio") }}',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '{{ "confirmyes"|trans({},"studio") }}',
                    cancelButtonText: '{{ "confirmno"|trans({},"studio") }}'
                }).then((result) => {
                    if (result.value) {
                        if(!$("#categories-modal").hasClass("loaded"))
                        {   //If we do not open the category list before deleting, we need to load the list first and then remove the item.
                            loadCategoriesToModal(function(){
                                removeAssociationItem(t);
                            });
                        } 
                        else 
                        {
                            //If the list is already loaded.
                            removeAssociationItem(t);
                        }


                    }
                });

            });
            
            function removeAssociationItem(item){
                var t = $(item),
                    categories_modal = $("#categories-modal"),
                    association = t.closest("li"),
                    association_list = t.closest(".category-association-list"),
                    association_id = association.data("id"),
                    input_category = $("#menu-parent-category"),
                    current_associations = input_category.val();
                    current_associations = current_associations.split(',').map(function(item) {
                        return parseInt(item, 10);
                    });
                var index = $.inArray(association_id, current_associations);
                if (index !== -1)
                    current_associations.splice(index, 1);
                input_category.val(current_associations);
                association.remove();
                categories_modal.find(".treeSelector-input-box .title-item[data-value='"+association_id+"']").remove();
                categories_modal.find(".treeSelector-li-title-box[data-value='"+association_id+"'] input[type='checkbox']").prop("checked",false).removeAttr("disabled").removeClass("disabled");
                //Add the empty message on Association List if the list is empty
                if(association_list.find("li").length == 0){
                    association_list.addClass("empty");
                    association_list.append(`
                        <li class="empty-li">
                            <p>{{ 'no_associated_categories'|trans({},"studio") }}</p>
                            <div class="btn btn-primary" data-toggle="modal" data-target="#categories-modal">{{ 'associar'|trans({},"studio") }}</div> 
                        </li>`);
                }
                //Update Friendly Url's
                updateComboCanonical();  
            }

            //MOVE CATEGORIES MODAL ========
            $(document).on("show.bs.modal","#categories-move-modal",function(e){
                var t = $(this), 
                    relatedTarget = $(e.relatedTarget),
                    li = relatedTarget.closest("li"),
                    relation_id = li.data("id"), 
                    li_html = li.html();
                t.find(".category-association-list li").html(li_html);
                t.find("input[name='category_old_relation_id']").val(relation_id);
                if (getRelationsReq) {
                    getRelationsReq.abort();
                }
                {% if form.vars.value.id|default %}
                    //When we are editing the page
                    var urlReq = "{{ path('admin_pages_get_pages_relations',{'page': form.vars.value.id }) }}";
                {% else %}
                    //When we are creating a new the page
                    var urlReq = "{{ path('admin_pages_get_pages_relations_new') }}";
                {% endif %}
                getRelationsReq = $.ajax({
                    url : urlReq,
                    type: "GET",
                    data : {"type":"combo"},
                    success: function(data) {
                        var category_new_relation = t.find("select[name='category_new_relation']");
                        category_new_relation.html(drawCombo(data));
                        category_new_relation.select2();                       
                    }
                });

            });
            
            //CHANGE PAGES RELATIONS CLICK ========
            $(document).on("click",".js-btn-change-relations",function(){
                var t = $(this),
                    modal = t.closest(".modal"),
                    old_relation = modal.find("input[name='category_old_relation_id']").val(),
                    new_relation = modal.find("select[name='category_new_relation']").val(),
                    association_list = $(".category-menu .category-association-list"),
                    association_li = association_list.find(".association-li[data-id='"+old_relation+"']");
                $.ajax({
                    url : "{{ path('admin_pages_get_info_navigation') }}",
                    type: "POST",
                    data : {"ids":new_relation},
                    success: function(data) {
                        if(data){
                            //Update Association Category List                            
                            association_li.attr("data-new-relation",new_relation);
                            association_li.find(".association-name").text(data[new_relation].name);
                            association_li.find(".association-breadcrumb").text((data[new_relation].breadcrumb == "" ? "{{'raiz'|trans({},'studio')}}" + data[new_relation].breadcrumb : data[new_relation].breadcrumb));
                            //Update input hidden for new relations to update 
                            var li_new_relations = {};
                            association_list.find("li").each(function(){
                                var t = $(this), 
                                    li_id = t.data("id"), 
                                    li_new_relation = t.attr("data-new-relation");
                                if(li_id != li_new_relation && li_new_relation != undefined ){
                                    li_new_relations[li_id] = li_new_relation;
                                } else {
                                    delete li_new_relations[li_id];
                                }
                            });
                            $("#menu-parent-category-updated").val(JSON.stringify(li_new_relations));
                            //Update Friendly Url's
                            updateComboCanonical();   
                        }
                        modal.modal("hide");
                    }
                });

            });
			
			$('.std_pages_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 : $form.attr('action'),
                    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_pages_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_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('');
            });

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

            // Enable template
            $(".enable-template").click(function(){
                if( confirm("Are you sure you want to enable the template?") ){
                    // Remove IsMaster indicator
                    $("#page-structure-content").find(".hidden-is-master").remove();
                    $("#page-structure-content").find(".hidden-is-template").remove();
                    // Change Button
                    $(".add-blocks").show();
                    $(".enable-template").hide();
                    // Enable card remove
                    $("#page-structure-content").find(".card-remove").show();
                    // Enable Colorpicker
                    $(".colorpicker").spectrum("enable");
                    // Enable CKEDITOR
                    if(typeof CKEDITOR !== 'undefined'){
                        var cke = $("#page-structure-content").find("textarea");
                        {#TODO: Refactor, create a function#}
                        if( cke.length > 0 ){
                            cke.each(function(){
                                var ckeId = $(this).attr("id");
                                editor = CKEDITOR.instances[ckeId];
                                if (editor) {
                                    editor.setReadOnly(false);
                                }
                            });
                        }
                    }
                    // Enable all input
                    $("#page-structure-content").find("input, select").removeAttr('disabled');
                    $("#page-structure-content").find("input, select").removeAttr('readonly');
                    // Erase template from page
                    $("#std_pages_form_template_id").val("");
                    $(".select2-selection__rendered").html("Choose an option");
                }
            });

            // Load template blocks
            $('#std_pages_form_template_id').on('change', function(){
                if ($(this).val() > 0) {

                    var template = $(this).val();

                    // Remove all elements first
                    $(".structure-block").remove();

                    // Find the blocks from template
                    $.ajax({
                        url: "/{{ app.request.getLocale() }}/admin/requesttemplateblocks",
                        type: "GET",
                        dataType: "json",//change json
                        global: true,
                        cache: false,
                        data: "template="+template,
                        success: function(data) {
                            $("#page-structure-content").html(data.html);//data.nome de html
                            $(".add-blocks").hide();
                            $(".enable-template").show();
                            var elements = $(data.html).find('.block-content');
                            var detail = $(data.html).find('.structure-block');
                            var details = detail.prevObject;
                            arrDetail = [];
                            var i = 0;
                            details.each(function(){
                                arrDetail.push( $(this).attr("block-component") );
                            });
                            elements.each(function(){
                                // Find components
                                var $form = $(this).closest('form');
                                var dataSearch = {};
                                var block_id = $(this).attr('block');
                                var identifier = $(this).attr('counter');
                                var block_component = arrDetail[i];
                                dataSearch['block'] = block_id;
                                dataSearch['counter'] = identifier;
                                dataSearch['template'] = template;
                                dataSearch['blockComponent'] = block_component;
                                dataSearch['repeatable'] = 0;
                                i++;

                                // Find components
                                $.ajax({
                                    url : $form.attr('action'),
                                    type: "POST",
                                    data : dataSearch,
                                    success: function(html) {
                                        $(".dripicons-cross").hide();
                                        $('.block-content').filter('[block="'+block_id+'"]').filter('[counter="'+identifier+'"]').append('<div id="pagecontent_'+block_id+'_'+identifier+'"></div>');
                                        var element = $(html).find('[id^="std_pages_form_ajax-page-content-_-'+identifier+'-_-"]');
                                        var target = element.closest('.ajax-content');
                                        $('#pagecontent_'+block_id+'_'+identifier).replaceWith(
                                            target
                                        );
                                        initFileUpload('.fileupload.alone');
                                        initFileUpload('.ui-sortable-handle .fileupload');
                                        $(".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();

                                        // Disable COLORPICKER when initialize a Master Block
                                        $(".colorpicker").each(function(){
                                            var idElement = $(this)[0].id;
                                            var check = $('[id="'+idElement+'"]').closest('.card-body').find('[name*="isMaster"]');
                                            check.each(function(){
                                                if( $(this).length > 0 ){
                                                    // Disable Master
                                                    $(this).spectrum("disable");
                                                } else {
                                                    // Enabled
                                                    $(this).spectrum("enable");
                                                }
                                            });
                                        });
                                        el = $(html).find('[id="maxHotspotCounter"]');
                                        contador = parseInt( el.val() );
                                    }
                                });

                                initFileUpload('.fileupload.alone');
                                initFileUpload('.ui-sortable-handle .fileupload');
                                
                               $(".std-layout").val(data.layout).trigger('change');
                            });
                        }
                    });
                }
            });

            // 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 : $form.attr('action'),
                    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 : $form.attr('action'),
                    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 : $form.attr('action'),
                    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");
                    }
                });
			});

			function updateModel() {
				var values = $('#menu-parent-category').val();
				var valuesArray = values.split(",");
				var obj = {{ pagesRelations.content|json_encode|raw }};
				var html = "";
                html += '<li id="url_0" class="custom-control custom-radio radio-primary form-check"><input type="radio" id="choose-url-0" name="choose-url" value="0" class="choose-url custom-control-input"><label class="custom-control-label" for="choose-url-0">Root</label></li>';
				valuesArray.forEach(function(element){
					var url = searchTree({children:obj},element);
					if(!url) return;
					url = url.substr(3,url.length);
					html += '<li id="url_'+element+'" class="custom-control custom-radio radio-primary form-check"><input id="choose-url-'+element+'" type="radio" name="choose-url" value="'+element+'" class="choose-url custom-control-input"><label class="custom-control-label" for="choose-url-'+element+'">'+url+'</label></li>';
				});
				$("#choose-friendly-url-modal").find(".modal-choose-url").html(html);
			}
			updateModel();

			//Menus tree
			$('div.tree-menus').treeSelector({{ pagesRelationsMenu.content|json_encode|raw }}, [{{ pagesRelationsMenu.menuValues }}], function (e, values) {
				$('#menu-parent-menu').val(values);
				$("#choose-friendly-url-modal").find("input[name='menu']").val(0);
				var menuId = e.currentTarget.value;
				if(!e.currentTarget.checked) {
					var inputVal = $("#menu-parent-menu-url").val();
					var inputArray = inputVal.split(",");
					var valToRemove = "";
					inputArray.forEach(function(item) {
						if(item.startsWith(menuId+"_"))
							valToRemove = item;
					});
					if(valToRemove != "")
						inputVal = inputVal.replace(valToRemove,"");
					if(inputVal != ""){
						if(inputVal.startsWith(","))
							inputVal = inputVal.substr(1,inputVal.length);
						if(inputVal.endsWith(","))
							inputVal = inputVal.substr(0,inputVal.length-1);
					}
					$("#menu-parent-menu-url").val(inputVal);
					return;
				};
				$("#choose-friendly-url-modal").find("input[name='menu']").val(menuId);
				$(".show-choose-friendly-url").modal("show");
            },{

                // children checked/unchecked if true
                checkWithParent: false,

                // title with 'title1 - title 2' if true
                titleWithParent: false,

                // when item click, only view leaf title if true
                notViewClickParentTitle: false,

                // disable the plugin
                disabled: false,

                // placeholder if empty
                emptyOptonPlaceholder: '{% trans %}no options{% endtrans %}',

                // Disabled Items
                disabledItens: [{{ pagesRelations.actualPage }}],

                // Disabled Children from disabled items
                disabledChildren: true

            });

			$("#choose-friendly-url-modal").on("click",".save-modal-choose-friendly-url",function(e){
				e.preventDefault();
				var value = $("#choose-friendly-url-modal").find("input[name='choose-url']:checked").val();
				var menuId = $("#choose-friendly-url-modal").find("input[name='menu']").val();

				if((value != 0 && value != "") && (menuId != 0 && menuId != "")){
					var inputVal = $("#menu-parent-menu-url").val();
					var newVal = menuId+"_"+value;
					if(inputVal != "")
						inputVal = inputVal + "," + newVal;
						else
						inputVal = newVal;
					$("#menu-parent-menu-url").val(inputVal);
				}
			});

			$("#choose-friendly-url-modal").on("click",".close-modal-choose-friendly-url",function(e){
				e.preventDefault();
				var menuId = $("#choose-friendly-url-modal").find("input[name='menu']").val();
				var values = $('#menu-parent-menu').val();
				var inputArray = values.split(",");
				var valToRemove = "";
				if(menuId != 0 && menuId != ""){
					$("div.tree-menus").find(".checkbox[value='"+menuId+"']").prop("checked",false);
					$('.treeSelector-input-box').find("div[data-value='"+menuId+"']").remove();
					inputArray.forEach(function(item) {
						if(item == menuId)
							valToRemove = item;
					});
					if(valToRemove != "")
					values = values.replace(valToRemove,"");
					if(values != ""){
						if(values.startsWith(","))
						values = values.substr(1,values.length);
						if(values.endsWith(","))
						values = values.substr(0,values.length-1);
					}
					$("#menu-parent-menu").val(values);
				}
			});


			var pageId = $("#pageId").val();        
            var updatefromtitle = false;
			$("#std_pages_form_title").keyup(delay(function(e){                            
                var val = $(this).val();
                val = getFriendlyURL(val);
                $("#std_pages_form_url").val(val);
                updateComboCanonical();
                updatefromtitle = true;				
            },500));

            $("#std_pages_form_url").keyup(function(){
                var val = $(this).val();
                val = getFriendlyURL(val);
                $(this).val(val);
                if(!updatefromtitle)
                    updateComboCanonical();
                updatefromtitle = false;	
            });

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

			}

			function delay(callback, ms) {
				var timer = 0;
				return function() {
					var context = this, args = arguments;
					clearTimeout(timer);
					timer = setTimeout(function () {
						callback.apply(context, args);
					}, ms || 0);
				};
            }

            $(".tree-category .treeSelector-li-title-box").on("click", ".checkbox", function(){
                setTimeout(updateComboCanonical, 500);
            });

            $(".tree-category .treeSelector-input-box").on("click", ".dripicons-cross", function(){
                setTimeout(updateComboCanonical, 500);
            });

            if(pageId){
                setTimeout(updateComboCanonical(), 1000);
            }
           $("#std_pages_form_languageCode").change(function(){               
                $( "#std_pages_form_title" ).trigger( "keyup" );
            });

            var findfriendlyurlReq;
            function updateComboCanonical(){
                if($('#std_pages_form_languageCode').val()){
                    var options = $("#menu-parent-category").val();
                    if(options != "" ){
                        options = options.split(",");
                    }
                    nextElement = $("#std_pages_form_canonical_url").next();
                    if( nextElement.hasClass("select2") ){
                        nextElement.remove();
                    }
                    var s = $('<select id="std_pages_form_canonical_url" name="std_pages_form[canonical_url]" />');
                    if(options != "" && options.length > 0){                        
                        var dataSearch = {};
                        dataSearch['language'] = $('#std_pages_form_languageCode').val();
                        dataSearch['url'] = $("#std_pages_form_url").val();
                        dataSearch['arrRelationId'] = options;
                        dataSearch['pageId'] = pageId;
                        if(dataSearch['url'] == "")
                            dataSearch['url'] = getFriendlyURL($("#std_pages_form_title").val());
                        if (findfriendlyurlReq) {
                            findfriendlyurlReq.abort();
                        }
                        findfriendlyurlReq = $.ajax({
                            url: "/admin/friendly/findfriendlyurl",
                            type: "POST",
                            data : dataSearch,
                            dataType: 'json',
                            success: function(res) {
                                res.forEach(function(item){
                                    if( item.canonical == true ){
                                        $('<option />', {value: item.url, text: item.url}).prop('selected', true).appendTo(s);
                                    } else {
                                        $('<option />', {value: item.url, text: item.url}).appendTo(s);
                                    }
                                });
                            }
                        });
                    } else {
                        {% if friendlyUrl|default %}
                            {% for furl in friendlyUrl %}
                                {% if furl.isCanonical %}
                                    $('<option />', {value: "{{ furl.url }}", text: "{{ furl.url }}"}).prop('selected', true).appendTo(s);
                                {% else %}
                                    $('<option />', {value: "{{ furl.url }}", text: "{{ furl.url }}"}).appendTo(s);
                                {% endif %}
                            {% endfor %}
                        {% else %}
                            // ZERAR COMBO
                            $("#std_pages_form_canonical_url").replaceWith('<select id="std_pages_form_canonical_url" />');
                            var title = $("#std_pages_form_url").val();
                            if( title ){
                                label = '/'+$('#std_pages_form_languageCode').val()+'/'+title;
                                $('<option />', {value: label, text: label}).appendTo(s);
                            }
                        {% endif %}
                    }
                    $("#std_pages_form_canonical_url").replaceWith(s);
                    $("#std_pages_form_canonical_url").select2();
                }
            }


            // $('.btn-preview').click(function(){
            //     event.preventDefault()                
            //     $('[name=std_pages_form]').attr('target','_blank')                         
            //     $('[name=std_pages_form]').attr('action','{{ app.request.getSchemeAndHttpHost() }}/'+$('#std_pages_form_languageCode').val()+'/preview')
            //     $('[name=std_pages_form]').submit();
            //     $('[name=std_pages_form]').attr('target','_self')
            //     $('[name=std_pages_form]').removeAttr('action');
            // });

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

            // SAVE
            $("button[name='std_pages_form[save]']").on("click",function(e){

                if (!$("#std_pages_form").valid()) {
                    Swal.fire({
                        text: '{% trans %}form_is_not_valid{% endtrans %}',
                        type: 'error'
                    });
                    return false;
                }
                $("#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());
                $(this).addClass("qt-loader qt-loader-mini qt-loader-right");
            });
			
		});

        const input = document.getElementById('std_pages_form_meta_title');
        const counter = document.getElementById('span_meta_title_char_counter');
        counter.textContent = input.value.length + ' {% trans %} chars {% endtrans %}';
        input.addEventListener('input', function() {
        counter.textContent = input.value.length + ' {% trans %} chars {% endtrans %}';
        });

        const input2 = document.getElementById('std_pages_form_meta_description');
        const counter2 = document.getElementById('span_meta_desc_char_counter');
        counter2.textContent = input2.value.length + ' {% trans %} chars {% endtrans %}';
        input2.addEventListener('input', function() {
        counter2.textContent = input2.value.length + ' {% trans %} chars {% endtrans %}';
        });


        // Draw Category tree
        function drawCategoryTree(pagesRelations)
        {
            var selectedValues = [];
            if(pagesRelations.values != ""){
                selectedValues = pagesRelations.values.split(',').map(Number);
            }
            selectedValues.push({{pagesRelations.actualPage }});
            {% if pagesRelations.disabled|default %}
                selectedValues.push({{pagesRelations.disabled }});
            {% endif %}
            $('div.tree-category').treeSelector(pagesRelations.content, selectedValues, function (e, values) {
                values = jQuery.grep(values, function(value) {
                    return jQuery.inArray(parseInt(value), [{{pagesRelations.actualPage }}]) == -1;
                });
				$('#menu-parent-category').val(values);
				var relationId = e.currentTarget.value;
				if(!e.currentTarget.checked) {
					var inputVal = $("#menu-parent-menu-url").val();
					var menuSelect = $('#menu-parent-menu').val();
					var inputArray = inputVal.split(",");
					var valToRemove = "";
					var menuToRemove = "";
					inputArray.forEach(function(item) {
						if(item.endsWith("_"+relationId)){
							valToRemove = item;
							menuToRemove = item.replace("_"+relationId,"") + ",";
						}
					});
					if(valToRemove != "")
						inputVal = inputVal.replace(valToRemove,"");
					if(inputVal != ""){
						if(inputVal.startsWith(","))
							inputVal = inputVal.substr(1,inputVal.length);
						if(inputVal.endsWith(","))
							inputVal = inputVal.substr(0,inputVal.length-1);
					}
					if(menuToRemove != ""){
						menuSelect = menuSelect.replace(menuToRemove,"");
						if(menuSelect != ""){
							if(menuSelect.startsWith(","))
								menuSelect = menuSelect.substr(1,menuSelect.length);
							if(menuSelect.endsWith(","))
								menuSelect = menuSelect.substr(0,menuSelect.length-1);

							menuSelect = menuSelect.split(",");
							menuSelect.forEach(function(id){
								$("div.tree-menus").find(".checkbox[value='"+id+"']").prop("checked",false);
								$('.treeSelector-input-box').find("div[data-value='"+id+"']").remove();
							});
						}
						$('#menu-parent-menu').val(values);
					}
					$("#menu-parent-menu-url").val(inputVal);
					$("#url_"+relationId).remove();
					return;
			    };

			   var obj = {{ pagesRelations.content|json_encode|raw }};
			   var html = "";
               html += '<li id="url_0" class="custom-control custom-radio radio-primary form-check"><input type="radio" id="choose-url-0" name="choose-url" value="0" class="choose-url custom-control-input"><label class="custom-control-label" for="choose-url-0">Root</label></li>';
			   values.forEach(function(element){
				   var url = searchTree({children:obj},element);
                   if(url){
                       url = url.substr(3,url.length);
                       html += '<li id="url_'+relationId+'" class="custom-control custom-radio radio-primary form-check"><input id="choose-url-'+relationId+'" type="radio" name="choose-url" value="'+relationId+'" class="choose-url custom-control-input"><label class="custom-control-label" for="choose-url-'+relationId+'">'+url+'</label></li>';
                   }
			   });
			   $("#choose-friendly-url-modal").find(".modal-choose-url").html(html);
            } ,{
                checkWithParent: false,
                titleWithParent: false,
                notViewClickParentTitle: false,
                disabled: false,
                emptyOptonPlaceholder: '{% trans %}no options{% endtrans %}',
                disabledItens: selectedValues,
                actualPage: [{{ pagesRelations.actualPage|default }}],
                disabledChildren: false,
                selectCanonical: true,
                showDeleteButtonOnSelected: false
            });
        }

        function drawCombo(values)
        {  
            var html = ['<option value="">{{ "chooseoption"|trans({},"studio") }}</option>'];
            for (key in values) {
                html += '<option value="'+key+'">'+values[key]+'</option>';                                
            }
            return html;            
        }

        function drawCategoryOption(values){
            var option = "", breadcrumb = "";
            for (key in values) {
                if(values[key].breadcrumb == "")
                    breadcrumb = values[key].breadcrumb;
                else
                    breadcrumb = "> " + values[key].breadcrumb;
                option += `<li class="association-li" data-id="${key}">
                    <div class="col pl-0">
                        <div class="association-name">${values[key].name}</div>    
                        <div class="association-breadcrumb">
                            {{'raiz'|trans({},'studio')}} ${breadcrumb}                                                           
                        </div>
                    </div>
                    <div class="col-auto pr-0 association-actions">
                        <a href="javascript:void(0)"><i class="icons dripicons-network-3" data-toggle="modal" data-target="#categories-move-modal"></i></a>
                        <a href="javascript:void(0)"><i class="icons dripicons-trash js-remove-association"></i></a>
                    </div>
                </li>`;
            }
            return option;
        }

        function searchTree(element, id,urlParent = "")
        {
            var url = "";
            if(element.value == id){
                url = urlParent + " > " + element.title;
                return url;
            }else if (element.children != null){
                var i;
                var result = null;
                for(i=0; result == null && i < element.children.length; i++){
                    if(element.title)
                        url = urlParent + " > " + element.title;
                    result = searchTree(element.children[i], id,url);
                }
                return result;
            }
            return null;
        }

    </script>
{% endblock %}