{% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}

{% block title %} 
    {% trans %}Custom Fields{% endtrans %}
{% endblock %}

{% block templateCSS %}
    <style>
        .hide {
            display: none;
        }
        .controls ul {
            list-style: none;
            padding: 0;
            margin: 0;
            color: #434A54;
        }
        .controls ul li[draggable] {
            display: block;
            border: 1px dashed gray;
            box-sizing: border-box;
            padding: 5px 10px;
            margin-top: 10px;
            border-radius: 2px;
            cursor: pointer;
        }
        .controls ul li:hover {
            background-color: #e9f1ff;
        }
        .td-input {
            width: 80%;
        }
        .td-input,
        .td-button {
            border: 1px solid #ddd !important;
        }
        .td-button {
            width: 10%;
            text-align: center;
        }
        .td-button span {
            cursor: pointer;
        }
        input[type=checkbox] {
            width: 16px;
            height: 16px;
            vertical-align: top;
        }
        .validation,
        .encryption {
            display: none;
            margin-bottom: 10px;
        }
        .tab {
            background-color: inherit;
            border: none;
        }
        .uv-checkbox input {
            cursor: pointer;
            margin: 0;
        }
        #field_save {
            margin-bottom: 20px;
        }
        .tab,
        .selected {
            padding: 10px;
            border: none;
            cursor: pointer;
        }
        .tab:hover {
            border-bottom: solid 3px #7C70F4;
        }
        .selected {
            position: relative;
            border-bottom: solid 3px #7C70F4;
            background-color: #fff;
        }
        #choices {
            display: none;
        }
        li.list-group-item {
            background-color: #fafafa;
            border-bottom: 1px solid #D3D3D3;
            position: relative;
            user-select: none;
        }
        .list-group-item>span:first-child {
            display: inline-block;
            vertical-align: top;
            width: 30px;
        }
        .list-group-item>span:first-child span {
            position: absolute;
            top: 56px;
            left: 15px;
        }
        .list-group-item > div {
            display: inline-block;
            width: calc(100% - 50px);
            padding: 15px 10px;
        }
        .list-group-item label,
        .validation label,
        label.full-label {
            display: block;
        }
        .list-group-item input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
        .list-group-item textarea {
            background-color: #fff !important;
            cursor: default;
        }
        .list-group-item input[type=file] {
            cursor: default;
            padding: 0 4px;
            -webkit-padding-before: 4px;
        }
        .list-group-item textarea {
            resize: none;
        }
        #custom-field-table {
            border-collapse: collapse;
        }
        .controls h2:first-child {
            color: #9d9d9d;
            font-weight: bold;
            font-size: 18px;
        }
        .dependency {
            max-height: 150px;
            overflow: auto;
        }
        .info {
            font-size: 16px;
            color: #6F6F6F;
        }
        [draggable] {
            -webkit-user-drag: element;
            -khtml-user-drag: element;
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }
        ::placeholder,
        ::-webkit-input-placeholder,:-moz-placeholder,
        ::-moz-placeholder,:-ms-input-placeholder {
            font-size: 14px;
        }
        .uv-mar-10 {
            margin: 10px;
        }
        .badge-processing {
            cursor: not-allowed;
            opacity: 0.65;
        }
        .badge-processing>i:before {
            content: "\f110";
        }
        .dashed {
            border: 1px dashed #999999 !important;
        }
        .rel {
            position: relative;
        }
        span.disabledWrapper {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 999;
        }
        .badge-status-disabled,
        .badge-status-disabled:hover {
            cursor: not-allowed !important;
        }
        .controls {
            width: 250px;
            border: 1px solid #D3D3D3;
            padding: 15px;
            border-radius: 4px;
            margin-right: 20px;
            vertical-align: top;
            display: inline-block;
        }
        .custom-field-list-wrapper {
            display: inline-block;
            width: 60%;
        }
        .custom-field-list-wrapper > .uv-message-wrapper {
            margin: 0 0 25px;
        }
        .custom-field-list {
            border: 1px solid #D3D3D3;
            border-radius: 4px;
            padding: 8px;
            vertical-align: top;
            position: relative;
        }
        .list-group {
            list-style-type: none;
            margin: 0;
            padding: 0;
            border: 1px solid #D3D3D3;
            border-bottom: none;
        }
        .mar-bottom-15 {
            margin-bottom: 15px !important;
        }
        .add-edit-form label {
            display: block;
        }
        .titlebar {
            border-bottom: 1px solid #D3D3D3;
            margin-left: 10px;
            margin-right: -10px;
        }
        .titlebar button:active,
        .titlebar button:focus {
            outline: none;
        }
        .titlebar button {
            font-size: 15px;
        }
        #customfield-form {
            border-bottom: 1px solid #d3d3d3;
        }
        form[name="field"] {
            padding-left: 20px;
        }
        .customfield-form {
            margin: 10px;
            border-collapse: collapse;
            user-select: none;
        }
        .cf-actions {
            position: absolute;
            right: 5px;
            top: 5px;
        }
        .table-bordered {
            width: 100%;
            border: 1px solid #D3D3D3;
            border-collapse: collapse;
            margin: 15px 0;
        }
        .table-bordered th {
            padding: 10px;
        }
        .cf-actions span {
            cursor: pointer;
        }
        .custom-field-list .uv-select[disabled="disabled"],
        .custom-field-list .uv-field[disabled="disabled"] {
            background-color: #fff !important;
        }
        .uv-add-margin {
            margin: 15px 0;
        }
        li+.no-result-msg {
            display: none;
        }
        .no-result-msg {
            border-bottom: 1px solid #dedede;
            padding-bottom: 10px;
            margin-bottom: 0 !important;
        }
        .last-tr {
            border: 1px solid #d3d3d3;
        }
        .last-tr .uv-cf-add {
            vartical-align: top;
        }
        .note-btn {
            margin-left: 5px;
        }
        .custom-field-list .uv-loader {
            margin-left: 40%;
        }
        @media screen and(max-width: 500px) {
            .custom-field-list-wrapper {
                width: 250px;
                margin-top: 10px;
            }
        }
        .custom-field-list .uv-element-block {
            width: 100%;
        }
        .uv-xtra-info {
            font-weight: bold;
            margin-left: 5px;
            font-style: normal;
            cursor: help;
        }
        .uv-margin-bottom-15 {
            margin-bottom: 15px;
        }
    </style>
{% endblock %}

