{% 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' %}

    {# ===== WORKSTATIONS CARD ===== #}
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">
                        {{ translations.manage_workstations }}
                    </h4>
                    <button class="btn btn-success" id="add_workstation_btn">
                        <i class="bi bi-plus-lg"></i> {{ translations.add_workstation }}
                    </button>
                </div>
                <div class="card-content">
                    <div class="card-body px-3 py-4-5">
                        <table class="table table-hover text-sm">
                            <thead>
                            <tr>
                                <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>
                            </tr>
                            </thead>
                            <tbody>
                            {% if workstations|length == 0 %}
                                <tr>
                                    <td colspan="4" class="text-center">
                                        {{ translations.no_workstations_found }}
                                    </td>
                                </tr>
                            {% else %}
                                {% for workstation in workstations %}
                                    <tr>
                                        <td>
                                            <button class="btn btn-danger btn-sm delete_workstation_btn"
                                                    data-id="{{ workstation.id }}"
                                                    data-name="{{ workstation.name }}">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </td>
                                        <td>{{ workstation.name }}</td>
                                        <td>{{ workstation.description }}</td>
                                        <td>
                                            <button class="btn btn-warning btn-sm edit_workstation_btn"
                                                    data-id="{{ workstation.id }}"
                                                    data-name="{{ workstation.name }}"
                                                    data-description="{{ workstation.description }}">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include 'operational_framework/workstation/modals/manage_workstation_modal.twig' %}

{% endblock %}

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

            // =========================
            // WORKSTATION CRUD
            // =========================
            (function () {
                let MODE = 'add';
                let EDIT_ID = null;

                const modalEl   = document.getElementById('workstationModal');
                const formEl    = document.getElementById('workstation_form');
                const nameInput = document.getElementById('workstation_name');
                const descInput = document.getElementById('workstation_description');

                // ADD
                document.getElementById('add_workstation_btn').addEventListener('click', () => {
                    MODE = 'add';
                    EDIT_ID = null;
                    formEl.reset();
                    formEl.classList.remove('was-validated');
                    formEl.querySelector('button[type="submit"]').textContent = "{{ translations.save }}";
                    new bootstrap.Modal(modalEl).show();
                });

                // EDIT
                document.querySelectorAll('.edit_workstation_btn').forEach(btn => {
                    btn.addEventListener('click', () => {
                        MODE = 'edit';
                        EDIT_ID = btn.dataset.id;
                        nameInput.value = btn.dataset.name;
                        descInput.value = btn.dataset.description;
                        formEl.classList.remove('was-validated');
                        formEl.querySelector('button[type="submit"]').textContent = "{{ translations.edit }}";
                        new bootstrap.Modal(modalEl).show();
                    });
                });

                // SUBMIT
                formEl.addEventListener('submit', e => {
                    e.preventDefault();
                    if (!nameInput.value.trim()) {
                        formEl.classList.add('was-validated');
                        return;
                    }
                    const payload = {
                        name: nameInput.value.trim(),
                        description: descInput.value.trim()
                    };
                    let url    = '/ajax/operational-framework/workstations';
                    let method = 'POST';
                    if (MODE === 'edit') {
                        url    = `/ajax/operational-framework/workstations/${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(() => 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
                document.querySelectorAll('.delete_workstation_btn').forEach(btn => {
                    btn.addEventListener('click', () => {
                        Swal.fire({
                            title: '{{ translations.are_you_sure }}',
                            text: '{{ translations.delete_confirmation }}: "' + btn.dataset.name + '"',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: '{{ translations.yes_delete_it }}',
                            cancelButtonText: '{{ translations.cancel }}'
                        }).then(result => {
                            if (!result.isConfirmed) return;
                            api(`/ajax/operational-framework/workstations/${btn.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(() => 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 }}'
                                });
                            });
                        });
                    });
                });
            })();

            // =========================
            // SECTION CRUD
            // =========================
            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 %}