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

{% block content %}
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" href="#tab-index" data-bs-toggle="tab">{{ 'Ticket'|trans }}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-manage" data-bs-toggle="tab">{{ 'Manage'|trans }}</a>
        </li>
    </ul>

<div class="card mb-3">
    <div class="tab-content">
        <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
            <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>
                            {% if ticket.status == 'open' %}
                                <span class="badge bg-success me-1"></span>
                            {% endif %}
                            {% if ticket.status == 'on_hold' %}
                                <span class="badge bg-warning me-1"></span>
                            {% endif %}
                            {% if ticket.status == 'closed' %}
                                <span class="badge bg-secondary me-1"></span>
                            {% endif %}
                            {{ mf.status_name(ticket.status) }}
                        </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 class="card-footer text-center">
                {% if ticket.status != 'closed' %}
                <a class="btn btn-primary api-link"
                    href="{{ 'api/admin/support/public_ticket_close'|link({ 'id': ticket.id, 'CSRFToken': CSRFToken }) }}"
                    data-api-redirect="{{ 'support/public-tickets'|alink }}">
                    <svg class="icon icon-tabler" width="24" height="24">
                        <use xlink:href="#close" />
                    </svg>
                    <span class="d-block text-secondary">{{ 'Close'|trans }}</span>
                </a>
                {% endif %}
                <a class="btn btn-primary api-link"
                    href="{{ 'api/admin/support/public_ticket_delete'|link({ 'id' : ticket.id, 'CSRFToken': CSRFToken }) }}"
                    data-api-confirm="{{ 'Are you sure?'|trans }}"
                    data-api-redirect="{{ 'support/public-tickets'|alink }}">
                    <svg class="icon icon-tabler" width="24" height="24">
                        <use xlink:href="#delete" />
                    </svg>
                    <span class="d-block text-secondary">{{ 'Delete'|trans }}</span>
                </a>
                <a class="btn btn-primary"
                    href="{{ 'support/contact-us/conversation'|link }}/{{ ticket.hash }}"
                    target="_blank">
                    <svg class="icon icon-tabler" width="24" height="24">
                        <use xlink:href="#eye" />
                    </svg>
                    <span class="d-block text-secondary">{{ 'View as Client'|trans }}</span>
                </a>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-manage" role="tabpanel">
            <div class="card-body">
                <form method="post" action="{{ 'api/admin/support/public_ticket_update'|link }}" class="api-form" data-api-reload="1">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Subject'|trans }}</label>
                        <div class="col">
                            <input class="form-control" type="text" name="subject" value="{{ ticket.subject }}" required>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Status'|trans }}</label>
                        <div class="col">
                            {{ mf.selectbox('status', admin.support_ticket_get_statuses({ 'titles': 1 }), ticket.status, 1) }}
                        </div>
                    </div>

                    <input type="hidden" name="id" value="{{ ticket.id }}">
                    <input type="submit" value="{{ 'Update'|trans }}" class="btn btn-primary w-100">
                </form>
            </div>
        </div>
    </div>
</div>

{% 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 %}

<div class="conversation">
    {% for i, message in ticket.messages %}
        <div class="card mb-3">
            <div class="card-header" style="cursor: pointer;">
                <span class="avatar avatar-xs me-2" style="background-image: url({{ message.author.email|gravatar }}?size=20)"></span>
                {{ message.author.name }}
                <span class="ms-auto text-muted">{{ message.created_at|format_datetime }}</span>
            </div>
            <div class="card-body">
                {{ message.content|markdown }}
            </div>
        </div>
    {% endfor %}
</div>

<div class="card" id="reply-box">
    <form method="post" action="{{ 'api/admin/support/public_ticket_reply'|link }}" class="api-form" data-api-redirect="{{ 'support/public-tickets'|alink({ 'status': 'open' }) }}">
        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
        <div class="card-body">
            <div class="d-flex">
                <h5>{{ 'Reply as'|trans }} {{ profile.name }}</h5>
                <div class="ms-auto">{% include 'mod_support_canned_selector.html.twig' %}</div>
            </div>

            <textarea name="content" rows="10" required class="bb-textarea" id="rt">{{ 'Hello'|trans }} {{ ticket.client.first_name }},
{{ canned_delay_message }}

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

        <div class="card-footer d-flex gap-2">
            <a href="#" class="btn btn-secondary w-25" onclick="$('.conversation .card-body').toggle(); return false;">
                <svg class="icon">
                    <use xlink:href="#eye" />
                </svg>
                {{ 'Show/Hide messages'|trans }}
            </a>

            <input type="hidden" name="id" value="{{ ticket.id }}">
            <input type="submit" value="{{ 'Post'|trans }}" class="btn btn-primary w-100">

            {% if ticket.messages|length > 2 and ticket.status != 'closed' %}
            <a class="btn btn-danger w-25 api-link"
                href="{{ 'api/admin/support/public_ticket_close'|link({ 'id': ticket.id, 'CSRFToken': CSRFToken }) }}"
                data-api-confirm="{{ 'Are you sure?'|trans }}"
                data-api-redirect="{{ 'support/public-tickets'|alink({ 'status': 'open' }) }}">
                <svg class="icon">
                    <use xlink:href="#check" />
                </svg>
                {{ 'Close ticket'|trans }}
            </a>
            {% endif %}
        </div>
    </form>
</div>
{% endblock %}

{% block js%}
<script>
    $(function() {
        $('#reply-box textarea').focus();

        $('.conversation .card-header').on('click', function() {
            $(this).siblings('.card-body').toggle();

            return false;
        });
    });
</script>
{% endblock %}

{% block head %}{{ mf.bb_editor('.bb-textarea') }}{% endblock %}
