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

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

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.workstations }}</h3>
        <p class="text-subtitle text-muted">
            {{ translations.workstations_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.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', () => {

            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('Error', resp.message, 'error');
                        }
                    });
            });

            // =========================
            // 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(() => location.reload());
                    });
                });
            });

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