{% 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 head %}
    {{ encore_entry_link_tags('markdown') }}
{% endblock %}

{% block body_class %}support-ticket{% endblock %}
{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{{ 'support' | link }}">{{ '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>
                                <div class="badge {% if ticket.status=='open' %}bg-success{% elseif ticket.status == 'on_hold' %}bg-warning{% else %}bg-danger{% endif %}">{{ mf.status_name(ticket.status) }}</div>
                            </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'|link }}/{{ ticket.rel_id }}">{{ '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.admin_id %}border-primary{% endif %}">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center gap-2">
                                    <img src="{{ message.author.email|gravatar(40) }}" alt="{{ message.author.name }}"
                                         class="img-fluid img-thumbnail d-none d-md-block">
                                    <div class="d-flex flex-column">
                                        <span class="text-muted">
                                            {{ message.author.name }}
                                        </span>
                                        {% if message.admin_id %}
                                            <span class="badge bg-primary">
                                                    {{ 'Operator'|trans }}
                                                </span>
                                        {% else %}
                                            <span class="badge 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" id="message-{{ message.id }}">
                                            {{ message.content|markdown }}
                                        </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="CSRFToken" value="{{ CSRFToken }}"/>
                                    <input type="hidden" name="id" value="{{ ticket.id }}">
                                    <textarea name="content" cols="5" rows="10" class="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();
                API.client.post('support/ticket_reply',
                    new FormData(ticketReplyForm).serializeObject(),
                    () => {
                        flashMessage({
                            message: 'Posted reply',
                            reload: true
                        });
                    },
                    (res) => FOSSBilling.message(`${res.message} (${res.code})`, 'error')
                )
            });

            closeTicketBtn.addEventListener('click', (e) => {
                e.preventDefault();
                toggleLoader();
                API.client.post('support/ticket_close',
                    new FormData(ticketReplyForm).serializeObject(),
                    () => {
                        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');
                    ticketReplyTextArea.textContent = quote.replace(/^\s*$(?:\r\n?|\n)/gm, '');
                    ticketReplyTextArea.focus();
                });
            })

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

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