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

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

{% block head %}
    <style>
        /* Badge filtry – sekcja / kategoria / podkategoria */
        .section-badge-filter,
        .category-badge-filter,
        .subcategory-badge-filter {
            display: inline-block;
            font-size: 0.78rem;
            font-weight: 500;
            padding: 4px 12px;
            border-radius: 20px;
            margin: 3px 4px 3px 0;
            cursor: pointer;
            border: 2px solid transparent;
            background: #e9ecef;
            color: #495057;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
            user-select: none;
        }
        .section-badge-filter:hover,
        .category-badge-filter:hover,
        .subcategory-badge-filter:hover   { background: #dee2e6; }

        .section-badge-filter.active      { background: #0dcaf0; color: #000; border-color: #0aa2c0; }
        .section-badge-filter.active:hover{ background: #0aa2c0; }
        .category-badge-filter.active     { background: #0d6efd; color: #fff; border-color: #0a58ca; }
        .category-badge-filter.active:hover{ background: #0a58ca; }
        .subcategory-badge-filter.active  { background: #6f42c1; color: #fff; border-color: #59359a; }
        .subcategory-badge-filter.active:hover{ background: #59359a; }

        #section_badges_wrapper,
        #category_badges_wrapper,
        #subcategory_badges_wrapper { padding-bottom: 6px; }

        .filter-group {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 10px 14px 6px;
            margin-bottom: 10px;
            background: #f8f9fa;
        }
        .filter-group-label {
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #6c757d;
            margin-bottom: 4px;
        }
    </style>
{% endblock %}

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

{% block content %}
    <div class="row">

        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">
                        {{ translations.trainings_overview }}
                    </h4>
                </div>
                <div class="card-content">
                    <div class="card-body px-3 py-4-5">


                        {# Przycisk dodawania #}
                        <div class="row mb-3">
                            <div class="col-12">
                                <button class="btn btn-success" id="add_training_btn">
                                    <i class="bi bi-plus"></i> {{ translations.add }}
                                </button>
                            </div>
                        </div>

                        <div class="filter-group mb-2">
                            <div class="filter-group-label">
                                <i class="bi bi-grid-3x3-gap me-1"></i>{{ translations.section }} / {{ translations.category }}
                            </div>

                            {# Badge filtry sekcji #}
                            <div class="row mt-1" id="section_badges_wrapper">
                                <div class="col-12">
                                    <span class="text-muted me-2" style="font-size:0.8rem;vertical-align:middle">
                                        <i class="bi bi-grid"></i> {{ translations.section }}:
                                    </span>
                                    <span id="section_badges"></span>
                                    <button class="btn btn-sm btn-outline-secondary ms-2 py-0" id="clear_section_badge_filter" style="font-size:0.78rem;display:none">
                                        <i class="bi bi-x"></i> {{ translations.clear }}
                                    </button>
                                </div>
                            </div>

                            {# Badge filtry kategorii #}
                            <div class="row mt-2" id="category_badges_wrapper">
                                <div class="col-12">
                                    <span class="text-muted me-2" style="font-size:0.8rem;vertical-align:middle">
                                        <i class="bi bi-tags"></i> {{ translations.category }}:
                                    </span>
                                    <span id="category_badges"></span>
                                    <button class="btn btn-sm btn-outline-secondary ms-2 py-0" id="clear_category_badge_filter" style="font-size:0.78rem;display:none">
                                        <i class="bi bi-x"></i> {{ translations.clear }}
                                    </button>
                                </div>
                            </div>

                            {# Badge filtry podkategorii #}
                            <div class="row mt-1" id="subcategory_badges_wrapper">
                                <div class="col-12">
                                    <span class="text-muted me-2" style="font-size:0.8rem;vertical-align:middle">
                                        <i class="bi bi-diagram-3"></i> {{ translations.subcategory }}:
                                    </span>
                                    <span id="subcategory_badges"></span>
                                    <button class="btn btn-sm btn-outline-secondary ms-2 py-0" id="clear_subcategory_badge_filter" style="font-size:0.78rem;display:none">
                                        <i class="bi bi-x"></i> {{ translations.clear }}
                                    </button>
                                </div>
                            </div>
                        </div>{# /filter-group: sekcja/kategoria #}

                        {# Filtr tagów #}
                        <div class="row mt-1" id="tag_filter_wrapper">
                            <div class="col-12">
                                <span class="text-muted me-2" style="font-size:0.8rem;vertical-align:middle">
                                    <i class="bi bi-tag"></i> {{ translations.tags }}:
                                </span>
                                <span id="tag_filter_badges"></span>
                                <button class="btn btn-sm btn-outline-secondary ms-2 py-0" id="clear_tag_filter" style="font-size:0.78rem;display:none">
                                    <i class="bi bi-x"></i> {{ translations.clear }}
                                </button>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12 mt-4">
                                <table class="table text-sm">
                                    <thead>
                                    <tr>
                                        <th style="width:17%">{{ translations.subcategory }}</th>
                                        <th style="width:20%">{{ translations.name }}</th>
                                        <th style="width:35%">{{ translations.description }}</th>
                                        <th style="width:18%">{{ translations.tags }}</th>
                                        <th style="width:10%"></th>
                                    </tr>
                                    </thead>

                                    <tbody id="training_tbody">
                                    {% if  trainings|length == 0 %}
                                        <tr class="information_row">
                                            <td colspan="5" class="text-center">
                                                {{ translations.no_trainings_found }}
                                            </td>
                                        </tr>
                                    {% else %}

                                        {% for training in trainings %}
                                            <tr class="training-row"
                                                data-id="{{ training.getId() }}"
                                                data-section="{{ training.getSectionId() }}"
                                                data-category="{{ training.getCategoryId() }}"
                                                data-subcategory="{{ training.getSubcategoryId() }}"
                                            >
                                                <td>{{ training.getBaseSubcategoryName() }}</td>
                                                <td>
                                                    <strong>{{ training.getBaseName() }}</strong>
                                                </td>

                                                <td>{{ training.getBaseDescription() }}</td>

                                                <td style="position:relative;">
                                                    {% set entity_tags = tags_by_entity[training.getId()] ?? [] %}
                                                    {% include 'operational_framework/components/tag_manager.twig' with {
                                                        entity_type: 'training',
                                                        entity_id:   training.getId(),
                                                        entity_tags: entity_tags
                                                    } %}
                                                </td>

                                                <td>
                                                    <div class="btn-group float-end">
                                                        <button class="btn btn-info btn-sm verifiers_btn"
                                                                data-id="{{ training.getId() }}"
                                                                data-name="{{ training.getBaseName() }}">
                                                            <i class="bi bi-people"></i>
                                                        </button>
                                                        <button class="btn btn-warning btn-sm edit_training_btn"
                                                                data-id="{{ training.getId() }}"
                                                                data-section-id="{{ training.getSectionId() }}"
                                                                data-category-id="{{ training.getCategoryId() }}"
                                                                data-subcategory-id="{{ training.getSubcategoryId() }}"
                                                                data-name="{{ training.getBaseName() }}"
                                                                data-description="{{ training.getBaseDescription() }}">
                                                            <i class="bi bi-pencil"></i>
                                                        </button>
                                                        <button class="btn btn-danger btn-sm delete_training_btn"
                                                                data-id="{{ training.getId() }}"
                                                                data-name="{{ training.getBaseName() }}">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    {% endif %}
                                    </tbody>

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

    {% include 'operational_framework/training/modals/add_edit_training.twig' %}
    {% include 'operational_framework/training/modals/trainers.twig' %}

{% endblock %}


{% block scripts %}
    <script type="module">
        import { initOfTagManagers, createTagFilterBadges } from '{{ root }}/assets/js/modules/of-tags.js';
        const ALL_OF_TAGS = {{ all_tags | json_encode | raw }};
        document.addEventListener('DOMContentLoaded', () => {
            const OF_TAG_LABELS = {
                tagNoTags:         '{{ translations.tag_no_tags | e('js') }}',
                tagDeleteTitle:    '{{ translations.tag_delete_title | e('js') }}',
                tagDeleteHtml:     '{{ translations.tag_delete_html | e('js') }}',
                tagDeleteConfirm:  '{{ translations.tag_delete_confirm | e('js') }}',
                tagDeleteCancel:   '{{ translations.tag_delete_cancel | e('js') }}',
                tagDeletedOk:      '{{ translations.tag_deleted_ok | e('js') }}',
                tagDeleteError:    '{{ translations.tag_delete_error | e('js') }}',
                tagDeleteBtnTitle: '{{ translations.tag_delete_btn_title | e('js') }}',
                tagAssignError:    '{{ translations.tag_assign_error | e('js') }}',
                tagCreateError:    '{{ translations.tag_create_error | e('js') }}',
                tagUnassignError:  '{{ translations.tag_unassign_error | e('js') }}',
            };
            initOfTagManagers(ALL_OF_TAGS, OF_TAG_LABELS);
            const tagFilter = createTagFilterBadges(ALL_OF_TAGS, () =>
                document.dispatchEvent(new CustomEvent('of:tag-filter-changed'))
            );
            window._getActiveTagIds = tagFilter.getActiveIds;
        });
    </script>
    <script type="module">
        import { initBadgeCascadeFilter } from '{{ root }}/assets/js/modules/of-section-filter.js';
        document.addEventListener('DOMContentLoaded', () => {
            initBadgeCascadeFilter(
                window.SECTIONS,
                {
                    sectionBadges:       'section_badges',
                    sectionWrapper:      'section_badges_wrapper',
                    clearSectionBtn:     'clear_section_badge_filter',
                    categoryBadges:      'category_badges',
                    categoryWrapper:     'category_badges_wrapper',
                    clearCategoryBtn:    'clear_category_badge_filter',
                    subcategoryBadges:   'subcategory_badges',
                    subcategoryWrapper:  'subcategory_badges_wrapper',
                    clearSubcategoryBtn: 'clear_subcategory_badge_filter',
                },
                '.training-row',
                { initialSectionId: window.CURRENT_SECTION_ID }
            );
        });
    </script>
    <script>
        let MODAL_MODE = 'add';
        let EDIT_ID = null;

        window.SECTIONS = {{ grouped_sections|json_encode|raw }};
        window.CURRENT_SECTION_ID = "{{ section_id }}";

        function clearModalCategorySelect() {
            const el = document.getElementById('training_category');
            if (!el) return;
            el.innerHTML = `<option value="">{{ translations.select_category }}</option>`;
        }

        function clearModalSubcategorySelect() {
            const el = document.getElementById('training_subcategory');
            if (!el) return;
            el.innerHTML = `<option value="">{{ translations.select_subcategory }}</option>`;
        }

        function lockSelect(el) {
            el.disabled = true;
            el.classList.add('select-readonly');
        }

        function unlockSelect(el) {
            el.disabled = false;
            el.classList.remove('select-readonly');
        }
    </script>

    <script type="text/javascript">

        document.addEventListener('DOMContentLoaded', function () {

            // ==============================================
            // MODAL – DODAJ / EDYTUJ
            // ==============================================
            const modalEl = document.getElementById('addEditTrainingModal');
            const modal   = new bootstrap.Modal(modalEl);
            const form    = document.getElementById('new_training_form');

            const sectionSelect     = document.getElementById('section_select');
            const categorySelect    = document.getElementById('training_category');
            const subcategorySelect = document.getElementById('training_subcategory');

            function loadCategories(sectionId, selectedCategoryId = null) {
                clearModalCategorySelect();
                clearModalSubcategorySelect();

                const section = window.SECTIONS[sectionId];
                if (!section) return;

                unlockSelect(categorySelect);
                lockSelect(subcategorySelect);

                Object.values(section.categories).forEach(cat => {
                    categorySelect.appendChild(new Option(cat.name, String(cat.id)));
                });

                if (selectedCategoryId) categorySelect.value = String(selectedCategoryId);
            }

            function loadSubcategories(sectionId, categoryId, selectedSubcategoryId = null) {
                clearModalSubcategorySelect();

                const category = window.SECTIONS[sectionId]?.categories[categoryId];
                if (!category) return;

                unlockSelect(subcategorySelect);

                Object.values(category.subcategories).forEach(sub => {
                    subcategorySelect.appendChild(new Option(sub.name, String(sub.id)));
                });

                if (selectedSubcategoryId) subcategorySelect.value = String(selectedSubcategoryId);
            }

            document.getElementById('add_training_btn').addEventListener('click', () => {
                MODAL_MODE = 'add';
                EDIT_ID    = null;

                form.reset();
                const trainingName        = document.getElementById('training_name');
                const trainingDescription = document.getElementById('training_description');

                unlockSelect(sectionSelect);
                unlockSelect(categorySelect);
                unlockSelect(subcategorySelect);
                unlockInput(trainingName);
                unlockInput(trainingDescription);

                clearModalCategorySelect();
                clearModalSubcategorySelect();

                lockSelect(categorySelect);
                lockSelect(subcategorySelect);

                modal.show();
            });

            document.querySelectorAll('.edit_training_btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    MODAL_MODE = 'edit';
                    EDIT_ID    = btn.dataset.id;

                    form.reset();

                    const trainingName        = document.getElementById('training_name');
                    const trainingDescription = document.getElementById('training_description');

                    trainingName.value        = btn.dataset.name;
                    trainingDescription.value = btn.dataset.description;

                    lockSelect(sectionSelect);
                    lockSelect(categorySelect);
                    lockSelect(subcategorySelect);
                    unlockInput(trainingName);
                    unlockInput(trainingDescription);

                    modal.show();
                });
            });

            sectionSelect.addEventListener('change', () => {
                const sectionId = sectionSelect.value;
                clearModalCategorySelect();
                clearModalSubcategorySelect();

                if (!window.SECTIONS[sectionId]) {
                    lockSelect(categorySelect);
                    lockSelect(subcategorySelect);
                    return;
                }
                loadCategories(sectionId);
            });

            categorySelect.addEventListener('change', () => {
                const sectionId  = sectionSelect.value;
                const categoryId = categorySelect.value;
                if (!sectionId || !categoryId) return;
                loadSubcategories(sectionId, categoryId);
            });

            form.addEventListener('submit', async (e) => {
                e.preventDefault();

                const payload = {
                    name:        document.getElementById('training_name').value,
                    description: document.getElementById('training_description').value
                };

                if (MODAL_MODE === 'add') {
                    payload.section_id     = sectionSelect.value;
                    payload.subcategory_id = subcategorySelect.value;

                    if (!payload.section_id || !payload.subcategory_id || !payload.name) {
                        form.classList.add('was-validated');
                        return;
                    }
                } else {
                    if (!payload.name) { form.classList.add('was-validated'); return; }
                }

                let url    = '/ajax/operational-framework/trainings';
                let method = 'POST';

                if (MODAL_MODE === 'edit') {
                    url    = `/ajax/operational-framework/trainings/${EDIT_ID}`;
                    method = 'PATCH';
                }

                api(url, { method, data: payload })
                    .then(resp => {
                        if (resp.success || resp.ok) {
                            Swal.fire({ icon: 'success', title: '{{ translations.success }}', text: '{{ translations.operation_successful }}', timer: 1500, showConfirmButton: false });
                            setTimeout(() => window.location.reload(), 1000);
                        } else {
                            Swal.fire({ icon: 'error', title: '{{ translations.error }}', text: resp.message ?? '{{ translations.undefined_error_occurred }}' });
                        }
                    })
                    .catch(() => alert('API error'));
            });

            document.querySelectorAll('.delete_training_btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    Swal.fire({
                        title: '{{ translations.are_you_sure }}',
                        text: '{{ translations.delete_confirmation }}: "' + this.dataset.name + '"',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '{{ translations.yes_delete_it }}',
                        cancelButtonText: '{{ translations.cancel }}'
                    }).then((result) => {
                        if (!result.isConfirmed) return;

                        api(`/ajax/operational-framework/trainings/${this.dataset.id}`, { method: 'DELETE' })
                            .then(resp => {
                                if (resp.success) {
                                    Swal.fire({ icon: 'success', title: '{{ translations.success }}', text: '{{ translations.deleted_successfully }}', timer: 1500, showConfirmButton: false });
                                    setTimeout(() => window.location.reload(), 1000);
                                } else {
                                    Swal.fire({ icon: 'error', title: '{{ translations.error }}', text: resp.message || '{{ translations.undefined_error_occurred }}' });
                                }
                            })
                            .catch(() => Swal.fire({ icon: 'error', title: '{{ translations.error }}', text: '{{ translations.no_api_connection }}' }));
                    });
                });
            });

            function lockInput(el)   { el.setAttribute('readonly', 'readonly'); }
            function unlockInput(el) { el.removeAttribute('readonly'); }

        });


    </script>

    <script type="text/javascript">
        let CURRENT_TRAINING_ID = null;
        let ASSIGNED_ADMIN_ROLES = new Set();
        let ASSIGNED_EMPLOYEE_ROLES = new Set();


        const trainersModalEl = document.getElementById('trainersModal');
        const trainersModal = new bootstrap.Modal(trainersModalEl);

        document.querySelectorAll('.verifiers_btn').forEach(btn => {
            btn.addEventListener('click', () => {

                CURRENT_TRAINING_ID = btn.dataset.id;

                loadTrainers(CURRENT_TRAINING_ID);

                trainersModal.show();
            });
        });

        function loadTrainers(trainingId) {

            const adminTbody = document.getElementById('admin_trainers_tbody');
            const employeeTbody = document.getElementById('employee_trainers_tbody');

            adminTbody.innerHTML = '';
            employeeTbody.innerHTML = '';

            ASSIGNED_ADMIN_ROLES.clear();
            ASSIGNED_EMPLOYEE_ROLES.clear();

            api(`/ajax/operational-framework/trainings/${trainingId}/trainers`)
                .then(resp => {

                    resp.admin_roles.forEach(role => {
                        ASSIGNED_ADMIN_ROLES.add(String(role.admin_role_id));
                        adminTbody.appendChild(renderTrainerRow(role, 'admin'));
                    });

                    resp.employee_roles.forEach(role => {
                        ASSIGNED_EMPLOYEE_ROLES.add(String(role.employee_role_id));
                        employeeTbody.appendChild(renderTrainerRow(role, 'employee'));
                    });

                    refreshTrainerSelects();
                    ensureSelectHasOptions(
                        document.getElementById('admin_role_select'),
                        '{{ translations.no_more_roles_available }}'
                    );

                    ensureSelectHasOptions(
                        document.getElementById('employee_role_select'),
                        '{{ translations.no_more_roles_available }}'
                    );

                    document.getElementById('admin_role_select').value = '';
                    document.getElementById('employee_role_select').value = '';
                });
        }

        function ensureSelectHasOptions(select, text) {
            const visibleOptions = [...select.options].filter(o => !o.hidden && o.value);
            if (visibleOptions.length === 0) {
                const opt = document.createElement('option');
                opt.textContent = text;
                opt.disabled = true;
                opt.selected = true;
                select.appendChild(opt);
            }
        }

        function refreshTrainerSelects() {

            const adminSelect = document.getElementById('admin_role_select');
            const employeeSelect = document.getElementById('employee_role_select');

            [...adminSelect.options].forEach(opt => {
                if (!opt.value) return;

                opt.hidden = ASSIGNED_ADMIN_ROLES.has(opt.value);
            });

            [...employeeSelect.options].forEach(opt => {
                if (!opt.value) return;

                opt.hidden = ASSIGNED_EMPLOYEE_ROLES.has(opt.value);
            });
        }

        function renderTrainerRow(role, type) {

            const tr = document.createElement('tr');

            tr.innerHTML = `
        <td>${role.name}</td>
        <td class="text-end">
            <button class="btn btn-sm btn-danger">
                <i class="bi bi-trash"></i>
            </button>
        </td>
    `;

            tr.querySelector('button').addEventListener('click', () => {
                const roleId = type === 'admin' ? role.admin_role_id : role.employee_role_id;
                removeTrainer(roleId, type);
            });

            return tr;
        }

        document.getElementById('add_admin_trainer_btn').addEventListener('click', () => {

            const roleId = document.getElementById('admin_role_select').value;
            if (!roleId) return;

            if (ASSIGNED_ADMIN_ROLES.has(roleId)) {
                Swal.fire({
                    icon: 'warning',
                    title: '{{ translations.warning }}',
                    text: '{{ translations.role_already_assigned }}'
                });
                return;
            }

            addTrainer('admin', roleId);
            document.getElementById('admin_role_select').value = '';
        });

        document.getElementById('add_employee_trainer_btn').addEventListener('click', () => {

            const roleId = document.getElementById('employee_role_select').value;
            if (!roleId) return;

            if (ASSIGNED_EMPLOYEE_ROLES.has(roleId)) {
                Swal.fire({
                    icon: 'warning',
                    title: '{{ translations.warning }}',
                    text: '{{ translations.role_already_assigned }}'
                });
                return;
            }

            addTrainer('employee', roleId);
            document.getElementById('employee_role_select').value = '';
        });

        function addTrainer(type, roleId) {

            const url = type === 'admin'
                ? `/ajax/operational-framework/trainings/${CURRENT_TRAINING_ID}/admin-trainers`
                : `/ajax/operational-framework/trainings/${CURRENT_TRAINING_ID}/employee-trainers`;

            api(url, {
                method: 'POST',
                data: {
                    role_id: roleId
                }
            }).then(() => loadTrainers(CURRENT_TRAINING_ID));
        }

        function removeTrainer(roleId, type) {

            const url = type === 'admin'
                ? `/ajax/operational-framework/trainings/${CURRENT_TRAINING_ID}/admin-trainers/${roleId}`
                : `/ajax/operational-framework/trainings/${CURRENT_TRAINING_ID}/employee-trainers/${roleId}`;

            api(url, {
                method: 'DELETE'
            }).then(() => loadTrainers(CURRENT_TRAINING_ID));
        }
    </script>
{% endblock %}