{% extends request.ajax ? "layout_blank.phtml" : "layout_default.phtml" %}

{% import "macro_functions.phtml" as mf %}

{% block meta_title %}{{ 'Support tickets'|trans }}{% endblock %}
{% block page_header %}{{ 'Support tickets'|trans }}{% endblock %}
{% block breadcrumb %}{{ 'Support tickets'|trans }}{% endblock %}

{% block content %}
<div class="row">
    <article class="span12 data-block">
        <div class="data-container">
            <header>
                <h1>{{ 'Support tickets'|trans }}</h1><br/>
                {{ 'Need an answer? We are here to help!'|trans }}
                <ul class="data-header-actions">
                    <li>
                        <a class="btn btn-alt btn-info" href="#submit-ticket" id="new-ticket-button" data-toggle="modal">{{ 'Submit new ticket'|trans }}</a>
                    </li>
                </ul>
            </header>
            <section>
                <table class="table table-striped table-bordered table-condensed">
                    <thead>
                    <tr>
                        <th>{{ 'Id'|trans }}</th>
                        <th>{{ 'Subject'|trans }}</th>
                        <th>{{ 'Help desk'|trans }}</th>
                        <th>{{ 'Status'|trans }}</th>
                        <th>{{ 'Submitted'|trans }}</th>
                        <th>{{ 'Actions'|trans }}</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 }} {{ 'ago'|trans }}</td>
                        <td class="actions">
                            <a href="{{ 'support/ticket'|link }}/{{ ticket.id }}" class="btn btn-small">{% if ticket.status == 'closed' %}{{ 'View'|trans }}{% else %}{{ 'Reply'|trans }}{% endif %}</a>
                        </td>
                    </tr>

                    {% else %}

                    <tr>
                        <td colspan="6">{{ 'The list is empty'|trans }}</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> {{ 'Submit new support ticket'|trans }}
        </h3>
    </div>
    <div class="modal-body">
        <form action="" method="post" id="ticket-submit" class="form" style="background: none">
                <div class="control-group">
                    <label>{{ 'Help desk'|trans }}: </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>{{ 'Subject'|trans }}: </label>
                    <div class="controls">
                        <input type="text" name="subject" value="{{ request.subject|e }}" required="required" class="span5"/>
                    </div>
                </div>

                <div class="control-group">
                    <label>{{ 'Message'|trans }}: </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="{{ 'Submit'|trans }}">{{ 'Submit'|trans }}</button>
    </div>
    </form>
</div>
{% endblock %}

{% block js %}
<script>
$(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 %}