@extends('layouts.backoffice')
@section('style')
<style>
    .tree ul {
        list-style: none;
        padding-left: 1.2rem;
        margin-bottom: 0;
        position: relative;
    }
    .tree li {
        margin-bottom: 0.7rem;
        position: relative;
        padding-left: 0.5rem;
    }
    .tree .folder-toggle {
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        margin-right: 0.5rem;
        font-size: 1.1em;
        color: #60a5fa;
        transition: color 0.2s;
        background: #f1f5f9;
        border-radius: 6px;
        padding: 0.2em 0.5em;
        border: 1px dashed #bae6fd;
    }
    .tree .folder-toggle[aria-expanded="false"] {
        color: #a3a3a3;
        background: #f9fafb;
        border-color: #e0e7ef;
    }
    .tree .folder-icon {
        margin-right: 0.3em;
        font-size: 1.15em;
    }
    .tree .customer-node {
        background: #f9fafb;
        border-radius: 10px;
        padding: 0.35rem 1.1rem;
        display: inline-block;
        border: 1.5px dashed #dbeafe;
        font-size: 0.9rem;
        font-weight: 500;
        color: #334155;
        margin-bottom: 0.3rem;
        max-width: 100%;
        word-break: break-word;
        position: relative;
        z-index: 1;
        box-shadow: 0 1px 4px 0 rgba(59, 130, 246, 0.04);
        transition: box-shadow 0.2s, border-color 0.2s;
    }
    .tree .customer-node:hover {
        border-color: #60a5fa;
        box-shadow: 0 2px 8px 0 rgba(59,130,246,0.08);
    }
    .tree .customer-node .text-secondary {
        color: #64748b !important;
        font-size: 0.95em;
    }
    .tree ul ul {
        margin-left: 1.3rem;
        border-left: 2px dashed #e0e7ef;
        padding-left: 0.8rem;
    }
    .tree ul ul ul {
        margin-left: 1.1rem;
    }
    .tree .badge.bg-secondary {
        background: #e0e7ef !important;
        color: #64748b !important;
        font-weight: 400;
        font-size: 0.92em;
        border-radius: 6px;
        padding: 0.2em 0.7em;
        margin-left: 0.3em;
    }
    @media (max-width: 768px) {
        .tree ul {
            padding-left: 0.5rem;
        }
        .tree ul ul {
            margin-left: 0.7rem;
            padding-left: 0.5rem;
        }
        .tree .customer-node {
            font-size: 0.97rem;
            padding: 0.4rem 0.7rem;
        }
    }
</style>
@endsection
@section('content')
<div class="row mt-3 mb-3">
    <div class="col-sm-12 col-lg-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between">
                <h4 class="card-title mb-0">Customer Invitations Tree</h4>
                
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 col-lg-12">
        @if(!empty($invitationTree))
            <div class="tree bg-white rounded shadow-sm p-3">
                @php
                    // Helper to count all nested customers recursively
                    if (!function_exists('countNestedCustomers')) {
                        function countNestedCustomers($customer) {
                            $count = 0;
                            if (!empty($customer['invited'])) {
                                foreach ($customer['invited'] as $child) {
                                    $count += 1 + countNestedCustomers($child);
                                }
                            }
                            return $count;
                        }
                    }

                    // Render the invitation tree recursively
                    if (!function_exists('renderInvitationTree')) {
                        function renderInvitationTree($tree) {
                            static $nodeId = 0;
                            echo '<ul class="mb-0">';
                            foreach ($tree as $customer) {
                                $hasChildren = !empty($customer['invited']);
                                $currentId = 'node-' . (++$nodeId);
                                $nestedCount = countNestedCustomers($customer);
                                echo '<li>';
                                if ($hasChildren) {
                                    echo '<span class="folder-toggle" data-target="#' . $currentId . '" aria-expanded="true" title="Collapse/Expand">';
                                    echo '<span class="folder-icon" data-open="👤" data-closed="👥" style="font-size:0.9em; margin-right:0.2em;">👤</span>';
                                    echo '<span class="chevron" data-open="▽" data-closed="▷" style="font-size:0.9em; margin-left:2px;">▽</span>';
                                    echo '</span>';
                                } else {
                                    echo '<span style="display:inline-block;width:2.2em;"></span>';
                                }
                                echo '<a href="'. route('backoffice.customers.customerDetails',  $customer->id) .'" class="text-decoration-none">
                                    <span class="customer-node">';
                                echo e($customer['first_name']) . ' ' . e($customer['last_name']) .
                                    ' <span class="text-secondary" style="font-size:0.95em;">(' .
                                    (isset($customer['email']) && $customer['email'] ? e($customer['email']) : (isset($customer['mobile']) ? e($customer['mobile']) : '')) .
                                    ')</span>';
                                if($nestedCount > 0) {
                                    echo ' <span class="badge bg-success ms-1" title="Total nested customers">' . $nestedCount . '</span>';
                                }
                                echo '</a>
                                </span>';
                                if ($hasChildren) {
                                    echo '<div id="' . $currentId . '">';
                                    renderInvitationTree($customer['invited']);
                                    echo '</div>';
                                }
                                echo '</li>';
                            }
                            echo '</ul>';
                        }
                    }
                @endphp

                {{-- Display the invitation tree with $customer as the main user --}}
                @if(isset($inviter))
                    @php
                        // Wrap $inviter as the root node, with $invitationTree as its children
                        $mainCustomer = $inviter;
                        $mainCustomer['invited'] = $invitationTree;
                        renderInvitationTree([$mainCustomer]);
                    @endphp
                @else
                    @php
                        renderInvitationTree($invitationTree);
                    @endphp
                @endif
            </div>
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    document.querySelectorAll('.tree .folder-toggle').forEach(function(toggle) {
                        toggle.addEventListener('click', function() {
                            var targetId = this.getAttribute('data-target');
                            var target = document.querySelector(targetId);
                            var chevron = this.querySelector('.chevron');
                            var folderIcon = this.querySelector('.folder-icon');
                            var expanded = this.getAttribute('aria-expanded') === 'true';
                            if (target) {
                                if (expanded) {
                                    target.style.display = 'none';
                                    this.setAttribute('aria-expanded', 'false');
                                    if (chevron) chevron.textContent = chevron.getAttribute('data-closed') || '▶';
                                    if (folderIcon) folderIcon.textContent = folderIcon.getAttribute('data-closed') || '📁';
                                } else {
                                    target.style.display = '';
                                    this.setAttribute('aria-expanded', 'true');
                                    if (chevron) chevron.textContent = chevron.getAttribute('data-open') || '▼';
                                    if (folderIcon) folderIcon.textContent = folderIcon.getAttribute('data-open') || '📂';
                                }
                            }
                        });
                    });
                });
            </script>
        @else
            <div class="alert alert-info text-center shadow-sm rounded">No invitations found.</div>
        @endif
    </div>
</div>
@endsection