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

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

{% block meta_title %}{{ 'Support Settings'|trans }}{% endblock %}

{% set active_menu = 'system' %}

{% 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="{{ 'system'|alink }}">{{ 'Settings'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ 'Support'|trans }}</li>
    </ol>
{% endblock %}

{% block content %}
    <div class="card-tabs">
        <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" role="tab">{{ 'General'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-helpdesks" data-bs-toggle="tab" role="tab">{{ 'Helpdesks'|trans }}</a>
            </li>
        </ul>

        <div class="card">
            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
                    <form method="post" action="{{ 'api/admin/extension/config_save'|link }}" class="api-form" data-api-msg="{{ 'Configuration Updated'|trans }}">
                        {% set params = admin.extension_config_get({ 'ext': 'mod_support' }) %}
                        <div class="card-body">
                            <h3 class="card-title">{{ 'Auto Responder'|trans }}</h3>
                            <div class="mb-3 row">
                                <label class="col-md-3 form-label">{{ 'Enable Auto Responder'|trans }}</label>
                                <div class="col-md-6">
                                    <label class="form-check form-switch">
                                        <input class="form-check-input" name="autorespond_enable" type="checkbox" {% if params.autorespond_enable %} checked="checked"{% endif %}>
                                    </label>
                                </div>
                            </div>
                            <div id="autorespond_enable"{% if not params.autorespond_enable %} style="display:none;"{% endif %}>
                                <div class="mb-3 row">
                                    <label class="col-md-3 col-form-label">{{ 'Auto Response Message'|trans }}</label>
                                    <div class="col-md-6">
                                        <select class="form-select" name="autorespond_message_id">
                                            {% for response in admin.support_canned_get_list({ 'per_page': 90 }).list %}
                                                <option value="{{ response.id }}"{% if params.autorespond_message_id == response.id %} selected{% endif %}>{{ response.title }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <h3 class="card-title">{{ 'Ticket Delay'|trans }}</h3>
                            <div class="mb-3 row">
                                <label class="col-md-3 form-label">{{ 'Enable Delay Message'|trans }}</label>
                                <div class="col-md-6">
                                    <label class="form-check form-switch">
                                        <input class="form-check-input" name="delay_enable" type="checkbox" {% if params.delay_enable %} checked="checked"{% endif %}>
                                    </label>
                                    <small class="form-hint">{{ 'If enabled, the selected canned response will be added to default reply message.'|trans }}</small>
                                </div>
                            </div>
                            <div id="delay_enable"{% if not params.delay_enable %} style="display:none;"{% endif %}>
                                <div class="mb-3 row">
                                    <label class="col-md-3 col-form-label">{{ 'Delay (in hours)'|trans }}</label>
                                    <div class="col-md-6">
                                        <input class="form-control" type="text" size="3" name="delay_hours" value="{{ params.delay_hours|default(24) }}" placeholder="24">
                                    </div>
                                </div>
                                <div class="form-group mb-3 row">
                                    <label class="col-md-3 col-form-label">{{ 'Delay Message'|trans }}</label>
                                    <div class="col-md-6">
                                        <select class="form-select" name="delay_message_id">
                                            {% for response in admin.support_canned_get_list({ 'per_page': 90 }).list %}
                                                <option value="{{ response.id }}"{% if params.delay_message_id == response.id %} selected{% endif %}>{{ response.title }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Wait Time (in hours)'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" size="3" name="wait_hours" value="{{ params.wait_hours }}">
                                    <small class="form-hint">{{ 'If set, the time in hour(s) the user must wait between consequent ticket submission.'|trans }}</small>
                                </div>
                            </div>
                            <input type="hidden" name="ext" value="mod_support">
                        </div>
                        <div class="card-body">
                            <h3 class="card-title">{{ 'Knowledge Base'|trans }}</h3>
                            <div class="mb-3 row">
                                <label class="col-md-3 form-label">{{ 'Enable Knowledge Base'|trans }}</label>
                                <div class="col-md-6">
                                    <label class="form-check form-switch">
                                        <input class="form-check-input" name="kb_enable" type="checkbox" {% if params.kb_enable %} checked="checked"{% endif %}>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <h3 class="card-title">{{ 'Public Tickets'|trans }}</h3>
                            <div class="mb-3 row">
                                <label class="col-md-3 form-label">{{ 'Disable Public Tickets'|trans }}</label>
                                <div class="col-md-6">
                                    <label class="form-check form-switch">
                                        <input class="form-check-input" name="disable_public_tickets" type="checkbox" {% if params.disable_public_tickets %} checked="checked"{% endif %}>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <input type="submit" class="btn btn-primary" value="{{ 'Update'|trans }}">
                        </div>
                    </form>
                </div>

                <div class="tab-pane fade" id="tab-helpdesks">
                        <div class="d-flex">
                            <div class="mt-3 ms-3">
                                <a class="btn btn-primary" href="#" data-bs-toggle="modal" data-bs-target="#mod-support-new-helpdesk">
                                    <svg class="icon me-2">
                                        <use xlink:href="#plus" />
                                    </svg>
                                    {{ 'New Helpdesk'|trans }}
                                </a>
                            </div>
                            {{ include('partial_search.html.twig') }}
                        </div>
                    <table class="table card-table table-vcenter table-striped text-nowrap">
                        <thead>
                        <tr>
                            <th class="w-1">#</th>
                            <th>{{ 'Title'|trans }}</th>
                            <th>{{ 'Email'|trans }}</th>
                            <th>{{ 'Close Tickets After'|trans }}</th>
                            <th class="w-1"></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for helpdesk in admin.support_helpdesk_get_list({ 'per_page': 50, 'page': request.page }|merge(request)).list %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td>
                                    <a href="{{ '/support/helpdesk'|alink }}/{{ helpdesk.id }}">{{ helpdesk.name }}</a>
                                </td>
                                <td>{{ helpdesk.email }}</td>
                                <td>{{ helpdesk.close_after }} {{ 'hour(s)'|trans }}</td>
                                <td>
                                    <a class="btn btn-icon" href="{{ '/support/helpdesk'|alink }}/{{ helpdesk.id }}"
                                    data-bs-toggle="tooltip" data-bs-title="{{ 'Edit'|trans }}">
                                        <svg class="icon">
                                            <use xlink:href="#edit" />
                                        </svg>
                                    </a>
                                    <a class="btn btn-icon api-link"
                                       href="{{ 'api/admin/support/helpdesk_delete'|link({ 'id': helpdesk.id }) }}"
                                       data-api-confirm="{{ 'Are you sure?'|trans }}"
                                       data-api-confirm-btn="{{ 'Delete'|trans }}"
                                       data-api-type="danger"
                                       data-api-redirect="{{ 'extension/settings/support'|alink }}"
                                       data-bs-toggle="tooltip" data-bs-title="{{ 'Delete'|trans }}">
                                        <svg class="icon">
                                            <use xlink:href="#delete" />
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="4" class="text-muted">{{ 'The list is empty'|trans }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

{{ include('modal/mod_support_new_helpdesk.html.twig') }}
{% endblock %}

{% block js %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        let autoRespondToggle = document.querySelector('input[name=autorespond_enable]');
        autoRespondToggle.addEventListener('click', (e) => {
            if (e.target.checked) {
                $('#autorespond_enable').slideDown();
            } else {
                $('#autorespond_enable').slideUp();
            }
        })

        let delayToggle = document.querySelector('input[name=delay_enable]');
        delayToggle.addEventListener('click', (e) => {
            if (e.target.checked) {
                $('#delay_enable').slideDown();
            } else {
                $('#delay_enable').slideUp();
            }
        })

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