@extends('layouts.app')
@section('title', 'POSM Hierarchy')

@section('content')
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Hierarchy Management</div>
        <div class="d-flex align-items-center">
            <!-- Additional Actions (Left) -->
            <!-- Tree Controls -->
            <i class="fa-solid fa-angles-down fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Expand All" onclick="expandAllNodes()" style="cursor: pointer;"></i>

            <i class="fa-solid fa-angles-up fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Collapse All" onclick="collapseAllNodes()" style="cursor: pointer;"></i>

            <div class="ms-auto d-flex align-items-center">
                <!-- Mandatory Action Set (Right) -->
                <!-- Add Button -->
                <a href="{{ route('posm.hierarchy.create') }}" data-toggle="tooltip" title="Add" class="mx-1">
                    <i
                        class="fa-regular fa-plus fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"></i>
                </a>

                <!-- Save -->
                <i class="fa-regular fa-save fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                    data-toggle="tooltip" title="Save" style="cursor: default;"></i>

                <!-- Edit -->
                <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                    data-toggle="tooltip" title="Edit" style="cursor: default;"></i>

                <!-- Delete -->
                <i id="deleteSelectedNode"
                    class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
                    data-toggle="tooltip" title="Delete" style="cursor: default;"></i>

                <!-- Close -->

                <i class="fa-solid fa-xmark fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"
                    data-toggle="tooltip" title="Close"></i>


                <!-- Column Visibility -->
                <div class="dropdown d-inline-block mx-1">
                    <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"
                        id="columnVisibilityDropdownHierarchy" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false" title="Columns" style="cursor: pointer;"></i>
                    <div class="dropdown-menu dropdown-menu-right columns-menu shadow border-0"
                        aria-labelledby="columnVisibilityDropdownHierarchy" style="min-width: 200px;">
                        <li><label class="dropdown-item"><input type="checkbox" class="columnCheckbox" data-column="tier"
                                    checked> Tier</label></li>
                        <li><label class="dropdown-item"><input type="checkbox" class="columnCheckbox" data-column="node"
                                    checked> Node</label></li>
                        <li><label class="dropdown-item"><input type="checkbox" class="columnCheckbox" data-column="parent"
                                    checked> Parent Authority</label></li>
                        <li><label class="dropdown-item"><input type="checkbox" class="columnCheckbox" data-column="action"
                                    checked> Action</label></li>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row section-spacing">
        <div class="col-auto">
            <div class="nav nav-pills bg-light rounded-pill p-1 border shadow-xs" id="hierarchyViewTabs" role="tablist">
                <button class="nav-link active rounded-pill px-3 py-1 fs-12 fw-bold border-0" id="topology-tab"
                    data-toggle="pill" data-target="#topology-pane" type="button" role="tab" aria-controls="topology-pane"
                    aria-selected="true">
                    <i class="fa-solid fa-sitemap me-1"></i> Topology
                </button>
                <button class="nav-link rounded-pill px-3 py-1 fs-12 fw-bold border-0" id="registry-tab" data-toggle="pill"
                    data-target="#registry-pane" type="button" role="tab" aria-controls="registry-pane"
                    aria-selected="false">
                    <i class="fa-solid fa-table-list me-1"></i> Registry
                </button>
            </div>
        </div>
    </div>

    <div class="tab-content section-spacing" id="hierarchyViewContent">
        <!-- Topology Pane -->
        <div class="tab-pane fade show active" id="topology-pane" role="tabpanel">


            <!-- Tree Topology Card -->
            <div class="card rounded-border border-0 shadow-sm mb-4">
                <div class="collapse show" id="topologyCollapse">
                    <div class="card-body bg-light-soft rounded-border">
                        @if($rootNodes->count() > 0)
                            <div class="tree-container p-3 bg-white rounded-border border shadow-none">
                                @foreach($rootNodes as $rootNode)
                                    @include('posm::hierarchy.partials.tree-node', ['node' => $rootNode, 'depth' => 0])
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-5">
                                <p class="text-muted small">No organizational nodes identified.</p>
                                <a href="{{ route('posm.hierarchy.create') }}"
                                    class="btn btn-warning-posm btn-sm rounded-pill px-4 fw-bold text-white shadow-sm">Initialize
                                    Root
                                    Node</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

        </div>

        <!-- Registry Pane -->
        <div class="tab-pane fade" id="registry-pane" role="tabpanel">
            <!-- Operational Registry Card -->
            <div class="card mt-3 rounded-border">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="fw-bold mb-0 text-dark">Operational Registry</h6>
                </div>
                <div class="card-body pt-0">
                    <div class="table-responsive">
                        <table class="table table-striped align-middle mb-0" id="hierarchyTable">
                            <thead class="bg-light text-muted uppercase fs-11 fw-bold">
                                <tr>
                                    <th class="ps-4 py-3 tier-index">Tier Level</th>
                                    <th class="py-3 node-index">Node Identity</th>
                                    <th class="py-3 parent-index">Parent Authority</th>
                                    <th class="py-3 text-center">Sub-Nodes</th>
                                    <th class="py-3 text-center">Active Agents</th>
                                    <th class="py-3 pe-4 text-end action-index">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($allNodes as $node)
                                                        <tr>
                                                            <td class="ps-4 tier-index">
                                                                <span
                                                                    class="badge rounded-pill bg-soft-primary border px-3 py-1 fs-9 fw-bold">TIER-0{{
                                    $node->level }}</span>
                                                            </td>
                                                            <td class="node-index">
                                                                <div class="d-flex align-items-center"
                                                                    style="padding-left: {{ $node->level * 15 }}px">
                                                                    @if($node->level > 0)
                                                                        <i class="fa-solid fa-reply fa-rotate-180 text-muted opacity-50 me-2 fs-10"></i>
                                                                    @endif
                                                                    <a href="{{ route('posm.hierarchy.show', $node->id) }}"
                                                                        style="text-decoration: none;color: #EFA81E;" class="fw-bold">{{ $node->name
                                                                        }}</a>
                                                                </div>
                                                            </td>
                                                            <td class="parent-index">
                                                                @if($node->parent)
                                                                    <span class="text-muted fs-11">{{ $node->parent->name }}</span>
                                                                @else
                                                                    <span class="badge bg-soft-info text-info rounded-pill px-2 py-0 fs-9 fw-bold">ROOT
                                                                        AUTHORITY</span>
                                                                @endif
                                                            </td>
                                                            <td class="text-center">
                                                                <span class="badge bg-light text-dark border px-2 py-1 fs-11 fw-bold">{{
                                    $node->children_count }}</span>
                                                            </td>
                                                            <td class="text-center">
                                                                <span
                                                                    class="badge bg-soft-primary text-primary rounded-circle fw-bold fs-11 d-inline-flex align-items-center justify-content-center"
                                                                    style="width: 32px; height: 32px;">
                                                                    {{ $node->user_assignments_count }}
                                                                </span>
                                                            </td>
                                                            <td class="pe-4 text-end action-index">
                                                                <div class="d-inline-flex table-action-btns">
                                                                    <span class="action-btn">
                                                                        <a href="{{ route('posm.hierarchy.show', $node->id) }}">
                                                                            <i
                                                                                class="fa-regular fa-eye rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue"></i>
                                                                        </a>
                                                                    </span>
                                                                    <span class="action-btn mx-1">
                                                                        <a href="{{ route('posm.hierarchy.edit', $node->id) }}">
                                                                            <i
                                                                                class="fa-solid fa-pencil rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue"></i>
                                                                        </a>
                                                                    </span>
                                                                </div>
                                                            </td>
                                                        </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-5">No data to display</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>

                        @if($allNodes->hasPages())
                            <div class="d-flex justify-content-between mt-4 align-items-center px-4 mb-3">
                                <div class="text-muted small fw-normal fs-12">Showing {{ $allNodes->firstItem() }} to
                                    {{ $allNodes->lastItem() }} of {{ $allNodes->total() }} entries
                                </div>
                                <div>{{ $allNodes->links() }}</div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        function toggleNodeChildren(nodeId) {
            const childrenContainer = document.getElementById(`children-${nodeId}`);
            const icon = document.getElementById(`icon-${nodeId}`);

            if (childrenContainer) {
                // Handle initial state where style.display might be empty
                const isHidden = childrenContainer.style.display === 'none';

                if (isHidden) {
                    childrenContainer.style.display = 'block';
                    icon.style.transform = 'rotate(0deg)';
                } else {
                    childrenContainer.style.display = 'none';
                    icon.style.transform = 'rotate(-90deg)';
                }
            }
        }

        function expandAllNodes() {
            document.querySelectorAll('.tree-children').forEach(el => {
                el.style.display = 'block';
            });
            document.querySelectorAll('.node-toggle-btn i').forEach(el => {
                el.style.transform = 'rotate(0deg)';
            });
        }

        function collapseAllNodes() {
            document.querySelectorAll('.tree-children').forEach(el => {
                el.style.display = 'none';
            });
            document.querySelectorAll('.node-toggle-btn i').forEach(el => {
                el.style.transform = 'rotate(-90deg)';
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            // Manual Tab Switching Logic
            const tabButtons = document.querySelectorAll('[data-toggle="pill"]');
            tabButtons.forEach(button => {
                button.addEventListener('click', function (e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('data-target');

                    // Remove active classes
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    document.querySelectorAll('.tab-pane').forEach(pane => {
                        pane.classList.remove('show', 'active');
                    });

                    // Add active classes
                    this.classList.add('active');
                    const targetPane = document.querySelector(targetId);
                    if (targetPane) {
                        targetPane.classList.add('show', 'active');
                    }
                });
            });
        });
    </script>
@endpush

@push('css')
    <link href="{{ asset('assets/css/posm_custom.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .transition-all {
            transition: all 0.25s ease-in-out;
        }

        .node-toggle-btn:hover {
            color: #EFA81E !important;
            background: transparent !important;
        }

        .hover-text-warning:hover {
            color: #EFA81E !important;
            text-decoration: underline !important;
        }

        .tree-node-wrapper {
            margin-bottom: 2px;
        }

        .tree-node-item {
            padding: 6px 0 !important;
        }

        .bg-light-soft {
            background-color: #f8fafc;
        }

        .tree-children {
            margin-left: 28px !important;
            padding-left: 15px !important;
        }

        .node-connector-horizontal {
            width: 15px !important;
            margin-right: 8px !important;
        }
    </style>
@endpush