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

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

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.knowledge_base }}</h3>
        <p class="text-subtitle text-muted">{{ translations.knowledge_base_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-4">
                            <label class="form-label">{{ translations.search }}</label>
                            <input type="text" class="form-control" id="searchInput"
                                   placeholder="{{ translations.search_resource }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">{{ translations.category }}</label>
                            <select class="form-select" id="categoryFilter">
                                <option value="">{{ translations.all_categories }}</option>
                                {% for category in categories %}
                                    <option value="{{ category.getId() }}">{{ category.getName() }}</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="resourcesGrid">
                {% for resource in resources %}
                    <div class="col-lg-4 col-md-6 mb-4 resource-card"
                         data-status="{{ resource.getStatus() }}"
                         data-id_category="{{ resource.getIdCategory() }}">
                        <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 mt-2">
                                    <h5 class="card-title mb-0 flex-grow-1">{{ resource.getTitle() }}</h5>
                                    {#<small class="text-muted ms-2">
                                        <i class="bi bi-globe"></i> {{ resource.getLanguage()|upper }}
                                    </small>#}
                                </div>

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

                                <!-- Daty -->
                                <div class="row text-muted small mb-3">
                                    {% if resource.getPublishAt() %}
                                        <div class="col-6">
                                            <i class="bi bi-calendar-check"></i>
                                            <small>{{ resource.getPublishAt()|date('d.m.Y') }}</small>
                                        </div>
                                    {% endif %}
                                    {% if resource.getExpiresAt() %}
                                        <div class="col-6">
                                            <i class="bi bi-calendar-x"></i>
                                            <small>{{ resource.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-resource"
                                                data-id="{{ resource.getId() }}"
                                                data-title="{{ resource.getTitle() }}"
                                                data-summary="{{ resource.getSummary() }}"
                                                data-category="{{ resource.getCategoryName() }}"
                                                data-publish="{{ resource.getPublishAt() ? resource.getPublishAt()|date('d.m.Y') : '-' }}"
                                                data-expire="{{ resource.getExpiresAt() ? resource.getExpiresAt()|date('d.m.Y') : '-' }}"
                                                data-created="{{ resource.getCreatedAt()|date('d.m.Y H:i') }}"
                                                data-status="{{ resource.getStatus() }}"
                                                data-url="{{ resource.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> {{ resource.getCreatedAt()|date('d.m.Y H:i') }}
                                </small>
                                <span class="float-end">
                                        <span class="badge bg-info">{{ resource.getCategoryName() }}</span>

{#                                    {% if resource.getStatus() == 'published' %}#}
                                    {#                                        <span class="badge bg-success">{{ translations.active }}</span>#}
                                    {#                                    {% elseif resource.getStatus() == 'draft' %}#}
                                    {#                                        <span class="badge bg-warning">{{ translations.draft }}</span>#}
                                    {#                                    {% else %}#}
                                    {#                                        <span class="badge bg-secondary">{{ translations.expired }}</span>#}
                                    {#                                    {% endif %}#}
                                </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_resources }}</h4>
                                <p class="text-muted">{{ translations.no_resources_description }}</p>
                                <a href="{{ root }}/knowledge-base/resources/new" class="btn btn-success" role="button">
                                    <i class="bi bi-plus"></i> {{ translations.add_resource }}
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Modal podglądu zasobu -->
    <div class="modal fade" id="resourceDetailsModal" tabindex="-1" aria-labelledby="resourceDetailsLabel" 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="resourceDetailsLabel">{{ translations.resource_details }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ translations.close }}"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-0">
                        <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="resTitle"></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.category }}</td>
                                    <td id="resCategory"></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.status }}</td>
                                    <td id="resStatus"></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.visible_from }}</td>
                                    <td id="resPublish"></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.visible_to }}</td>
                                    <td id="resExpire"></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.created_at }}</td>
                                    <td id="resCreated"></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.description }}</td>
                                    <td id="resSummary"></td>
                                </tr>
                                <tr>
                                    <td>{{ translations.url }}</td>
                                    <td>
                                        <a href="#" id="resUrl" target="_blank" class="text-primary text-decoration-underline"></a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </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 filterResources() {
                const searchTerm = document.getElementById('searchInput').value.toLowerCase();
                const categoryFilter = document.getElementById('categoryFilter').value;

                const resourceCards = document.querySelectorAll('.resource-card');

                resourceCards.forEach(card => {
                    const title = card.querySelector('.card-title').textContent.toLowerCase();
                    const idCategory = card.dataset.id_category;

                    const matchesSearch = title.includes(searchTerm);
                    const matchesCategory = !categoryFilter || idCategory === categoryFilter;

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

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

        });

        function deleteResource(resourceId, 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/knowledge-base/resources/${resourceId}/delete`, {
                        method : "DELETE"
                    })
                        .then(function (res) {
                            console.log(res)
                            if (res.ok) {
                                showSnack(true, '{{ translations.resource_deleted }}');
                                btn.closest('.resource-card').remove();
                            } else {
                                showSnack(false, response.message || '{{ translations.error_deleting_resource }}');
                            }
                        })
                        .catch();
                }
            });
        }


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

            // Kliknięcie w "Zobacz"
            document.querySelectorAll('.btn-view-resource').forEach(btn => {
                btn.addEventListener('click', function () {
                    // Pobierz dane z atrybutów
                    const title = this.dataset.title;
                    const summary = this.dataset.summary;
                    const category = this.dataset.category;
                    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;

                    // Wypełnij pola modala
                    modalEl.querySelector('#resTitle').textContent = title;
                    modalEl.querySelector('#resSummary').textContent = summary;
                    modalEl.querySelector('#resCategory').textContent = category;
                    modalEl.querySelector('#resPublish').textContent = publish;
                    modalEl.querySelector('#resExpire').textContent = expire;
                    modalEl.querySelector('#resCreated').textContent = created;
                    modalEl.querySelector('#resStatus').textContent =
                        status === 'published' ? '{{ translations.active }}'
                            : status === 'draft' ? '{{ translations.draft }}'
                                : '{{ translations.expired }}';

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

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