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

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

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

{% set active_menu = 'support' %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|url }}">
                <svg class="icon">
                    <use xlink:href="#home" />
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'support'|url }}">{{ 'Support'|trans }}</a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'support/public-tickets'|url(query: { 'status': 'open' }) }}">{{ 'Public Tickets'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">#{{ ticket.id }} - {{ ticket.subject }}</li>
    </ol>
{% endblock %}

{% block content %}
{% embed 'partial_admin_detail_tabs.html.twig' with {
    title: ticket.subject,
    subtitle: 'Review public ticket details, adjust its status, and respond as staff.'|trans,
    outer_card_class: 'mb-3'
} %}
    {% block detail_tabs %}
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" href="#tab-index" data-bs-toggle="tab" role="tab">{{ 'Ticket'|trans }}</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" href="#tab-manage" data-bs-toggle="tab" role="tab">{{ 'Manage'|trans }}</a>
                    </li>
    {% endblock %}

    {% block detail_tab_content %}
        {% import 'macro_functions.html.twig' as mf %}
        <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
            <div class="p-3 d-flex flex-column gap-3">
                {% embed 'partial_admin_summary_card.html.twig' with {
                    title: 'Public Ticket Summary'|trans,
                    subtitle: 'Review the author details, current state, and message timing for this public ticket.'|trans,
                    centered_actions: true,
                    card_class: 'mb-0'
                } %}
                    {% import 'macro_functions.html.twig' as mf %}
                    {% block summary_content %}
                        <div class="table-responsive">
                            <table class="table card-table table-vcenter table-striped text-nowrap">
                                <tbody>
                                    <tr><td class="w-50 text-end">{{ 'Ticket ID'|trans }}:</td><td>#{{ ticket.id }}</td></tr>
                                    <tr><td class="text-end">{{ 'Subject'|trans }}:</td><td>{{ ticket.subject }}</td></tr>
                                    <tr><td class="text-end">{{ 'Author'|trans }}:</td><td>{{ ticket.author_name }}</td></tr>
                                    <tr><td class="text-end">{{ 'Email'|trans }}:</td><td>{{ ticket.author_email }}</td></tr>
                                    <tr><td class="text-end">{{ 'Status'|trans }}:</td><td>{{ mf.status_badge(ticket.status, 'ticket') }}</td></tr>
                                    <tr><td class="text-end">{{ 'Time Opened'|trans }}:</td><td>{{ ticket.created_at|format_date }}</td></tr>
                                    {% if ticket.created_at != ticket.updated_at %}
                                    <tr><td class="text-end">{{ 'Last Updated'|trans }}:</td><td>{{ ticket.updated_at|timeago }} {{ 'ago'|trans }}</td></tr>
                                    {% endif %}
                                </tbody>
                            </table>
                        </div>
                    {% endblock %}

                    {% block summary_actions %}
                        {% if ticket.status != 'closed' %}
                        <a class="btn btn-warning" href="{{ 'support/public_ticket_close'|api_url(query: { 'id': ticket.id }) }}"
                            {{ fb_api_link({ redirect: 'support/public-tickets'|url }) }}>
                            <svg class="icon"><use xlink:href="#close" /></svg>
                            {{ 'Close'|trans }}
                        </a>
                        {% endif %}
                        <a class="btn btn-danger" href="{{ 'support/public_ticket_delete'|api_url(query: { 'id' : ticket.id  }) }}"
                            {{ fb_api_link({ message: 'Are you sure?'|trans, modal: {type: 'confirm', title: 'Are you sure?'|trans}, redirect: 'support/public-tickets'|url }) }}>
                            <svg class="icon"><use xlink:href="#delete" /></svg>
                            {{ 'Delete'|trans }}
                        </a>
                        <a class="btn btn-primary"
                            href='{{ "support/contact-us/conversation/#{ticket.hash}"|url(area: 'client') }}'
                            target="_blank">
                            <svg class="icon"><use xlink:href="#eye" /></svg>
                            {{ 'View as Author'|trans }}
                        </a>
                    {% endblock %}
                {% endembed %}

                <div class="card">
                    <div class="card-body pb-3">
                        <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                            <div class="d-flex flex-column gap-1">
                                <h5 class="card-title mb-0">{{ 'Conversation'|trans }}</h5>
                                <p class="text-secondary mb-0">{{ 'Review the public message history and expand replies when needed.'|trans }}</p>
                            </div>
                            <a href="#" class="btn btn-secondary" id="toggleMessages">
                                <svg class="icon">
                                    <use xlink:href="#eye" />
                                </svg>
                                {{ 'Show/Hide Messages'|trans }}
                            </a>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="conversation">
                            {% for i, message in ticket.messages %}
                                <div class="card {% if loop.first %}mt-2 {% endif %}mb-3">
                                    <div class="card-header" style="cursor: pointer;">
                                        {{ avatar(message.author.email, 20, 'avatar avatar-xs me-2') }}
                                        {{ message.author.name }}
                                        <span class="ms-auto text-muted">{{ message.created_at|format_datetime }}</span>
                                    </div>
                                    <div class="card-body">
                                        {{ (message.content ?? '')|markdown_to_html }}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <div class="card mb-0" id="reply-box">
                    <form method="post" action="{{ 'support/public_ticket_reply'|api_url }}"
                        {{ fb_api_form({ redirect: 'support/public-tickets'|url(query: { 'status': 'open' }) }) }}>
                        <div class="card-body">
                            {% set public_ticket_recipient = ticket.author_name ? ticket.author_name : ticket.author_email %}
                            <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
                                <div class="d-flex flex-column gap-1">
                                    <h5 class="card-title mb-0">{{ 'Respond as'|trans }} {{ profile.name }}</h5>
                                    <p class="text-secondary mb-0">{{ 'Compose a staff reply and close the public ticket when appropriate.'|trans }}</p>
                                </div>
                                <div>{{ include('mod_support_canned_selector.html.twig') }}</div>
                            </div>

                            <textarea name="content" rows="10" required class="editor-textarea" id="rt">{{ 'Hello'|trans }} {{ public_ticket_recipient }},
{{ canned_delay_message }}

{{ profile.signature }}
{{ ticket.helpdesk.signature }}</textarea>
                        </div>

                        <div class="card-footer d-flex flex-wrap align-items-center gap-2">
                            <input type="hidden" name="id" value="{{ ticket.id }}">
                            <input type="submit" value="{{ 'Post'|trans }}" class="btn btn-primary ms-auto">

                            {% if ticket.messages|length > 2 and ticket.status != 'closed' %}
                            <a class="btn btn-warning" href="{{ 'support/public_ticket_close'|api_url(query: { 'id': ticket.id }) }}"
                                {{ fb_api_link({ message: 'Are you sure?'|trans, modal: {type: 'confirm', title: 'Are you sure?'|trans}, redirect: 'support/public-tickets'|url(query: { 'status': 'open' }) }) }}>
                                <svg class="icon">
                                    <use xlink:href="#check" />
                                </svg>
                                {{ 'Close Ticket'|trans }}
                            </a>
                            {% endif %}
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-manage" role="tabpanel">
            <div class="card-body">
                <form method="post" action="{{ 'support/public_ticket_update'|api_url }}" {{ fb_api_form({ reload: true }) }}>
                    {% embed 'partial_admin_form_card.html.twig' with {
                        title: 'Public Ticket Settings'|trans,
                        subtitle: 'Update the subject and current workflow status for this public ticket.'|trans
                    } %}
                        {% import 'macro_functions.html.twig' as mf %}
                        {% block form_content %}
                            <div class="row g-3">
                                <div class="col-lg-8">
                                    <label class="form-label">{{ 'Subject'|trans }}</label>
                                    <input class="form-control" type="text" name="subject" value="{{ ticket.subject }}" required>
                                </div>
                                <div class="col-lg-4">
                                    <label class="form-label">{{ 'Status'|trans }}</label>
                                    {{ mf.selectbox('status', admin.support_ticket_get_statuses({ 'titles': 1 }), ticket.status, 1) }}
                                </div>
                            </div>
                            <input type="hidden" name="id" value="{{ ticket.id }}">
                        {% endblock %}

                        {% block form_actions %}
                            <button class="btn btn-primary" type="submit">{{ 'Update'|trans }}</button>
                        {% endblock %}
                    {% endembed %}
                </form>
            </div>
        </div>
    {% endblock %}
{% endembed %}

{% set canned_response_selector %}
<div class="canned_response">
    <select name="canned_response" class="canned">
    {% for response in admin.support_canned_get_list({ 'per_page': 90 }).list %}
        <option value="{{ response.id }}">{{ response.title }}</option>
    {% endfor %}
    </select>
</div>
{% endset %}
{% endblock %}

{% block js%}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelector('#reply-box textarea').focus();

        document.querySelectorAll('.conversation .card-header').forEach(function(header, event) {
            header.addEventListener('click', function() {
                const body = this.nextElementSibling;
                if (body && body.classList.contains('card-body')) {
                    body.classList.toggle('hidden');
                }
            });
        });

        const toggleMessages = document.getElementById('toggleMessages');
        if (toggleMessages) {
            toggleMessages.addEventListener('click', function(event) {
                event.preventDefault();
                document.querySelectorAll('.conversation .card-body').forEach(function(body) {
                    body.classList.toggle('hidden');
                });
            });
        }
    });
</script>
{% endblock %}

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