{% 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 page_header %}{{ 'Support tickets'|trans }}{% endblock %}

{% block body_class %}support-tickets{% endblock %}
{% block breadcrumb %}<li class="breadcrumb-item active" aria-current="page">{{ 'Support tickets'|trans }}</li>{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header py-3 py-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-1">{{ 'Support tickets'|trans }}</h5>
                        <span class="mt-1 small text-secondary">{{ 'Need an answer? We are here to help!'|trans }}</span>
                    </div>
                    <div>
                        <button type="button" class="ml-2 btn btn-primary" data-bs-toggle="modal" data-bs-target="#open-ticket-modal">{{ 'New ticket'|trans }}</button>
                    </div>
                </div>
            </div>
            <div class="card-body table-responsive">
                {% set tickets = client.support_ticket_get_list({"per_page":10, "page":request.page}) %}
                {% if tickets.list %}
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>{{ 'Id'|trans }}</th>
                        <th>{{ 'Subject'|trans }}</th>
                        <th>{{ 'Help desk'|trans }}</th>
                        <th>{{ 'Status'|trans }}</th>
                        <th>{{ 'Submitted'|trans }}</th>
                        <th>{{ 'Actions'|trans }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for i, ticket in tickets.list %}
                        <tr>
                            <td>#{{ticket.id}}</td>
                            <td><a href="{{ 'support/ticket'|link }}/{{ ticket.id }}">{{ ticket.subject|truncate(40) }}</a></td>
                            <td>{{ ticket.helpdesk.name }}</td>
                            <td>
                                <span class="badge {% if ticket.status == 'open' %}bg-success{% elseif ticket.status == 'on_hold' %}bg-warning{% elseif ticket.status == 'closed' %}bg-secondary{% endif %}">{{ mf.status_name(ticket.status) }}</span>
                            </td>
                            <td>{{ ticket.created_at|timeago }} {{ 'ago'|trans }}</td>
                            <td class="actions">
                                {% if ticket.status == 'closed' %}
                                    <a href="{{ 'support/ticket'|link }}/{{ ticket.id }}" class="btn btn-sm btn-outline-secondary">{{ 'View'|trans }}</a>
                                {% else %}
                                    <a href="{{ 'support/ticket'|link }}/{{ ticket.id }}#reply-to" class="btn btn-sm btn-outline-info">{{ 'Reply'|trans }}</a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                {% else %}
                    <div class="d-flex justify-content-center my-2 py-4">
                        <span class="blockquote m-0">{{ 'No support tickets'|trans }}</span>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="open-ticket-modal" tabindex="-1" aria-labelledby="open-ticket-modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">{{ 'Open new ticket'|trans }}</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="" method="post" id="ticket-submit" class="form" style="background: none">
                <div class="modal-body">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="form-group">
                    </div>
                    <div class="mb-3">
                        <label for="support-helpdesk-id" class="form-label">{{ 'Helpdesk'|trans }}</label>
                        {{ mf.selectbox('support_helpdesk_id', client.support_helpdesk_get_pairs, request.support_helpdesk_id, 1) }}
                    </div>
                    <div class="mb-3">
                        <label for="subject" class="form-label">{{ 'Subject'|trans }}</label>
                        <input type="text" name="subject" class="form-control" id="subject" required aria-describedby="subject" value="{{ request.subject|e }}">
                    </div>
                    <div class="mb-3">
                        <label for="message" class="form-label">{{ 'Message'|trans }}</label>
                        <textarea name="content" class="form-control" id="message" aria-describedby="message" rows="5" required>{{ request.content|e }}</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">{{ 'Submit'|trans }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", () => {
            let submitTicket = document.getElementById('ticket-submit');
            submitTicket.addEventListener('submit', (e) => {
                e.preventDefault();
                API.client.post('support/ticket_create',
                    new FormData(submitTicket).serializeObject(),
                    (res) => bb.redirect("{{ 'support/ticket'|link }}" + '/' + res),
                    (res) => FOSSBilling.message(`${res.message} (${res.code})`, 'error'),
                )
                return false;
            });
            {% if request.ticket %}
            const ticketModal = new bootstrap.Modal('#open-ticket-modal')
            ticketModal.show(submitTicket);
            {% endif %}
        });
    </script>
{% endblock %}
