@extends('User.layout')

@section('content')

<style>
.binary-page {
    --tree-gold: #c99a3b;
    --tree-gold-light: #e4be63;
    --tree-bg: #100d08;
    --tree-card: #17130d;
    --tree-border: rgba(201,154,59,.28);
    --tree-text: #f5e8c9;
    --tree-muted: #b9a77e;

    color: var(--tree-text);
}

.binary-page .tree-panel {
    background: var(--tree-bg);
    border: 1px solid var(--tree-border);
    border-radius: 16px;
    padding: 24px 16px;
    box-shadow: 0 10px 35px rgba(0,0,0,.22);
}

.binary-page .tree-container {
    position: relative;
    width: 100%;
}

.binary-page .tree-scroll {
    width: 100%;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--tree-gold) var(--tree-bg);
    scroll-behavior: smooth;
    padding: 35px 50px 45px;
}

.binary-page .tree-scroll::-webkit-scrollbar {
    height: 6px;
}

.binary-page .tree-scroll::-webkit-scrollbar-track {
    background: var(--tree-bg);
}

.binary-page .tree-scroll::-webkit-scrollbar-thumb {
    background: var(--tree-gold);
    border-radius: 10px;
}

.binary-page .tree-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 38px;
    height: 38px;
    border: 1px solid var(--tree-gold);
    border-radius: 50%;
    background: #17130d;
    color: var(--tree-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: .25s ease;
    box-shadow: 0 0 15px rgba(201,154,59,.15);
    cursor: pointer;
}

.binary-page .tree-nav:hover {
    background: var(--tree-gold);
    color: #100d08;
    box-shadow: 0 0 20px rgba(201,154,59,.35);
}

.binary-page .tree-nav-left {
    left: 3px;
}

.binary-page .tree-nav-right {
    right: 3px;
}

/* Tree layout */
.binary-page .org-tree {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: max-content;
    min-width: 100%;
    padding: 10px 30px 40px;
}

/* Connector SVG */
.binary-page .tree-connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.binary-page .tree-connectors path {
    fill: none;
    stroke: var(--tree-gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 2px rgba(201,154,59,.18));
}

/* Node */
.binary-page .tree-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 180px;
    text-align: center;
    z-index: 1;
}

.binary-page .tree-children {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    padding-top: 48px;
    width: max-content;
}

/* Profile */
.binary-page .profile-frame {
    width: 88px;
    height: 88px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--tree-gold);
    border-radius: 20px;
    background: linear-gradient(145deg, #211a0d, #100d08);
    box-shadow:
        0 0 15px rgba(201,154,59,.13),
        inset 0 0 12px rgba(201,154,59,.05);
    transition: .3s ease;
}

.binary-page .tree-node:hover .profile-frame {
    border-color: var(--tree-gold-light);
    box-shadow:
        0 0 24px rgba(201,154,59,.4),
        inset 0 0 12px rgba(201,154,59,.1);
    transform: translateY(-3px);
}

.binary-page .profile-img {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--tree-gold);
    background: #fff;
}

