{{ header }}
<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 ticket-info">{{ content_top }}
            <h1>{{ heading_title }}</h1>
            {% 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 %}
            <h3><i style="font-size: 21px;" class="fa fa-info-circle" aria-hidden="true"></i> {{ text_ticket_information }}</h3>
            <div>
                <div class="wrapper">
                    <div class="row">
                        <div class="col-md-4 col-sm-6 xs-100 sm-40 md-40 lg-40 xl-33">
                            <table class="table table-no-border">
                                <tbody>
                                    <tr>
                                        <td class="text-left">{{ entry_subject }}</td>
                                        <td class="text-left">{{ subject }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-left">{{ entry_name }}</td>
                                        <td class="text-left">{{ name }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-left">{{ entry_email }}</td>
                                        <td class="text-left">{{ email }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-left">{{ entry_department }}</td>
                                        <td class="text-left">{{ department }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-left">{{ entry_status }}</td>
                                        <td class="text-left">{{ status }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="col-md-4 col-sm-6 xs-100 sm-40 md-40 lg-40 xl-33">
                            <table class="table table-no-border">
                                <tbody>
                                    <tr>
                                        <td class="text-left">{{ entry_priority }}</td>
                                        <td class="text-left"><span class="label label-info" style="background:{{ color }};">{{ priority }}</span></td>
                                    </tr>
                                    <tr>
                                        <td class="text-left">{{ entry_date_added }}</td>
                                        <td class="text-left">{{ date_added }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-left">{{ entry_last_update }}</td>
                                        <td class="text-left">{{ last_update }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-left">{{ entry_update_by }}</td>
                                        <td class="text-left">{{ update_by ? update_by : text_n_a }}</td>
                                    </tr>
                                    {% if products  %} 
                                        <tr>
                                            <td class="text-left">{{ entry_product_order }}</td>
                                            <td class="text-left">
                                                {% set i = 0 %}
                                                {% for order_id, values in products %}  
                                                    {% if  i  %} 
                                                        <br/>
                                                    {% endif %} 
                                                    <a href="index.php?route=account/order/info&order_id={{ order_id }}" target="_blank">{{ text_order_id }}{{ ' - #'}}{{ order_id }}</a>
                                                    {% for value in values %} 
                                                        <br/>
                                                        <small style="margin-left: 20px;">{{ value }}</small>
                                                    {% endfor %} 
                                                    {% set i = i + 1 %}
                                                {% endfor %} 
                                            </td>
                                        </tr>
                                    {% endif %} 
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-4 col-sm-6 xs-100 sm-40 md-40 lg-40 xl-33">
                            <table class="table table-no-border">
                                <tbody>
                                    {% for form_field in form_fields %} 
                                        <tr>
                                            <td class="text-left">{{ form_field.name }}</td>
                                            <td class="text-left">{{ form_field.value }}</td>
                                        </tr>
                                    {% endfor %} 
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>   
            <br>
            <h3><i class="fa fa-comments" aria-hidden="true" style="font-size: 21px;"></i>  {{ text_message_information }}</h3>
            {% if  allow_comment  %} 
                <form enctype="multipart/form-data" class="" id="form-message"> 
                    <div class="form-group">
                        <div class="form-group hidden" id="quote-content" style="margin-bottom: 0px;">
                            <div>
                                <div class="alert alert-warning" style="margin-bottom: 5px;"></div>
                                <input type="hidden" name="parent_id" value="0"/>
                                <input type="hidden" name="message_id" value="0"/>
                            </div>
                        </div>
                        <textarea name="message" rows="6" id="input-message" class="form-control" placeholder="{{ text_reply }}"></textarea>
                    </div>
                    <div class="form-group text-right">
                        <div class="attachment-file" style="display: none;">
                            <div id="attachs"></div>
                            <br>
                            <span>{{ entry_attach_file }}</span>  <button type="button" id="button-upload"class="btn btn-default"><i class="fa fa-upload"></i> {{ button_upload }}</button>
                        </div>
                    </div>
                    <div class="form-group text-right">
                        <span class="attachment" id="show-attach"> <i class="fa fa-paperclip" aria-hidden="true"></i></span>
                        <button class="btn btn-primary btn-lg pull-right" type="button" id="button-submit"><i class="fa fa-paper-plane-o" aria-hidden="true"></i> {{ text_post_reply }}</button>  
                        {% if close_ticket_button %}
                        <button class="btn btn-danger btn-lg pull-right" type="button" id="button-close-ticket" style="margin-right: 5px;"> {{ text_close_ticket}} </button>  
                       {% endif %} 
                    </div>
                </form>
            {% endif %} 
            <div class="clearfix"></div>
            <div id="demo-chat-body" class="">
                <div class="message has-scrollbar">
                    <div class="message-content pad-all">
                        <ul class="list-unstyled media-block">
                            {% for message in messages %} 
                                <li class="mar-btm">
                                    <div class="media-body pad-hor {{ message.float == 'right' ? 'speech-right':'' }}">
                                        <div class="speech">
                                            <div class="massage-heading">
                                                <div class="pull-left"> 
                                                    <strong class="speech-name">{{ message.name }} {{ message.float  !=  'right' ? '(' ~  store_name ~ ')' : '' }} </strong>
                                                </div>
                                                <div class="pull-right"> 
                                                    {{ message.date_added }}
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>
                                            {% if  message.parent_id %} 
                                                <div class="message-parent">
                                                    {{ text_quote }}{{  messages[message.parent_id].name }}: <br/>
                                                    <i class="fa fa-quote-left"></i>{{ messages[message.parent_id].message }}<i class="fa fa-quote-right"></i>
                                                </div>
                                            {% endif %} 
                                            <div class="message-body">{{ message.message }}</div>											
                                            {% for attach_file in message.attach_file %} 
                                                {% if  attach_file.href %} 
                                                    <p class="speech-download"><a href="{{ attach_file.href }}"><i class="fa fa-download fa-fw"></i>{{ attach_file.name }}</a></p>
                                                        {% endif %} 
                                                    {% endfor %} 	
                                            <div class="hr-row">
                                                {% if message.float == 'left'   %} 
                                                    <div class="pull-left  rating-massage">
                                                        Rate :      <i class="fa fa-smile-o {{ message.rate == 1 ? 'active' : '' }} " onclick="rating(1,{{ message.message_id }} , $(this));" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="{{ text_good }}"></i>
                                                        <i class="fa fa-meh-o {{ message.rate == 2 ? 'active' : '' }}" onclick="rating(2,{{ message.message_id }} , $(this));" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="{{ text_neutral }}"></i>  
                                                        <i class="fa fa-frown-o {{ message.rate == 3 ? 'active' : '' }}" onclick="rating(3,{{ message.message_id }} , $(this));"  aria-hidden="true" data-toggle="tooltip" data-placement="top" title="{{ text_bad }}"></i>
                                                    </div>
                                                {% endif %}  
                                                <div class="pull-right">
                                                    <p  class="speech-action">
                                                        <a style="padding-left:0" href="javascript:void(0)" class="message-quote" data-message-id="{{ message.message_id }}"><i class="fa fa-question" aria-hidden="true"></i> {{ entry_quote }}</a>
                                                        {% if  message.float == 'right' %} 
                                                            <a href="javascript:void(0)" class="message-edit" data-message-id="{{ message.message_id }}"><i class="fa fa-pencil" aria-hidden="true"></i> {{ entry_edit }}</a>
                                                            <a href="javascript:void(0)" class="message-delete" data-message-id="{{ message.message_id }}"><i class="fa fa-times" aria-hidden="true"></i> {{ entry_delete }}</a>
                                                        {% endif %} 
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            {% endfor %} 
                        </ul>
                    </div>
                </div>
            </div>

            {{ content_bottom }}
        </div>
        {{ column_right }}
    </div>
</div>
<script type="text/javascript">
    var event = new Date();
    $('#time-open-support').text(event.toLocaleTimeString('en-US'));</script>

<script type="text/javascript">

    $('.message-quote').on('click', function () {
    $('#quote-content').find('input[name="parent_id"]').val(0);
    $('#quote-content').find('input[name="message_id"]').val(0);
    var message_id = $(this).attr('data-message-id');
    {% if messages|json_encode %}
        var quote = {{ messages|json_encode }};
    {% else %}
        var quote = '';
    {% endif %}
        $('#quote-content').find('.alert').html('{{ entry_quote }}:<span class="pull-right">{{ text_remove_quote }}<i class="fa fa-minus-circle remove-quote"></i></span><br/><i class="fa fa-quote-left"></i> ' + quote[message_id]['message'] + ' <i class="fa fa-quote-right"></i>');
        $('#quote-content').find('input[name="parent_id"]').val(message_id);
        $('#quote-content').removeClass('hidden');
        $('html, body').animate({scrollTop: $(document).height()}, 500);
        });
        $('.message-edit').on('click', function () {
        $('#quote-content').find('input[name="parent_id"]').val(0);
        $('#quote-content').find('input[name="message_id"]').val(0);
        $('#attachs').html('');
        var message_id = $(this).attr('data-message-id');
    {% if messages|json_encode %}
        var quote = {{ messages|json_encode }};
    {% else %}
        var quote = '';
    {% endif %}
        $('#quote-content').find('.alert').html('{{ entry_edit }}:<span class="pull-right">{{ text_remove_edit }}<i class="fa fa-minus-circle remove-quote"></i></span><br/><i class="fa fa-quote-left"></i> ' + quote[message_id]['message'] + ' <i class="fa fa-quote-right"></i>');
        $('#form-message').find('textarea[name="message"]').text(quote[message_id]['message'].replace(/<\/?[^>]+(>|$)/g, ""));
        for (i in quote[message_id]['attach_file']) {
        $('#attachs').append('<div><i class="fa fa-minus-circle"></i> ' + quote[message_id]['attach_file'][i]['name'] + '<input type="hidden" name="attach_file[]" value="' + quote[message_id]['attach_file'][i]['code'] + '" /></div>');
        }
        $('#quote-content').find('input[name="message_id"]').val(message_id);
        $('#quote-content').find('input[name="parent_id"]').val(quote[message_id]['parent_id']);
        $('#quote-content').removeClass('hidden');
        $('html, body').animate({scrollTop: $(document).height()}, 500);
        });
        $('.message-delete').on('click', function () {
        var message_id = $(this).attr('data-message-id');
        var cfm = true;
        confirm('{{ text_confirm }}') ? cfm = true : cfm = false;
        if (cfm) {
        $.ajax({
        url: 'index.php?route=extension/ticket/ticket/deleteMessage&message_id=' + message_id,
                type: 'get',
                dataType: 'json',
                success: function (json) {
                if (json['success']) {
                location.reload();
                }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
        });
        }
        });
        $('#quote-content').delegate('.fa-minus-circle', 'click', function () {
        $('#attachs').html('');
        $('#form-message').find('textarea[name="message"]').text('');
        $('#quote-content').find('.well').html('');
        $('#quote-content').find('input[name="parent_id"]').val(0);
        $('#quote-content').find('input[name="message_id"]').val(0);
        $('#quote-content').addClass('hidden');
        });
        $('#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) {
                $('.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-submit').on('click', function () {
        $.ajax({
        url: 'index.php?route=extension/ticket/ticket/message/confirm&ticket_id={{ ticket_id }}',
                type: 'post',
                data: $('#form-message').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) {
                $('.text-error').remove();
                $('.form-group').removeClass('has-error');
                if (json['error']) {

                $('#input-message').parent().append('<span class="text-error" style="color:#F00;">' + json['error'] + '</span>');
                $('.text-error').parent().parent().addClass('has-error');
                }

                if (json['success']) {
                location.reload();
                }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }
        });
        });
        $('#button-close-ticket').on('click', function () {
        $.ajax({
        url: 'index.php?route=extension/ticket/ticket/CloseTicket&ticket_id={{ ticket_id }}&closeticket=1',
                type: 'post',
                data: $('#form-message').serialize(),
                dataType: 'json',
                beforeSend: function () {
                $('#button-close-ticket').html('<i class="fa fa-circle-o-notch fa-spin"></i>');
                },
                complete: function () {
                $('#button-close-ticket').html('{{ text_close_ticket }}');
                },
                success: function (json) {
                $('.text-error').remove();
                $('.form-group').removeClass('has-error');
                if (json['error']) {

                $('#input-message').parent().append('<span class="text-error" style="color:#F00;">' + json['error'] + '</span>');
                $('.text-error').parent().parent().addClass('has-error');
                }

                if (json['success']) {
                location.reload();
                }
                },
                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>
<script type="text/javascript"><!--                              
function rating(rate, mas_id, target) {
    $.ajax({
    url: 'index.php?route=extension/ticket/ticket/rating&rate=' + rate + '&mas_id=' + mas_id,
            type: 'get',
            dataType: 'json',
            success: function(json)                {
            target.siblings().removeClass('active');
            if (json['success'])                    {
            target.addClass('active');
            }
            }
    });
    }
//--></script>
    {{ footer }}