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

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

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

{% block content %}
    <div class="row">
        <!-- Filtry i wyszukiwarka -->
        <div class="col-12 mb-4">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-end">
                        <div class="col-md-3">
                            <label class="form-label">{{ translations.search }}</label>
                            <input type="text" class="form-control" id="searchInput"
                                   placeholder="{{ translations.search_materials }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">{{ translations.type }}</label>
                            <select class="form-select" id="typeFilter">
                                <option value="">{{ translations.all_types }}</option>
                                {% for type in types %}
                                    <option value="{{ type.code }}">{{ type.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="button" class="btn btn-primary" id="filterBtn">
                                <i class="bi bi-funnel"></i> {{ translations.filter }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Siatka materiałów -->
        <div class="col-12">
            <div class="row" id="materialsGrid">
                {% for material in materials %}
                    <div class="col-lg-4 col-md-6 mb-4 material-card"
                         data-status="{{ material.getStatus() }}"
                         data-type="{{ material.getPrimaryType() }}"
                         data-type-name="
                            {% for type in types %}
                                {% if type.code == material.getPrimaryType() %}
                                    {{ type.name }}
                                {% endif %}
                            {% endfor %}
                         ">
                        <div class="card h-100 shadow-sm">
                            <div class="card-body d-flex flex-column">
                                <!-- Tytuł i język -->
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h5 class="card-title mb-0 flex-grow-1">{{ material.getTitle() }}</h5>
                                    {#                                    <small class="text-muted ms-2"> #}
                                    {#                                        <i class="bi bi-globe"></i> {{ material.getLanguage()|upper }} #}
                                    {#                                    </small> #}
                                </div>

                                <!-- Opis -->
                                <p class="card-text text-muted small mb-3">
                                    {{ material.getSummary()|length > 100 ? material.getSummary()|slice(0, 100) ~ '...' : material.getSummary() }}
                                </p>

                                <!-- Daty -->
                                <div class="row text-muted small mb-3">
                                    {% if material.getPublishAt() %}
                                        <div class="col-6">
                                            <i class="bi bi-calendar-check"></i>
                                            <small>{{ material.getPublishAt()|date('d.m.Y') }}</small>
                                        </div>
                                    {% endif %}
                                    {% if material.getExpiresAt() %}
                                        <div class="col-6">
                                            <i class="bi bi-calendar-x"></i>
                                            <small>{{ material.getExpiresAt()|date('d.m.Y') }}</small>
                                        </div>
                                    {% endif %}
                                </div>

                                <!-- Przyciski akcji -->
                                <div class="mt-auto">
                                    <div class="btn-group w-100" role="group">
                                        <button
                                                class="btn btn-outline-primary btn-sm btn-view-material"
                                                data-id="{{ material.getId() }}"
                                                data-title="{{ material.getTitle() }}"
                                                data-summary="{{ material.getSummary() }}"
                                                data-type="{{ material.getPrimaryType() }}"
                                                data-type-name="
                                                    {% for type in types %}
                                                        {% if type.code == material.getPrimaryType() %}
                                                            {{ type.name }}
                                                        {% endif %}
                                                    {% endfor %}
                                                "
                                                data-publish="{{ material.getPublishAt() ? material.getPublishAt()|date('d.m.Y') : '-' }}"
                                                data-expire="{{ material.getExpiresAt() ? material.getExpiresAt()|date('d.m.Y') : '-' }}"
                                                data-created="{{ material.getCreatedAt()|date('d.m.Y H:i') }}"
                                                data-status="{{ material.getStatus() }}"
                                                data-url="{{ material.getUrl() }}"
                                        >
                                            <i class="bi bi-eye"></i> {{ translations.view }}
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Stopka z dodatkowymi informacjami -->
                            <div class="card-footer bg-transparent border-top-0">
                                <small class="text-muted">
                                    <i class="bi bi-clock"></i> {{ material.getCreatedAt()|date('d.m.Y H:i') }}
                                </small>
                                <span class="float-end">
                                    <span class="badge bg-primary">{{ material.getPrimaryType() }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body text-center py-5">
                                <i class="bi bi-folder text-muted" style="font-size: 4rem;"></i>
                                <h4 class="text-muted mt-3">{{ translations.no_materials }}</h4>
                                <p class="text-muted">{{ translations.no_materials_description }}</p>
                                <a href="{{ root }}/marketing-materials/new" class="btn btn-success" role="button">
                                    <i class="bi bi-plus"></i> {{ translations.add_content }}
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Modal podglądu materiału marketingowego -->
    <div class="modal fade" id="materialDetailsModal" tabindex="-1" aria-labelledby="materialDetailsLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="materialDetailsLabel">{{ translations.material_details }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ translations.close }}"></button>
                </div>
                <div class="modal-body">
                    <div class="col-12">
                        <table class="table table-striped">
                            <thead>
                            <th style="width: 33%"></th>
                            <th style="width: 66%"></th>
                            </thead>
                            <tbody>
                            <tr>
                                <td>{{ translations.title }}</td>
                                <td id="matTitle"></td>
                            </tr>
                            <tr>
                                <td>{{ translations.type }}</td>
                                <td id="matType"></td>
                            </tr>
                            <tr>
                                <td>{{ translations.status }}</td>
                                <td id="matStatus"></td>
                            </tr>
                            <tr>
                                <td>{{ translations.visible_from }}</td>
                                <td id="matPublish"></td>
                            </tr>
                            <tr>
                                <td>{{ translations.visible_to }}</td>
                                <td id="matExpire"></td>
                            </tr>
                            <tr>
                                <td>{{ translations.created_at }}</td>
                                <td id="matCreated"></td>
                            </tr>
                            <tr>
                                <td>{{ translations.description }}</td>
                                <td id="matSummary"></td>
                            </tr>
                            <tr>
                                <td>{{ translations.url }}</td>
                                <td>
                                    <a href="#" id="matUrl" target="_blank" class="text-primary text-decoration-underline"></a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ translations.close }}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Funkcja filtrowania
            function filterMaterials() {
                const searchTerm = document.getElementById('searchInput').value.toLowerCase();
                const typeFilter = document.getElementById('typeFilter').value;

                const materialCards = document.querySelectorAll('.material-card');

                materialCards.forEach(card => {
                    const title = card.querySelector('.card-title').textContent.toLowerCase();
                    const type = card.dataset.type;

                    const matchesSearch = title.includes(searchTerm);
                    const matchesType = !typeFilter || type === typeFilter;

                    if (matchesSearch && matchesType) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            }

            // Event listenery
            document.getElementById('filterBtn').addEventListener('click', filterMaterials);
            document.getElementById('searchInput').addEventListener('input', filterMaterials);
            document.getElementById('typeFilter').addEventListener('change', filterMaterials);


        });

        document.addEventListener('DOMContentLoaded', function () {
            const modal = new bootstrap.Modal(document.getElementById('materialDetailsModal'));
            const modalEl = document.getElementById('materialDetailsModal');

            document.querySelectorAll('.btn-view-material').forEach(btn => {
                btn.addEventListener('click', function () {
                    const title = this.dataset.title;
                    const summary = this.dataset.summary;
                    const type = this.dataset.type;
                    const publish = this.dataset.publish;
                    const expire = this.dataset.expire;
                    const created = this.dataset.created;
                    const status = this.dataset.status;
                    const url = this.dataset.url;

                    modalEl.querySelector('#matTitle').textContent = title;
                    modalEl.querySelector('#matSummary').textContent = summary;
                    const typeName = this.dataset.typeName || this.dataset.type;
                    modalEl.querySelector('#matType').textContent = typeName;
                    modalEl.querySelector('#matPublish').textContent = publish;
                    modalEl.querySelector('#matExpire').textContent = expire;
                    modalEl.querySelector('#matCreated').textContent = created;
                    modalEl.querySelector('#matStatus').textContent =
                        status === 'published' ? '{{ translations.active }}'
                            : status === 'draft' ? '{{ translations.draft }}'
                                : '{{ translations.expired }}';

                    const urlEl = modalEl.querySelector('#matUrl');
                    if (url) {
                        urlEl.textContent = url;
                        urlEl.href = url;
                    } else {
                        urlEl.textContent = '{{ translations.no_link_available }}';
                        urlEl.removeAttribute('href');
                    }

                    modal.show();
                });
            });
        });
    </script>
{% endblock %}