{% 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">
                                <button class="btn btn-success float-end" id="add_section_btn">
                                    <i class="bi bi-plus-lg"></i> {{ translations.add_section }}
                                </button>
                            </div>
                            <div class="col-12 mt-4">
                                <table class="table table-hover text-sm">
                                    <thead>
                                    <th style="width: 10%"></th>
                                    <th style="width: 35%">{{ translations.name }}</th>
                                    <th style="width: 45%">{{ translations.description }}</th>
                                    <th style="width: 10%">{{ translations.action }}</th>
                                    </thead>
                                    <tbody>
                                    {% if(sections|length == 0) %}
                                        <tr>
                                            <td colspan="6" class="text-center">
                                                {{ translations.no_sections_found }}
                                            </td>
                                        </tr>
                                    {% else %}

                                        {% for section in sections %}
                                            <tr>
                                                <td>
                                                    <button class="btn btn-danger btn-sm delete_section_btn" data-id="{{ section.id }}"
                                                            data-name="{{ section.getName() }}">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </td>
                                                <td>{{ section.getName() }}</td>
                                                <td>{{ section.getDescription() }}</td>
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn btn-warning btn-sm edit_section_btn"
                                                                data-id="{{ section.getId() }}"
                                                                data-name="{{ section.getName() }}"
                                                                data-description="{{ section.getDescription() }}">
                                                            <i class="bi bi-pencil"></i>
                                                        </button>

                                                        <a href="{{ root }}/operational-framework/structure/sections/{{ section.getId() }}/categories" class="btn btn-info btn-sm">
                                                            {{ translations.categories }}
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    {% endif %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include 'operational_framework/structure/modals/manage_section_modal.twig' %}


{% endblock %}

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

            let MODAL_MODE = 'add';
            let EDIT_ID = null;

            const addBtn = document.getElementById('add_section_btn');
            const modalEl = document.getElementById('sectionModal');
            const formEl = document.getElementById('section_form');

            const nameInput = document.getElementById('section_name');
            const descInput = document.getElementById('section_description');

            // =========================
            // ADD SECTION
            // =========================
            addBtn.addEventListener('click', function () {

                MODAL_MODE = 'add';
                EDIT_ID = null;

                formEl.reset();
                formEl.classList.remove('was-validated');

                document.querySelector('#section_form button[type="submit"]').textContent =
                    "{{ translations.save }}";

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

            // =========================
            // EDIT SECTION
            // =========================
            document.querySelectorAll('.edit_section_btn').forEach(btn => {
                btn.addEventListener('click', function () {

                    MODAL_MODE = 'edit';
                    EDIT_ID = this.dataset.id;

                    formEl.reset();
                    formEl.classList.remove('was-validated');

                    nameInput.value = this.dataset.name;
                    descInput.value = this.dataset.description;

                    document.querySelector('#section_form button[type="submit"]').textContent =
                        "{{ translations.edit }}";

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

            // =========================
            // SUBMIT (ADD / EDIT)
            // =========================
            formEl.addEventListener('submit', function (e) {
                e.preventDefault();

                const payload = {
                    name: nameInput.value.trim(),
                    description: descInput.value.trim()
                };

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

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

                if (MODAL_MODE === 'edit') {
                    url = `/ajax/operational-framework/structure/sections/${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(() => {
                        Swal.fire({
                            icon: 'error',
                            title: '{{ translations.error }}',
                            text: '{{ translations.no_api_connection }}'
                        });
                    });
            });

            // =========================
            // DELETE SECTION
            // =========================
            document.querySelectorAll('.delete_section_btn').forEach(btn => {
                btn.addEventListener('click', function () {

                    const id = this.dataset.id;
                    const name = this.dataset.name;

                    Swal.fire({
                        title: '{{ translations.are_you_sure }}',
                        text: '{{ translations.delete_confirmation }}: "' + name + '"',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '{{ translations.yes_delete_it }}',
                        cancelButtonText: '{{ translations.cancel }}'
                    }).then(result => {

                        if (!result.isConfirmed) return;

                        api(`/ajax/operational-framework/structure/sections/${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 }}'
                                });
                            });
                    });
                });
            });

        });
    </script>
{% endblock %}