{% extends "layouts/base.twig" %}

{% block title %}{{ translations.notifications_overview }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.notifications_overview }}</h3>
        <p class="text-subtitle text-muted">{{ translations.notifications_overview_subtitle }}</p>
    </div>
{% endblock %}

{% block content %}
    <div class="card mb-4">
        <div class="card-body">
            <div class="row align-items-end">
                <div class="col-md-3">
                    <label for="filter_title" class="form-label">{{ translations.title }}</label>
                    <input type="text" class="form-control" id="titleFilter" name="title"
                           value="{{ filter.title|default('') }}" placeholder="{{ translations.enter_title }}">
                </div>
                <div class="col-md-2">
                    <label for="filter_priority" class="form-label">{{ translations.priority }}</label>
                    <select class="form-select" id="priorityFilter" name="priority">
                        <option value="">{{ translations.all }}</option>
                        <option value="info" {{ filter.priority == 'info' ? 'selected' : '' }}>{{ translations.priority_info }}</option>
                        <option value="warning" {{ filter.priority == 'warning' ? 'selected' : '' }}>{{ translations.priority_warning }}</option>
                        <option value="urgent" {{ filter.priority == 'urgent' ? 'selected' : '' }}>{{ translations.priority_urgent }}</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="filter_type" class="form-label">{{ translations.type }}</label>
                    <select class="form-select" id="typeFilter" name="type">
                        <option value="">{{ translations.all }}</option>
                        <option value="once" {{ filter.type == 'once' ? 'selected' : '' }}>{{ translations.type_once }}</option>
                        <option value="daily" {{ filter.type == 'daily' ? 'selected' : '' }}>{{ translations.type_daily }}</option>
                        <option value="weekly" {{ filter.type == 'weekly' ? 'selected' : '' }}>{{ translations.type_weekly }}</option>
                        <option value="cyclic" {{ filter.type == 'cyclic' ? 'selected' : '' }}>{{ translations.type_cyclic }}</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="filter_status" class="form-label">{{ translations.status }}</label>
                    <select class="form-select" id="statusFilter" name="status">
                        <option value="">{{ translations.all }}</option>
                        <option value="published" {{ filter.status == 'published' ? 'selected' : '' }}>{{ translations.status_published }}</option>
                        <option value="expired" {{ filter.status == 'expired' ? 'selected' : '' }}>{{ translations.status_expired }}</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <a href="{{ root }}/notifications/new" class="btn btn-success" role="button">
                        <i class="bi bi-plus"></i> {{ translations.add }}
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-12 mt-3 p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 text-sm" id="notificationsTable">
                            <thead>
                            <tr>
                                <th style="width: 40%">{{ translations.title }}</th>
                                <th style="width: 10%">{{ translations.priority }}</th>
                                <th style="width: 10%">{{ translations.type }}</th>
                                <th style="width: 10%">{{ translations.status }}</th>
                                <th style="width: 10%">{{ translations.visible_from }}</th>
                                <th style="width: 10%">{{ translations.visible_to }}</th>
                                <th style="width: 10%">{{ translations.is_global }}</th>
                                <th style="width: 10%"></th>
                                <th style="width: 10%"></th>
                            </tr>
                            </thead>
                            <tbody>
                            {% if notifications is not empty %}
                                {% for notification in notifications %}
                                    <tr class="
                                        {% if notification.priority == 'info' %}bg-light-info
                                        {% elseif notification.priority == 'warning' %}bg-light-warning
                                        {% elseif notification.priority == 'urgent' %}bg-light-danger
                                        {% endif %}
                                    ">
                                        <td>{{ notification.title }}</td>
                                        <td data-priority="{{ notification.priority }}">
                                            {{ translations['priority_' ~ notification.priority]|default(notification.priority) }}
                                        </td>
                                        <td data-type="{{ notification.type }}">
                                            {{ translations['type_' ~ notification.type]|default(notification.type) }}
                                        </td>
                                        <td data-status="{{ notification.status }}">
                                            {{ translations['status_' ~ notification.status]|default(notification.status) }}
                                        </td>
                                        <td>{{ notification.getVisibleFrom() ? notification.getVisibleFrom()|date('Y-m-d H:i') : '-' }}</td>
                                        <td>{{ notification.getVisibleTo() ? notification.getVisibleTo()|date('Y-m-d H:i') : '-' }}</td>
                                        <td>
                                            {% if notification.getIsGlobal() %}
                                                <i class="icon dripicons-checkmark text-success"></i>
                                            {% else %}
                                                <i class="icon dripicons-cross text-danger"></i>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <a href="{{ root }}/notifications/{{ notification.id }}/edit"
                                               class="btn btn-sm btn-outline-primary">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <button class="btn btn-sm btn-outline-danger"
                                                    onclick="deleteNotification({{ notification.getId() }}, this)">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-info"
                                                    onclick="getNotificationLog({{ notification.getId() }}, this)">
                                                <i class="icon dripicons-user-group"></i>
                                            </button>
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td colspan="8" class="text-center text-muted">{{ translations.no_notifications_found }}</td>
                                </tr>
                            {% endif %}

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="notificationReadLogModal" tabindex="-1" aria-labelledby="notificationReadLogModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="notificationReadLogModalLabel">{{ translations.notification_read_log }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-hover">
                        <thead>
                            <th style="width: 30%">{{ translations.shop }}</th>
                            <th style="width: 30%">{{ translations.employee }}</th>
                            <th style="width: 20%">{{ translations.last_read_date }}</th>
                            <th style="width: 20%">{{ translations.read_count }}</th>
                        </thead>
                        <tbody id="notificationReadLogTBody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block scripts %}
    <script>


        var notificationReadLogModal = new bootstrap.Modal(document.getElementById('notificationReadLogModal'), {
            keyboard: false
        });

        function getNotificationLog(idNotification){
            // Clear previous content
            const tbody = document.getElementById('notificationReadLogTBody');
            tbody.innerHTML = '';

            // Fetch log data via AJAX
            api(`/ajax/notifications/${idNotification}/read-log`, {
                method: "GET"
            })
            .then(function (res) {
                if (res.ok) {
                    if(res.data.length === 0){
                        const row = tbody.insertRow(0);
                        const cell = row.insertCell(0);
                        cell.colSpan = 4;
                        cell.className = 'text-center';
                        cell.innerText = '{{ translations.no_read_log_entries }}';
                        notificationReadLogModal.show();
                        return;
                    }

                    res.data.forEach(function(logEntry) {
                        const row = tbody.insertRow();
                        const shopCell = row.insertCell(0);
                        const employeeCell = row.insertCell(1);
                        const lastReadAtCell = row.insertCell(2);
                        const readCountCell = row.insertCell(3);

                        shopCell.innerText = logEntry.shop_name;
                        employeeCell.innerText = logEntry.employee_name;
                        lastReadAtCell.innerText = logEntry.last_read_at || '-';
                        readCountCell.innerText = logEntry.read_count || '0';
                    });

                    notificationReadLogModal.show();

                } else {
                    showSnack(false, '{{ translations.error_loading_log }}');
                }
            })
            .catch(() => showSnack(false, '{{ translations.error_loading_log }}'));
        }

        document.addEventListener('DOMContentLoaded', function () {
            const titleFilter = document.getElementById('titleFilter');
            const priorityFilter = document.getElementById('priorityFilter');
            const typeFilter = document.getElementById('typeFilter');
            const statusFilter = document.getElementById('statusFilter');
            const tableBody = document.querySelector('#notificationsTable tbody');

            function filterNotifications() {
                const titleValue = titleFilter.value.toLowerCase();
                const priorityValue = priorityFilter.value;
                const typeValue = typeFilter.value;
                const statusValue = statusFilter.value;

                // Iteruj po wierszach
                Array.from(tableBody.querySelectorAll('tr')).forEach(row => {
                    // Jeśli to wiersz "Brak danych", pomiń
                    if (row.querySelector('td[colspan]')) return;

                    const title = row.cells[0].textContent.toLowerCase();
                    const priority = row.cells[1].dataset.priority;
                    const type = row.cells[2].dataset.type;
                    const status = row.cells[3].dataset.status;

                    const matchesTitle = !titleValue || title.includes(titleValue);
                    const matchesPriority = !priorityValue || priority === priorityValue;
                    const matchesType = !typeValue || type === typeValue;
                    const matchesStatus = !statusValue || status === statusValue;

                    if (matchesTitle && matchesPriority && matchesType && matchesStatus) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });

                // Jeśli wszystko ukryte → pokaż komunikat "brak wyników"
                const visibleRows = Array.from(tableBody.querySelectorAll('tr')).filter(r => r.style.display !== 'none');
                if (visibleRows.length === 0) {
                    if (!document.getElementById('noResultsRow')) {
                        const noResults = document.createElement('tr');
                        noResults.id = 'noResultsRow';
                        noResults.innerHTML = `<td colspan="8" class="text-center text-muted">{{ translations.no_notifications_found }}</td>`;
                        tableBody.appendChild(noResults);
                    }
                } else {
                    const noRow = document.getElementById('noResultsRow');
                    if (noRow) noRow.remove();
                }
            }

            // Event listenery
            [titleFilter, priorityFilter, typeFilter, statusFilter].forEach(el => {
                el.addEventListener('input', filterNotifications);
                el.addEventListener('change', filterNotifications);
            });
        });

        function deleteNotification(id, btn) {
            Swal.fire({
                title: '{{ translations.are_you_sure }}',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '{{ translations.yes_delete_it }}',
                cancelButtonText: '{{ translations.cancel }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    api(`/ajax/notifications/${id}`, {
                        method: "DELETE"
                    })
                        .then(function (res) {
                            if (res.success) {
                                showSnack(true, '{{ translations.notification_deleted }}');
                                btn.closest('tr').remove();
                            } else {
                                showSnack(false, res.message || '{{ translations.error_deleting_notification }}');
                            }
                        })
                        .catch(() => showSnack(false, '{{ translations.error_deleting_notification }}'));
                }
            });
        }
    </script>
{% endblock %}