<style>
    .mce-path {
      		display: none !important;
	}
</style>
{% set isTicketViewPage = ('helpdesk_member_ticket' == app.request.attributes.get('_route')) %}

<div class="uv-pop-up-overlay uv-no-error-success-icon" id="create-ticket-modal">
    <div class="uv-pop-up-box uv-pop-up-wide">
        <span class="uv-pop-up-close"></span>
        <h2>Create Ticket</h2>
        <form action="{{ path('helpdesk_member_create_ticket') }}" method="post" id="create-ticket-form" enctype="multipart/form-data">
            {# Customer Details #}
            {% if not isTicketViewPage %}
                {# Name #}
                <div class="uv-element-block">
                    <label class="uv-field-label">{{ 'Name'|trans }}</label>
                    <div class="uv-field-block">
                        <input name="name" class="uv-field create-ticket" type="text" value="">
                    </div>
                    <span class="uv-field-info">{{ 'Customer full name'|trans }}</span>
                </div>

                {# Email #}
                <div class="uv-element-block">
                    <label class="uv-field-label">{{ 'Email'|trans }}</label>
                    <div class="uv-field-block">
                        <input name="from" class="uv-field create-ticket" type="text" value="">
                    </div>
                    <span class="uv-field-info">{{ 'Customer email address'|trans }}</span>
                </div>
            {% else %}
                {# Retrieve customer details from the current ticket being visited #}
                <span class="uv-field-info">{{ "Ticket will be created with current ticket's customer"|trans }}</span>
            {% endif %}

            {# Ticket Type #}
            <div class="uv-element-block">
                <label class="uv-field-label">{{ 'Type'|trans }}</label>
                <div class="uv-field-block">
                    <select name="type" class="uv-select create-ticket" id="type">
                        <option value="">{{ 'Select type'|trans }}</option>

                        {% for type in ticketTypeCollection %}
                            <option value="{{ type.id }}">{{ type.description }}</option>
                        {% endfor %}
                    </select>
                </div>
                <span class="uv-field-info">{{ 'Choose ticket type'|trans }}</span>
            </div>

            {# Ticket Subject #}
            <div class="uv-element-block">
                <label class="uv-field-label">{{ 'Subject'|trans }}</label>
                <div class="uv-field-block">
                    <input name="subject" class="uv-field create-ticket" type="text" value="">
                </div>

                <span class="uv-field-info">{{ 'Ticket subject'|trans }}</span>
            </div>

            {# Ticket Message #}
            <div class="uv-element-block">
                <label class="uv-field-label">{{ 'Message'|trans }}</label>
                <div class="uv-field-block">
                    <textarea name="reply" id="create-reply" class="uv-field create-ticket" type="text">{{ ticket_service.getAgentDraftReply() }}</textarea>
                </div>
                
                <span class="uv-field-info">{{ 'Ticket query message'|trans }}</span>
            </div>

            {# Ticket Attachment #}
            <div class="uv-element-block attachment-block uv-no-error-success-icon" id="uv-attachment-option">
                <label>
                    <span class="uv-file-label">{{ 'Add Attachment'|trans }}</span>
                </label>
            </div>

            {# CustomFields #}
            {% set removeMe = [] %}
            {% if headerCustomFields %}
                <div class="custom-fields clearfix">
                    {% for key, customField in headerCustomFields %}
                        <div class="uv-element-block input-group {{ customField.customFieldsDependency|length ? 'dependent' : '' }} {% for customFieldCustomFieldsDependency in customField.customFieldsDependency %} dependency{{customFieldCustomFieldsDependency.id}}{% endfor %}" style="position: relative; {{ customField.customFieldsDependency|length ? 'display: none;' : '' }}">
                            <label class="uv-field-label" for="for{{customField.name~customField.id}}">{{ customField.name }}</label>
                            {% if customField.fieldType == 'text' %}
                                <div class="uv-field-block">
                                    <input type="{{ customField['validation']['fieldtype'] is defined ? customField['validation']['fieldtype'] :'text' }}" name="customFields[{{customField.id}}]" class="uv-field create-ticket" value="" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}" placeholder="{{customField.placeholder}}">
                                </div>

                            {% elseif customField.fieldType in ['date', 'time', 'datetime'] %}
                                <div class="uv-field-block">
                                    <input class="uv-field form-control create-ticket uv-date-picker {% if customField.fieldType == 'time' %}time{% else %}calendar{% endif %} uv-header-{{ customField.fieldType }}" type="text" name="customFields[{{customField.id}}]" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}" value="">
                                </div>
                            {% elseif customField.fieldType == 'textarea' %}
                                <div class="uv-field-block">
                                    <textarea name="customFields[{{customField.id}}]" class="uv-field create-ticket" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}"></textarea>
                                </div>

                            {% elseif customField.fieldType in ['file'] %}
                                <div class="uv-field-block">
                                    <input type="file" name="customFields[{{customField.id}}]" class="uv-field create-ticket" {{ customField.required ? "required" : "" }} id="for{{customField.name~customField.id}}">
                                </div>

                            {% elseif customField.fieldType in ['select'] %}
                                {% if customField.customFieldValues is not empty %}
                                    <div class="uv-field-block">
                                        <select name="customFields[{{customField.id}}]" class="uv-select create-ticket" id="for{{customField.name~customField.id}}" {{ customField.required ? "required" : "" }}>
                                            <option value="">{{ 'Select option' }}</option>
                                            {% for customFieldValues in customField.customFieldValues %}
                                                <option value="{{customFieldValues.id}}">{{customFieldValues.name}}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                {% else %}
                                    <!--Hide this beacause choices aren't available-->
                                    {% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %}
                                {% endif %}

                            {% elseif customField.fieldType in ['checkbox'] %}
                                {% if customField.customFieldValues is not empty %}
                                    {% for customFieldValues in customField.customFieldValues %}
                                        <div class="uv-split-field">
                                            <label>
                                                <div class="uv-checkbox">
                                                    <input type="checkbox" name="customFields[{{customField.id}}][]" value="{{customFieldValues.id}}" id="for{{customFieldValues.name~customFieldValues.id}}" class="create-ticket"/>
                                                    <span class="uv-checkbox-view"></span>
                                                </div>
                                                <span class="uv-radio-label" for="for{{customFieldValues.name~customFieldValues.id}}">{{ customFieldValues.name }}</span>
                                            </label>
                                        </div>
                                    {% endfor %}
                                {% else %}
                                    <!--Hide this beacause choices aren't available-->
                                    {% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %}
                                {% endif %}

                            {% elseif customField.fieldType in ['radio'] %}
                                {% if customField.customFieldValues is not empty %}
                                    {% for customFieldValues in customField.customFieldValues %}
                                        <div class="uv-split-field">
                                            <label>
                                                <div class="uv-radio">
                                                    <input type="radio" name="customFields[{{customField.id}}]" value="{{customFieldValues.id}}" id="for{{customFieldValues.name~customFieldValues.id}}" class="create-ticket"/>
                                                    <span class="uv-radio-view"></span>
                                                </div>
                                                <span class="uv-radio-label" for="for{{customFieldValues.name~customFieldValues.id}}">{{ customFieldValues.name }}</span>
                                            </label>
                                        </div>
                                    {% endfor %}
                                {% else %}
                                    <!--Hide this beacause choices aren't available-->
                                    {% set removeMe = removeMe|merge(["for"~customField.name~customField.id]) %}
                                {% endif %}

                            {% endif %}
                            {% if formErrors['customFields['~customField.id~']'] is defined %}
                                <div class="text-danger">{{formErrors['customFields['~customField.id~']']}}</div>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

            <div class="uv-element-block">
                <button type="submit" id="create-ticket-btn" class="uv-btn">{{ 'Create Ticket'|trans }}</button>
            </div>
        </form>
    </div>
</div>

{% if not(app.request.attributes.get('_route') in ['helpdesk_member_ticket']) %}
    {{ include('@UVDeskCoreFramework\\Templates\\attachment.html.twig') }}
{% endif %}

{% if user_service.isfileExists('apps/uvdesk/form-component') %}
<script>
    customFieldValidation = {};
    customHandler = function(value, attr, computedState) {
        if(!$('[name="'+ attr + '"]').parents('.uv-element-block').is(':visible') && !$('[name="'+ attr + '[]' + '"]').parents('.uv-element-block').is(':visible')) {
            return false;
        } else {
            var ele = $('[name="'+ attr + '"]');
            ele = ele.length ? ele : $('[name="'+ attr + '[]' + '"]');
            if(ele[0].type == 'radio') {
                var returnMe = true;
                $.each(ele, function(key, eleChild) {
                    if($(eleChild).is(':checked')) {
                        returnMe = false;
                    }
                });
                return returnMe;
            } else if(ele[0].type == 'checkbox') {
                var returnMe = true;
                $.each(ele, function(key, eleChild) {
                    if($(eleChild).is(':checked')) {
                        returnMe = false;
                    }
                });
                return returnMe;
            } else if(!$('#create-ticket-form [name="'+ attr + '"]').val()) {
                return true;
            }
        }
    };
    _.extend(Backbone.Validation.validators, {
        checkAllowedDomain: function(value, attr, customValue, model) {
            if(!$('[name="'+ attr + '"]').parents('.uv-element-block').is(':visible'))
                return false;
            domain = value.substring(value.indexOf("@") + 1);
            if(customValue && customValue.indexOf(domain) === -1) {
                return true; //return error
            }
        },
        checkRestrictedDomain: function(value, attr, customValue, model) {
            if(!$('[name="'+ attr + '"]').parents('.uv-element-block').is(':visible'))
                return false;
            domain = value.substring(value.indexOf("@") + 1);
            if(customValue && customValue.indexOf(domain) !== -1) {
                return true; //return error
            }
        },
        checkMaxFileSize: function(value, attr, customValue, model) {
            if(!$('[name="'+ attr + '"]').parents('.uv-element-block').is(':visible'))
                return false;
            fileInput = $('input[name="' + attr + '"]')[0] ? $('input[name="' + attr + '"]')[0] : $('input[name="' + attr + '"]');
            file = fileInput.files? fileInput.files[0] : '';
            filesize = file ? file.size / 1024 : 0;
            maxSize = (customValue && parseInt(customValue)) ? parseInt(customValue) : 5120;
            
            if(filesize > maxSize) {
                return true; //return error
            }
        },
        patternOrEmpty: function(value, attr, pattern, model) {
            defaultPatterns = Backbone.Validation.patterns;
            if (value && !value.toString().match(defaultPatterns[pattern] || pattern)) {
                return true; //error
            }
        },
      minOrEmpty: function(value, attr, minValue, model) {
        if (value && (value < minValue)) {
          return true; //error
        }
      },
      maxOrEmpty: function(value, attr, maxValue, model) {
        if (value && (value > maxValue)) {
          return true; //error
        }
      },
      patternCheck: function(value, attr, pattern, model) {
        if (value && !value.toString().match(pattern)) {
            return true; //error
        }
      },
    });
        {% if headerCustomFields is defined and headerCustomFields %}
            {% for customField in headerCustomFields %}
                {% set fieldtype = ('text' != customField['fieldType']) ? customField['fieldType'] : (customField['validation']['fieldtype'] is defined ? customField['validation']['fieldtype'] : 'text') %}
                    customFieldValidation['customFields[' + {{ customField.id }} + ']'] = [
                    {% if not(fieldtype in ['checkbox', 'radio', 'select'] and customField['customFieldValues'] is empty) and customField.required %}
                        {
                        fn : customHandler,
                        msg : '{{ "This field is mandatory"|trans }}'
                    },
                    {% endif %}
                    {% if('number' == fieldtype) %}
                        {
                            patternOrEmpty : 'number',
                            msg: '{{ "Value is not valid number"|trans }}',
                        },
                        {% if customField['validation']['minNo'] %} 
                            {
                                minOrEmpty: {{ customField['validation']['minNo'] }},
                                msg: '{{ "Provide number greater than %min%"|trans({"%min%": customField["validation"]["minNo"] }) }}',
                            },
                        {% endif %}
                        {% if customField['validation']['maxNo'] %} 
                        {
                            maxOrEmpty: {{ customField['validation']['maxNo'] }},
                            msg: '{{ "Provide number smaller than %max%"|trans({"%max%": customField["validation"]["maxNo"] }) }}',
                        },
                        {% endif %}
                    {% elseif('email' == fieldtype) %}
                        {
                            patternOrEmpty: /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i,
                            msg: '{{ "Email Address is invalid"|trans }}',
                        },
                        {% if customField['validation']['allowedDomain'] %}
                            {
                                checkAllowedDomain: "{{ customField['validation']['allowedDomain'] }}",
                                msg: '{{ "Domain name should be in accepted domains"|trans }}',
                            },
                        {% endif %}
                        {% if customField['validation']['restrictedDomain'] %}
                            {
                                checkRestrictedDomain: "{{ customField['validation']['restrictedDomain'] }}",
                                msg: '{{ "Domain name should not be in restricted domains" }}',
                            } ,
                        {% endif %}
                    {% elseif('url' == fieldtype) %}
                        {
                            patternOrEmpty: 'url',
                            msg: '{{ "Provide a valid url(with protocol)"|trans }}',
                        } ,
                    {% elseif('file' == fieldtype) %}
                        {
                            checkMaxFileSize: "{{ customField['validation']['maxFileSize'] }}",
                            msg: '{{ "file size should not exceed %value% KB"|trans({"%value%": customField["validation"]["maxFileSize"] ? : "5120"}) }}',
                        } ,
                    {% endif %}
                    {% if (not (fieldtype in ['checkbox', 'radio', 'select'])) and customField['validation']['regex'] is defined and customField['validation']['regex'] %}
                        {
                            patternCheck: "{{ customField['validation']['regex'] }}",
                            msg: "{{ 'This Field Value is not Valid'|trans }}",
                        } ,
                    {% endif %}
                ];
                Array.isArray(validationParameters) ? validationParameters.push(value) : false;
            {% endfor %}
        {% endif %}
        {% if CustomerCustomFields is defined and CustomerCustomFields %}
            {% for customField in CustomerCustomFields %}
                {% set fieldtype = ('text' != customField['fieldType']) ? customField['fieldType'] : (customField['validation']['fieldtype'] is defined ? customField['validation']['fieldtype'] : 'text') %}
                    customFieldValidation['customFields[' + {{ customField.id }} + ']'] = [
                    {% if not(fieldtype in ['checkbox', 'radio', 'select'] and customField['customFieldValues'] is empty) and customField.required %}
                        {
                        fn : customHandler,
                        msg : '{{ "This field is mandatory"|trans }}'
                    },
                    {% endif %}
                    {% if('number' == fieldtype) %}
                        {
                            patternOrEmpty : 'number',
                            msg: '{{ "Value is not valid number"|trans }}',
                        },
                        {% if customField['validation']['minNo'] %} 
                            {
                                minOrEmpty: {{ customField['validation']['minNo'] }},
                                msg: '{{ "Provide number greater than %min%"|trans({"%min%": customField["validation"]["minNo"] }) }}',
                            },
                        {% endif %}
                        {% if customField['validation']['maxNo'] %} 
                        {
                            maxOrEmpty: {{ customField['validation']['maxNo'] }},
                            msg: '{{ "Provide number smaller than %max%"|trans({"%max%": customField["validation"]["maxNo"] }) }}',
                        },
                        {% endif %}
                    {% elseif('email' == fieldtype) %}
                        {
                            patternOrEmpty: /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i,
                            msg: '{{ "Email Address is invalid"|trans }}',
                        },
                        {% if customField['validation']['allowedDomain'] %}
                            {
                                checkAllowedDomain: "{{ customField['validation']['allowedDomain'] }}",
                                msg: '{{ "Domain name should be in accepted domains"|trans }}',
                            },
                        {% endif %}
                        {% if customField['validation']['restrictedDomain'] %}
                            {
                                checkRestrictedDomain: "{{ customField['validation']['restrictedDomain'] }}",
                                msg: '{{ "Domain name should not be in restricted domains" }}',
                            } ,
                        {% endif %}
                    {% elseif('url' == fieldtype) %}
                        {
                            patternOrEmpty: 'url',
                            msg: '{{ "Provide a valid url(with protocol)"|trans }}',
                        } ,
                    {% elseif('file' == fieldtype) %}
                        {
                            checkMaxFileSize: "{{ customField['validation']['maxFileSize'] }}",
                            msg: '{{ "file size should not exceed %value% KB"|trans({"%value%": customField["validation"]["maxFileSize"] ? : "5120"}) }}',
                        } ,
                    {% endif %}
                    {% if (not (fieldtype in ['checkbox', 'radio', 'select'])) and customField['validation']['regex'] is defined and customField['validation']['regex'] %}
                        {
                            patternCheck: "{{ customField['validation']['regex'] }}",
                            msg: "{{ 'This Field Value is not Valid'|trans }}",
                        } ,
                    {% endif %}
                ];
                Array.isArray(validationParameters) ? validationParameters.push(value) : false;
            {% endfor %}
        {% endif %}
    var validationParameters = true;
</script>
{% endif %}
{{ include("@UVDeskSupportCenter/Templates/tinyMCE.html.twig") }}

<script type="text/javascript">
    $(function () {
        if (typeof(customFieldValidation) == 'undefined') {
            customFieldValidation = {};
        }
        {% if(removeMe is defined) %}
            $.each({{ removeMe | json_encode |raw }}, function(key, value){
                $('label[for="' + value + '"]').parent().hide();
            });
        {% endif %}

        $('.uv-header-date').datetimepicker({
            format: 'YYYY-MM-DD',
        });
        $('.uv-header-time').datetimepicker({
            format: 'LT',
        });
        $('.uv-header-datetime').datetimepicker({
            format: 'YYYY-MM-DD H:m:s'
        });

        var CreateTicketModel = Backbone.Model.extend({
            idAttribute : "id",
            defaults : {
                path : "",
            },
            validation: _.extend(customFieldValidation, {
                {% if not isTicketViewPage %}
                    'name' : {
                        required : true,
                        msg : "{{ 'This field is mandatory'|trans }}"
                    },
                    'from' :
                    [{
                        required : true,
                        msg : "{{ 'This field is mandatory'|trans }}"
                    },{
                        pattern : /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
                        msg : "{{ 'Email address is invalid'|trans }}"
                    }],
                {% endif %}
                'type' : {
                    required : true,
                    msg : "{{ 'This field is mandatory'|trans }}"
                },
                'subject' : {
                    required : true,
                    msg : "{{ 'This field is mandatory'|trans }}"
                },
                'reply' : {
                    fn: function(value) {
                            if(!tinyMCE.get("uv-edit-create-thread"))
                                return false;
                            var html = tinyMCE.get("uv-edit-create-thread").getContent();
                            if(app.appView.stripHTML(html) != '') {
                                return false;
                            }
                            return true;
                        },
                    msg : "{{ 'This field is mandatory'|trans }}"
                },
            }),
            urlRoot : "{{ path('helpdesk_member_create_ticket') }}"
        });

        sfTinyMce.init({
            height: '155px',
			selector : '#create-reply',
			images_upload_url: "",
            setup: function(editor) {
            },
			plugins: [
            ],
			toolbar: '| undo redo | bold italic forecolor ',
		});

        var CreateTicketForm = Backbone.View.extend({
            el : $("#create-ticket-modal #create-ticket-form"),
            model: new CreateTicketModel(),
            initialize : function() {
                Backbone.Validation.bind(this);
                var jsonContext = JSON.parse('{{ errors is defined ? errors|raw : "{}"  }}');
                for (var field in jsonContext) {
                    Backbone.Validation.callbacks.invalid(this, field, jsonContext[field], 'input');
                }
            },
            events : {
                'click #create-ticket-btn': "saveTicket",
                'change #type': "updateCustomFields",
                'blur input.create-ticket:not(input[type=file]), textarea.create-ticket, select.create-ticket, checkbox.create-ticket': 'formChanegd',
                'change input[type=file].create-ticket': 'formChanegd',
            },
            formChanegd: function(e) {
                this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
                this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
            },
            saveTicket: function (e) {
                e.preventDefault();
                var currentElement = Backbone.$(e.currentTarget);
                var data = currentElement.closest('form').serializeObject();
                this.model = new CreateTicketModel();
                this.model.set(data);
                Backbone.Validation.bind(this);
                
                if (this.model.isValid(true)) {
                    $('#create-ticket-form').submit();
                    $('form').find('#create-ticket-btn').attr('disabled', 'disabled');
                }
            },
            updateCustomFields: function (e) {
                const dependentFields = e.currentTarget.value;
                this.$('.dependent').hide();
                this.$('.dependency' + dependentFields).show();
            }
        });

        new CreateTicketForm();
    });
</script>