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

{% import "macro_functions.html.twig" as mf %}

{% block meta_title %}{{ ticket.subject }}{% endblock %}

{% block body_class %}support-contact-us-conversation{% endblock %}
{% block breadcrumb %}
<li class="breadcrumb-item"><a href="{{ 'support/contact-us' | link}}">{{ 'Contact us'|trans }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ ticket.subject }}</li>
{% endblock %}

{% block head %}
    {{ mf.wysiwyg('.editor-textarea') }}
{% endblock %}

{% block content %}
<div class="row">
    <div class="card ms-0 ms-md-3 w-100">
        <div class="card-header">
            <h2>{{ 'Ticket information'|trans }}</h2>
            <table class="table table-striped table-bordered table-sm">
                <tbody>
                <tr>
                    <td>{{ 'Subject'|trans }}</td>
                    <td><b>{{ ticket.subject }}</b></td>
                </tr>

                <tr>
                    <td>{{ 'Author'|trans }}</td>
                    <td>{{ ticket.author.name }}</td>
                </tr>

                <tr>
                    <td>{{ 'Email'|trans }}</td>
                    <td>{{ ticket.author.email }}</td>
                </tr>

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

                <tr>
                    <td>{{ 'Time opened'|trans }}</td>
                    <td>{{ ticket.created_at|format_date }}</td>
                </tr>
                </tbody>
            </table>
            <hr>
            <div class="row">
                <button class="btn btn-primary btn-small ms-2 w-25" href="{{ 'api/guest/support/ticket_close'|link({ 'hash': ticket.hash, 'CSRFToken': CSRFToken })}}" id="new-ticket-button" data-api-reload="1"> {{ 'Close ticket'|trans }}</button>
                <a class="btn btn-info btn-small ms-2 w-25" href="#reply-to">{{ 'Reply'|trans }}</a>
            </div>
        </div>
        <div class="card-body">
            {% for i, message in ticket.messages %}
                <div class="row">
                    <div class="col-2">
                        <span class="text-muted">
                            {{ message.author.name }}
                        </span>
                        <br/>
                        <img src="{{ message.author.email|gravatar(60) }}" alt="{{ message.author.name }}" class="img-fluid img-thumbnail d-none d-md-block">
                    </div>
                    <div class="col-10">
                        <header>#{{ i+1 }} | {{ message.created_at|format_date }}
                            {% if ticket.status != 'closed' %}
                            <div class="float-end">
                                <a href="#" class="btn btn-dark 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|markdown }}</div>
                        </section>
                    </div>
                </div>
                <hr>                
            {% endfor %}
        </div>
        <div class="card-footer" id="reply-to">
            {% if ticket.status != 'closed' %}
                <form method="post" action="" class="api_form" data-api-url="guest/support/ticket_reply" data-api-reload="1">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <input type="hidden" name="hash" value="{{ ticket.hash }}" />
                    
                    <textarea name="message" cols="5" rows="10" class="editor-textarea form-control" required="required" id="ticket-reply-text"></textarea>
                    <button class="btn btn-primary btn-large mt-1" type="submit" id="submit-support-message" value="{{ 'Post'|trans }}" onclick="">{{ 'Post'|trans }}</button>
                </form>
            {% elseif ticket.status == 'closed' %}
                <div class="alert alert-white text-center">{{ 'Ticket was closed and cannot be reopened.'|trans }}</div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

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

        var quote = $(this).attr('message-quote');

        $('#ticket-reply-text').text(quote);
        $('#ticket-reply-text').focus();
    });

    $('#new-ticket-button').on('click', function(e) {
        e.preventDefault();

        bb.post("guest/support/ticket_close", { hash: '{{ ticket.hash }}', CSRFToken: "{{ CSRFToken }}" }, function(r) {
            FOSSBilling.message("Ticket was closed");
            bb.reload();
        });
    });
});
</script>
{% endblock %}
