<style>
    #quick-popup-modal-body * {
	box-sizing: border-box;
    }
    #products label{
	width: 100%;
    }
	#table-order div div, #form-quick-popup-ticket  .form-group{
       overflow: hidden;
    margin-bottom: 5px;
   }
   .attachment-file {
       padding: 10px;
    border-radius: 4px;
    background: #eee;
    }
   .text-error {
   color: #f00
   }
</style>

<form enctype="multipart/form-data" class="" id="form-quick-popup-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>
                <div class="well well-sm" id="table-order">
                    <div class="row">
                        <div class="col-sm-{{ not logged ? '4':'9' }}">
                            <input 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-ticket-subject" class="form-control" />
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="" 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-ticket-name">{{ entry_name }}</label>
                    <div>
                        <input type="text" name="name" value="{{ name}}" id="input-ticket-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-ticket-lastname" class="form-control" />
                        </div>
                    </div>
            </div>
        </div> 
		<div class="form-group required">
				<label class="control-label"   for="input-ticket-email">{{ entry_email }}</label>
				<div>
					<input type="text" name="email" value="{{ email}}" id="input-ticket-email" class="form-control" />
				</div>
		 </div>		
        <div class="form-group required">
            <label class="control-label"   for="input-ticket-message">{{ entry_message }}</label>
            <div>
                <textarea name="message" rows="5" id="input-ticket-message" class="form-control"></textarea>
            </div>
        </div>
        {% for form_field in form_fields %} 
        {% if  form_field.type == 'select' %} 
        <div id="custom-field{{ form_field.form_field_id }}" class="form-group custom-field {{ form_field.required ? 'required' : '' }}" data-sort="{{ form_field.sort_order }}">
            <label class="control-label"   for="input-ticket-form-field{{ form_field.form_field_id }}">{{ form_field.name }}</label>
            <div>
                <select name="form_field[{{ form_field.form_field_id }}]" id="input-ticket-form-field{{ form_field.form_field_id }}" class="form-control">
                    <option value="">{{ text_select }}</option>
                    {% for form_field_value in form_field %} 
                    <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="custom-field{{ form_field.form_field_id }}" class="form-group custom-field {{ form_field.required ? 'required' : '' }}" data-sort="{{ form_field.sort_order }}">
            <label class="control-label"  >{{ form_field.name }}</label>
            <div>
                <div id="input-ticket-form-field{{ form_field.form_field_id }}">
                    {% for form_field_value in form_field %} 
                    <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="custom-field{{ form_field.form_field_id }}" class="form-group custom-field {{ form_field.required ? 'required' : '' }}" data-sort="{{ form_field.sort_order }}">
            <label class="control-label"  >{{ form_field.name }}</label>
            <div>
                <div id="input-ticket-form-field{{ form_field.form_field_id }}">
                    {% for form_field_value in form_field %} 
                    <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="custom-field{{ form_field.form_field_id }}" class="form-group custom-field {{ form_field.required ? 'required' : '' }}" data-sort="{{ form_field.sort_order }}">
            <label class="control-label"   for="input-ticket-form-field{{ form_field.form_field_id }}">{{ form_field.name }}</label>
            <div>
                <input type="text" name="form_field[{{ form_field.form_field_id }}]" value="{{ form_field.value }}" placeholder="{{ form_field.name }}" id="input-ticket-form-field{{ form_field.form_field_id }}" class="form-control" />
            </div>
        </div>
        {% endif %} 
        {% if  form_field.type == 'textarea' %} 
        <div id="custom-field{{ form_field.form_field_id }}" class="form-group custom-field {{ form_field.required ? 'required' : '' }}" data-sort="{{ form_field.sort_order }}">
            <label class="control-label"  for="input-ticket-form-field{{ form_field.form_field_id }}">{{ form_field.name }}</label>
            <div>
                <textarea name="form_field[{{ form_field.form_field_id }}]" rows="3" placeholder="{{ form_field.name }}" id="input-ticket-form-field{{ form_field.form_field_id }}" class="form-control">{{ form_field.value }}</textarea>
            </div>
        </div>
        {% endif %} 
        {% if  form_field.type == 'date' %} 
        <div id="custom-field{{ form_field.form_field_id }}" class="form-group custom-field {{ form_field.required ? 'required' : '' }}" data-sort="{{ form_field.sort_order }}">
            <label class="control-label"  >{{ form_field.name }}</label>
            <div>
                <div class="input-group date" id="input-ticket-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="custom-field{{ form_field.form_field_id }}" class="form-group custom-field {{ form_field.required ? 'required' : '' }}" data-sort="{{ form_field.sort_order }}">
            <label class="control-label" >{{ form_field.name }}</label>
            <div>
                <div class="input-group time" id="input-ticket-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="custom-field{{ form_field.form_field_id }}" class="form-group custom-field {{ form_field.required ? 'required' : '' }}" data-sort="{{ form_field.sort_order }}">
            <label class="control-label" >{{ form_field.name }}</label>
            <div>
                <div class="input-group datetime" id="input-ticket-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 %} 
		
        {% if  site_key  %} 
	    <br>
		<div id="captcha">
                <div id="g-recaptcha-ticket"></div>
		</div>
        {% else %}   
		<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>
        {% endif %} 
        {% if  ticket_setting_upload == '1' %} 	
        <div class="form-group text-right">
            <div class="attachment-file" style="display: none;">
                <div id="attachs" ></div>
                <br>
                {{ entry_attach_file }} <button type="button" id="button-upload-quick-popup-ticket"class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
            </div>
        </div>
        {% endif %} 
        
        <div class="form-group text-right">
            {% if  ticket_setting_upload == '1' %} 
            <span class="attachment pull-right" id="show-attach" style="padding-left: 20px;"> <i style="font-size: 2.5em; "class="fa fa-paperclip" aria-hidden="true"></i></span>
            {% endif %} 
            <button class="btn btn-primary pull-right" type="button" id="button-submit-quick-popup-ticket">{{ button_submit }}</button>
        </div>
    </fieldset>
