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

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

{% block meta_title %}{{ 'Mass Mailer'|trans }}{% endblock %}

{% set active_menu = 'extensions' %}
{% set has_filter_panel = true %}
{% set filter_panel_id = 'page-search-filters' %}
{% set filter_panel_open = request_has_filters %}
{% set new_message_action %}
    <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#newMassMailerModal">
        <svg class="icon">
            <use xlink:href="#plus"/>
        </svg>
        {{ 'New Message'|trans }}
    </button>
{% endset %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <div>
                <h3 class="card-title">{{ 'Mass Mailer'|trans }}</h3>
                <p class="card-subtitle">{{ 'Create broadcast messages, manage queued campaigns, and configure testing defaults for mass mail sends.'|trans }}</p>
            </div>
        </div>
        <div class="card-body pt-3 pb-0 px-0">
            <div class="card border-0 shadow-none rounded-0">
                <div class="card-header bg-transparent px-3 pt-0 pb-3 border-0">
                    <ul class="nav nav-pills card-header-pills" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a href="#tab-index" class="nav-link active" data-bs-toggle="tab" aria-selected="true"
                               role="tab">{{ 'Messages'|trans }}</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a href="#tab-settings" class="nav-link" data-bs-toggle="tab" aria-selected="false" role="tab">
                                <svg class="icon me-2">
                                    <use xlink:href="#cog"/>
                                </svg>
                                {{ 'Settings'|trans }}
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="tab-content border-top">
                    <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
                        {{ include('partial_search.html.twig', {
                            search_body_class: filter_panel_open ? 'pb-2 border-bottom-0' : '',
                            search_toolbar_actions: new_message_action
                        }) }}
                        <section id="{{ filter_panel_id }}" class="card-body pt-0 px-3 pb-3 border-bottom collapse{% if filter_panel_open %} show{% endif %}">
                            <form method="get" class="border border-top-0 rounded-top-0 rounded-bottom-3 bg-body-tertiary p-3">
                                {% if request.search %}
                                    <input type="hidden" name="search" value="{{ request.search }}">
                                {% endif %}
                                <div class="row g-3">
                                    <div class="col-md-6 col-xl-4">
                                        <div>
                                            <label class="form-label text-muted small mb-1" for="massmailer-id">{{ 'ID'|trans }}</label>
                                            <input class="form-control" type="text" id="massmailer-id" name="id" value="{{ request.id }}" placeholder="{{ 'Message ID'|trans }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-xl-4">
                                        <div>
                                            <label class="form-label text-muted small mb-1" for="massmailer-status">{{ 'Status'|trans }}</label>
                                            <select class="form-select" id="massmailer-status" name="status">
                                                <option value="">{{ 'All Messages'|trans }}</option>
                                                <option value="draft"{% if request.status == 'draft' %} selected{% endif %}>{{ 'Draft'|trans }}</option>
                                                <option value="sent"{% if request.status == 'sent' %} selected{% endif %}>{{ 'Sent'|trans }}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end gap-2 mt-3">
                                    <a class="btn btn-outline-secondary" href="{{ request_path|url }}">{{ 'Reset'|trans }}</a>
                                    <button class="btn btn-primary" type="submit">
                                        <svg class="icon">
                                            <use xlink:href="#filter" />
                                        </svg>
                                        {{ 'Apply Filters'|trans }}
                                    </button>
                                </div>
                            </form>
                        </section>
                        <div class="table-responsive">
                            <table class="table card-table table-vcenter table-striped text-nowrap">
                                <thead>
                                <tr>
                                    <th>{{ 'Subject'|trans }}</th>
                                    <th>{{ 'From'|trans }}</th>
                                    <th>{{ 'Status'|trans }}</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                {% set msgs = admin.massmailer_get_list({
                                    "per_page": 25,
                                    "page": request.page,
                                    "id": request.id,
                                    "status": request.status,
                                    "search": request.search
                                }) %}
                                {% for i, msg in msgs.list %}
                                    <tr>
                                        <td>{{ msg.subject }}</td>
                                        <td>{{ msg.from_name }} <br/>{{ msg.from_email }}</td>
                                        <td>{{ mf.status_badge(msg.status, 'massmailer') }}</td>
                                        <td class="text-end">
                                            <a class="btn btn-icon" href="{{ 'massmailer/copy'|api_url(query: {'id' : msg.id }) }}"
                                               {{ fb_api_link({redirect: 'massmailer'|url}) }}>
                                                <svg class="icon">
                                                    <use xlink:href="#copy"/>
                                                </svg>
                                            </a>
                                            <a class="btn btn-icon" href='{{ "massmailer/message/#{msg.id}"|url }}'>
                                                <svg class="icon">
                                                    <use xlink:href="#edit"/>
                                                </svg>
                                            </a>
                                            <a class="btn btn-icon" href="{{ 'massmailer/delete'|api_url(query: {'id' : msg.id }) }}"
                                                {{ fb_api_link({modal: {type: 'confirm', title: 'Are you sure?'|trans}, redirect: 'massmailer'|url}) }}>
                                                <svg class="icon">
                                                    <use xlink:href="#delete"/>
                                                </svg>
                                            </a>
                                        </td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td class="text-center py-3" colspan="4">
                                            <h4>{{ 'The list is empty'|trans }}</h4>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                            <div class="card-footer d-flex align-items-center">
                                {{ include('partial_pagination.html.twig', { 'list': msgs, 'url': 'massmailer', 'split_footer_controls': true }) }}
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tab-settings" role="tabpanel">
                        {% set params = admin.extension_config_get({"ext":"mod_massmailer"}) %}
                        <div class="p-3">
                        <form method="post" action="admin/extension/config_save" {{ fb_api_form({reload: true}) }}>
                            <input type="hidden" name="ext" value="mod_massmailer">
                            {% embed 'partial_admin_form_card.html.twig' with {
                                title: 'Mass Mailer Settings'|trans,
                                subtitle: 'Configure which client receives test sends before a message is broadcast more broadly.'|trans,
                                card_class: 'mb-0'
                            } %}
                                {% block form_content %}
                                    <div class="row g-3">
                                        <div class="col-lg-8">
                                            <label class="form-label" for="test_client_id">{{ 'Client to Send Test Email'|trans }}</label>
                                            {% set test_client_email = admin.massmailer_get_test_client %}
                                            {% set has_test_client = params.test_client_id and test_client_email != 'Unknown' %}
                                            <select class="form-control autocomplete-selector"
                                                    placeholder="{{ 'Start Typing the Client Name or ID'|trans }}"
                                                    id="test_client_id"
                                                    name="test_client_id"
                                                    data-resturl="/api/admin/client/get_pairs">
                                                {% if has_test_client %}
                                                    <option value="{{ params.test_client_id }}" selected>{{ test_client_email }}</option>
                                                {% endif %}
                                            </select>
                                            {% if has_test_client %}
                                                <div class="form-text">{{ 'Test emails will be sent to:'|trans }} {{ test_client_email }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endblock %}

                                {% block form_actions %}
                                    <button type="submit" class="btn btn-primary">{{ 'Update'|trans }}</button>
                                {% endblock %}
                            {% endembed %}
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal modal-blur fade" id="newMassMailerModal" tabindex="-1" aria-labelledby="newMassMailerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-fullscreen-md-down">
            <form method="post" action="admin/massmailer/create" class="modal-content fb-modal-form" {{ fb_api_form({callback: 'onAfterCreateMM'}) }}>
                <div class="modal-header">
                    <h3 class="modal-title" id="newMassMailerModalLabel">{{ 'New Message'|trans }}</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'Close'|trans }}"></button>
                </div>
                <div class="modal-body">
                    <section class="fb-modal-section">
                        <div class="fb-modal-section-header">
                            <div class="fb-modal-section-heading-row">
                                <h4 class="fb-modal-section-title">{{ 'Message Setup'|trans }}</h4>
                            </div>
                            <p class="fb-modal-section-description">{{ 'Create a new campaign draft, then continue editing recipients and content on the next screen.'|trans }}</p>
                        </div>
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label" for="new-massmailer-subject">{{ 'Subject'|trans }}</label>
                                <input class="form-control" id="new-massmailer-subject" type="text" name="subject" value="{{ request.subject }}" required="required" placeholder="{{ 'Message Subject'|trans }}">
                            </div>
                        </div>
                    </section>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Close'|trans }}</button>
                    <button type="submit" class="btn btn-primary">{{ 'Create'|trans }}</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        function onAfterCreateMM(mid) {
            window.location = "{{ 'massmailer/message'|url }}/" + mid;
        }

        document.addEventListener('DOMContentLoaded', function () {
            var modalElement = document.getElementById('newMassMailerModal');
            var modal = modalElement ? bootstrap.Modal.getOrCreateInstance(modalElement) : null;

            if (window.location.hash === '#tab-new' && modal) {
                modal.show();
            }

            var tabTrigger = document.querySelector('[data-bs-toggle="tab"][href="' + window.location.hash + '"]');
            if (tabTrigger) {
                bootstrap.Tab.getOrCreateInstance(tabTrigger).show();
            }

            modalElement?.addEventListener('hidden.bs.modal', function () {
                if (window.location.hash !== '#tab-new') {
                    return;
                }

                var url = new URL(window.location.href);
                url.hash = '';
                window.history.replaceState({}, '', url);
            });
        });
    </script>
{% endblock %}
