{{ header }}
<style>
    .form-group .control-label {
           max-width: 100%;
    }
</style>
<div  {{ template ? 'id="container" class="container j-container"' : 'class="container"' }} >
    <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %} 
            <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
            {% endfor %} 
    </ul>
    <div class="row">
        {{ column_left }}
        {% if  column_left  and  column_right  %} 
            {% set class = 'col-sm-6' %}
        {% elseif  column_left  or  column_right  %} 
            {% set class = 'col-sm-9' %}  
        {% else %}   
            {% set class = 'col-sm-12' %}  
        {% endif %} 
        <div id="content" class="{{ class }} ticket">{{ content_top }}
            {{ description_html }}
            <h1>{{ heading_title }}</h1>
            <p class="description">{{ description }}</p>
            {% if  ticket_time_working_status  %} 
                <div id="support-time">
                    <div class="well well-lg">
                        <div class="row">
                            <div class="time-caption col-sm-8">
                                <div class="content">
                                    {{ text_support_status }}
                                </div>
                            </div>
                            <div class="time-zone col-sm-4">
                                <div class="content">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <i class="fa fa-clock-o" aria-hidden="true"></i> 
                                            {{ text_time_working }}
                                            <p> {{ text_time_working_day }} </p>
                                        </div>
                                    </div>
                                    <div class="time-value">
                                        {{text_your_time}}: <br>
                                        <strong id="time-open-support"></strong>
                                    </div>
                                    <div class="time-value">
                                        {{ text_our_time}} :<br> 
                                        <strong>{{ current_our_time }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
            <form enctype="multipart/form-data" class="" id="form-ticket">
                <fieldset>
                    {% if  r_validate_order  or  s_validate_order  %} 
                        <div class="form-group {{ r_validate_order ? 'required' : ''  }}">
                            <label class="control-label"  >{{ entry_validate_order }}</label>
                            <div class="">
                                <div class="well well-sm  col-sm-12" id="table-order">
                                    <div class="row">
                                        <div class="col-sm-{{ not logged ? '4':'9' }} wrap-order" >
                                            <input name="fiter_order_id" type="text" id="validate-order" class="form-control" placeholder="{{ text_order_id }}" />
                                        </div>
                                        {% if  not logged %} 
                                            <div class="col-sm-5">
                                                <input type="text" id="validate-email" class="form-control" placeholder="{{ text_email }}" />
                                            </div>
                                        {% endif %} 
                                        <div class="col-sm-3">
                                            <button class="btn btn-primary" type="button" id="button-validate-order">{{ button_validate }}</button>
                                        </div>
                                    </div>
                                    <div id="products"></div>
                                </div>
                            </div>
                        </div>
                    {% endif %} 
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group required">
                                <label class="control-label" for="input-subject">{{ entry_subject }}</label>
                                <div class="">
                                    <input type="text" name="subject" value="" id="input-subject" class="form-control" />
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="control-label" for="input-priority">{{ entry_priority }}</label>
                                <div class="">
                                    <select name="priority" id="input-form-field" class="form-control">
                                        {% for priority in priorities %} 
                                            <option value="{{ priority.priority_id}}"{{ priority.priority_id == priority_default ? 'selected' : '' }} >{{ priority.name }}</option>
                                        {% endfor %} 
                                    </select>
                                </div>
                            </div> 
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group required">
                                <label class="control-label" for="input-name">{{ entry_name }}</label>
                                <div class="">
                                    <input type="text" name="name" value="{{ name}}" id="input-name" class="form-control" />
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group required">
                                <label class=" control-label" for="input-email">{{ entry_lastname }}</label>
                                <div class="">
                                    <input type="text" name="lastname" value="{{ lastname}}" id="input-lastname" class="form-control" />
                                </div>
                            </div>
                        </div>                        
                    </div>
                    <div class="form-group required">
                        <label class=" control-label" for="input-email">{{ entry_email }}</label>
                        <div class="">
                            <input type="text" name="email" value="{{ email}}" id="input-email" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group required">
                        <label class="control-label" for="input-message">{{ entry_message }}</label>
                        <div class="">
                            <textarea name="message" rows="5" id="input-message" class="form-control"></textarea>
                        </div>
                    </div>
                    {% for form_field in form_fields %} 
                        {% if  form_field.type == 'select' %} 
                            <div id="ticket-custom-field{{ form_field.form_field_id }}" class="form-group ticket-custom-field {{ form_field.required ? 'required' : '' }}" >
                                <label class="control-label" for="input-form-field{{ form_field.form_field_id }}">{{ form_field.name }}</label>
                                <div>
                                    {% if form_field.description %} 
                                        <div class="help-block">
                                            {{ form_field.description }}</div>
                                    {% endif %} 
                                    <select name="form_field[{{ form_field.form_field_id }}]" id="input-form-field{{ form_field.form_field_id }}" class="form-control">
                                        <option value="">{{ text_select }}</option>
                                        {% for form_field_value in form_field.form_field_value %} 
                                            <option value="{{ form_field_value.form_field_value_id }}">{{ form_field_value.name }}</option>
                                        {% endfor %} 
                                    </select>

                                </div>
                            </div>
                        {% endif %} 
                        {% if  form_field.type == 'radio' %} 
                            <div id="ticket-custom-field{{ form_field.form_field_id }}" class="form-group ticket-custom-field {{ form_field.required ? 'required' : '' }}" >
                                <label class="control-label">{{ form_field.name }}</label>
                                <div class="">
                                    {% if form_field.description %} <div class="help-block">{{ form_field.description }}</div>{% endif %} 
                                    <div id="input-form-field{{ form_field.form_field_id }}">
                                       {% for form_field_value in form_field.form_field_value %} 
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="form_field[{{ form_field.form_field_id }}]" value="{{ form_field_value.form_field_value_id }}" />
                                                    {{ form_field_value.name }}
                                                </label>
                                            </div>
                                        {% endfor %} 
                                    </div>  
                                </div>
                            </div>
                        {% endif %} 
                        {% if  form_field.type == 'checkbox' %} 
                            <div id="ticket-custom-field{{ form_field.form_field_id }}" class="form-group ticket-custom-field {{ form_field.required ? 'required' : '' }}" >
                                <label class="control-label">{{ form_field.name }}</label>
                                <div class="">
                                    {% if form_field.description %} <div class="help-block">{{ form_field.description }}</div>{% endif %} 
                                    <div id="input-form-field{{ form_field.form_field_id }}">
                                        {% for form_field_value in form_field.form_field_value %} 
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" name="form_field[{{ form_field.form_field_id }}][]" value="{{ form_field_value.form_field_value_id }}" />
                                                    {{ form_field_value.name }}
                                                </label>
                                            </div>
                                        {% endfor %} 
                                    </div>
                                </div>
                            </div>
                        {% endif %} 
                        {% if  form_field.type == 'text' %} 
                            <div id="ticket-custom-field{{ form_field.form_field_id }}" class="form-group ticket-custom-field {{ form_field.required ? 'required' : '' }}" >
                                <label class="control-label" for="input-form-field{{ form_field.form_field_id }}">{{ form_field.name }}</label>
                                <div class="">
                                    {% if form_field.description %} <div class="help-block">{{ form_field.description }}</div>{% endif %} 
                                    <input type="text" name="form_field[{{ form_field.form_field_id }}]" value="{{ form_field.value }}" placeholder="{{ form_field.name }}" id="input-form-field{{ form_field.form_field_id }}" class="form-control" />
                                </div>

                            </div>
                        {% endif %} 
                        {% if  form_field.type == 'textarea' %} 
                            <div id="ticket-custom-field{{ form_field.form_field_id }}" class="form-group ticket-custom-field {{ form_field.required ? 'required' : '' }}" >
                                <label class="control-label" for="input-form-field{{ form_field.form_field_id }}">{{ form_field.name }}</label>
                                <div class="">
                                    {% if form_field.description %} <div class="help-block">{{ form_field.description }}</div>{% endif %} 
                                    <textarea name="form_field[{{ form_field.form_field_id }}]" rows="3" placeholder="{{ form_field.name }}" id="input-form-field{{ form_field.form_field_id }}" class="form-control">{{ form_field.value }}</textarea>
                                </div>
                            </div>
                        {% endif %} 
                        {% if  form_field.type == 'date' %} 
                            <div id="ticket-custom-field{{ form_field.form_field_id }}" class="form-group ticket-custom-field {{ form_field.required ? 'required' : '' }}" >
                                <label class="control-label">{{ form_field.name }}</label>
                                <div class="">
                                    <div class="input-group date" id="input-form-field{{ form_field.form_field_id }}">
                                        <input type="text" name="form_field[{{ form_field.form_field_id }}]" value="{{ form_field.value }}" placeholder="{{ form_field.name }}" data-date-format="YYYY-MM-DD" class="form-control" />
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                                        </span>
                                    </div>
                                </div>

                            </div>
                        {% endif %} 
                        {% if  form_field.type == 'time' %} 
                            <div id="ticket-custom-field{{ form_field.form_field_id }}" class="form-group ticket-custom-field {{ form_field.required ? 'required' : '' }}" >
                                <label class="control-label">{{ form_field.name }}</label>
                                <div class="">
                                    {% if form_field.description %} <div class="help-block">{{ form_field.description }}</div>{% endif %} 
                                    <div class="input-group time" id="input-form-field{{ form_field.form_field_id }}">
                                        <input type="text" name="form_field[{{ form_field.form_field_id }}]" value="{{ form_field.value }}" placeholder="{{ form_field.name }}" data-date-format="HH:mm" class="form-control" />
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                                        </span>
                                    </div>
                                </div>

                            </div>
                        {% endif %} 
                        {% if  form_field.type == 'datetime' %} 
                            <div id="ticket-custom-field{{ form_field.form_field_id }}" class="form-group ticket-custom-field {{ form_field.required ? 'required' : '' }}" >
                                <label class="control-label">{{ form_field.name }}</label>
                                <div class="">
                                    {% if form_field.description %} <div class="help-block">{{ form_field.description }}</div>{% endif %} 
                                    <div class="input-group datetime" id="input-form-field{{ form_field.form_field_id }}">
                                        <input type="text" name="form_field[{{ form_field.form_field_id }}]" value="{{ form_field.value }}" placeholder="{{ form_field.name }}" data-date-format="YYYY-MM-DD HH:mm" class="form-control" />
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                                        </span>
                                    </div>
                                </div>

                            </div>
                        {% endif %} 
                    {% endfor %} 
                    <style>
                        #captcha .col-sm-offset-2 {margin-left : 0px !important; }
                        #captcha .col-sm-10 {width : 100% !important; padding: 0 }
                        #captcha .col-sm-2 {width : 100% !important; padding: 0}
                        #captcha #input-captcha {margin-bottom: 10px;}
                    </style>
                    <div id="captcha">
                        {{ captcha }}
                    </div>
                    {% if ticket_setting_upload == '1'  %} 		
                    <div class="text-right form-group">
                        <div class="attachment-file" style="display: none;">
                            <div id="attachs"></div>
                            <br>
                            {{ entry_attach_file }}  <button type="button" id="button-upload"class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
                        </div>
                    </div>
                    {% endif %} 
                        <div class="text-right form-group">
                            {% if ticket_setting_upload == '1'  %} 
                            <span class="pull-right" id="show-attach"><i style="font-size: 2.5em;padding-left: 20px;" class="fa fa-paperclip" aria-hidden="true"></i></span>
                                {% endif %} 
                                <button class="btn btn-primary pull-right" type="button" id="button-submit">{{ button_submit }}</button>
                            </div>
                        </fieldset>
                    </form>
                    {{ content_bottom }}
                </div>
                {{ column_right }}
            </div>
        </div>
         <script type="text/javascript">    
    $('input[name=\'fiter_order_id\']').autocomplete({
	'source': function(request, response) {
		$.ajax({
			url: 'index.php?route=extension/ticket/ticket/autocomplete_order_id&filter_order_id=' +  encodeURIComponent(request),
			dataType: 'json',
			success: function(json) {
				response($.map(json, function(item) {
					return {
						label: item['order_id'],
						value: item['order_id']
					}
				}));
			}
		});
	},
	'select': function(item) {
		$('input[name=\'fiter_order_id\']').val(item['value']);
	}
});
//--></script>
        <script type="text/javascript">
            var event = new Date();
            $('#time-open-support').text(event.toLocaleTimeString('en-US'));
        </script>
        <script type="text/javascript">
            $('#button-upload').on('click', function () {
                var node = this;

                $('#form-upload').remove();

                $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

                $('#form-upload input[name=\'file\']').trigger('click');

                if (typeof timer != 'undefined') {
                    clearInterval(timer);
                }

                timer = setInterval(function () {
                    if ($('#form-upload input[name=\'file\']').val() != '') {
                        clearInterval(timer);

                        $.ajax({
                            url: 'index.php?route=extension/ticket/upload',
                            type: 'post',
                            dataType: 'json',
                            data: new FormData($('#form-upload')[0]),
                            cache: false,
                            contentType: false,
                            processData: false,
                            beforeSend: function () {
                                $(node).button('loading');
                            },
                            complete: function () {
                                $(node).button('reset');
                            },
                            success: function (json) {
                                $('.help-block').remove();

                                if (json['error']) {
                                    $(node).parent().append('<div class="help-block">' + json['error'] + '</div>');
                                }

                                if (json['success']) {
                                    $('#attachs').append('<div><i class="fa fa-minus-circle"></i> ' + json['filename'] + '<input type="hidden" name="attach_file[]" value="' + json['code'] + '" /></div>');
                                }
                            },
                            error: function (xhr, ajaxOptions, thrownError) {
                                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                            }
                        });
                    }
                }, 500);
            });

            $('#attachs').delegate('.fa-minus-circle', 'click', function () {
                $(this).parent().remove();
            });

            $('#button-validate-order').on('click', function () {
                $.ajax({
                    url: 'index.php?route=extension/ticket/ticket/validateOrder',
                    type: 'post',
                    data: 'order_id=' + $('#validate-order').val() + '&email=' + $('#validate-email').val(),
                    dataType: 'json',
                    beforeSend: function () {
                        $('#button-validate-order').html('<i class="fa fa-circle-o-notch fa-spin"></i>');
                    },
                    complete: function () {
                        $('#button-validate-order').html('{{ button_validate }}');
                    },
                    success: function (json) {
                        $('.help-block, .text-error').remove();
                        if (json['error_email']) {
                            $('#validate-email').after('<div class="help-block" ">' + json['error_email'] + '</div>');
                        }
                        if (json['error_order']) {
                            $('#validate-order').after('<div class="help-block" ">' + json['error_order'] + '</div>');
                        }
                        if (json['error_product']) {
                            $('#validate-order').after('<div class="help-block" ">' + json['error_product'] + '</div>');
                        }
                        if (json['products']) {
                            for (i in json['products']) {
                                if (!$('#product-order-' + i).length) {
                                    var html = '<div id="product-order-' + i + '" class="radio"><label><strong>{{ text_order_id }}- #' + i + '</strong></label>';
                                    for (j in json['products'][i]) {
                                        html += '<br /><label> <input type="checkbox" name="product[' + i + '][]" value="' + json['products'][i][j] + '" />   ' + json['products'][i][j] + '</label>';
                                    }
                                    html += '</div>';
                                    $('#products').append(html);
                                    $('#products').show();
                                }
                            }
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
            });

            $('#products').delegate('.fa-minus-circle', 'click', function () {
                $(this).parent().remove();
            });

            $('.date').datetimepicker({
                pickTime: false
            });

            $('.time').datetimepicker({
                pickDate: false
            });

            $('.datetime').datetimepicker({
                pickDate: true,
                pickTime: true
            });

            $('#button-submit').on('click', function () {
                $.ajax({
                    url: 'index.php?route=extension/ticket/ticket/confirm&department_id={{ department_id }}',
                    type: 'post',
                    data: $('#form-ticket').serialize(),
                    dataType: 'json',
                    beforeSend: function () {
                        $('#button-submit').html('<i class="fa fa-circle-o-notch fa-spin"></i>');
                    },
                    complete: function () {
                        $('#button-submit').html('{{ button_submit }}');
                    },
                    success: function (json) {
                        $('.help-block, .text-error').remove();
                        $('.form-group').removeClass('has-error');

                        if (json['error']) {
                            if (json['error']['products']) {
                                $('#validate-order').after('<div class="help-block" ">' + json['error']['products'] + '</div>');

                            }

                            for (i in json['error']) {

                                $('#input-' + i.replace('_', '-')).after('<span class="text-error" ">' + json['error'][i] + '</span>');
                            }

                            $('.text-error').parent().parent().addClass('has-error');

            {% if site_key %} 
                            grecaptcha.reset();
            {% endif %} 

                        }

                        if (json['redirect']) {
                            location = json['redirect'];
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
            });
        </script>
        <script  type="text/javascript">
            $("#show-attach").click(function () {
                $(this).hide();
                $('.attachment-file').show();
            });
        </script>
        {{ footer }}