</form>

<script type="text/javascript">
    var gsite_key = '{{ site_key }}';
    var grecaptchaticket;

    if (gsite_key != '') {
        
        grecaptchaticket = grecaptcha.render('g-recaptcha-ticket', {
            'sitekey': gsite_key,
            'theme': 'light'
        });
    }

    $('#button-upload-quick-popup-ticket').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) {
                        $('.text-danger').remove();

                        if (json['error']) {
                            $(node).parent().append('<div class="text-danger">' + 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) {
                $('.text-danger, .text-error').remove();
                if (json['error_email']) {
                    $('#validate-email').after('<div class="text-danger" >' + json['error_email'] + '</div>');
                }
                if (json['error_order']) {
                    $('#validate-order').after('<div class="text-danger" >' + json['error_order'] + '</div>');
                }
                if (json['error_product']) {
                    $('#validate-order').after('<div class="text-danger" >' + 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 + '</label></strong> ';
                            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-quick-popup-ticket').on('click', function () {
        $.ajax({
            url: 'index.php?route=extension/ticket/ticket/confirmpopup&product_id={{ product_id }}',
            type: 'post',
            data: $('#form-quick-popup-ticket').serialize(),
            dataType: 'json',
            beforeSend: function () {
                $('#button-submit-quick-popup-ticket').html('<i class="fa fa-circle-o-notch fa-spin"></i>');
            },
            complete: function () {
                $('#button-submit-quick-popup-ticket').html('{{ button_submit }}');
            },
            success: function (json) {
                $('.text-danger, .text-error').remove();
                $('.form-group').removeClass('has-error');
                if (json['error']) {

                    if (json['error']['products']) {
                        $('#table-order').after('<div class="text-danger" >' + json['error']['products'] + '</div>');
                    } 
                        for (i in json['error']) {
                            $('#input-ticket-' + i.replace('_', '-')).after('<span class="text-error" >' + json['error'][i] + '</span>');
                        }

                        $('.text-error').parent().parent().addClass('has-error');	
                    
					{% if  site_key  %} 
                           grecaptcha.reset(grecaptchaticket);
					{% elseif  site_key_g_captcha == 1  %} 
					    grecaptcha.reset();
					{% endif %} 
                }

                if (json['success']) {
                    $('#quick-popup-modal-body').html('<div class="text-success">' + json['success'] + '</div>');
                }
            },
            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>
