@extends('layouts.site')

@section('title', 'Struktura organizacyjna - Graf')

@section('content')
<style>
    .org-tree-page .org-tree-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0.6rem 0 0.8rem 0.5rem;
    }

    .org-tree-page .org-tree-canvas {
        border: 1px solid #9abfe2;
        border-radius: 0.55rem;
        background: radial-gradient(circle at 20% 10%, #f7fbff 0%, #edf5fd 65%, #e7f0f9 100%);
        padding: 1rem;
        min-height: 64vh;
        max-height: 75vh;
        overflow: auto;
    }

    .org-tree-page .org-tree-stage {
        display: flex;
        justify-content: center;
        min-width: max-content;
        padding: 0.4rem 1.3rem 1.4rem 1.3rem;
    }

    .org-tree-root ul {
        list-style: none;
        margin: 0;
        padding: 26px 0 0 0;
        position: relative;
        display: flex;
        justify-content: center;
        gap: 0;
    }

    .org-tree-root ul ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        height: 26px;
        border-left: 2px solid #75a8d3;
    }

    .org-tree-root li {
        position: relative;
        margin: 0;
        padding: 26px 8px 0 8px;
        text-align: center;
        white-space: nowrap;
    }

    .org-tree-root li::before,
    .org-tree-root li::after {
        content: '';
        position: absolute;
        top: 0;
        width: 50%;
        height: 26px;
        border-top: 2px solid #75a8d3;
    }

    .org-tree-root li::before {
        left: 0;
        border-right: 2px solid #75a8d3;
    }

    .org-tree-root li::after {
        right: 0;
        border-left: 2px solid #75a8d3;
    }

    .org-tree-root li:only-child::before,
    .org-tree-root li:only-child::after {
        display: none;
    }

    .org-tree-root li:only-child {
        padding-top: 0;
    }

    .org-tree-root li:first-child::before,
    .org-tree-root li:last-child::after {
        border: 0;
    }

    .org-tree-root li:last-child::before {
        border-right: 2px solid #75a8d3;
        border-radius: 0 7px 0 0;
    }

    .org-tree-root li:first-child::after {
        border-radius: 7px 0 0 0;
    }

    .org-card-wrap {
        position: relative;
        display: inline-block;
        vertical-align: top;
    }

    .org-card {
        position: relative;
        min-width: 230px;
        max-width: 230px;
        border: 1px solid #6b9fca;
        border-radius: 0.55rem;
        padding: 0.35rem 0.45rem 0.42rem 0.45rem;
        box-shadow: 0 2px 8px rgba(51, 84, 109, 0.22);
    }

    .org-card:hover {
        box-shadow: 0 4px 12px rgba(51, 84, 109, 0.3);
    }

    .org-node-toggle {
        position: absolute;
        top: -0.5rem;
        right: -0.35rem;
        z-index: 3;
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 0.3rem;
        border: 1px solid #6b9fca;
        background: #e7f1fb;
        color: #2f628f;
        line-height: 1;
        font-weight: 700;
        font-size: 0.85rem;
        padding: 0;
        cursor: pointer;
        z-index: 101;
    }

    .org-node-toggle.is-leaf {
        opacity: 0;
        cursor: default;
        pointer-events: none;
    }

    .org-node-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        flex: 1 1 auto;
    }

    .org-node-title {
        font-size: 1.1rem;
        line-height: 1.15;
        color: #0b4f88;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.005em;
        white-space: normal;
    }

    .org-node-code {
        display: inline-block;
        align-self: center;
        min-width: 1.8rem;
        padding: 0.2rem 1rem;
        border-radius: 999px;
        font-size: 1.4rem;
        line-height: 1;
        font-weight: 700;
        color: #ffffff;
        background: rgba(5, 70, 124, 0.75);
        margin-bottom: 0.8rem;
    }

    .org-node-actions {
        margin-top: 0.23rem;
        white-space: nowrap;
        display: inline-flex;
        gap: 0.16rem;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease-in-out;
    }

    .org-card-wrap:hover .org-node-actions {
        opacity: 1;
        pointer-events: auto;
    }

    .org-node-actions .btn {
        border-radius: 0.26rem;
        padding: 0.08rem 0.25rem;
        font-size: 0.66rem;
        line-height: 1.1;
    }

    .org-children.collapsed {
        display: none;
    }

    /* Ostatni poziom: tylko liscie w jednej kolumnie */
    .org-tree-root ul.org-leaf-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 18px;
    }

    /* Ukrywa pojedynczy lacznik nad kolumna lisci */
    .org-tree-root ul.org-leaf-group::before {
        display: none;
    }

    .org-tree-root ul.org-leaf-group > li {
        padding: 14px 0 0 0;
    }

    .org-tree-root ul.org-leaf-group > li::before,
    .org-tree-root ul.org-leaf-group > li::after {
        display: none;
    }

    .org-tree-root ul.org-leaf-group > li::before {
        content: '';
        display: block;
        position: absolute;
        left: 230px;
        top: -40px;
        width: 20px;
        height: 92px;
        border-right: 2px solid #75a8d3;
        border-bottom: 2px solid #75a8d3;
    }



    .org-card.depth-0 {
        min-width: 380px;
        max-width: 380px;
    }

    .org-card.depth-1 {
        min-width: 260px;
        max-width: 260px;
        z-index: 100;
    }

    .org-card-top {
        background: linear-gradient(180deg, #ff7f3a 0%, #ef4b2b 100%);
        border-color: #ce4223;
    }

    .org-card-branch-0 { background: linear-gradient(180deg, #ffd64d 0%, #f2c101 100%); border-color: #d3a700; }
    .org-card-branch-1 { background: linear-gradient(180deg, #ffb458 0%, #eb8a21 100%); border-color: #cf7617; }
    .org-card-branch-2 { background: linear-gradient(180deg, #7ec8ff 0%, #4ea7e8 100%); border-color: #3f93cf; }
    .org-card-branch-3 { background: linear-gradient(180deg, #99df9a 0%, #67bc6b 100%); border-color: #58a75b; }
    .org-card-branch-4 { background: linear-gradient(180deg, #e1b2ff 0%, #c586e8 100%); border-color: #ad6ecf; }
    .org-card-branch-5 { background: linear-gradient(180deg, #ffb8b8 0%, #ec8686 100%); border-color: #d17474; }

    .org-card-leaf-0 { background: #fff4bd; border-color: #dec066; }
    .org-card-leaf-1 { background: #ffe2bf; border-color: #deab72; }
    .org-card-leaf-2 { background: #d7eeff; border-color: #8db7d8; }
    .org-card-leaf-3 { background: #d9f0d4; border-color: #8fbf84; }
    .org-card-leaf-4 { background: #ecdafb; border-color: #b99bd1; }
    .org-card-leaf-5 { background: #ffe0e0; border-color: #d8a0a0; }

    .org-card-top .org-node-title,
    .org-card-branch-0 .org-node-title,
    .org-card-branch-1 .org-node-title,
    .org-card-branch-2 .org-node-title,
    .org-card-branch-3 .org-node-title,
    .org-card-branch-4 .org-node-title,
    .org-card-branch-5 .org-node-title {
        color: #0b4f88;
    }

    .org-card-top .org-node-code {
        background: rgba(126, 26, 10, 0.7);
    }

    @media (max-width: 992px) {
        .org-tree-page .org-tree-toolbar {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.45rem;
        }

        .org-card {
            min-width: 220px;
            max-width: 220px;
        }

        .org-node-title {
            font-size: 0.8rem;
        }
    }
</style>

<div class="tab-content_2 org-tree-page">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="org-tree-toolbar">
                <h5><i>Struktura organizacyjna - Graf</i></h5>
                <div class="d-inline-flex align-items-center">
                    <x-view-graph-export-buttons
                        id="org-tree-export-toolbar"
                        target-selector="#org-tree-root"
                        filename-prefix="Struktura_organizacyjna_graf"
                    />
                    <a class="btn btn-secondary ml-1" href="{{ url('/m_admin_struktura_index_component') }}">
                        <i class="fas fa-list"></i> Lista
                    </a>
                </div>
            </div>

            <div class="org-tree-canvas">
                <div class="org-tree-stage">
                    <div id="org-tree-root" class="org-tree-root"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    (function () {
        var nodes = @json($nodesForTree);
        var rootContainer = document.getElementById('org-tree-root');
        if (!rootContainer) {
            return;
        }

        var infoBase = @json(url('/m_admin_struktura_form_info'));
        var updateBase = @json(url('/m_admin_struktura_form_update'));

        function escapeHtml(value) {
            return String(value || '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        var nodeById = {};
        nodes.forEach(function (node) {
            nodeById[String(node.id)] = node;
        });

        var childrenByParent = {};
        nodes.forEach(function (node) {
            var parentId = Number(node.parent_id || 0);
            if (parentId === Number(node.id) || !nodeById[String(parentId)]) {
                parentId = 0;
            }
            if (!childrenByParent[parentId]) {
                childrenByParent[parentId] = [];
            }
            childrenByParent[parentId].push(node);
        });

        Object.keys(childrenByParent).forEach(function (key) {
            childrenByParent[key].sort(function (a, b) {
                return String(a.nazwa_pelna || '').localeCompare(String(b.nazwa_pelna || ''), 'pl');
            });
        });

        function buildParentOptions(currentNodeId, selectedParentId) {
            var options = ['<option value="">-- Brak --</option>'];
            var sortedNodes = nodes.slice().sort(function (a, b) {
                return String(a.nazwa_pelna || '').localeCompare(String(b.nazwa_pelna || ''), 'pl');
            });

            sortedNodes.forEach(function (nodeItem) {
                var optionId = String(nodeItem.id);
                if (optionId === String(currentNodeId)) {
                    return;
                }

                var labelShort = String(nodeItem.nazwa_skrot || '').trim();
                var labelFull = String(nodeItem.nazwa_pelna || '').trim();
                var label = labelShort !== '' ? labelShort + ' - ' + labelFull : labelFull;
                var selected = String(selectedParentId || '') === optionId ? ' selected' : '';
                options.push('<option value="' + escapeHtml(optionId) + '"' + selected + '>' + escapeHtml(label) + '</option>');
            });

            return options.join('');
        }

        function hashNumber(value) {
            var str = String(value || '');
            var hash = 0;
            for (var i = 0; i < str.length; i++) {
                hash = ((hash << 5) - hash) + str.charCodeAt(i);
                hash |= 0;
            }
            return Math.abs(hash);
        }

        function resolveColorClass(depth, branchKey) {
            if (depth === 0) {
                return 'org-card-top';
            }

            var paletteIndex = hashNumber(branchKey) % 6;
            if (depth === 1) {
                return 'org-card-branch-' + paletteIndex;
            }
            return 'org-card-leaf-' + paletteIndex;
        }

        function createNode(node, depth, branchKey) {
            var li = document.createElement('li');
            var childNodes = childrenByParent[node.id] || [];
            var hasChildren = childNodes.length > 0;
            li.className = 'org-tree-level-' + depth;

            var titleShort = String(node.nazwa_skrot || '').trim();
            var titleFull = String(node.nazwa_pelna || '').trim();
            var displayTitle = titleFull !== '' ? titleFull : titleShort;
            if (displayTitle === '') {
                displayTitle = 'Bez nazwy';
            }
            var displayCode = titleShort !== '' ? titleShort : ('ID ' + String(node.id));
            var colorClass = resolveColorClass(depth, branchKey);

            var nodeHtml = ''
                + '<div class="org-card-wrap">'
                + '  <button type="button" class="org-node-toggle ' + (hasChildren ? '' : 'is-leaf') + '" data-role="toggle">' + (hasChildren ? '-' : '') + '</button>'
                + '  <div class="org-card depth-' + depth + ' ' + colorClass + '">'
                + '      <div class="org-node-main">'
                + '          <div class="org-node-code">' + escapeHtml(displayCode) + '</div>'
                + '          <div class="org-node-title" title="' + escapeHtml(titleFull) + '">' + escapeHtml(displayTitle) + '</div>'
                + '      </div>'
                + '      <div class="org-node-actions">'
                + '          <a class="btn btn-info btn-sm" href="' + infoBase + '/' + encodeURIComponent(node.id) + '" title="Szczegóły"><i class="fas fa-info-circle"></i></a>'
                + '          <button type="button" class="btn btn-primary btn-sm open_modal_tree_edit" value="' + escapeHtml(String(node.id)) + '" title="Edycja"><i class="fas fa-edit"></i></button>'
                + '      </div>'
                + '  </div>'
                + '</div>';

            li.innerHTML = nodeHtml;

            if (hasChildren) {
                var ul = document.createElement('ul');
                ul.className = 'org-children';

                var allChildrenAreLeaves = childNodes.every(function (child) {
                    var grandchildren = childrenByParent[child.id] || [];
                    return grandchildren.length === 0;
                });

                if (allChildrenAreLeaves) {
                    ul.classList.add('org-leaf-group');
                }

                childNodes.forEach(function (child) {
                    var nextBranchKey = depth <= 0 ? child.id : branchKey;
                    ul.appendChild(createNode(child, depth + 1, nextBranchKey));
                });
                li.appendChild(ul);

                li.querySelector('[data-role="toggle"]').addEventListener('click', function () {
                    var isCollapsed = ul.classList.toggle('collapsed');
                    // Dla grup "org-leaf-group" sama klasa moze byc nadpisana przez display:flex.
                    // hidden gwarantuje zwijanie bez zmian w CSS.
                    ul.hidden = isCollapsed;
                    this.textContent = isCollapsed ? '+' : '-';
                });
            }

            return li;
        }

        var roots = childrenByParent[0] || [];
        if (!roots.length && nodes.length) {
            roots = nodes.slice();
        }

        if (!roots.length) {
            rootContainer.innerHTML = '<div class="no_records">Brak danych do wyświetlenia.</div>';
            return;
        }

        var rootUl = document.createElement('ul');
        roots.forEach(function (node) {
            rootUl.appendChild(createNode(node, 0, node.id));
        });
        rootContainer.appendChild(rootUl);

        $(document).on('click', '.open_modal_tree_edit', function () {
            var id = String($(this).val() || '').trim();
            var nodeData = nodeById[id] || null;
            if (!id || !nodeData) {
                return;
            }

            var $modal = $('#ModalForm_struktura_tree_edit');
            var $form = $('#form_edit_struktura_tree');
            if (!$modal.length || !$form.length) {
                return;
            }

            $form.attr('action', updateBase + '/' + encodeURIComponent(id));
            $modal.find('#tree_edit_id').val(id);
            $modal.find('#tree_edit_id_view').val(id);
            $modal.find('#tree_edit_nazwa_pelna').val(String(nodeData.nazwa_pelna || ''));
            $modal.find('#tree_edit_nazwa_skrot').val(String(nodeData.nazwa_skrot || ''));
            $modal.find('#tree_edit_parent').html(buildParentOptions(id, nodeData.parent_id));
            $modal.find('#edit_rekord_id').val(id);
            $modal.find('[data-role="edit-record-id-display"]').text(id);
            $modal.find("input[name='return_to']").val('m_admin_tree_struktura_graph');
            $modal.find("input[name='modal_return_to']").val('m_admin_tree_struktura_graph');

            $modal.modal('show');
        });
    })();
</script>
@endsection

@section('navbar')
    @include('sites.admin._navbar_m_admin_site')
    @include('sites.admin.struktura_org._navbar_m_admin_struktura_organizacyjna')
    <i class="fas fa-chevron-right separator"></i>
    <span class="navbar_navigate" title="Aktywna strona">Graf struktury organizacyjnej</span>
@endsection

@section('menu')
    @include('sites.admin.menu_admin')
@endsection

@section('modal_windows')
    @include('sites.admin.struktura_org.form_modal_tree_edit')
@endsection