{% block pageContent %}

    <div class="uv-inner-section" id="content">
        
        {# Append Panel Aside #}
        {% set asideTemplate = 'Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\AsideTemplate' %}
        {% set asideSidebarReference = 'Webkul\\UVDesk\\CoreFrameworkBundle\\UIComponents\\Dashboard\\Panel\\Sidebars\\Settings' %}
        {{ uvdesk_extensibles.getRegisteredComponent(asideTemplate).renderSidebar(asideSidebarReference) | raw }}
        
        <div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">    
            <h1 class="uv-margin-bottom-15">
                {{ 'Custom Fields'|trans }}
            </h1>
            <div id="custom_fields">
                <div class="sidebarcontent right controls">
                    <h2>{% trans %}CONTROLS{% endtrans %}</h2>
                    <div>
                        <p class="info"><i>{{ 'Drag Available Controls to right Canvas'|trans }}</i></p>
                        <ul>
                            <li draggable="true">
                                <span class="uv-cf-textbox"></span>
                                <span data-field="text">
                                    {% trans %}Text Box{% endtrans %}
                                </span>
                            </li>
                            <li draggable="true">
                                <span class="uv-cf-textarea"></span>
                                <span data-field="textarea">
                                    {% trans %}Text Area{% endtrans %}
                                </span>
                            </li>
                            <li draggable="true">
                                <span class="uv-cf-select"></span>
                                <span data-field="select">
                                    {% trans %}Select{% endtrans %}
                                </span>
                            </li>
                            <li draggable="true">
                                <span class="uv-cf-radio"></span>
                                <span data-field="radio">
                                    {% trans %}Radio{% endtrans %}
                                </span>
                            </li>
                            <li draggable="true">
                                <span class="uv-cf-checkbox"></span>
                                <span data-field="checkbox">
                                    {% trans %}Checkbox{% endtrans %}
                                </span>
                            </li>
                            <li draggable="true">
                                <span class="uv-cf-file"></span>
                                <span data-field="file">
                                    {% trans %}File{% endtrans %}
                                </span>
                            </li>
                            <li draggable="true">
                                <span class="uv-cf-date"></span>
                                <span data-field="date">
                                    {% trans %}Date{% endtrans %}
                                </span>
                            </li>
                            <li draggable="true">
                                <span class="uv-cf-time"></span>
                                <span data-field="time">
                                    {% trans %}Time{% endtrans %}
                                </span>
                            </li>
                            <li draggable="true">
                                <span class="uv-cf-date-time"></span>
                                <span data-field="datetime">
                                    {% trans %}Both Date and Time{% endtrans %}
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="custom-field-list-wrapper">
                    <div id="custom-fields" class="custom-field-list">
                        <ul class="list-group list-lg">
                            <div class="uv-loader">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </ul>
                    </div>
                </div>

                <div class="uv-pop-up-overlay uv-no-error-success-icon" id="hints">
                    <div class="uv-pop-up-box uv-pop-up-wide">
                        <span class="uv-pop-up-close"></span>
                        <h2>{% trans %}Regular Expression Hints{% endtrans %}</h2>
                        <div class="modal-body">
                            <p>
                                {{ "Select 'Regular Expression'(regex) which will matched against input value of custom Field. You can also enter any custom Regular Expression without delimiters."|trans }}
                            </p>
                            <div class="uv-split-copy">
                                <input class="uv-split-field" value="^[1-9][0-9]*$">
                                <button type="button" class="uv-btn uv-split-btn placeholders" value="^[1-9][0-9]*$">{% trans %}Number{% endtrans %}</button>
                            </div>
                            <div class="uv-split-copy">
                                <input class="uv-split-field" value="^#?([a-f0-9]{6}|[a-f0-9]{3})$">
                                <button type="button" class="uv-btn uv-split-btn placeholders" value="^#?([a-f0-9]{6}|[a-f0-9]{3})$">{% trans %}Hex Value{% endtrans %}</button>
                            </div>
                            <div class="uv-split-copy">
                                <input class="uv-split-field" value="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$">
                                <button type="button" class="uv-btn uv-split-btn placeholders" value="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$">{% trans %}Email{% endtrans %}</button>
                            </div>
                            <div class="uv-split-copy">
                                <input class="uv-split-field" value="^((?!string).)*$">
                                <button type="button" class="uv-btn uv-split-btn placeholders" value="^((?!string).)*$">{% trans %}Deny String{% endtrans %}</button>
                            </div>
                            <div class="uv-split-copy">
                                <input class="uv-split-field" value="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$">
                                <button type="button" class="uv-btn uv-split-btn placeholders" value="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$">{% trans %}Ip Address{% endtrans %}</button>
                            </div>
                            <div class="uv-split-copy">
                                <input class="uv-split-field" value="^[a-z0-9_-]{3,16}$">
                                <button type="button" class="uv-btn uv-split-btn placeholders" value="^[a-z0-9_-]{3,16}$">{% trans %}Username{% endtrans %}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block footer %}
    {{ parent() }}
    <script type="text/field" id="field-form">
        <div class="customfield-form">
            <div class="titlebar">
                <button id="propertybtn" class="tab selected" data-view="property">
                    {% trans %}Properties{% endtrans %} 
                </button>
                <button id="validationbtn" class="tab" data-view="validation">
                    {% trans %}Validation{% endtrans %} 
                </button>
                <button id="encryptionbtn" class="tab" data-view="encryption">
                    {% trans %}Security{% endtrans %} 
                </button>
            </div> 
                <form name="field">
                    <div class="property tab-view">
                        <div class="uv-element-block required ">
                            <label for="field_name" class="required full-label">{% trans %}Label{% endtrans %}</label>
                            <input type="text" id="field_name" name="name" required="required" class="uv-field" value="<%- name %>" >
                        </div>

                        <div class="uv-element-block">
                            <label for="field_dependency" class="required">{% trans %}Dependency{% endtrans %}</label>
                            <div class="dependency" >
                                {% for type in types %}
                                    <div class="uv-element-block">
                                        <div class="uv-checkbox">
                                            <input type="checkbox" name="customFieldsDependency[{{ loop.index }}][id]" value="{{type.id}}" id="dependency{{ loop.index }}" > 
                                            <span class="uv-checkbox-view"></span>
                                        </div>
                                        <span class="uv-checkbox-label" for="dependency{{ loop.index }}">
                                            {{type.code|capitalize}}
                                        </span>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="uv-field-info">
                                {{ 'Dependent custom field show only when checked Type is Selected by user'|trans }}
                                <span class="uv-xtra-info" data-toggle="tooltip" data-placement="top" title="{{ 'don\'t select any checkbox to show Custom Field irrespective of type'|trans }}">[?]</span>
                            </div>                            
                        </div>

                        <div class="uv-element-block required">
                            <label for="field_agentType" class="required full-label">
                                {% trans %}Use in{% endtrans %}
                            </label>
                            <select id="field_agentType" class="uv-select" name="agentType" required="required">
                                <option value="apps" <% if(agentType == 'apps') { %>selected<%  } %> >
                                    {{ 'Apps'|trans }}
                                </option>
                                <option value="customer" <% if(agentType == 'customer') { %>selected<%  } %> >
                                    {{ 'Customer Panel'|trans }}
                                </option>
                                <option value="user" <% if(agentType == 'user') { %>selected<%  } %> >
                                    {{ 'Agent Panel'|trans }}
                                </option>
                                <option value="both" <% if(agentType == 'both') { %>selected<%  } %> >
                                    {{ 'Everywhere'|trans }}
                                </option>
                            </select> 
                            <div class="uv-field-info">
                                {{ 'Use in specifies where this custom field will be used/displayed'|trans }}
                                <span class="uv-xtra-info" data-toggle="tooltip" data-placement="top" title="Select option Apps to display Custom field only in FormBuilder and Binaka Apps">[?]</span>
                            </div>
                        </div>
                        <input type="hidden" id="field_fieldtype" name="fieldType" value="<%- fieldType %>">

                        <% if(-1 == ['radio','checkbox','file','date','time','datetime','select'].indexOf(fieldType)) { %>
                            <div class="uv-element-block">
                                <label for="field_value" class="required">{% trans %}Placeholder{% endtrans %}</label>
                                <br/>
                               <input type="text" name="placeholder" class="uv-field" id="field_value" value="<%- placeholder %>" >
                            </div>
                        <% } %>
                        <div class="uv-no-error-success-icon">
                            <input type="hidden" id="field_sortOrder" name="sortOrder" required="required" class="uv-field" value="<%- sortOrder %>" >
                        </div>
                        
                        <div class="uv-element-block mar-bottom-15">
                            <label class="uv-field-label">{% trans %}Status{% endtrans %}</label>
                            <div class="uv-element-block">
                                <label for="field_status">
                                    <div class="uv-checkbox">
                                        <input type="checkbox" id="field_status" name="status" value="1" <% if(typeof(status) != 'undefined' && status == true ) print('checked') ; %> >
                                        <span class="uv-checkbox-view"></span>
                                    </div>
                                    <span class="uv-checkbox-label">{% trans %}Field is Active{% endtrans %}</span>
                                </label>
                            </div>
                        </div>

                        <div class="uv-element-block mar-bottom-15">
                            <label class="uv-field-label">{% trans %}Required{% endtrans %}</label>
                            <div class="uv-element-block">
                                <label for="field_required">
                                    <div class="uv-checkbox">
                                        <input type="checkbox" id="field_required" name="required" value="1" <% if(typeof(required) != 'undefined' && required == true ) print('checked') ; %> >
                                        <span class="uv-checkbox-view"></span>
                                    </div>
                                    <span class="uv-checkbox-label">{% trans %}is Required{% endtrans %}</span>
                                </label>
                            </div>
                        </div>

                        <div class="uv-element-block mar-bottom-15">
                            <label class="uv-field-label">{% trans %}Decider{% endtrans %}</label>
                            <div class="uv-element-block">
                                <label for="field_decider">
                                    <div class="uv-checkbox">
                                        <input type="checkbox" id="field_decider" name="decider" value="1" <% if(typeof(decider) != 'undefined' && decider == true ) print('checked') ; %> >
                                        <span class="uv-checkbox-view"></span>
                                    </div>
                                    <span class="uv-checkbox-label">{% trans %}Enable Decider{% endtrans %}</span>
                                </label>
                            </div>
                        </div>

                        <div class="uv-element-block">
                            <table class="table table-bordered uv-no-error-success-icon" id="custom-field-table" <% if(['select','radio', 'checkbox'].indexOf(fieldType) == -1) { print('style="display: none"'); } %> >
                                <thead>
                                    <tr>
                                        <th title="add at least one">
                                            <div class="uv-text-center">{{ 'Choice Name(s)'|trans }}</div>
                                            <input name="customFieldValues" disabled="disabled" class="hide">                                            
                                        </th>
                                        <th></th>
                                    </tr>
                                </thead>  
                                <tbody>
                                    <% if(typeof(customFieldValues) != 'undefined') { %>
                                        <% customFieldValuesSorted = _.sortBy(customFieldValues, function(field) {
                                            return field.sortOrder;
                                        }); %>
                                        <% if(customFieldValuesSorted.length) { %>
                                            <% _.each(customFieldValuesSorted, function(customFieldValue,key){ %>
                                            <tr>
                                                <td class="td-input">
                                                    <span class="uv-icon-drag uv-mar-10"></span>
                                                    <input type="hidden" name="customFieldValues[<%= key %>][id]" value="<%= customFieldValue.id %>  "/>
                                                    <input type="text" name="customFieldValues[<%= key %>][name]"  class="uv-field fieldvalue" value="<%- customFieldValue.name %>"/>
                                                    <input type="hidden" name="customFieldValues[<%= key %>][sortOrder]" class="sortorderField" value="<%= customFieldValue.sortOrder %>"/>
                                                </td>
                                                <td class="td-button">
                                                    <span class="uv-cf-trash remove-field"></span>
                                                </td>
                                            </tr>
                                            <% }); %>
                                        <% } else { %>
                                            <tr>
                                                <td class="td-input">
                                                    <span class="uv-icon-drag uv-mar-10"></span>
                                                    <input type="hidden" name="customFieldValues[0][id]" value=""/>
                                                    <input type="text" name="customFieldValues[0][name]"  class="uv-field fieldvalue" value=""/>
                                                    <input type="hidden" name="customFieldValues[0][sortOrder]" class="sortorderField" value="1"/>
                                                </td>
                                                <td class="td-button">
                                                    <span class="uv-cf-trash remove-field"></span>
                                                </td>
                                            </tr>
                                        <% } %>
                                    <% } %>
                                </tbody>
                                <tfoot>
                                    <tr class="last-tr">
                                        <td></td>
                                        <td class="td-button">
                                            <span class="uv-cf-add" id="add-custom-fields"></span>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        

                        {% if formErrors.choice is defined %}
                            <div class="text-danger">
                                {{formErrors.choice}}
                            </div>
                        {% endif %}        
                    </div>
                    <% if(typeof(validation) != 'undefined' ) { %>
                        <div class="validation tab-view uv-no-error-success-icon">
                            <% if(fieldType == 'text') { %>
                                <div class="text-validation">
                                    <div class="uv-element-block required">
                                        <label>Input type</label>
                                        <select class="uv-select" name="validation[fieldtype]" id="val_fieldtype">
                                            <option value="text" <% if(validation.fieldtype == 'text') { %>selected<%  } %>>
                                                {% trans %}Default (Text){% endtrans %}
                                            </option>
                                            <option value="number" <% if(validation.fieldtype == 'number') { %>selected<% } %>>
                                                {% trans %}Number{% endtrans %}
                                            </option>
                                            <option value="email" <% if(validation.fieldtype == 'email') { %>selected<% }%>>
                                                {% trans %}Email{% endtrans %}
                                            </option>   
                                            <option value="url" <% if(validation.fieldtype == 'url') { %>selected<% }%>>
                                                {% trans %}url{% endtrans %}
                                            </option>
                                            <option value="password" <% if(validation.fieldtype == 'password') { %>selected<% }%>>
                                                {% trans %}password{% endtrans %}
                                            </option> 
                                        </select>
                                    </div>
                                </div>             
                                <div class="subText-validation">
                                    <div id="select-number" class="uv-element-block required  <% if(validation.fieldtype != 'number') print('hide') %>">
                                        <label>{% trans %}Range{% endtrans %}</label>
                                        <input type="number" class="uv-field" name="validation[minNo]" placeholder="{{ 'min value'|trans }}" value="<%- validation.minNo %>" /> 
                                        <input type="number" class="uv-field" name="validation[maxNo]" placeholder="{{ 'max value'|trans }}" value="<%- validation.maxNo %>"/> 
                                    </div>
                                    <div id="select-email" class="uv-element-block <% if(validation.fieldtype != 'email') print('hide') %>">
                                        <label>{% trans %}Allowed domains{% endtrans %}</label>
                                        <input type="text" class="uv-field" name="validation[allowedDomain]" value="<%- validation.allowedDomain %>"/>
                                        <label>{% trans %}Restricted domains{% endtrans %}</label>
                                        <input type="text" class="uv-field" name="validation[restrictedDomain]" value="<%- validation.restrictedDomain %>"/>
                                    </div>
                                </div>
                            <% } else if(fieldType == 'file') { %>
                                <div class="file-validation uv-element-block required">
                                    <label>{% trans %}Max size(in kb){% endtrans %}</label>
                                    <input type="number" class="uv-field" name="validation[maxFileSize]" max="25600" value="<%- validation.maxFileSize %>" />
                                </div>
                            <% } %>
                            <% if(fieldType == 'text' || fieldType == 'textarea') { %>           
                                <div class="uv-element-block">         
                                    <label >{% trans %}Regular Expression{% endtrans %}</label>
                                    <input type="text" class="uv-field" name="validation[regex]" id="val_regex" placeholder="{{ 'custom regex'|trans }}" value="<%= validation.regex %>" />
                                    <button type="button" class="note-btn uv-open-popup uv-btn-small" title="regex-hints" data-target="hints">
                                        <span class="uv-icon-hint"></span>
                                    </button>
                                </div>
                        <% } else { %>
                            <input type="hidden" name="validation[regex]" />
                        <% } %>
                            <% if(fieldType != 'text' && fieldType != 'textarea' && fieldType != 'file') { %>   
                                <div class="uv-element-block">
                                    {{ 'No validation rules available for %fieldtype% type Fields'|trans({'%fieldtype%': '<i><%- fieldType %></i>'})|raw }}
                                </div>
                            <% } %>
                        </div>
                    <% } %>
                    <div class="encryption tab-view">
                        <div>
                            <div class="uv-element-block">
                                <p>{{ 'UVdesk now comes with PCI DSS link security. Select your required "Custom Field" in which you want to put encryption and confirm those data whenever a user access it on your ticket system.'|trans }}</p>
                            </div>
                            <div class="uv-element-block">
                                <div class="uv-checkbox">
                                    <input type="checkbox" name="encryption" id="field_encryption" value="1" <% if(typeof(encryption) != 'undefined' && encryption == true ) print('checked') ; %>>
                                    <span class="uv-checkbox-view"></span>
                                </div>
                                <label for="field_encryption" class="uv-checkbox-label required">{% trans %}Encrypt Field{% endtrans %}</label>
                            </div>
                        </div>
                    </div>
                    <button type="submit" id="field_save" name="field[save]" class="uv-btn"><% if('undefined' == typeof(id)) { %>{{ 'Add Field'|trans }}<% } else { %>{{ 'Update Field' }}<% } %></button>
                </form>
        </div>
    </script>

    <script type="text/field" id="field-add">
        <span>
            <span class="uv-icon-drag" title="{{ 'Sortable Custom fields'|trans }}"></span>
        </span>
        <span class="cf-actions">
            <span class="uv-cf-edit <% if(typeof id == 'undefined') { %>hide<% } %>"></span>
            <% if(typeof id != 'undefined') { %>
            {#
                <span class="uv-cf-edit
                    <% if(status == '1') { %> badge-green <% } else { %> badge-red <% } %>">
                    <i class="fa 
                    <% if(status == '1') { %> fa-eye <% } else { %> fa-eye-slash <% } %>">
                    </i>
                </span>
            #}
            <% } %>
            <span class="uv-cf-remove
                <% if(typeof id != 'undefined') { %> fields-delete <% } else { %> remove-temporary <% } %>"><i class="fa fa-times"></i>
            </span>
        </span>
        <div>
            <label 
                <% if(typeof id != 'undefined') { %>data-id="<%= id %>" <% } %>><%- name %>
            </label>
            <span class="rel">
                <% if(fieldType == 'textarea') { %>
                    <textarea class="uv-field" readonly onfocus="this.blur()"></textarea>
                <% } else if(fieldType == 'select') { %>
                    <select disabled="disabled" class="uv-select"></select>
                    <span class="disabledWrapper for-select"></span>
                <% } else if(fieldType == 'datetime') { %>
                    <input type="datetime-local" class="uv-field" disabled=disabled>
                    <span class="disabledWrapper for-dateTime"></span>
                <% } else if(fieldType == 'radio' || fieldType == 'checkbox') { %>
                    <div class="uv-add-margin">
                        <input type="<%- fieldType %>" disabled=disabled width="10%"> Option
                        <span class="disabledWrapper for-Radio"></span>
                    </div>
                <% } else { %>
                    <input type="<%- fieldType %>" class="uv-field" disabled="disabled" />
                    <span class="disabledWrapper for-Text"></span>
                <% } %>
            </span>
        </div>
    </script>

    <script type="text/field" id="field-blank">
        <div class="uv-element-block uv-text-center no-result-msg">
            {% trans %}No Custom Field(s) Found{% endtrans %}
        </div>
    </script>

    <script type="text/field" id="select-sort">
        <option value="id" 
            <% if(typeof(sort) !='undefined' && sort == 'id') { %> 
                <% if(direction == 'desc') { %> 
                    class="desc active" 
                <% } else { %>
                    class="asc active" 
                <% } %>
                 selected
            <% } %>
            >{% trans %}id{% endtrans %} 
        </option>
        <option value="name" 
            <% if(typeof(sort) !='undefined' && sort == 'name') { %> 
                <% if(direction == 'desc') { %> 
                    class="desc active" 
                <% }else { %>
                    class="asc active" 
                <% } %>
                 selected
            <% } %> >
            {% trans %}name{% endtrans %}
        </option>
    </script>

    <script type="text/template" id="field-value">
        <tr>
            <td class="td-input">
                <span class="uv-icon-drag uv-mar-10"></span>
                <input type="hidden" name="customFieldValues[<%- key %>][id]" class="uv-field"/>
                <input type="text" name="customFieldValues[<%- key %>][name]" class="uv-field fieldvalue" value/>
                <input type="hidden" name="customFieldValues[<%- key %>][sortOrder]" class="uv-field sortorderField" value="<%- key+1 %>"/>
            </td>
            <td class="td-button">
                <span class="uv-cf-trash remove-field"></span>
            </td>
        </tr>
    </script>
    <script type="text/javascript">
         $( function() {
            $('.controls ul>li').on('dragstart', function(e) {
                $('.remove-temporary').trigger('click');
                hideViewLi();
                var dataField = $(this).children().filter('span[data-field]').attr('data-field');
                element = toAdd(dataField).render().el;

                $(element).addClass('dashed');
                $('#custom-fields ul').prepend(element);
                $('#custom-fields ul .editing').removeClass('editing');
                e.originalEvent.dataTransfer.effectAllowed = 'move';
                e.originalEvent.dataTransfer.setDragImage(element, 200, 20);
                e.originalEvent.dataTransfer.setData('text/html', element);
            });
            
            var elem;
            $('#content').on('dragover', function(event) {
                event.preventDefault();
                if($(event.target).closest('li.list-group-item').length && !$(event.target).closest('li.list-group-item').find('.uv-cf-remove').hasClass('remove-temporary')) {
                    cpos = $('.remove-temporary').closest('li.list-group-item').index();
                    elem = $('.remove-temporary').closest('li.list-group-item').detach();
                        if(elem) {
                            tpos = $(event.target).closest('li.list-group-item').index();
                            if(tpos+1 > cpos)
                                $(event.target).closest('li.list-group-item').after(elem);
                            else
                                $(event.target).closest('li.list-group-item').before(elem);
                        }
                }
                return false;
            });

            $('#content').on('drop', function(e) {
                $('.dashed').removeClass('dashed');
                if($(e.target).closest('li.list-group-item').hasClass('list-group-item')) {
                    $('.remove-temporary').closest('li').trigger('click');
                    $(e.target).closest('li.list-group-item').find('.uv-cf-edit').trigger('click');
                } else {
                    $('.remove-temporary').closest('li.list-group-item').detach();
                    if (e.originalEvent.stopPropagation) {
                        e.originalEvent.stopPropagation(); // Stops some browsers from redirecting.
                    }
                }
            });

            $('.controls ul>li').on('click', function() {
                dataField = $(this).children().filter('span[data-field]').attr('data-field');
                toAdd(dataField).addNew();
                $('ul.list-group>li:first-child .uv-cf-edit').trigger('click');
            });

            function toAdd(dataField) {
                var modelData = {             
                    'name': dataField[0].toUpperCase() + dataField.substring(1),
                    'fieldType': dataField,
                    "agentType": "",
                    "value": "",
                    "placeholder": "",
                    "required": false,
                    "decider": false,
                    "status": true,
                    "sortOrder": 1,
                    "customFieldValues": "",
                    "validation": ""
                }; 
                var newModel = new FieldModel(modelData);
                fieldView = new sB.FieldView( {model: newModel} );
                return fieldView;  
            };
        });
        //   backbone
        var FIELDS_VIEW = "{{ path('uvdesk_form_component_custom_fields_xhraction') }}";
        var FIELDS_DELETE = "{{ path('uvdesk_form_component_custom_fields_xhraction') }}";
        var FIELD_EDIT = "{{ path('uvdesk_form_component_custom_fields_xhraction', {'field': 'replaceId' }) }}";
        var FIELDS_ADD = "{{ path('uvdesk_form_component_custom_fields') }}"

        var TEXT_SELECTOR = '#custom-fields ul.list-group';
        var TEXT_MESSAGE_SELECTOR = '#content';

        //solutionBackbone
        var sB = {};

        FieldModel = Backbone.Model.extend({
            idAttribute : "id",
            validation: {
                'name': [{
                    required: true,
                    msg: "{{ 'Please enter name'|trans }}",
                }, {
                    notExists: true,
                    msg: "{{ 'Name Already Exists'|trans }}",
                }],
                'agentType': {
                    required: true,
                    oneOf: ['apps','user', 'customer','both'],
                    msg: "{{ 'Please select User type'|trans }}"                    
                },
                'sortOrder': {
                    required: true,
                    pattern: 'number',
                    msg: '{{ "Please enter sort order value"|trans }}'
                },
                'customFieldValues': {
                    checkFieldValue: true,
                    msg: '{{ "Please enter custom field values"|trans }}'
                }
            },
            urlRoot : "{{ path('uvdesk_form_component_custom_fields_xhraction') }}"
        });
        
        var allNames = [];
        _.extend(Backbone.Validation.validators, {
            checkFieldValue: function(value, attr, customValue, model) {
                var obj = model.toJSON();
                if(obj.fieldType == 'select' || obj.fieldType == 'checkbox' || obj.fieldType == 'radio') {
                    if(!(obj.customFieldValues && obj.customFieldValues[0]['name'] && obj.customFieldValues[0]['name']!=''))
                        return 'error';
                }
            },
            notExists: function(value, attr, customValue, model) {
                try {
                    if((allNames.indexOf(model.get('name').toLowerCase()) === -1) || (model.get('id') && allNames[model.get('id')].toLowerCase() === model.get('name').toLowerCase())) {
                    } else {
                        return 'error';
                    }
                } catch(e) {
                    return 'error';                    
                }
            },
            noSpecialChars: function(value, attr, customValue, model) { 
                if(/^[a-zA-Z0-9_-\s]+$/.test(model.get('name')) == false) {
                    return 'error';
                } 
            }
         });

        sB.FieldCollection = Backbone.Collection.extend({
            url: FIELDS_VIEW,
            initialize: function() {
                this.fetchResult();
            },
            fetchResult: function() {
                var self = this;

                this.fetch({
                    reset: true,               
                    success: function(model, response) {
                        sB.fieldListView.render()
                        app.appView.hideLoader();
                    },
                    error: function (model, xhr, options) {
                        if(url = xhr.getResponseHeader('Location'))
                            window.location = url;
                    }
                });
            },
        });

        $.fn.serializeFormObject = function () {
            var o = {};
            var outputCopy = o;
            var a = this.serializeArray();
            var regex = /(\w+)+/g;
            $.each(a, function (index, item) {
                var keys = item.name.match(regex);
                keys.forEach(function (key, localIndex) {
                    if (!outputCopy.hasOwnProperty(key)) {
                        outputCopy[key] = {};
                    }
                    if(localIndex == keys.length - 1) { 
                        outputCopy[key] = isNaN(item.value)|| item.value == '' || item.value == null  ? item.value : +item.value; 
                    }
                    outputCopy = outputCopy[key];
                });
                outputCopy = o;
            });
            return o;
        };

        var hideViewLi = function() {
            $('#view-li').remove();
        };

        FormView = Backbone.View.extend({
            el: '#customfield-form',
            template: _.template($('#field-form').html()),
            events: {
                'click #field_save': 'submitForm',
                'sortupdate table#custom-field-table tbody': 'updateSortOrder',
                'click .titlebar button': 'switchtab',
                'blur input': 'formChanged',
                // 'change #field_name': 'reflectBack'
            },
            initialize: function() {
                Backbone.Validation.bind(this);
            },
            render: function() {     
                if(this.model.id)
                    var path = FIELD_EDIT.replace('replaceId', this.model.id)
                else
                    var path = FIELDS_ADD;

                this.$el.html(this.template(_.extend(this.model.toJSON(), {'path': path  })));                    
                this.checkDependecy();
                $('#customfield-form').find('table#custom-field-table tbody').sortable();
            },
            checkDependecy: function() {
                _.each(this.model.get('customFieldsDependency') , function(obj) {
                $('.dependency input[type=checkbox]').filter('[value='+obj.id+']').prop('checked',true);
                });
            },
            formChanged: function(e) {
                this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
                this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
            },
            submitForm: function(event) {
                event.preventDefault();
                var data = this.$el.find('form').serializeFormObject();
                console.log(data);
                if(!data.status) 
                    data.status = false;
                if(!data.required) 
                    data.required = false;
                if(!data.decider) 
                    data.decider= false;
                if(!data.encryption) 
                    data.encryption = false;
                this.model.unset('customFieldsDependency');
                this.model.unset('customFieldValues');
                this.model.set(data);
                var self = this;
                if(this.model.isValid(true)) {
                    $('#field_save').prop("disabled",true);
                    app.appView.showLoader();
                    this.model.save({}, {
                        success : function(model, response) {
                            if(!model.get('customFieldsDependency')) {
                                model.set('customFieldsDependency', {});
                            }
                            sB.fieldCollection.set(model, {remove:false})
                            sB.fieldListView.render() 
                            app.appView.hideLoader();
                            if(response.alertMessage != undefined) {
                                app.appView.renderResponseAlert(response);
                            }
                            $('#field_save').prop("disabled",false);
                            self.addEditing(model.get('id'));
                            allNames[model.get('id')] = model.get("name");
                            if(model.get('reload')) {
                                location = location;
                            }
                        },
                        error : function(model, xhr) {
                            var response = {
                                'alertClass' : 'danger',
                                'alertMessage' : '{{ "solution.add.error"|trans }}',
                            };
                            if(xhr.responseJSON)
                                response = xhr.responseJSON;
                            app.appView.renderResponseAlert(response);
                            app.appView.hideLoader();
                            $('#field_save').prop("disabled",false);
                        }
                    });
                } 
            },
            addEditing: function(id) {
                $('.list-group-item label[data-id='+id+']').closest('li').addClass('editing');
            },
            updateSortOrder: function(e) {
                $(e.target).find('.sortorderField').each(function(index,elem){
                $(elem).val(index+1);
                });
            },
            switchtab: function(e) {
                target = $(e.target);
                target.siblings().removeClass('selected');
                target.addClass('selected');
                view = this.$el.find('.' + target.attr('data-view'));
                if(view) {
                    view.siblings('.tab-view').hide();
                    view.show();
                }
            },
        }); 


        var currentView = null;
        sB.FieldView = Backbone.View.extend({
            template: _.template($('#field-add').html()),
            tagName: 'li',
            className: 'list-group-item',
            events: {
                'click .fields-delete': 'confirmRemove',
                'click .uv-cf-edit': 'toProperty',
                'click .remove-temporary': 'removeTemporary',
                'click .badge-status': 'statusXhr'
            },
            initialize: function() {
            },
            addNew: function() {
                hideViewLi();
                $('.remove-temporary').trigger('click');
                $('#custom-fields ul').prepend(this.render().el);
                $('.remove-temporary').closest('li').trigger('click');                
            },
            removeTemporary: function(e) {
                e.target.closest('li').remove();
                hideViewLi();
            },
            deleteField: function(e) {
                Backbone.$('e.currentTarget');
            },
            xhrInit: function(){
                Backbone.$('.alert-fixed').remove();
            },
            render: function() {
                if(this.model) {
                    this.$el.html(this.template(this.model.toJSON()));
                }
                return this;
            },
            removeItem: function() {
                this.$el.find('a').remove();
                this.model.url = FIELDS_DELETE;
                this.model.url = this.model.url + '/' + this.model.id;
                app.appView.showLoader();
                this.model.destroy({
                    success : _.bind(function(model, response) {
                                sB.fieldListView.render() 
                                if(response.alertMessage != undefined) {
                                    delete allNames[model.get('id')];
                                    app.appView.renderResponseAlert(response);
                                    if(response.alertClass == 'success')
                                        this.onRemove();
                                }
                                app.appView.hideLoader();
                            }, this),
                    error : _.bind(function(model, xhr) {
                        var response = {
                            'alertClass' : 'danger',
                            'alertMessage' : '{{ "solution.add.error"|trans }}',
                        };
                        if(url = xhr.getResponseHeader('Location'))
                            window.location = url;
                        if(xhr.responseJSON)
                            response = xhr.responseJSON;
                            app.appView.hideLoader();
                            app.appView.renderResponseAlert(response);
                    }, this)
                });
            },
            confirmRemove: function(e) {
                e.preventDefault();
                hideViewLi();
                app.appView.openConfirmModal(this);
            },
            onRemove: function() {
                this.remove();
            },
            toProperty: function(e) {
                if(!$(e.target).closest('.cf-actions').find('.remove-temporary').length) {
                    $('.remove-temporary').trigger('click');
                }
                hideViewLi();
                var target = $(e.target);
                if(target.hasClass('uv-cf-remove') || target.hasClass('uv-icon-drag')) {
                    e.preventDefault();
                    return;
                }
                this.makeActive(e);

                target.closest('li.list-group-item').after('<li id="view-li" style="user-drag: none;"><div id="customfield-form"></div></li>')
                viewLi = $('li#view-li');
                modelData = this.model.toJSON();
                formView = new FormView({ 
                    model: new FieldModel(modelData)
                });
                formView.render();
            },
            makeActive: function(e) {
                $(e.target).closest('li').siblings().removeClass('editing');        
                $(e.target).closest('li').addClass('editing');

                var fieldtype = $('#field_fieldtype').val();
                if(fieldtype == 'select' || fieldtype ==  'radio' || fieldtype == 'checkbox') {
                    $('#custom-field-table').show();
                    $('#field_value').closest('div').hide();
                } else {
                    $('#custom-field-table').hide();
                    $('#field_value').closest('div').show();
                }
            },
            statusXhr: function() {
                cStatus = this.model.get('status');
                this.model.set(!cStatus);
                self = this;
                var currentBadge = $(this.el).find('.badge-status');
                currentBadge.find('i').addClass('fa fa-spinner fa-spin fa-fw');
                $('.badge-status').addClass('badge-status-disabled').removeClass('badge-status');
                this.model.save({},{
                    patch: true,
                    success : function(model, response) {
                        self.render();
                        $('#customfield-form #field_status').prop('checked',model.get('status'));
                        $('.badge-status-disabled').addClass('badge-status').removeClass('badge-status-disabled');
                    },
                    error: function(model){
                        $('.badge-status-disabled').addClass('badge-status').removeClass('badge-status-disabled');
                    }
                });

            }
        });

        sB.FieldsView = Backbone.View.extend({
            el: '#content',
            template: _.template($('#field-value').html()),
            initialize: function() {
                $('#custom-fields ul').sortable({
                    items: "li.list-group-item",
                    cancel: '.cf-actions'
                });

                this.$field = this.$(TEXT_SELECTOR);
                this.listenTo(sB.fieldCollection, 'add', this.addOne);
                this.initAll();
            }, 
            events: {
                'click #add-custom-fields': 'addField',
                'click .remove-field': 'removeField',
                'sortstart #custom-fields ul': 'onSortStart',
                'sortupdate #custom-fields ul': 'onSortUpdate',        
                'change #val_fieldtype': 'showSelected',
                'click .placeholders': 'insertRegexValue',
            },
            insertRegexValue: function(event) {
                var toInsert = $(event.target).attr('value');
                $('#val_regex').val(toInsert);
                $('.uv-pop-up-close').trigger('click');
            },
            showSelected: function() {
                    var selected = $('#val_fieldtype').find('option:selected').val();
                    if(selected != 'text') {
                        $('.subText-validation').removeClass('hide');
                        $('.subText-validation').children('div').addClass('hide');
                        $('#select-'+selected).removeClass('hide');
                    } else {
                        $('.subText-validation').children('div').addClass('hide');
                    }
            },
            onSortStart: function(e,ui) {
                if(!$(e.target).closest('#custom-field-table').length) {
                    hideViewLi();
                }
            },
            onSortUpdate: function(event, ui) {
                var data = {'sortorder': {}};
                $(event.target).children('li').each(function(key, value) {
                    var modelKey = $(this).find('label').attr('data-id');
                    if(modelKey) {
                        data.sortorder[modelKey] = key+1;
                    }
                });
                this.reorderCustomFieldXhr(data);
            },
            reorderCustomFieldXhr: function(data) {
                var path = " {{ path('uvdesk_form_component_custom_fields_reorder_action') }}";

                $.ajax({
                    type: "POST",
                    url: path ,
                    data: data,
                    success: function(response) {
                        app.appView.renderResponseAlert(response);
                    // $('#field_sortOrder').val($(this));
                    },
                    error: function(response) {
                        var res = {
                            'alertClass' : 'danger',
                            'alertMessage' : '{{ "Warning! Something went wrong, please try again later."|trans }}',
                        };
                        app.appView.renderResponseAlert(res);
                    }
                }); 
            },
            loadFields: function() {
                sB.fieldCollection.fetchResult();
            },
            initAll: function () {
                app.appView.showLoader();
            },   
            // renderAll: function() {
            //     var self = this;
            //     sB.router.navigate(self.buildQuery(), {trigger: true});
            // },
            // buildQuery : function() {
            //     return $.param(sB.fieldCollection.getData(true)).replace(/&|=/g,'/');
            // },
            addField: function(e){
                var FIELD_KEY = $('#custom-field-table tr').length-2;
                $(e.target).closest('.last-tr').before(this.template(_.extend({key: FIELD_KEY})));
                FIELD_KEY++;
            },
            removeField: function(e) {
                $(e.target).closest('tr').remove();
            }
        });

        sB.FieldListView = Backbone.View.extend({
            el: TEXT_SELECTOR,
            render: function() { 
                self = this;
                this.$el.html('')
                if(sB.fieldCollection.models.length) {
                    _.each(sB.fieldCollection.models,function(item) {
                        sB.fieldItem = new sB.FieldView({
                            model: item
                        });
                        allNames[item.get('id')] = item.get('name').toLowerCase();
                        self.$el.append(sB.fieldItem.render().el)
                    })
                } else {
                    self.$el.append(_.template($('#field-blank').html()));
                }
            }
        });

        $(function () {
            sB.fieldListView = new sB.FieldListView()

            sB.fieldCollection = new sB.FieldCollection();

            sB.fieldCollection.comparator = 'sortOrder';

            sB.fieldsView = new sB.FieldsView();  
            Backbone.history.start( {push_state:true} );
        });
    </script>
{% endblock %}