{% 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 head %}
    {{ 'css/markdown.css' | public_asset_url | stylesheet_tag }}
    {{ wysiwyg('.editor-textarea') }}
{% endblock %}

{% block body_class %}support-ticket{% endblock %}
{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{{ 'support'|url }}">{{ 'Support Tickets'|trans }}</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ ticket.subject }}</li>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="card mb-3">
                <div class="card-header py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-2">{{ 'Ticket'|trans }} #{{ ticket.id }}</h5>
                        </div>
                        <div class="">
                            <div class="d-flex gap-2">
                                {% if (ticket.status != 'closed') or (ticket.helpdesk.can_reopen) %}
                                    <button class="btn btn-info btn-sm" id="reply-to-btn">{{ 'Reply'|trans }}</button>
                                {% endif %}
                                {% if ticket.status != 'closed' %}
                                    <button class="btn btn-secondary btn-sm" type="button" id="ticket-close">{{ 'Close Ticket'|trans }}</button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-hover table-sm">
                        <tbody>
                        <tr>
                            <td>{{ 'Help Desk'|trans }}</td>
                            <td>{{ ticket.helpdesk.name }}</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>

                        {% if ticket.rel_type == 'order' and ticket.rel_id %}
                            <tr>
                                <td>{{ 'Related To'|trans }}</td>
                                <td>
                                    <a href='{{ "order/service/manage/#{ticket.rel_id}"|url }}'>{{ 'Service #'|trans }} {{ ticket.rel_id }}</a>
                                </td>
                            </tr>
                        {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="d-flex flex-column gap-3">
            {% for i, message in ticket.messages %}
                <div class="row">
                    <div class="col-md-12">
                        <div class="card {% if message.author.role == 'admin' %}border-primary{% endif %}">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center gap-2">
                                    {{ avatar(message.author.email, 40, 'img-thumbnail d-none d-md-block', null, 'div') }}
                                    <div class="d-flex flex-column">
                                        <span class="text-muted">
                                            {{ message.author.name }}
                                        </span>
                                        {% if message.author.role == 'admin' %}
                                            <span class="badge text-bg-primary">
                                                    {{ 'Operator'|trans }}
                                                </span>
                                        {% else %}
                                            <span class="badge text-bg-secondary">
                                                    {{ 'You'|trans }}
                                                </span>
                                        {% endif %}
                                    </div>
                                    <span class="text-muted fs-7">on {{ message.created_at|format_date }}</span>
                                </div>
                                {% if (ticket.status != 'closed') or (ticket.helpdesk.can_reopen) %}
                                    <div class="d-flex gap-3 align-items-center">
                                        <span class="text-muted fs-7">#{{ message.id }}</span>
                                        <button class="btn btn-outline-secondary btn-quote-reply"
                                                message-quote="{{ mf.markdown_quote(message.content) }}"
                                                data-bs-toggle="tooltip" data-bs-title="{{ 'Quote Reply'|trans }}">
                                            <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg"
                                                 viewBox="0 0 24 24">
                                                <path d="M11 18V10H9.12L11.12 6H5.38L3 10.76V18M9 16H5V11.24L6.62 8H7.88L5.88 12H9M21 18V10H19.12L21.12 6H15.38L13 10.76V18M19 16H15V11.24L16.62 8H17.88L15.88 12H19Z"/>
                                            </svg>
                                        </button>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <article class="markdown-body bg-transparent text-reset" id="message-{{ message.id }}">
                                            {{ (message.content ?? '')|markdown_to_html }}
                                        </article>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div>
            <div class="row">
                <div class="col-md-12">
                    {% if ticket.status == 'closed' and not ticket.helpdesk.can_reopen %}
                        <div class="mt-3 alert alert-secondary text-center">{{ 'Ticket was closed and cannot be reopened.'|trans }}</div>
                    {% else %}
                        {% if ticket.status == 'closed' %}
                            <div class="mt-3 alert alert-secondary text-center">{{ 'This ticket was closed, but you can still reopen it by replying.'|trans }}</div>
                        {% endif %}
                        <div class="card mt-3" id="reply-to">
                            <div class="card-body">
                                <form id="ticket-reply-form">
                                    <input type="hidden" name="id" value="{{ ticket.id }}">
                                    <textarea name="content" cols="5" rows="10" class="editor-textarea form-control" required="required"
                                              id="ticket-reply-text"></textarea>
                                    <button class="mt-2 btn btn-primary" type="submit" id="post-reply-btn"
                                            value="{{ 'Post'|trans }}"
                                            onclick="">{{ 'Post'|trans }}</button>
                                </form>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const ticketReplyForm = document.getElementById('ticket-reply-form');
            const closeTicketBtn = document.getElementById('ticket-close');
            const postReplyBtn = document.getElementById('post-reply-btn');
            const replyToMessageBtn = document.querySelectorAll('.btn-quote-reply');
            const ticketReplyTextArea = document.getElementById('ticket-reply-text');

            ticketReplyForm?.addEventListener('submit', (e) => {
                e.preventDefault();
                FOSSBilling.api.client.post('support/ticket_reply', FOSSBilling.tools.serializeFormDataToObject(new FormData(ticketReplyForm)),
                    () => {
                        flashMessage({
                            message: 'Posted reply',
                            reload: true
                        });
                    },
                    (res) => FOSSBilling.message(`${res.message} (${res.code})`, 'error')
                )
            });

            closeTicketBtn?.addEventListener('click', (e) => {
                e.preventDefault();
                toggleLoader();
                FOSSBilling.api.client.post('support/ticket_close', FOSSBilling.tools.serializeFormDataToObject(new FormData(ticketReplyForm)),
                    () => {
                        flashMessage({
                            message: 'Closed ticket #{{ ticket.id }}',
                            reload: true
                        });
                    },
                    (res) => FOSSBilling.message(`${res.message} (${res.code})`, 'error')
                )
            });

            postReplyBtn?.addEventListener('click', () => {
                if (document.getElementById('ticket-reply-text').value.length > 0) {
                    toggleLoader();
                }
            });

            replyToMessageBtn.forEach((reply) => {
                reply.addEventListener('click', (e) => {
                    e.preventDefault();
                    let quote = e.currentTarget.getAttribute('message-quote');
                    quote = quote.replace(/^\s*$(?:\r\n?|\n)/gm, '');
                    if (ticketReplyTextArea.editor) {
                        ticketReplyTextArea.editor.setData(quote);
                        ticketReplyTextArea.editor.focus();
                    } else {
                        ticketReplyTextArea.textContent = quote;
                        ticketReplyTextArea.focus();
                    }
                });
            })

            document.getElementById('reply-to-btn')?.addEventListener('click', () => {
                if (ticketReplyTextArea.editor) {
                    ticketReplyTextArea.editor.focus();
                } else {
                    ticketReplyTextArea.focus();
                }
            });

            const toggleLoader = () => {
                let loader = document.querySelector('.wait');
                if (!loader) {
                    return;
                }
                if (loader.style.display === 'none') {
                    loader.style.display = 'block';
                } else {
                    loader.style.display = 'none';
                }
            }
        });
    </script>
{% endblock %}
