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

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

{% block meta_title %}{{ 'Support Tickets'|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 active" aria-current="page">{{ 'Tickets'|trans }}</li>
    </ul>
{% endblock %}

{% set active_menu = 'support' %}

{% block top_content %}

{% if request.show_filter %}
    <section class="card mb-3">
        <div class="card-body">
            <h5>{{ 'Filter Support Tickets'|trans }}</h5>
            <form method="get">
                <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                <div class="form-group mb-3 row">
                    <label class="form-label col-3 col-form-label">{{ 'Client ID'|trans }}</label>
                    <div class="col">
                        <input class="form-control" type="text" name="client_id" value="{{ request.client_id }}">
                    </div>
                </div>
                <div class="form-group mb-3 row">
                    <label class="form-label col-3 col-form-label">{{ 'Order ID'|trans }}</label>
                    <div class="col">
                        <input class="form-control" type="text" name="order_id" value="{{ request.order_id }}">
                    </div>
                </div>
                <div class="form-group mb-3 row">
                    <label class="form-label col-3 col-form-label">{{ 'Ticket Subject'|trans }}</label>
                    <div class="col">
                        <input class="form-control" type="text" name="subject" value="{{ request.subject }}">
                    </div>
                </div>
                <div class="form-group mb-3 row">
                    <label class="form-label col-3 col-form-label">{{ 'Ticket Messages'|trans }}</label>
                    <div class="col">
                        <input class="form-control" type="text" name="content" value="{{ request.content }}">
                    </div>
                </div>
                <div class="form-group 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="{{ request.priority }}">
                    </div>
                </div>
                <div class="form-group 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 }), request.status, 0, "All statuses") }}
                    </div>
                </div>
                <div class="form-group 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, request.support_helpdesk_id, 0, "All helpdesks") }}
                    </div>
                </div>
                <div class="form-group mb-3 row">
                    <label class="form-label col-3 col-form-label" for="created_at">{{ 'Created At'|trans }}</label>
                    <div class="col">
                        <div class="input-group">
                            <div class="input-icon w-100">
                                <input class="form-control datepicker"
                                       id="created_at"
                                       value="{% if request.date_from %}{{ request.date_from|date('Y-m-d') }}{% endif %}{% if request.date_to %} to {{ request.date_to|date('Y-m-d') }}{% endif %}"
                                       data-name-from="date_from"
                                       data-name-to="date_to"
                                >
                                <span class="input-icon-addon">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
                                        <path d="M16 3l0 4"></path>
                                        <path d="M8 3l0 4"></path>
                                        <path d="M4 11l16 0"></path>
                                        <path d="M11 15l1 0"></path>
                                        <path d="M12 15l0 3"></path>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <input type="hidden" name="_url" value="{{ request._url }}">
                <input type="hidden" name="show_filter" value="1">
                <div class="d-flex gap-2">
                    <button class="btn btn-primary w-75" type="submit">{{ 'Filter'|trans }}</button>
                    <a class="btn btn-danger w-25" href="{{ request._url }}?show_filter=1">{{ 'Reset'|trans }}</a>
                </div>
            </form>
        </div>
    </section>
{% else %}
    {% set statuses = admin.support_ticket_get_statuses %}
    <section class="row row-cards mb-3">
        <div class="col-sm-6 col-lg-3">
            <a class="card card-sm card-link" href="{{ 'support'|alink({ 'status': 'open' }) }}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-danger text-white avatar">{{ statuses.open }}</span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ 'Tickets waiting for staff reply'|trans }}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-3">
            <a class="card card-sm card-link" href="{{ 'support'|alink({ 'status': 'on_hold' }) }}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-warning text-white avatar">{{ statuses.on_hold }}</span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ 'Tickets waiting for client reply'|trans }}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-3">
            <a class="card card-sm card-link" href="{{ 'support'|alink({ 'status': 'closed' }) }}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-secondary text-white avatar">{{ statuses.closed }}</span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ 'Solved tickets'|trans }}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-3">
            <a class="card card-sm card-link" href="{{ 'support'|alink }}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-blue text-white avatar">{{ statuses.open + statuses.on_hold + statuses.closed }}</span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ 'Total'|trans }}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </section>
    {% endif %}
{% 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">{{ 'Tickets'|trans }}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-new" data-bs-toggle="tab">
                <svg class="icon me-2">
                    <use xlink:href="#plus" />
                </svg>
                {{ 'New Client Ticket'|trans }}
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-email" data-bs-toggle="tab">
                <svg class="icon me-2">
                    <use xlink:href="#plus" />
                </svg>
                {{ 'New Public Ticket'|trans }}
            </a>
        </li>
    </ul>

<div class="card">
    <div class="tab-content">
        <div class="tab-pane fade show active" id="tab-index" role="tabpanel" aria-labelledby="index-tab">
            {% include 'partial_search.html.twig' %}
            <table class="table card-table table-vcenter table-striped text-nowrap sortable">
                <thead>
                    <tr>
                        <th class="w-1 no-sort">
                            <input class="form-check-input m-0 align-middle batch-delete-master-checkbox" type="checkbox">
                        </th>
                        <th>{{ 'Client'|trans }}</th>
                        <th>{{ 'Subject'|trans }}</th>
                        <th>{{ 'Status'|trans }}</th>
                        <th>{{ 'Helpdesk'|trans }}</th>
                        <th class="w-1"></th>
                    </tr>
                </thead>
                <tbody>
                    {% set tickets = admin.support_ticket_get_list({ 'per_page': 30, 'page': request.page }|merge(request)) %}
                    {% for i, ticket in tickets.list %}
                    <tr class="priority_{{ ticket.priority }}">
                        <td>
                            <input class="form-check-input m-0 align-middle batch-delete-checkbox" type="checkbox" data-item-id="{{ ticket.id }}">
                        </td>
                        <td>
                            <div class="d-flex py-1 align-items-center">
                                <a href="{{ 'client/manage'|alink }}/{{ ticket.client_id }}">
                                    <span class="avatar me-2" style="background-image: url({{ ticket.client.email|gravatar }}?size=40)"></span>
                                </a>
                                <div class="flex-fill">
                                    <div class="font-weight-medium">
                                        <a href="{{ 'client/manage'|alink }}/{{ ticket.client_id }}">{{ ticket.client.first_name }} {{ ticket.client.last_name }}</a>
                                    </div>
                                    <div class="text-muted">{{ ticket.client.email }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div>
                                <a href="{{ 'support/ticket'|alink }}/{{ ticket.id }}#reply-box">#{{ ticket.id }} - {{ ticket.subject|truncate(50) }} ({{ ticket.replies }})</a>
                            </div>
                            {% if ticket.notes|length %}
                                <a href="#" rel="{{ ticket.id }}" title="{{ ticket.notes|length }}" class="show-notes">
                                    <svg class="icon">
                                        <use xlink:href="#notes" />
                                    </svg>
                                </a>
                            {% endif %}
                            <span class="text-muted">{{ ticket.updated_at|timeago }} {{ 'ago'|trans }}</span>
                        </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>{{ ticket.helpdesk.name }}</td>
                        <td>
                            <a class="btn btn-icon" href="{{ '/support/ticket'|alink }}/{{ ticket.id }}#reply-box">
                                <svg class="icon">
                                    <use xlink:href="#edit" />
                                </svg>
                            </a>
                            <a class="btn btn-icon 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">
                                    <use xlink:href="#delete" />
                                </svg>
                            </a>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td class="text-muted" colspan="6">{{ 'The list is empty'|trans }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

            <div class="card-footer d-flex align-items-center justify-content-between">
                {% include 'partial_batch_delete.html.twig' with { 'action': 'admin/support/batch_delete' } %}
                {% include 'partial_pagination.html.twig' with { 'list': tickets, 'url': 'support' } %}
            </div>
        </div>

        <div class="tab-pane fade" id="tab-new" role="tabpanel" aria-labelledby="new-tab">
            <div class="card-body">
                <h5>{{ 'Open Ticket for Existing Client'|trans }}</h5>
                <form method="post" action="{{ 'api/admin/support/ticket_create'|link }}" class="api-form" data-api-redirect="{{ 'support'|alink }}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="form-group mb-3 row">
                        <label class="form-label col-3 col-form-label" for="client_id">{{ 'Client'|trans }}</label>
                        <div class="col">
                            {% if not request.client_id %}
                                <select class="form-control autocomplete-selector"
                                        placeholder="{{ 'Start typing the client name or ID'|trans }}"
                                        id="client_id"
                                        name="client_id"
                                        data-resturl="admin/client/get_pairs"
                                        data-csrf="{{ CSRFToken }}">
                                </select>
                            {% else %}
                                {% set client = admin.client_get({ 'id': request.client_id }) %}
                                <input type="text" id="client_id" class="form-control" disabled value="{{ client.first_name }} {{ client.last_name }}" />
                                <input type="hidden" name="client_id" value="{{ request.client_id }}" />
                            {% endif %}
                        </div>
                    </div>
                    <div class="form-group 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, '', 1) }}
                        </div>
                    </div>
                    <div class="form-group 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="form-group mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Message'|trans }}</label>
                        <div class="col">
                            <textarea class="form-control" name="content" rows="10" required id="msg-area-{{ message.id }}">{{ profile.signature }}</textarea>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">{{ 'Create'|trans }}</button>
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-email" role="tabpanel" aria-labelledby="email-tab">
            <div class="card-body">
                <h5>{{ 'Open Public Ticket for Non-client'|trans }}</h5>
                <form method="post" action="{{ 'api/admin/support/public_ticket_create'|link }}" class="api-form" data-api-jsonp="onAfterPublicTicketCreate">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="form-group mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Receiver Name'|trans }}</label>
                        <div class="col">
                            <input class="form-control" type="text" name="name" required placeholder="{{ 'John Smith'|trans }}">
                        </div>
                    </div>
                    <div class="form-group mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Email'|trans }}</label>
                        <div class="col">
                            <input class="form-control" type="text" name="email" required placeholder="{{ 'user@domail.com'|trans }}">
                        </div>
                    </div>
                    <div class="form-group 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 placeholder="{{ 'Email Subject'|trans }}">
                        </div>
                    </div>
                    <div class="form-group mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Message'|trans }}</label>
                        <div class="col">
                            <textarea class="form-control" name="message" rows="10" required>{{ profile.signature }}</textarea>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">{{ 'Create'|trans }}</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    document.querySelectorAll('a.show-notes').forEach(notes => {
        notes.addEventListener('click', function(e) {
            e.preventDefault();

            API.admin.post('support/ticket_get', { id: e.currentTarget.getAttribute('rel') }, function(result){
                var html = document.createElement('div');

                result.notes.forEach(function(entry) {
                    var div = document.createElement('div');
                    div.innerHTML = entry.note;

                    html.appendChild(div);
                    html.appendChild(document.createElement('hr'));
                });

                Modals.create({
                    title: "{{ 'Notes'|trans }}",
                    content: html.outerHTML,
                });
            });
        });
    })

    function onAfterPublicTicketCreate(result) {
        bb.redirect("{{ 'support/public-ticket'|alink }}/" + result);
    }
</script>
{% endblock %}
