{% 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" class="uv-field create-ticket" type="text"></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.value}}">
                                </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') %}
    {{ include('@_uvdesk_extension_uvdesk_form_component/CustomFields/customFieldValidation.html.twig') }} 
{% endif %}

<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' : {
                    required : true,
                    msg : "{{ 'This field is mandatory'|trans }}"
                },
            }),
            urlRoot : "{{ path('helpdesk_member_create_ticket') }}"
        });

        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>