{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}
{% set active_menu = 'support' %}

{% 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 head %}
    {{ wysiwyg('.editor-textarea') }}
{% 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>
                        <h1 class="mb-1">{{ 'Support Tickets'|trans }}</h1>
                        <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, "deep": 0, "include_first": 0}) %}
                {% 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/#{ticket.id}"|url }}'>{{ ticket.subject|truncate(40) }}</a></td>
                            <td>{{ ticket.helpdesk.name }}</td>
                            <td>
                                {{ mf.status_badge(ticket.status, 'ticket') }}
                            </td>
                            <td>{{ ticket.created_at|timeago }} {{ 'ago'|trans }}</td>
                            <td class="actions">
                                {% if ticket.status == 'closed' %}
                                    <a href='{{ "support/ticket/#{ticket.id}"|url }}' class="btn btn-sm btn-outline-secondary">{{ 'View'|trans }}</a>
                                {% else %}
                                    <a href='{{ "support/ticket/#{ticket.id}"|url }}#reply-to' class="btn btn-sm btn-outline-info">{{ 'Reply'|trans }}</a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                {{ include('partial_pagination.html.twig', { 'list': tickets }) }}
                {% 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 modal-lg 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'|trans }}"></button>
            </div>
            <form action="" method="post" id="ticket-submit" class="form" style="background: none">
                <div class="modal-body">
                    <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="editor-textarea 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>
        document.addEventListener("DOMContentLoaded", function() {
            let submitTicket = document.getElementById('ticket-submit');
            submitTicket.addEventListener('submit', (event) => {
                event.preventDefault();
                FOSSBilling.api.client.post('support/ticket_create', FOSSBilling.tools.serializeFormDataToObject(new FormData(submitTicket)),
                    (res) => {
                        window.location = "{{ 'support/ticket'|url }}" + '/' + res
                    },
                    (res) => {
                        FOSSBilling.message(`${res.message} (${res.code})`, 'error')
                    });
            });
            {% if request.ticket %}
                const ticketModal = new bootstrap.Modal('#open-ticket-modal')
                ticketModal.show(submitTicket);
            {% endif %}
        });
    </script>
{% endblock %}
