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

{% block meta_title %}{{ 'Notifications Center'|trans }}{% endblock %}

{% set active_menu = 'activity' %}
{% set has_filter_panel = true %}
{% set filter_panel_id = 'page-search-filters' %}
{% set filter_panel_open = request_has_filters %}

{% block content %}
<div class="card">
    <div class="card-header">
        <div>
            <h3 class="card-title">{{ 'Notifications Center'|trans }}</h3>
            <p class="card-subtitle">{{ 'Review system notifications and create internal notes or reminders for staff.'|trans }}</p>
        </div>
    </div>
    <div class="card-body pt-3 pb-0 px-0">
        {{ include('partial_search.html.twig', {
            search_body_class: filter_panel_open ? 'pb-2 border-bottom-0' : '',
            search_toolbar_actions: '
                <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#newNotificationNoteModal">
                    <svg class="icon">
                        <use xlink:href="#plus" />
                    </svg>
                    ' ~ ('New Note'|trans) ~ '
                </button>
            '
        }) }}
            <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="notification-id">{{ 'ID'|trans }}</label>
                                <input class="form-control" type="text" id="notification-id" name="id" value="{{ request.id }}" placeholder="{{ 'Notification ID'|trans }}">
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-8">
                            <div>
                                <label class="form-label text-muted small mb-1" for="notification-date-range">{{ 'Date Range'|trans }}</label>
                                <div class="input-group">
                                    <div class="input-icon w-100">
                                        <input class="form-control datepicker"
                                               id="notification-date-range"
                                               placeholder="{{ 'Select Date Range'|trans }}"
                                               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>
                    </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>{{ 'Message'|trans }}</th>
                            <th>{{ 'Date'|trans }}</th>
                            <th class="w-1"></th>
                        </tr>
                    </thead>
                    <tbody>
                    {% set events = admin.notification_get_list({ "per_page": 25, "page": request.page }|merge(request)) %}
                    {% for i, event in events.list %}
                        <tr>
                            <td>{{ event.meta_value|raw }}</td>
                            <td>{{ event.created_at|date('Y-m-d H:i') }}</td>
                            <td>
                                <a class="btn btn-icon" href="{{ 'notification/delete'|api_url(query: { 'id': event.id }) }}"
                                    {{ fb_api_link({modal: {type: 'confirm', title: 'Are you sure?'|trans}, redirect: 'notification'|url}) }}>
                                    <svg class="icon">
                                        <use xlink:href="#delete" />
                                    </svg>
                                </a>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td class="text-center text-muted py-4" colspan="3">{{ 'No notifications were found.'|trans }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="card-footer d-flex align-items-center justify-content-between">
                <a class="btn btn-danger" href="{{ 'notification/delete_all'|api_url }}"
                    {{ fb_api_link({modal: {type: 'confirm', title: 'Are you sure?'|trans}, reload: true}) }}>
                    <svg class="icon">
                        <use xlink:href="#delete"></use>
                    </svg>
                    {{ 'Delete all'|trans }}
                </a>
                {{ include('partial_pagination.html.twig', { 'list': events, 'url':'notification' }) }}
            </div>
    </div>
</div>

<div class="modal modal-blur fade" id="newNotificationNoteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-fullscreen-md-down" role="document">
        <form class="modal-content" method="post" action="{{ 'notification/add'|api_url }}" {{ fb_api_form({reload: true}) }}>
            <div class="modal-header">
                <h5 class="modal-title">{{ 'New Note'|trans }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'Close'|trans }}"></button>
            </div>
            <div class="modal-body">
                <section>
                    <div class="mb-3">
                        <h5 class="card-title mb-1">{{ 'Notification Note'|trans }}</h5>
                        <p class="text-secondary mb-0">{{ 'Add a note or todo item to the notification timeline.'|trans }}</p>
                    </div>
                    <label class="form-label" for="notification-note-message">{{ 'Note'|trans }}</label>
                    <textarea class="form-control" id="notification-note-message" name="message" rows="8" placeholder="{{ 'Add Note or Todo Task'|trans }}" required></textarea>
                </section>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link link-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</button>
                <button type="submit" class="btn btn-primary">{{ 'Add Note'|trans }}</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block js %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modalElement = document.getElementById('newNotificationNoteModal');
            if (!modalElement) {
                return;
            }

            const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
            if (window.location.hash === '#tab-new-note') {
                modal.show();
            }

            modalElement.addEventListener('show.bs.modal', function() {
                if (window.location.hash !== '#tab-new-note') {
                    history.replaceState(null, '', window.location.pathname + window.location.search + '#tab-new-note');
                }
            });

            modalElement.addEventListener('hidden.bs.modal', function() {
                if (window.location.hash === '#tab-new-note') {
                    history.replaceState(null, '', window.location.pathname + window.location.search);
                }
            });
        });
    </script>
{% endblock %}
