{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}
{% set active_menu = 'support' %}

{% 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'|url }}">{{ 'Contact Us'|trans }}</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ ticket.subject }}</li>
{% endblock %}

{% block head %}
    {{ 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>
                        {{ mf.status_badge(ticket.status, 'ticket') }}
                    </td>
                </tr>

                <tr>
                    <td>{{ 'Time Opened'|trans }}</td>
                    <td>{{ ticket.created_at|format_date }}</td>
                </tr>
                </tbody>
            </table>
            <hr>
            <div class="row">
                <button type="button" class="btn btn-primary btn-small ms-2 w-25" id="new-ticket-button"
                    {{ fb_api_link({ message: 'Are you sure?'|trans, modal: {type: 'confirm', title: 'Are you sure?'|trans}, redirect: 'support/contact-us'|url }) }}> {{ '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/>
                        {{ avatar(message.author.email, 60, 'img-thumbnail d-none d-md-block', null, 'div') }}
                    </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_to_html }}</div>
                        </section>
                    </div>
                </div>
                <hr>
            {% endfor %}
        </div>
        <div class="card-footer" id="reply-to">
            {% if ticket.status != 'closed' %}
                <form method="post" action="{{ 'support/ticket_reply'|api_url(role: 'guest') }}" {{ fb_api_form({ reload: true }) }}>
                    <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>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.reply-to-message').forEach(button => {
            button.addEventListener('click', function(event) {
                event.preventDefault();

                const replyTextarea = document.getElementById('ticket-reply-text');

                if (replyTextarea) {
                    const quote = this.getAttribute('message-quote');
                    if (replyTextarea.editor) {
                        replyTextarea.editor.setData(quote);
                        replyTextarea.editor.focus();
                    } else {
                        replyTextarea.value = quote;
                        replyTextarea.focus();
                    }
                }
            });
        });

        document.getElementById('new-ticket-button').addEventListener('click', function(event) {
            event.preventDefault();

            FOSSBilling.api.guest.post("support/ticket_close", { hash: '{{ ticket.hash }}' },
                () => {
                    FOSSBilling.message("Ticket was closed");
                    window.location.reload();
                });
        });
    });
</script>
{% endblock %}
