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

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

{% block meta_title %}{{ ticket.subject }} - {{ ticket.messages|length }} {{ 'message(s)'|trans }}{% endblock %}

{% block breadcrumbs %}
    <ul 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'|alink }}">{{ 'Tickets'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">#{{ ticket.id }} - {{ ticket.subject }}</li>
    </ul>
{% endblock %}

{% set active_menu = 'support' %}

{% block content %}
<div class="card mb-3">
    <div class="card-body">
        <h3>{{ ticket.subject }}</h3>
    </div>

    <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>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-notes" data-bs-toggle="tab">{{ 'Notes'|trans }} {% if ticket.notes|length > 0 %}({{ ticket.notes|length }}){% endif %}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-support" data-bs-toggle="tab">{{ 'Client Tickets'|trans }}</a>
        </li>
    </ul>

    <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-25">{{ 'Ticket ID'|trans }}</td>
                        <td>#{{ ticket.id }}</td>
                    </tr>
                    <tr>
                        <td>{{ 'Client'|trans }}</td>
                        <td><a href="{{ 'client/manage'|alink }}/{{ ticket.client.id }}">{{ ticket.client.first_name }} {{ ticket.client.last_name }}</a> (#{{ ticket.client.id }})</td>
                    </tr>
                    <tr>
                        <td>{{ 'Helpdesk'|trans }}</td>
                        <td>{{ admin.support_helpdesk_get_pairs[ticket.support_helpdesk_id]|trans }}</td>
                    </tr>
                    <tr>
                        <td>{{ 'Status'|trans }}</td>
                            {% for tcode, tstatus in admin.support_ticket_get_statuses({ 'titles': 1 }) %}
                                {% if ticket.status == tcode %}
                                <td>{{ tstatus|trans }}</td>
                                {% endif %}
                            {% endfor %}
                    </tr>
                    <tr>
                        <td>{{ 'Time Opened'|trans }}</td>
                        <td>{{ ticket.created_at|format_date }}</td>
                    </tr>

                {% set task = ticket.rel %}
                    {% if task.task %}
                    <tr>
                        <td><label>{{ 'Task'|trans }}</label></td>
                        <td>{{ mf.status_name(task.task) }}</td>
                    </tr>
                    {% endif %}

                    {% if task.type == 'order' %}
                    <tr>
                        <td><label>{{ 'Related To'|trans }}</label></td>
                        <td><a href="{{ 'order/manage'|alink }}/{{ task.id }}">Order #{{ task.id }}</a></td>
                    </tr>
                    {% endif %}

                    {% if task.task == 'upgrade' %}
                    <tr>
                        <td><label>{{ 'Upgrade To'|trans }}</label></td>
                        <td><a href="{{ 'product/manage'|alink }}/{{ task.new_value }}">{{ admin.product_get_pairs[task.new_value] }}</a></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/ticket_close'|link({ 'id': ticket.id, 'CSRFToken': CSRFToken }) }}"
                    data-api-confirm="{{ 'Are you sure?'|trans }}"
                    data-api-redirect="{{ 'support'|alink({ 'status': 'open' }) }}">
                    <svg class="icon icon-tabler" width="24" height="24">
                        <use xlink:href="#close" />
                    </svg>
                    <span>{{ 'Close'|trans }}</span>
                </a>
                {% endif %}
                <a class="btn btn-primary api-link"
                    href="{{ 'api/admin/support/ticket_delete'|link({ 'id': ticket.id, 'CSRFToken': CSRFToken }) }}"
                    data-api-confirm="{{ 'Are you sure?'|trans }}"
                    data-api-redirect="{{ 'support'|alink }}">
                    <svg class="icon icon-tabler" width="24" height="24">
                        <use xlink:href="#delete" />
                    </svg>
                    <span>{{ 'Delete'|trans }}</span>
                </a>

                {% if task.status == 'pending' %}
                <a href="{{ 'api/admin/support/task_complete'|link({ 'id': ticket.id, 'CSRFToken': CSRFToken }) }}" class="btn btn-primary api-link" data-api-reload="1">
                    <img src="images/icons/middlenav/check.png" alt="" data-api-reload="1">
                    <span>{{ 'Set Task Complete'|trans }}</span>
                </a>
                {% endif %}
            </div>
        </div>

        <div class="tab-pane fade" id="tab-manage" role="tabpanel">
            <div class="card-body">
                <form method="post" action="{{ 'api/admin/support/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">{{ 'Helpdesk'|trans }}</label>
                        <div class="col">
                            {{ mf.selectbox('support_helpdesk_id', admin.support_helpdesk_get_pairs, ticket.support_helpdesk_id, 1) }}
                        </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>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Priority'|trans }}</label>
                        <div class="col">
                            <input class="form-control" type="text" name="priority" value="{{ ticket.priority }}">
                        </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 class="tab-pane fade" id="tab-notes" role="tabpanel">
            <table class="table card-table table-vcenter table-striped text-nowrap">
            {% for note in ticket.notes %}
                <tr>
                    <td class="w-1">
                        <a href="{{ 'staff'|alink }}/manage/{{ note.admin_id }}">{{ note.author.name }}</a>
                    </td>
                    <td>{{ note.note }}</td>
                    <td class="w-1">
                        <a class="btn btn-icon api-link"
                            href="{{ 'api/admin/support/note_delete'|link({ 'id': note.id, 'CSRFToken': CSRFToken }) }}"
                            data-api-confirm="{{ 'Are you sure?'|trans }}"
                            data-api-reload="1">
                            <svg class="icon">
                                <use xlink:href="#delete" />
                            </svg>
                        </a>
                    </td>
                </tr>
            {% endfor %}
            </table>
            <hr>

            <div class="card-body">
                <form method="post" action="{{ 'api/admin/support/note_create'|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" for="textareaNote">{{ 'Note'|trans }}</label>
                        <div class="col">
                            <textarea class="form-control" id="textareaNote" name="note" rows="2" required></textarea>
                        </div>
                    </div>

                    <input type="hidden" name="ticket_id" value="{{ ticket.id }}">
                    <button class="btn btn-primary w-100" type="submit">
                        <svg class="icon">
                            <use xlink:href="#plus" />
                        </svg>
                        {{ 'Add note'|trans }}
                    </button>
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-support" role="tabpanel">
            <table class="table card-table table-vcenter table-striped text-nowrap">
                <thead>
                    <tr>
                        <th>{{ 'ID'|trans }}</th>
                        <th>{{ 'Helpdesk'|trans }}</th>
                        <th>{{ 'Subject'|trans }}</th>
                        <th>{{ 'Status'|trans }}</th>
                        <th class="w-1"></th>
                    </tr>
                </thead>
                <tbody>
                    {% set tickets = admin.support_ticket_get_list({ 'per_page': '20', 'client_id': ticket.client.id }) %}
                    {% for ticket in tickets.list %}
                    <tr>
                        <td>{{ ticket.id }}</td>
                        <td>{{ ticket.helpdesk.name }}</td>
                        <td>
                            <a href="{{ '/support/ticket'|alink }}/{{ ticket.id }}">{{ ticket.subject|truncate(30) }}</a>
                        </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>
                        <td>
                            <a class="btn btn-icon" href="{{ '/support/ticket'|alink }}/{{ ticket.id }}">
                                <svg class="icon">
                                    <use xlink:href="#edit" />
                                </svg>
                            </a>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td class="text-muted" colspan="5">{{ 'The list is empty'|trans }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

            <div class="card-footer">
                <a href="{{ 'support'|alink({ 'client_id': client.id}) }}#tab-new" class="btn btn-primary">
                    <svg class="icon">
                        <use xlink:href="#plus" />
                    </svg>
                    {{ 'New Support Ticket'|trans }}
                </a>
            </div>
        </div>
    </div>
</div>

<div class="conversation">
    {% for i, message in ticket.messages %}
    <div class="card mb-3 col-md-10 {% if ticket.first.author.email != message.author.email %}offset-md-2{% endif %} {{ loop.last ? 'last' : '' }}" id="{{ message.id == request_message ? 'direct-msg' : '' }}">
        <div class="card-header" style="cursor: pointer;">
            <span class="avatar avatar-xs me-2" style="background-image: url({{ message.author.email|gravatar }}&size=24)"></span>
            {{ message.author.name }}
            <a class="ms-2" href="{{ '/support/ticket'|alink }}/{{ ticket.id }}/message/{{ message.id }}">
                <svg class="icon">
                    <use xlink:href="#link" />
                </svg>
            </a>
            <span class="ms-auto text-muted">{{ message.created_at|format_datetime }}</span>
        </div>
        <div class="card-body" style="display:{{ loop.last or loop.index + 1 == ticket.messages|length ? 'block' : 'none' }};">
            {{ message.content|markdown }}
        </div>
    </div>
    {% endfor %}
</div>

<div class="card" id="reply-box">
    <form method="post" action="{{ 'api/admin/support/ticket_reply'|link }}" class="api-form" data-api-redirect="{{ 'support'|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 class="bb-textarea" id="rt" name="content" rows="10" required>{{ '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" id="toggleMessages">
                <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/ticket_close'|link({ 'id': ticket.id, 'CSRFToken': CSRFToken }) }}"
                data-api-confirm="{{ 'Are you sure?'|trans }}"
                data-api-redirect="{{ 'support'|alink({ 'status': 'open' }) }}">
                <svg class="icon">
                    <use xlink:href="#check" />
                </svg>
                {{ 'Close ticket'|trans }}
            </a>
            {% endif %}
        </div>
    </form>
</div>
{% endblock %}

{% block js%}
<script>
    function setSelRange(inputEl, selStart, selEnd) {
        if (inputEl.setSelectionRange) {
            inputEl.focus();
            inputEl.setSelectionRange(selStart, selEnd);
        } else if (inputEl.createTextRange) {
            var range = inputEl.createTextRange();

            range.collapse(true);
            range.moveEnd('character', selEnd);
            range.moveStart('character', selStart);
            range.select();
        }
    }

    $(function() {
        $('#reply-box textarea').focus();

        var ta = document.getElementById('rt');
        var pos = ta.innerHTML.indexOf('\n') + 2;

        setSelRange(ta, pos, pos);

        $('.shd select').on('change',function(){
            bb.get('admin/support/ticket_update', {
                id: {{ ticket.id }},
                support_helpdesk_id: $(this).val(),
                CSRFToken: "{{CSRFToken}}"
            });
        });

        $('input.tst').on('click', function(){
            bb.get('admin/support/ticket_update', {
                id: {{ ticket.id }},
                status: $(this).val(),
                CSRFToken: "{{CSRFToken}}"
            });
        });

        $('.conversation').on('click', '.card-header', function(event) {
            {# if (event.target !== this) return; #}
            $(this).siblings('.card-body').toggle();

            {# return false; #}
        });

        if ($('#direct-msg').length > 0){
            $('#direct-msg > .card-body').show();
            $('html, body').animate({
                scrollTop: $('#direct-msg').offset().top-50
            }, 500);
            $('#direct-msg').css("background-color", "rgb(235, 235, 235)");
        }

        var showAllMessages = false;
        $('.api-form').on('click', '#toggleMessages', function(event) {
            event.preventDefault();

            showAllMessages = !showAllMessages;
            $('.conversation .card-body').toggle(showAllMessages);

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

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