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

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

{% block meta_title %}{{ ticket.subject }}{% endblock %}
{% block breadcrumb %}
<li><a href="{{ 'support' | link}}">{{ 'Support tickets'|trans }}</a><span class="divider">/</span></li>
{{ticket.subject}}
{% endblock %}

{% block content %}
<div class="row">
    <article class="span4 data-block">
        <div class="data-container">
            <header>
                <h2>{{ 'Ticket information'|trans }}</h2>

                {% if ticket.status != 'closed' %}
                    <div class="data-header-actions">
                        <button class="btn btn-small" type="button" id="ticket-close">{{ 'Close ticket'|trans }}</button>
                    </div>
                {% endif %}
            </header>
            <section>
                <table class="table table-striped table-bordered table-condensed">
                    <tbody>
                    <tr>
                        <td>{{ 'Ticket ID'|trans }}</td>
                        <td><b>#{{ ticket.id }}</b></td>
                    </tr>

                    <tr>
                        <td>{{ 'Help desk'|trans }}</td>
                        <td>{{ ticket.helpdesk.name }}</td>
                    </tr>

                    <tr>
                        <td>{{ 'Status'|trans }}</td>
                        <td>
                            <div class="label {% if ticket.status=='open' %}label-success{% elseif ticket.status == 'on_hold' %}label-warning{% endif %}">{{ mf.status_name(ticket.status) }}</div>
                        </td>
                    </tr>

                    <tr>
                        <td>{{ 'Time opened'|trans }}</td>
                        <td>{{ ticket.created_at|bb_date }}</td>
                    </tr>

                    {% if ticket.rel_type == 'order' and ticket.rel_id %}
                    <tr>
                        <td>{{ 'Related to'|trans }}</td>
                        <td><a href="{{ 'order/service/manage'|link }}/{{ ticket.rel_id }}">{{ 'Service #'|trans }} {{ ticket.rel_id }}</a></td>
                    </tr>
                    {% endif %}
                    </tbody>

                </table>

            </section>
        </div>
    </article>
    <article class="span8 data-block">
        <div class="data-container">
            <header>
                <h2>{{ 'Last tickets'|trans }}</h2>
                <div class="data-header-actions">
                    <ul>
                        <li>
                            <a class="btn btn-small" href="{{ '/support'|link }}">{{ 'Back to tickets list'|trans }}</a>
                        </li>
                    </ul>
                </div>
            </header>
            <section>
                <table class="table table-bordered table-condensed">
                    <thead>
                    <tr>
                        <th>{{ 'Subject'|trans }}</th>
                        <th>{{ 'Help desk'|trans }}</th>
                        <th>{{ 'Status'|trans }}</th>
                        <th>{{ 'Submitted'|trans }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% set tickets = client.support_ticket_get_list({ "per_page": 5, "page": request.page }) %}
                    {% for i, t in tickets.list %}
                    <tr {% if ticket.id == t.id %}class="alert alert-info"{% endif %}>
                        <td><a href="{{ 'support/ticket'|link }}/{{t.id}}">{{ t.subject|truncate(40) }}</a></td>
                        <td>{{ t.helpdesk.name }}</td>
                        <td>
                            <span class="label {% if t.status=='open' %}label-info{% elseif t.status == 'on_hold' %}label-warning{% endif %}">{{ mf.status_name(t.status) }}</span>
                        </td>
                        <td>{{ t.created_at|timeago }} {{ 'ago'|trans }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5">{{ 'The list is empty'|trans }}</td>
                    </tr>
                    {% endfor %}

                    </tbody>
                </table>
            </section>
        </div>
    </article>

</div>

<div class="row">
    <article class="span12 data-block">
        <div class="data-container">
            <header>
                <h2>{{ ticket.subject }}</h2>
                <p>#{{ ticket.id }} - {{ticket.helpdesk.name}}</p>
            </header>
            <section>
                {% for i, message in ticket.messages %}
                        <div class="row-fluid">
                            <div class="span3">
                                <div class="thumbnails">
                                    <img src="{{ message.author.email|gravatar }}?size=60" alt="{{ message.author.name }}" class="gravatar">
                                    <h3>
                                        {{ message.author.name }}
                                    </h3>
                                </div>
                            </div>
                            <div class="span9">
                                <header>#{{ i+1 }} | {{ message.created_at|bb_date }}
                                    {% if ticket.status != 'closed' %}
                                    <div class="pull-right">
                                        <a href="#" class="btn btn-inverse reply-to-message" message-quote="{{ mf.markdown_quote(message.content) }}">{{ 'Reply'|trans }}</a>
                                    </div>
                                    {% endif %}
                                </header>
                                <section>
                                    <div class="well" id="message-{{message.id}}">{{ message.content|bbmd }}</div>
                                </section>
                            </div>
                        </div>
                        <hr/>
                {% endfor %}

                <div class="row-fluid">
                    {% if ticket.status != 'closed' %}
                    <div class="span3"></div>
                    <div class="span9">
                        <form method="post" action="" class="api_form" data-api-url="{{ 'api/client/support/ticket_reply'|link }}" data-api-reload="1">
                            <fieldset>
                                <textarea name="content" cols="5" rows="10" class="span12" required="required" id="ticket-reply-text"></textarea>
                                <button class="btn btn-primary btn-large" type="submit" id="submit-support-message" value="{{ 'Post'|trans }}" onclick="">{{ 'Post'|trans }}</button>
                                <input type="hidden" name="id" value="{{ ticket.id }}">
                            </fieldset>
                        </form>
                    </div>
                    {% elseif ticket.status == 'closed' %}
                        <div class="alert alert-white text-center">{{ 'Ticket was closed and cannot be reopened.'|trans }}</div>
                    {% endif %}
                </div>

            </section>
        </div>
    </article>
</div>
{% endblock %}

{% block js %}
<script>
$(function() {
    $('.reply-to-message').click(function (event) {
        event.preventDefault();

        var quote = $(this).attr('message-quote');
        
        $('#ticket-reply-text').text(quote);
        $('#ticket-reply-text').focus();
    });

    $('#submit-support-message').click(function () {
        if ($('#ticket-reply-text').val().length > 0) {
            $('.wait').show();
        }
    });

    $('#ticket-close').bind('click', function(event) {
        event.preventDefault();
        
        $('.wait').show();
        
        bb.post(
            'client/support/ticket_close',
            { id: {{ ticket.id }} },
            function(result) {
                bb.redirect("{{ 'support'|link }}");
            }
        );
    });
});
</script>
{% endblock %}
