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

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

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

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

        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">
                        {{ translations.manage_operational_framework_structure }}
                    </h4>
                </div>
                <div class="card-content">
                    <div class="card-body px-3 py-4-5">
                        <div class="row">
                            <div class="col-12 mb-5 text-center">
                                <h3>
                                    {{ section.getName() }}
                                </h3>
                                <p>{{ section.getDescription() }}</p>
                            </div>
                            <div class="col-12">
                                <button class="btn btn-success float-end" id="add_section_btn">
                                    <i class="bi bi-plus-lg"></i> {{ translations.add_category }}
                                </button>
                            </div>
                            <div class="col-12 mt-4">
                                <table class="table table-hover text-sm">
                                    <thead>
                                    <th style="width: 5%"></th>
                                    <th style="width: 35%">{{ translations.name }}</th>
                                    <th style="width: 40%">{{ translations.description }}</th>
                                    <th style="width: 20%"></th>
                                    </thead>
                                    <tbody>
                                    {% if(section.getCategories()|length == 0) %}
                                        <tr>
                                            <td colspan="6" class="text-center">
                                                {{ translations.no_categories_found }}
                                            </td>
                                        </tr>
                                    {% else %}

                                        {% for category in section.getCategories() %}
                                            <tr>
                                                <td>
                                                    <button class="btn btn-danger btn-sm delete_category_btn"
                                                            data-id="{{ category.id }}"
                                                            data-name="{{ category.getName() }}">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </td>
                                                <td>{{ category.getName() }}</td>
                                                <td>{{ category.getDescription() }}</td>
                                                <td>
                                                    <div class="btn-group float-end">
                                                        <button class="btn btn-warning btn-sm edit_category_btn"
                                                                data-id="{{ category.getId() }}"
                                                                data-name="{{ category.getName() }}"
                                                                data-description="{{ category.getDescription() }}">
                                                            <i class="bi bi-pencil"></i>
                                                        </button>
                                                        <button class="btn btn-info btn-sm show_subcategories_btn"
                                                                data-id="{{ category.getId() }}">
                                                            {{ translations.subcategories }}
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    {% endif %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-12 mt-5">
                                <a href="{{ root }}/operational-framework/structure" class="btn btn-secondary">
                                    <i class="bi bi-arrow-left"></i> {{ translations.back_to_structure }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include 'operational_framework/structure/modals/manage_category_modal.twig' %}
    {% include 'operational_framework/structure/modals/manage_subcategories_modal.twig' %}


{% endblock %}

{% block scripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const SECTION_ID = {{ section.getId() }};

            // =========================
            // CATEGORY MODAL
            // =========================
            let CATEGORY_MODE = 'add';
            let EDIT_CATEGORY_ID = null;

            const categoryModalEl = document.getElementById('categoryModal');
            const categoryForm = document.getElementById('category_form');
            const categoryNameInput = document.getElementById('category_name');
            const categoryDescInput = document.getElementById('category_description');
            const sectionNameModalLabel = document.getElementById('sectionNameModalLabel');

            document.getElementById('add_section_btn').addEventListener('click', () => {
                CATEGORY_MODE = 'add';
                EDIT_CATEGORY_ID = null;

                categoryForm.reset();
                categoryForm.classList.remove('was-validated');
                sectionNameModalLabel.innerHTML = `{{ section.getName() }}`;

                new bootstrap.Modal(categoryModalEl).show();
            });

            document.querySelectorAll('.edit_category_btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    CATEGORY_MODE = 'edit';
                    EDIT_CATEGORY_ID = this.dataset.id;

                    categoryNameInput.value = this.dataset.name;
                    categoryDescInput.value = this.dataset.description;
                    sectionNameModalLabel.innerHTML = `{{ section.getName() }}`;

                    new bootstrap.Modal(categoryModalEl).show();
                });
            });

            categoryForm.addEventListener('submit', function (e) {
                e.preventDefault();

                const payload = {
                    name: categoryNameInput.value.trim(),
                    description: categoryDescInput.value.trim()
                };

                if (!payload.name) {
                    categoryForm.classList.add('was-validated');
                    return;
                }

                let url = `/ajax/operational-framework/structure/sections/${SECTION_ID}/categories`;
                let method = 'POST';

                if (CATEGORY_MODE === 'edit') {
                    url = `/ajax/operational-framework/structure/categories/${EDIT_CATEGORY_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: 1200,
                                showConfirmButton: false
                            });
                            setTimeout(() => location.reload(), 800);
                        }
                    });
            });

            document.querySelectorAll('.delete_category_btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    const id = this.dataset.id;
                    const name = this.dataset.name;

                    Swal.fire({
                        title: '{{ translations.are_you_sure_to_delete_category }}',
                        text: name,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '{{ translations.yes_delete_it }}'
                    }).then(r => {
                        if (!r.isConfirmed) return;

                        api(`/ajax/operational-framework/structure/categories/${id}`, {
                            method: 'DELETE'
                        }).then(resp => {
                            return;
                                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 }}'
                                    });
                                }
                            }
                        );
                    });
                });
            });

            // =========================
            // SUBCATEGORIES MODAL
            // =========================
            let CURRENT_CATEGORY_ID = null;
            let EDIT_SUBCATEGORY_ID = null;

            const subModalEl = document.getElementById('sectionModal');
            const subTableBody = document.getElementById('subcategory_table_body');
            const categoryLabel = document.getElementById('categoryNameModalLabel');
            const addSubBtn = document.getElementById('add_subcategory_btn');

            document.querySelectorAll('.show_subcategories_btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    CURRENT_CATEGORY_ID = this.dataset.id;
                    categoryLabel.textContent = this.closest('tr').children[1].innerText;

                    loadSubcategories();
                    new bootstrap.Modal(subModalEl).show();
                });
            });

            function loadSubcategories() {
                subTableBody.innerHTML = '';

                api(`/ajax/operational-framework/structure/categories/${CURRENT_CATEGORY_ID}/subcategories`)
                    .then(resp => {
                        if (!resp.data || resp.data.length === 0) {
                            subTableBody.innerHTML = `
                        <tr>
                            <td colspan="4" class="text-center text-muted">
                                {{ translations.no_subcategories_found }}
                            </td>
                        </tr>`;
                            return;
                        }

                        resp.data.forEach(sub => {
                            const tr = document.createElement('tr');
                            tr.innerHTML = `
                        <td>
                            <button type="button" class="btn btn-danger btn-sm delete_sub_btn"
                                data-id="${sub.id}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                        <td>${sub.name}</td>
                        <td>${sub.description ?? ''}</td>
                            <td><button class="btn btn-warning btn-sm enable_edit_sub_btn" data-id="${sub.id}">
                            <i class="icon bi bi-pencil"></i>
                            {{ translations.edit }}
                            </button></td>
                    `;
                            subTableBody.appendChild(tr);
                        });

                        bindDeleteSub();
                        bindEditSub();
                    });
            }

            addSubBtn.addEventListener('click', () => {

                const nameInput = document.getElementById('subcategory_name');
                const descInput = document.getElementById('subcategory_description');

                const name = nameInput.value.trim();
                const description = descInput.value.trim();

                if (!name) {
                    nameInput.classList.add('is-invalid');
                    return;
                }

                api(`/ajax/operational-framework/structure/categories/${CURRENT_CATEGORY_ID}/subcategories`, {
                    method: 'POST',
                    data: {
                        name,
                        description
                    }
                }).then(resp => {
                    if (resp.success || resp.ok) {
                        nameInput.value = '';
                        descInput.value = '';
                        nameInput.classList.remove('is-invalid');

                        loadSubcategories();
                    }
                });
            });

            function bindDeleteSub() {
                document.querySelectorAll('.delete_sub_btn').forEach(btn => {
                    btn.addEventListener('click', function () {
                        const id = this.dataset.id;

                        api(`/ajax/operational-framework/structure/subcategories/${id}`, {
                            method: 'DELETE'
                        }).then(() => loadSubcategories());
                    });
                });
            }

            function bindEditSub() {
                document.querySelectorAll('.enable_edit_sub_btn').forEach(btn => {
                    btn.addEventListener('click', function () {

                        const tr = this.closest('tr');
                        const id = this.dataset.id;

                        EDIT_SUBCATEGORY_ID = id;

                        const nameCell = tr.children[1];
                        const descCell = tr.children[2];
                        const actionCell = tr.children[3];

                        const currentName = nameCell.innerText.trim();
                        const currentDesc = descCell.innerText.trim();

                        nameCell.innerHTML = `
                <input type="text"
                       class="form-control form-control-sm"
                       value="${currentName}">
            `;

                        descCell.innerHTML = `
                <textarea class="form-control form-control-sm"
                          rows="2">${currentDesc}</textarea>
            `;

                        actionCell.innerHTML = `
                <button type="button" class="btn btn-success btn-sm save_sub_btn" data-id="${id}">
                    <i class="bi bi-check-lg"></i>
                    {{ translations.save }}
                </button>
            `;

                        bindSaveSub();
                    });
                });
            }

            function bindSaveSub() {
                document.querySelectorAll('.save_sub_btn').forEach(btn => {
                    btn.addEventListener('click', function () {

                        const id = this.dataset.id;
                        const tr = this.closest('tr');

                        const name = tr.children[1].querySelector('input').value.trim();
                        const description = tr.children[2].querySelector('textarea').value.trim();

                        if (!name) return;

                        api(`/ajax/operational-framework/structure/subcategories/${id}`, {
                            method: 'PATCH',
                            data: {
                                name,
                                description
                            }
                        }).then(resp => {
                            if (resp.success || resp.ok) {
                                loadSubcategories();
                            }
                        });
                    });
                });
            }
        });
    </script>
{% endblock %}