/* Member label */
.binary-page .member-info {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    min-width: 126px;
    margin-top: 12px;
    padding: 9px 14px;
    border: 1px solid var(--tree-gold);
    border-radius: 10px;
    background: linear-gradient(135deg, #30220c, #17130d);
    color: var(--tree-gold-light);
    box-shadow: 0 3px 12px rgba(0,0,0,.25);
    white-space: nowrap;
    transition: .25s ease;
}

.binary-page .tree-node:hover .member-info {
    background: linear-gradient(135deg, var(--tree-gold), #a97823);
    color: #100d08;
    box-shadow: 0 0 18px rgba(201,154,59,.2);
}

.binary-page .member-id {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.binary-page .member-name {
    font-size: 12px;
    line-height: 1.5;
}

/* Search */
.binary-page .tree-search {
    background: var(--tree-card);
    border: 1px solid var(--tree-border);
    color: var(--tree-text);
}

.binary-page .tree-search:focus {
    background: var(--tree-card);
    border-color: var(--tree-gold);
    color: var(--tree-text);
    box-shadow: 0 0 0 .2rem rgba(201,154,59,.12);
}

.binary-page .tree-search::placeholder {
    color: var(--tree-muted);
}

.binary-page .tree-btn {
    background: var(--tree-gold);
    color: #100d08;
    border: 1px solid var(--tree-gold);
    font-weight: 600;
}

.binary-page .tree-btn:hover {
    background: var(--tree-gold-light);
    border-color: var(--tree-gold-light);
}

.binary-page .tree-btn-outline {
    background: transparent;
    color: var(--tree-gold-light);
    border: 1px solid var(--tree-gold);
}

.binary-page .tree-btn-outline:hover {
    background: rgba(201,154,59,.12);
}

/* Shared member card */
.binary-page .member-card {
    position: fixed;
    display: none;
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 20px;
    z-index: 9999;
    background: linear-gradient(145deg, #211a0d, #100d08);
    border: 1px solid var(--tree-gold);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.65), 0 0 18px rgba(201,154,59,.12);
    color: var(--tree-text);
}

.binary-page .member-card.show {
    display: block;
    animation: cardFade .2s ease;
}

@keyframes cardFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.binary-page .member-card-img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 50%;
    padding: 5px;
    border: 3px solid var(--tree-gold);
    background: #fff;
    box-shadow: 0 0 20px rgba(201,154,59,.2);
}

.binary-page .member-card table {
    width: 100%;
    table-layout: fixed;
    margin: 0;
}

.binary-page .member-card table td {
    padding: 9px 3px;
    border: 0;
    color: var(--tree-text);
    font-size: 13px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.binary-page .member-card table td:first-child {
    width: 40%;
    color: var(--tree-muted);
}

.binary-page .member-card table td:nth-child(2) {
    width: 8%;
    color: var(--tree-gold);
    text-align: center;
}

.binary-page .member-card table td:last-child {
    width: 52%;
    font-weight: 600;
    color: var(--tree-gold-light);
}

/* Search result styling */
.binary-page .tree-node.search-dim {
    opacity: .25;
}

.binary-page .tree-node.search-match {
    opacity: 1;
}

/* Mobile */
@media (max-width: 767px) {
    .binary-page .tree-panel {
        padding: 16px 8px;
    }

    .binary-page .tree-scroll {
        padding: 30px 42px 35px;
    }

    .binary-page .org-tree {
        padding: 10px 20px 30px;
    }

    .binary-page .tree-node {
        width: 150px;
    }

    .binary-page .tree-children {
        gap: 16px;
        padding-top: 42px;
    }

    .binary-page .profile-frame {
        width: 76px;
        height: 76px;
        border-radius: 17px;
    }

    .binary-page .profile-img {
        width: 64px;
        height: 64px;
    }

    .binary-page .member-info {
        min-width: 120px;
        margin-top: 10px;
        padding: 7px 9px;
    }

    .binary-page .member-id {
        font-size: 11px;
    }

    .binary-page .member-name {
        font-size: 10px;
    }

    .binary-page .member-card {
        width: 320px;
        padding: 16px;
    }

    .binary-page .member-card table td {
        font-size: 12px;
        padding: 8px 3px;
    }
}
</style>

<div class="binary-page">
    <div class="container-fluid py-3">

        <h5 class="mb-3">Genealogy Tree View</h5>

        <div class="tree-panel">

            <div class="row g-2 justify-content-end mb-4">
                <div class="col-12 col-md-4 col-lg-3">
                    <input type="text"
                           id="treeSearch"
                           class="form-control tree-search"
                           placeholder="Search by ID or name">
                </div>

                <div class="col-6 col-md-auto">
                    <button type="button"
                            id="searchBtn"
                            class="btn tree-btn w-100">
                        Search
                    </button>
                </div>

                <div class="col-6 col-md-auto">
                    <button type="button"
                            id="resetBtn"
                            class="btn tree-btn-outline w-100">
                        Reset
                    </button>
                </div>
            </div>

            <div class="tree-container">

                <button type="button"
                        class="tree-nav tree-nav-left"
                        id="scrollLeft"
                        aria-label="Scroll left">
                    <i class="ti ti-chevron-left"></i>
                </button>

                <button type="button"
                        class="tree-nav tree-nav-right"
                        id="scrollRight"
                        aria-label="Scroll right">
                    <i class="ti ti-chevron-right"></i>
                </button>

                <div class="tree-scroll" id="treeScroll">
                    <div class="org-tree" id="orgTree">
                        <svg class="tree-connectors"
                             id="treeConnectors"
                             aria-hidden="true"></svg>

                        <div id="treeRoot"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Shared hover card -->
    <div id="hoverCard" class="member-card" aria-hidden="true">
        <div class="text-center mb-3">
            <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png"
                 class="member-card-img"
                 alt="Member profile">
        </div>

        <table class="table table-borderless mb-0">
            <tbody>
                <tr>
                    <td>Profile ID</td>
                    <td>:</td>
                    <td id="card-id"></td>
                </tr>
                <tr>
                    <td>Username</td>
                    <td>:</td>
                    <td id="card-name"></td>
                </tr>
                <tr>
                    <td>Sponsor ID</td>
                    <td>:</td>
                    <td id="card-sponsor"></td>
                </tr>
                <tr>
                    <td>Direct Referral</td>
                    <td>:</td>
                    <td id="card-referral"></td>
                </tr>
                <tr>
                    <td>Downline User</td>
                    <td>:</td>
                    <td id="card-downline"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const tree = document.getElementById('treeScroll');
    const orgTree = document.getElementById('orgTree');
    const treeRoot = document.getElementById('treeRoot');
    const connectorSvg = document.getElementById('treeConnectors');
    const hoverCard = document.getElementById('hoverCard');

    const profileImage =
        'https://cdn-icons-png.flaticon.com/512/3135/3135715.png';

    /*
     * Sample binary tree data.
     * Each member can have a maximum of two children.
     * Replace this array with your Laravel data when integrating.
     */
    const members = [
        {
            id: '2026042801',
            name: 'Vortex',
            sponsor: '2026042800',
            referral: 2,
            downline: 14,
            parent: null,
            children: ['2026042802', '2026042803']
        },
        {
            id: '2026042802',
            name: 'Navas Ashan',
            sponsor: '2026042801',
            referral: 2,
            downline: 2,
            parent: '2026042801',
            children: ['2026042804', '2026042805']
        },
        {
            id: '2026042803',
            name: 'Muhammed Miraz',
            sponsor: '2026042801',
            referral: 2,
            downline: 4,
            parent: '2026042801',
            children: ['2026042806', '2026042807']
        },
        {
            id: '2026042804',
            name: 'Member 4',
            sponsor: '2026042802',
            referral: 2,
            downline: 2,
            parent: '2026042802',
            children: ['2026042808', '2026042809']
        },
        {
            id: '2026042805',
            name: 'Member 5',
            sponsor: '2026042802',
            referral: 2,
            downline: 2,
            parent: '2026042802',
            children: ['2026042810', '2026042811']
        },
        {
            id: '2026042806',
            name: 'Member 6',
            sponsor: '2026042803',
            referral: 2,
            downline: 2,
            parent: '2026042803',
            children: ['2026042812', '2026042813']
        },
        {
            id: '2026042807',
            name: 'Member 7',
            sponsor: '2026042803',
            referral: 2,
            downline: 2,
            parent: '2026042803',
            children: ['2026042814', '2026042815']
        },
        {
            id: '2026042808',
            name: 'Member 8',
            sponsor: '2026042804',
            referral: 0,
            downline: 0,
            parent: '2026042804',
            children: []
        },
        {
            id: '2026042809',
            name: 'Member 9',
            sponsor: '2026042804',
            referral: 0,
            downline: 0,
            parent: '2026042804',
            children: []
        },
        {
            id: '2026042810',
            name: 'Member 10',
            sponsor: '2026042805',
            referral: 0,
            downline: 0,
            parent: '2026042805',
            children: []
        },
        {
            id: '2026042811',
            name: 'Member 11',
            sponsor: '2026042805',
            referral: 0,
            downline: 0,
            parent: '2026042805',
            children: []
        },
        {
            id: '2026042812',
            name: 'Member 12',
            sponsor: '2026042806',
            referral: 0,
            downline: 0,
            parent: '2026042806',
            children: []
        },
        {
            id: '2026042813',
            name: 'Member 13',
            sponsor: '2026042806',
            referral: 0,
            downline: 0,
            parent: '2026042806',
            children: []
        },
        {
            id: '2026042814',
            name: 'Member 14',
            sponsor: '2026042807',
            referral: 0,
            downline: 0,
            parent: '2026042807',
            children: []
        },
        {
            id: '2026042815',
            name: 'Member 15',
            sponsor: '2026042807',
            referral: 0,
            downline: 0,
            parent: '2026042807',
            children: []
        }
    ];

    const memberMap = new Map(
        members.map(member => [member.id, member])
    );

    const cardFields = {
        id: document.getElementById('card-id'),
        name: document.getElementById('card-name'),
        sponsor: document.getElementById('card-sponsor'),
        referral: document.getElementById('card-referral'),
        downline: document.getElementById('card-downline')
    };

    let activeNode = null;
    let hideTimer = null;

    function createNode(member) {
        const node = document.createElement('div');
        node.className = 'tree-node';
        node.dataset.id = member.id;
        node.dataset.name = member.name;
        node.dataset.sponsor = member.sponsor || '-';
        node.dataset.referral = member.referral ?? 0;
        node.dataset.downline = member.downline ?? 0;

        const profileFrame = document.createElement('div');
        profileFrame.className = 'profile-frame';

        const image = document.createElement('img');
        image.src = profileImage;
        image.className = 'profile-img';
        image.alt = 'Profile';

        profileFrame.appendChild(image);

        const info = document.createElement('div');
        info.className = 'member-info';

        const id = document.createElement('div');
        id.className = 'member-id';
        id.textContent = member.id;

        const name = document.createElement('div');
        name.className = 'member-name';
        name.textContent = member.name;

        info.append(id, name);
        node.append(profileFrame, info);

        const children = (member.children || [])
            .map(id => memberMap.get(id))
            .filter(Boolean);

        if (children.length) {
            node.classList.add('has-children');

            const childContainer = document.createElement('div');
            childContainer.className = 'tree-children';

            children.slice(0, 2).forEach(child => {
                childContainer.appendChild(createNode(child));
            });

            node.appendChild(childContainer);
        }

        return node;
    }

    const rootMember = members.find(member => !member.parent);

    if (rootMember) {
        treeRoot.appendChild(createNode(rootMember));
    }

    function drawConnectors() {
        connectorSvg.innerHTML = '';

        const treeRect = orgTree.getBoundingClientRect();
        const width = Math.max(orgTree.scrollWidth, treeRect.width);
        const height = Math.max(orgTree.scrollHeight, treeRect.height);

        connectorSvg.setAttribute('width', width);
        connectorSvg.setAttribute('height', height);
        connectorSvg.setAttribute('viewBox', `0 0 ${width} ${height}`);

        const nodes = orgTree.querySelectorAll('.tree-node');

        nodes.forEach(parentNode => {
            const childrenContainer = parentNode.querySelector(
                ':scope > .tree-children'
            );

            if (!childrenContainer) return;

            const parentInfo = parentNode.querySelector(
                ':scope > .member-info'
            );

            if (!parentInfo) return;

            const parentRect = parentInfo.getBoundingClientRect();

            const startX =
                parentRect.left + parentRect.width / 2 - treeRect.left;

            const startY = parentRect.bottom - treeRect.top;

            const children = childrenContainer.querySelectorAll(
                ':scope > .tree-node'
            );

            children.forEach(childNode => {
                const childProfile = childNode.querySelector(
                    ':scope > .profile-frame'
                );

                if (!childProfile) return;

                const childRect = childProfile.getBoundingClientRect();

                const endX =
                    childRect.left + childRect.width / 2 - treeRect.left;

                const endY = childRect.top - treeRect.top;

                const middleY = startY + (endY - startY) / 2;

                const path = document.createElementNS(
                    'http://www.w3.org/2000/svg',
                    'path'
                );

                path.setAttribute(
                    'd',
                    `M ${startX} ${startY}
                     V ${middleY}
                     H ${endX}
                     V ${endY}`
                );

                connectorSvg.appendChild(path);
            });
        });
    }

    function hideCard() {
        hoverCard.classList.remove('show');
        hoverCard.setAttribute('aria-hidden', 'true');
        activeNode = null;
    }

    function positionCard(node) {
        if (!node || !hoverCard.classList.contains('show')) return;

        const rect = node.getBoundingClientRect();
        const cardRect = hoverCard.getBoundingClientRect();
        const margin = 12;

        let left = rect.left + rect.width / 2 - cardRect.width / 2;
        let top = rect.bottom + 12;

        left = Math.max(
            margin,
            Math.min(left, window.innerWidth - cardRect.width - margin)
        );

        if (top + cardRect.height > window.innerHeight - margin) {
            top = rect.top - cardRect.height - 12;
        }

        top = Math.max(
            margin,
            Math.min(top, window.innerHeight - cardRect.height - margin)
        );

        hoverCard.style.left = left + 'px';
        hoverCard.style.top = top + 'px';
    }

    function showCard(node) {
        clearTimeout(hideTimer);
        activeNode = node;

        cardFields.id.textContent = node.dataset.id || '-';
        cardFields.name.textContent = node.dataset.name || '-';
        cardFields.sponsor.textContent = node.dataset.sponsor || '-';
        cardFields.referral.textContent = node.dataset.referral || '0';
        cardFields.downline.textContent = node.dataset.downline || '0';

        hoverCard.classList.add('show');
        hoverCard.setAttribute('aria-hidden', 'false');

        requestAnimationFrame(() => {
            if (activeNode === node) {
                positionCard(node);
            }
        });
    }

    function scheduleHide() {
        clearTimeout(hideTimer);
        hideTimer = setTimeout(hideCard, 150);
    }

    function bindNodeEvents() {
        const nodes = orgTree.querySelectorAll('.tree-node');

        nodes.forEach(node => {
            node.addEventListener('mouseenter', () => showCard(node));
            node.addEventListener('mouseleave', scheduleHide);
            node.addEventListener('focus', () => showCard(node));
            node.addEventListener('blur', scheduleHide);

            node.addEventListener('click', event => {
                event.stopPropagation();

                if (
                    activeNode === node &&
                    hoverCard.classList.contains('show')
                ) {
                    hideCard();
                } else {
                    showCard(node);
                }
            });
        });
    }

    hoverCard.addEventListener('mouseenter', () => {
        clearTimeout(hideTimer);
    });

    hoverCard.addEventListener('mouseleave', scheduleHide);

    document.addEventListener('click', event => {
        if (
            !event.target.closest('.tree-node') &&
            !event.target.closest('#hoverCard')
        ) {
            hideCard();
        }
    });

    window.addEventListener('scroll', () => {
        if (activeNode) positionCard(activeNode);
    }, true);

    window.addEventListener('resize', () => {
        drawConnectors();

        if (activeNode) {
            positionCard(activeNode);
        }
    });

    tree.addEventListener('scroll', () => {
        if (activeNode) positionCard(activeNode);
    });

    document.getElementById('scrollLeft').addEventListener('click', () => {
        tree.scrollBy({
            left: -350,
            behavior: 'smooth'
        });
    });

    document.getElementById('scrollRight').addEventListener('click', () => {
        tree.scrollBy({
            left: 350,
            behavior: 'smooth'
        });
    });

    const searchInput = document.getElementById('treeSearch');

    function searchTree() {
        const query = searchInput.value.trim().toLowerCase();

        orgTree.querySelectorAll('.tree-node').forEach(node => {
            const id = (node.dataset.id || '').toLowerCase();
            const name = (node.dataset.name || '').toLowerCase();
            const matches = !query || id.includes(query) || name.includes(query);

            node.classList.toggle('search-dim', !matches);
            node.classList.toggle('search-match', matches);
        });
    }

    document.getElementById('searchBtn').addEventListener('click', searchTree);

    searchInput.addEventListener('keydown', event => {
        if (event.key === 'Enter') {
            searchTree();
        }
    });

    document.getElementById('resetBtn').addEventListener('click', () => {
        searchInput.value = '';

        orgTree.querySelectorAll('.tree-node').forEach(node => {
            node.classList.remove('search-dim', 'search-match');
        });

        hideCard();
    });

    bindNodeEvents();

    requestAnimationFrame(() => {
        drawConnectors();
    });
});
</script>

@endsection