{% extends request.ajax ? "layout_blank.phtml" : "layout_default.phtml" %}
{% import "macro_functions.phtml" as mf %}
{% block meta_title %}{% trans 'Support tickets' %}{% endblock %}
{% block page_header %}{% trans 'Support tickets' %}{% endblock %}
{% block breadcrumb %}{% trans 'Support tickets' %}{% endblock %}
{% block content %}


<div class="row">
    <article class="span12 data-block">
        <div class="data-container">
            <header>
                <h1>{% trans 'Support tickets'%}</h1><br/>
                {% trans 'Need an answer? We are here to help!' %}
                <ul class="data-header-actions">
                    <li>
                        <a class="btn btn-alt btn-info" href="#submit-ticket" id="new-ticket-button" data-toggle="modal">{% trans 'Submit new ticket' %}</a>
                    </li>
                </ul>
            </header>
            <section>
                <table class="table table-striped table-bordered table-condensed">
                    <thead>
                    <tr>
                        <th>{% trans 'Id' %}</th>
                        <th>{% trans 'Subject' %}</th>
                        <th>{% trans 'Help desk' %}</th>
                        <th>{% trans 'Status' %}</th>
                        <th>{% trans 'Submitted' %}</th>
                        <th>{% trans 'Actions' %}</th>
                    </tr>
                    </thead>

                    <tbody>
                    {% set tickets = client.support_ticket_get_list({"per_page":10, "page":request.page}) %}
                        {% for i, ticket in tickets.list %}

                    <tr>
                        <td>#{{ticket.id}}</td>
                        <td><a href="{{ 'support/ticket'|link }}/{{ticket.id}}">{{ticket.subject|truncate(40)}}</a></td>
                        <td>{{ticket.helpdesk.name}}</td>
                        <td><span class="label {% if ticket.status=='open'%}label-info{% elseif ticket.status == 'on_hold'%}label-warning{%endif%}">{{mf.status_name(ticket.status)}}</span></td>
                        <td>{{ticket.created_at|timeago}} {% trans 'ago' %}</td>
                        <td class="actions"><a href="{{ 'support/ticket'|link }}/{{ticket.id}}" class="btn btn-small">{% if ticket.status=='closed'%}{% trans 'View' %}{% else %}{% trans 'Reply' %}{%endif%}</a></td>
                    </tr>

                    {% else %}

                    <tr>
                        <td colspan="6">{% trans 'The list is empty' %}</td>
                    </tr>

                    {% endfor %}

                    </tbody>

                    {% if tickets.pages > 1 %}
                    <tfoot>
                    <tr>
                        <td colspan="6">
                            {% include "partial_pagination.phtml" with {'list': tickets} %}
                        </td>
                    </tr>
                    </tfoot>
                    {% endif %}
                </table>

            </section>
        </div>
    </article>
</div>



<div id="submit-ticket" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>
            <span class="awe-wrench"></span> {% trans 'Submit new support ticket' %}
        </h3>
    </div>
    <div class="modal-body">
        <form action="" method="post" id="ticket-submit" class="form" style="background: none">
                <div class="control-group">
                    <label>{% trans 'Help desk' %}: </label>
                    <div class="controls">
                        {{ mf.selectbox('support_helpdesk_id', client.support_helpdesk_get_pairs, request.support_helpdesk_id, 1) }}
                    </div>
                </div>

                <div class="control-group">
                    <label>{% trans 'Subject' %}: </label>
                    <div class="controls">
                        <input type="text" name="subject" value="{{ request.subject|e }}" required="required" class="span5"/>
                    </div>
                </div>

                <div class="control-group">
                    <label>{% trans 'Message' %}: </label>
                    <div class="controls">
                        <textarea name="content" cols="10" rows="10" required="required" class="span5">{{ request.content|e }}</textarea>
                    </div>
                </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary btn-large" type="submit" value="{% trans 'Submit' %}">{% trans 'Submit' %}</button>
    </div>
    </form>
</div>
{% endblock %}


{% block js %}
<script type="text/javascript">
$(function() {
    $('#ticket-submit').bind('submit',function(event){
        $('.wait').show();
        bb.post(
            'client/support/ticket_create',
            $(this).serialize(),
            function(result) {
                bb.redirect('{{ 'support/ticket'|link }}' + '/' + result);
            }
        );
        return false;
    });
    $('#submit-ticket').modal('hide').css(
        {
            'margin-top': function () {
                return -($(this).height() / 2);
            }
        })

    {% if request.ticket %}
    $('#submit-ticket').modal('show');
    {% endif %}

});
</script>
{% endblock %}