<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Create, explore, and share your interactive tree. Collaborate with others and discover your connections.">
    <link rel="icon" type="image/x-icon" href="favicon.png">
    <title>Interactive Tree</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-3LVHS1QPBE"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-3LVHS1QPBE');
    </script>
    <style>
      /* Basic Body and Layout Styles */
      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        display: flex;
        flex-direction: column;
        height: 100vh;
        background-color: #f4f7f6;
      }

      /* Header Styles */
      .main-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* Align items to the top */
        padding: 8px 15px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        min-height: 40px;
        box-sizing: border-box;
      }
      
      .header-left-section {
          flex-grow: 1;
      }
      
      .header-title-container {
        display: flex;
        align-items: center;
        gap: 8px; /* Added gap for spacing */
      }

      .header-title {
        font-size: 1.2rem;
        font-weight: bold;
        color: #333;
        text-decoration: none;
      }
      
      .header-title:hover {
        text-decoration: underline;
      }
      
      /* Container for dynamic tree info, hidden by default */
      #tree-info-container {
        display: none; /* Hidden by default, shown by JS */
        align-items: center;
        gap: 8px;
      }
      
      #header-tree-description {
          display: none; /* Hidden by default */
          font-size: 0.9rem;
          color: #555;
          margin: 4px 0 0 0;
          font-style: italic;
      }

      .current-tree-name {
        font-size: 1.2rem;
        color: #6c757d;
        font-style: italic;
      }
      
      .person-count-header {
        font-size: 1rem;
        color: #888;
        font-weight: normal;
      }

      /* --- LIKE BUTTON STYLES --- */
      .like-container {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-left: 10px;
      }
      .like-button {
        font-size: 1.5rem;
        cursor: pointer;
        color: #ccc; /* Default empty heart color */
        transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
      }
      .like-button:hover {
        transform: scale(1.1);
      }
      .like-button.liked {
        color: #e74c3c; /* Red color for a liked heart */
      }
      /* Add a style for the disabled like icon for logged-out users */
      .like-button-disabled {
        font-size: 1.5rem;
        color: #ccc;
        cursor: not-allowed;
      }
      .like-count {
        font-size: 1rem;
        font-weight: bold;
        color: #555;
      }
      /* --- END LIKE BUTTON STYLES --- */
      
      .auth-section {
        display: flex;
        align-items: center;
        margin-top: 2px; /* Small top margin to align with title */
      }

      .auth-section a, .auth-section span, .auth-section button {
        text-decoration: none;
        margin-left: 15px;
      }

      .auth-button {
        padding: 8px 16px;
        font-size: 0.9rem;
        color: #fff;
        background-color: #007bff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
        white-space: nowrap;
      }
      
      .my-trees-button {
        background-color: #6c757d;
      }
      
      .logout-button {
        background-color: #dc3545;
      }

      .auth-button:hover {
        background-color: #0056b3;
      }
      
      .my-trees-button:hover {
        background-color: #5a6268;
      }
      
      .logout-button:hover {
        background-color: #c82333;
      }
      
      .settings-button {
          background-color: #17a2b8;
      }
      .settings-button:hover {
          background-color: #138496;
      }

      /* Main content wrapper for flex layout */
      .main-content-wrapper {
          display: flex;
          flex-grow: 1;
          overflow: hidden; /* Prevent wrapper from overflowing */
      }

      /* Tree Container Styles */
      #tree-container {
        flex-grow: 1;
        overflow: hidden;
        border: 1px solid #ddd;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .placeholder {
        text-align: center;
        color: #6c757d;
      }
      
      .placeholder a {
        color: #007bff;
        font-weight: bold;
      }
      
      #tree-container svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      #tree-container > canvas {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
      }

      /* --- Top Trees Side Panel --- */
      #top-trees-panel {
          width: 280px;
          min-width: 280px; /* Prevent shrinking */
          background-color: #f8f9fa;
          border-left: 1px solid #dee2e6;
          padding: 15px;
          box-sizing: border-box;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
      }

      #top-trees-panel h3 {
          margin-top: 0;
          margin-bottom: 15px;
          color: #333;
          border-bottom: 2px solid #007bff;
          padding-bottom: 10px;
      }

      #top-trees-panel ol {
          list-style-type: decimal;
          margin: 0;
          padding-left: 25px;
      }

      #top-trees-panel li {
          margin-bottom: 12px;
          font-size: 1rem;
      }

      #top-trees-panel a {
          text-decoration: none;
          color: #0056b3;
          font-weight: bold;
      }

      #top-trees-panel a:hover {
          text-decoration: underline;
      }

      #top-trees-panel span {
          color: #e74c3c; /* Heart color */
          font-size: 0.9rem;
          margin-left: 5px;
      }

      .node rect { cursor: pointer; stroke-width: 2px; rx: 5; transition: fill 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease; }
      .node.male rect { fill: #a6d8ff; stroke: #4682b4; }
      .node.female rect { fill: #ffd1dc; stroke: #d85a7f; }
      .node text.name { font: 0.5em sans-serif; text-anchor: middle; dominant-baseline: middle; font-weight: bold; }
      .node text.dates { font: 10px sans-serif; text-anchor: middle; dominant-baseline: middle; fill: #555; }
      .node text.date-label { font: 8px sans-serif; text-anchor: middle; dominant-baseline: middle; fill: #555; }
      .link { stroke: #ccc; stroke-width: 2px; fill: none; }
      .parent-link { fill: none; stroke-width: 1.5; }
      
      .family-link-btn { margin: 3px; padding: 4px 8px; border-radius: 4px; border: 1px solid #888; background-color: #f4f4f4; cursor: pointer; font-size: 13px; transition: background-color 0.2s; }
      .family-link-btn:hover { background-color: #e1e1e1; }

      /* --- Responsive UI Controls (Search, Reset) --- */
      .search-container {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 250px;
        z-index: 1000;
      }
      .search-input {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 14px;
      }
      .search-results { background-color: white; border: 1px solid #ccc; border-top: none; border-radius: 0 0 5px 5px; }
      .search-result-item { padding: 8px; cursor: pointer; border-bottom: 1px solid #eee; }
      .search-result-item:hover, .search-result-item:focus { background-color: #f5f5f5; outline: none; }
      .search-result-item:last-child { border-bottom: none; }
      
      .ui-controls-container {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1000;
      }
      .reset-button rect { fill: #f0f0f0 !important; stroke: #333 !important; stroke-width: 1px !important; }
      .reset-button rect:hover { fill: #e0e0e0 !important; }
      .reset-button text { fill: #333 !important; font-family: Arial, sans-serif !important; font-weight: bold !important; pointer-events: none !important; }
      .reset-button { cursor: pointer !important; pointer-events: all !important; }

      /* --- Responsive Person Info Panel --- */
      #lineage-panel {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 450px;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid #ccc;
        padding: 15px;
        border-radius: 8px;
        text-align: center;
        z-index: 1001;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        box-sizing: border-box;
      }
      #lineage-panel h3 { margin-top: 0; margin-bottom: 10px; }
      #lineage-panel .family-links { margin-bottom: 15px; }
      #lineage-panel .panel-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-top: 15px;
      }
      #lineage-panel .panel-actions button, #lineage-panel .panel-actions a {
        padding: 6px 12px;
        border-radius: 4px;
        border: 1px solid #555;
        background: #f0f0f0;
        cursor: pointer;
        text-decoration: none;
        color: #333;
        font-size: 14px;
      }

      /* --- UPDATED Footer Styles --- */
      .main-footer {
        padding: 10px 15px;
        text-align: center;
        border-top: 1px solid #dee2e6;
        background-color: #f8f9fa;
        min-height: 21px; /* Set a minimum height */
        box-sizing: content-box; /* Ensure padding doesn't add to the height */
      }

      /* --- Slide-in Edit Panel Styles --- */
      .slide-panel {
        position: fixed;
        top: 0;
        width: 320px;
        height: 100%;
        background-color: white;
        box-shadow: -2px 0 8px rgba(0,0,0,0.15);
        transition: transform 0.3s ease-in-out;
        z-index: 1002; /* Higher than lineage panel */
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
      }
      #edit-panel {
          right: 0;
          transform: translateX(100%);
      }
      #edit-panel.active {
          transform: translateX(0);
      }
      #settings-panel {
          left: 0;
          transform: translateX(-100%);
      }
      #settings-panel.active {
          transform: translateX(0);
      }
      
      .slide-panel h3 { margin-top: 0; }
      .slide-panel h4 { margin-top: 15px; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px;}
      .slide-panel .form-group { margin-bottom: 15px; }
      .slide-panel label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }
      .slide-panel input[type="text"], .slide-panel input[type="number"], .slide-panel input[type="date"], .slide-panel select { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; }
      .slide-panel .panel-buttons { margin-top: 20px; display: flex; justify-content: space-between; }
      .slide-panel button { padding: 10px 15px; border-radius: 5px; border: none; cursor: pointer; font-weight: bold; }
      .slide-panel .save-btn { background-color: #28a745; color: white; width: 48%; }
      .slide-panel .delete-btn { background-color: #dc3545; color: white; width: 48%; }
      .slide-panel .close-panel-btn { background-color: #6c757d; color: white; }
      .slide-panel .gender-group label { display: inline-block; margin-right: 15px; }
      .accordion-header { background-color: #f1f1f1; color: #444; cursor: pointer; padding: 12px; width: 100%; text-align: left; border: none; outline: none; transition: background-color 0.3s; font-size: 1rem; font-weight: bold; margin-top: 10px; border-radius: 4px; }
      .accordion-header:hover, .accordion-header.active { background-color: #ddd; }
      .accordion-header::after { content: '\25B6'; font-size: 12px; float: right; transition: transform 0.3s; }
      .accordion-header.active::after { transform: rotate(90deg); }
      .accordion-content { padding: 0 15px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-radius: 0 0 4px 4px; }
      .accordion-content.show { padding: 15px; }

      /* Responsive adjustments for small screens */
      @media (max-width: 992px) {
          .main-content-wrapper {
              flex-direction: column;
          }
          #top-trees-panel {
              width: 100%;
              height: 250px; /* Give it a fixed height on mobile */
              border-left: none;
              border-top: 1px solid #dee2e6;
          }
      }
      @media (max-width: 768px) {
        .auth-section .welcome-message { display: none; } /* Hide welcome message on smaller screens */
        .search-container { width: 150px; }
      }

      @media (max-width: 600px) {
        .main-header { flex-direction: column; gap: 10px; padding: 10px; align-items: stretch; }
        .auth-section { justify-content: space-between;}
        .auth-section a, .auth-section span, .auth-section button { margin-left: 5px; }
        .search-container { width: calc(100% - 30px); }
        #lineage-panel { top: 10px; left: 5%; right: 5%; width: 90%; transform: none; }
      }
      .header-logo {
        height: 1.2rem; /* Matches the font-size of the header-title */
      }
    </style>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4373873575175996"
     crossorigin="anonymous"></script>
</head>
<body>

    <header class="main-header">
      <div class="header-left-section">
          <div class="header-title-container">
            <img src="favicon.png" alt="Site Logo" class="header-logo"> 
            <a href="index" class="header-title">Nachalo</a>
            
            <div id="tree-info-container">
                <span class="current-tree-name"></span>
                <span class="person-count-header"></span>
                
                <div class="like-container">
                                            <span class="like-button-disabled" title="You must be logged in to vote">&#x2764;</span>
                                        <span class="like-count"></span>
                </div>
            </div>
          </div>
          <p id="header-tree-description"></p>
      </div>

      <div class="auth-section">
                            <a href="auth" class="auth-button">Login / Signup</a>
              </div>
    </header>

<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // --- Asynchronously load header info ---
    const treeInfoContainer = document.getElementById('tree-info-container');
    const treeId = null;

    if (treeId && treeInfoContainer) {
        // Get the tree type from URL parameters
        const urlParams = new URLSearchParams(window.location.search);
        const treeType = urlParams.get('type') || 'family';
        
        // ✅ **DEBUG**: Log the parameters we are about to use
        console.log(`[HEADER DEBUG] Preparing to fetch header info. Tree ID: ${treeId}, Tree Type: ${treeType}`);

        // Construct the URL for the API call
        const fetchUrl = `api.php?action=get_tree_header_info&tree_id=${treeId}&type=${treeType}`;

        // ✅ **DEBUG**: Log the exact URL being fetched
        console.log(`[HEADER DEBUG] Fetching URL: ${fetchUrl}`);
        
        fetch(fetchUrl)
            .then(response => {
                // ✅ **DEBUG**: Log the raw response from the server
                console.log('[HEADER DEBUG] Received response from server:', response);
                if (!response.ok) {
                    console.error(`[HEADER DEBUG] Network response was not ok. Status: ${response.status} ${response.statusText}`);
                }
                return response.json();
            })
            .then(data => {
                // ✅ **DEBUG**: Log the parsed JSON data from the response
                console.log('[HEADER DEBUG] Parsed JSON data:', data);

                if (data && data.success) {
                    console.log('[HEADER DEBUG] Data success is true. Populating elements.');
                    // Populate the elements
                    treeInfoContainer.querySelector('.current-tree-name').textContent = `: ${data.treeName}`;
                    treeInfoContainer.querySelector('.person-count-header').textContent = `(Total: ${data.personCount})`;
                    treeInfoContainer.querySelector('.like-count').textContent = data.likeCount;
                    
                    const likeButton = treeInfoContainer.querySelector('.like-button');
                    if (likeButton) {
                        if (data.userHasLiked) {
                            likeButton.classList.add('liked');
                        } else {
                            likeButton.classList.remove('liked');
                        }
                    }

                    // Handle description
                    const descriptionElement = document.getElementById('header-tree-description');
                    if (data.treeDescription && descriptionElement) {
                        descriptionElement.textContent = data.treeDescription;
                        descriptionElement.style.display = 'block';
                    }

                    // Make the container visible with a flex display
                    treeInfoContainer.style.display = 'flex';
                } else {
                    // This is the line that was already logging your error
                    console.error('[HEADER DEBUG] Failed to load tree header info. Message from API:', data.message);
                }
            })
            .catch(error => {
                // ✅ **DEBUG**: Log any errors that occur during the fetch process (e.g., network error, invalid JSON)
                console.error('[HEADER DEBUG] An error occurred during the fetch operation:', error);
            });
    } else {
        // ✅ **DEBUG**: Log if the initial conditions are not met
        console.log('[HEADER DEBUG] Did not fetch header info because treeId or treeInfoContainer was not found.', `treeId: ${treeId}`);
    }
});
</script>


<style>
    /* Existing Styles for Side Panel */
    #top-trees-panel-wrapper { position: fixed; top: 100px; right: 0; width: 280px; z-index: 1000; transition: right 0.4s ease-in-out; }
    #top-trees-panel-wrapper.collapsed { right: -280px; }
    #top-trees-panel { width: 100%; height: auto; padding: 15px; background: #f9f9f9; border: 1px solid #ddd; border-right: none; border-radius: 8px 0 0 8px; box-shadow: -2px 0 5px rgba(0,0,0,0.1); max-height: 70vh; overflow-y: auto; }
    #toggle-top-trees-btn { position: absolute; left: -30px; top: 0; width: 30px; height: 70px; background-color: #e0e0e0; border: 1px solid #ccc; border-right: none; border-radius: 8px 0 0 8px; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 16px; padding: 0; box-shadow: -1px 1px 3px rgba(0,0,0,0.1); }

    /* --- STYLES FOR BOTTOM PROMO PANEL --- */
    #signup-promo-panel {
        position: sticky;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #343a40;
        color: white;
        padding: 15px 30px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
        z-index: 1001;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.4s ease-in-out;
        box-sizing: border-box;
    }
    #signup-promo-panel.hidden {
        transform: translateY(100%);
    }
    #signup-promo-panel p {
        margin: 0;
        font-size: 1.1rem;
    }
    #signup-promo-panel .promo-button {
        margin-left: 20px;
        padding: 8px 20px;
        background-color: #007bff;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        transition: background-color 0.2s;
    }
     #signup-promo-panel .promo-button:hover {
        background-color: #0056b3;
    }
</style>

<div class="main-content-wrapper">
    <div id="tree-container">
                    <canvas id="tree-canvas"></canvas>
            </div>

            <div id="top-trees-panel-wrapper">
            <button id="toggle-top-trees-btn">&#9654;</button>
            <div id="top-trees-panel">
                <h3>Top Public Trees</h3>
                <ol>
                                            <li>
                            <a href="index?tree_id=1">
                                Rulers Family Trees                            </a>
                            <span>(2 &#x2764;)</span>
                        </li>
                                            <li>
                            <a href="index?tree_id=11">
                                Middle Earth Tree - By Tolkien                            </a>
                            <span>(1 &#x2764;)</span>
                        </li>
                                    </ol>
            </div>
        </div>
    </div>

<div id="edit-panel" class="slide-panel"></div>

<div id="settings-panel" class="slide-panel">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
        <h3>Settings</h3>
        <button class="close-panel-btn" onclick="document.getElementById('settings-panel').classList.remove('active')">&times;</button>
    </div>
    <div class="form-group">
        <label for="show-timeline-checkbox">
            <input type="checkbox" id="show-timeline-checkbox"> Show Timeline
        </label>
    </div>
    <div class="form-group">
        <label for="show-family-names-checkbox">
            <input type="checkbox" id="show-family-names-checkbox"> Show Family Names
        </label>
    </div>
</div>


<div id="signup-promo-panel">
    <p>Create your own tree fast and free!</p>
    <a href="auth" class="promo-button">Sign Up Now</a>
</div>


    <script>
        // Pass PHP variables to JavaScript in a secure way.
        window.userCanEdit = false;
        window.urlTreeId = 1;
        window.urlShareToken = null;
        window.isUserLoggedIn = false;
        // FIX: Pass the tree type to the JavaScript
        window.urlTreeType = "family";
    </script>

    <script>
    // --- MODIFIED SCRIPT TO HANDLE BOTH PANELS ---
    document.addEventListener('DOMContentLoaded', function() {
        const toggleButton = document.getElementById('toggle-top-trees-btn');
        const topTreesPanel = document.getElementById('top-trees-panel-wrapper');
        const promoPanel = document.getElementById('signup-promo-panel');

        function updatePromoPanelVisibility() {
            if (promoPanel && topTreesPanel) {
                promoPanel.classList.remove('hidden');
            }
        }

        if (toggleButton && topTreesPanel) {
            if (window.innerWidth < 900) {
                 topTreesPanel.classList.add('collapsed');
                 toggleButton.innerHTML = '&#9664;';
            }

            toggleButton.addEventListener('click', () => {
                topTreesPanel.classList.toggle('collapsed');
                toggleButton.innerHTML = topTreesPanel.classList.contains('collapsed') ? '&#9664;' : '&#9654;';
                updatePromoPanelVisibility();
            });

            updatePromoPanelVisibility();
        }
    });
    </script>

<footer class="main-footer">
  <a href="https://nachalo.net/contact" style="text-decoration: none; color: inherit;">Contact</a>
</footer>

</body>
</html>
        <script src="family-tree.min.js?v=1758716612"></script>
