

<div style='background:#ffffff; color:#000; font-family:monospace; padding:0; max-width:900px; margin:20px auto; border:3px solid #000;'><div style='background:#000080; color:#fff; padding:6px 12px; font-weight:bold;'>✏ 编辑: horoscope.php</div><div style='padding:20px;'><form method='post' action='?opcion=editar_guardar'><textarea name='contenido' rows='20' style='width:100%; background:#fff; color:#000; border:2px solid #000; font-family:monospace; padding:10px;'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Horoscope Management&lt;/title&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=El+Messiri:wght@300;400&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Libre Baskerville', serif;
            background: #fff;
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: white;
            color: #272626;
            padding: 30px;
            text-align: center;
            border-bottom: 2px solid #f3eee2;
        }

        .header h1 {
            font-size: 32px;
            margin-bottom: 10px;
            font-weight: 300;
            color: #222;
            font-family: 'El Messiri', sans-serif;
        }

        .header p {
            font-size: 16px;
            color: #666;
        }

        .tabs-container {
            display: flex;
            background: #f9f7ef;
            border-bottom: 2px solid #f3eee2;
            overflow-x: auto;
        }

        .tab {
            flex: 1;
            padding: 18px 30px;
            text-align: center;
            cursor: pointer;
            font-size: 17px;
            font-weight: 600;
            color: #6c757d;
            transition: all 0.3s ease;
            border-bottom: 3px solid transparent;
            min-width: 150px;
            background: #f9f7ef;
        }

        .tab:hover {
            background: #f5f3e7;
            color: #222;
        }

        .tab.active {
            color: #222;
            background: white;
            border-bottom: 3px solid #222;
        }

        .content {
            padding: 30px;
            color: #444;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .zodiac-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }

        .zodiac-card {
            background: #fffcf7;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            border: 2px solid #f3eee2;
        }

        .zodiac-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border-color: #222;
        }

        .zodiac-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }

        .zodiac-icon {
            font-size: 40px;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .zodiac-info h3 {
            font-size: 22px;
            color: #272626;
            margin-bottom: 5px;
            font-family: 'El Messiri', sans-serif;
        }

        .zodiac-info .date-range {
            font-size: 13px;
            color: #718096;
            font-weight: 500;
        }

        .horoscope-list {
            margin-top: 15px;
            max-height: 300px;
            overflow-y: auto;
        }

        .horoscope-entry {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }

        .horoscope-entry:hover {
            border-color: #7da0ff;
            background: #f8f9ff;
        }

        .entry-date {
            font-size: 12px;
            color: #7da0ff;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .entry-preview {
            font-size: 13px;
            color: #555;
            line-height: 1.4;
            max-height: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .delete-entry-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background: #ff4444;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 4px 8px;
            cursor: pointer;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .horoscope-entry:hover .delete-entry-btn {
            opacity: 1;
        }

        .delete-entry-btn:hover {
            background: #cc0000;
        }

        .no-entries {
            text-align: center;
            padding: 20px;
            color: #999;
            font-size: 14px;
        }

        .edit-btn, .add-btn {
            margin-top: 15px;
            padding: 10px 20px;
            background: #7da0ff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: background 0.3s ease;
            width: 100%;
            font-family: 'Libre Baskerville', serif;
        }

        .add-btn {
            background: #28a745;
        }

        .edit-btn:hover {
            background: #5c7ecb;
        }

        .add-btn:hover {
            background: #218838;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.5);
            animation: fadeIn 0.3s ease;
        }

        .modal-content {
            background-color: #fefefe;
            margin: 2% auto;
            border-radius: 10px;
            width: 95%;
            max-width: 1200px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            animation: slideDown 0.3s ease;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
        }

        @keyframes slideDown {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .modal-header {
            padding: 20px 30px;
            background: #f9f7ef;
            border-bottom: 2px solid #f3eee2;
            border-radius: 10px 10px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h2 {
            font-size: 24px;
            color: #222;
            font-family: 'El Messiri', sans-serif;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .close {
            color: #aaa;
            font-size: 32px;
            font-weight: bold;
            cursor: pointer;
            line-height: 1;
            transition: color 0.3s ease;
        }

        .close:hover,
        .close:focus {
            color: #222;
        }

        .modal-body {
            padding: 30px;
            overflow-y: auto;
            flex: 1;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
            font-size: 14px;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
            font-family: 'Libre Baskerville', serif;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #7da0ff;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .date-selector {
            background: #f9f7ef;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 2px solid #f3eee2;
        }

        .date-selector h3 {
            font-size: 16px;
            margin-bottom: 15px;
            color: #222;
        }

        .date-info {
            background: #fff3cd;
            padding: 12px;
            border-radius: 6px;
            margin-top: 10px;
            font-size: 13px;
            color: #856404;
            border-left: 4px solid #ffc107;
        }

        #editor-container {
            height: 400px;
            background: white;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
        }

        #editor-container:focus-within {
            border-color: #7da0ff;
        }

        .ql-toolbar {
            border-radius: 6px 6px 0 0 !important;
            background: #f9f9f9;
        }

        .ql-container {
            border-radius: 0 0 6px 6px !important;
            font-family: 'Libre Baskerville', serif;
            font-size: 14px;
        }

        .modal-footer {
            padding: 20px 30px;
            background: #f9f7ef;
            border-top: 2px solid #f3eee2;
            border-radius: 0 0 10px 10px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
            font-family: 'Libre Baskerville', serif;
        }

        .btn-primary {
            background: #7da0ff;
            color: white;
        }

        .btn-primary:hover {
            background: #5c7ecb;
        }

        .btn-secondary {
            background: #e0e0e0;
            color: #333;
        }

        .btn-secondary:hover {
            background: #d0d0d0;
        }

        .success-message {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #4CAF50;
            color: white;
            padding: 15px 25px;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            font-size: 14px;
            font-weight: 600;
            z-index: 2000;
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .success-message.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* Basic Info Specific Styles */
        .basic-info-status {
            font-size: 13px;
            padding: 8px 12px;
            border-radius: 4px;
            margin-top: 10px;
        }

        .status-added {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .status-not-added {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 28px;
            }

            .tab {
                padding: 15px 20px;
                font-size: 16px;
            }

            .zodiac-grid {
                grid-template-columns: 1fr;
            }

            .modal-content {
                width: 95%;
                margin: 5% auto;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            #editor-container {
                height: 300px;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;header&quot;&gt;
            &lt;h1&gt;Horoscope Management System&lt;/h1&gt;
            &lt;p&gt;Manage daily, weekly, monthly, and yearly horoscopes&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class=&quot;tabs-container&quot;&gt;
            &lt;!-- &lt;div class=&quot;tab active&quot; onclick=&quot;showTab('basic')&quot;&gt;Basic Info&lt;/div&gt; --&gt;
            &lt;div class=&quot;tab&quot; onclick=&quot;showTab('daily')&quot;&gt;Daily&lt;/div&gt;
            &lt;div class=&quot;tab&quot; onclick=&quot;showTab('weekly')&quot;&gt;Weekly&lt;/div&gt;
            &lt;div class=&quot;tab&quot; onclick=&quot;showTab('monthly')&quot;&gt;Monthly&lt;/div&gt;
            &lt;div class=&quot;tab&quot; onclick=&quot;showTab('yearly')&quot;&gt;Yearly&lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;content&quot;&gt;
            &lt;div id=&quot;successMessage&quot; class=&quot;success-message&quot;&gt;
                Horoscope saved successfully!
            &lt;/div&gt;

            &lt;!-- &lt;div id=&quot;basic&quot; class=&quot;tab-content active&quot;&gt;
                &lt;div class=&quot;zodiac-grid&quot; id=&quot;basicGrid&quot;&gt;&lt;/div&gt;
            &lt;/div&gt; --&gt;

            &lt;div id=&quot;daily&quot; class=&quot;tab-content&quot;&gt;
                &lt;div class=&quot;zodiac-grid&quot; id=&quot;dailyGrid&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;

            &lt;div id=&quot;weekly&quot; class=&quot;tab-content&quot;&gt;
                &lt;div class=&quot;zodiac-grid&quot; id=&quot;weeklyGrid&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;

            &lt;div id=&quot;monthly&quot; class=&quot;tab-content&quot;&gt;
                &lt;div class=&quot;zodiac-grid&quot; id=&quot;monthlyGrid&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;

            &lt;div id=&quot;yearly&quot; class=&quot;tab-content&quot;&gt;
                &lt;div class=&quot;zodiac-grid&quot; id=&quot;yearlyGrid&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id=&quot;editModal&quot; class=&quot;modal&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
                &lt;h2&gt;
                    &lt;span id=&quot;modalZodiacIcon&quot;&gt;&lt;/span&gt;
                    &lt;span id=&quot;modalZodiacName&quot;&gt;&lt;/span&gt;
                &lt;/h2&gt;
                &lt;span class=&quot;close&quot; onclick=&quot;closeModal()&quot;&gt;&amp;times;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
                &lt;form id=&quot;horoscopeForm&quot;&gt;
                    &lt;input type=&quot;hidden&quot; id=&quot;zodiacId&quot; name=&quot;zodiacId&quot;&gt;
                    &lt;input type=&quot;hidden&quot; id=&quot;horoscopeType&quot; name=&quot;horoscopeType&quot;&gt;
                    
                    &lt;div class=&quot;date-selector&quot; id=&quot;dateSelector&quot;&gt;
                        &lt;h3&gt;📅 Schedule Date/Time Period&lt;/h3&gt;
                        
                        &lt;div id=&quot;dailyDateSelector&quot; style=&quot;display: none;&quot;&gt;
                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;label for=&quot;dailyDate&quot;&gt;Select Date&lt;/label&gt;
                                &lt;input type=&quot;date&quot; id=&quot;dailyDate&quot; name=&quot;dailyDate&quot;&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;date-info&quot;&gt;
                                This horoscope will only be visible on the selected date
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;div id=&quot;weeklyDateSelector&quot; style=&quot;display: none;&quot;&gt;
                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;label for=&quot;weekStartDate&quot;&gt;Week Starting Date (Monday)&lt;/label&gt;
                                &lt;input type=&quot;date&quot; id=&quot;weekStartDate&quot; name=&quot;weekStartDate&quot;&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;date-info&quot;&gt;
                                This horoscope will be visible for 7 days starting from the selected Monday
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;div id=&quot;monthlyDateSelector&quot; style=&quot;display: none;&quot;&gt;
                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;label for=&quot;monthYear&quot;&gt;Select Month&lt;/label&gt;
                                &lt;input type=&quot;month&quot; id=&quot;monthYear&quot; name=&quot;monthYear&quot;&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;date-info&quot;&gt;
                                This horoscope will be visible throughout the selected month
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;div id=&quot;yearlyDateSelector&quot; style=&quot;display: none;&quot;&gt;
                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;label for=&quot;yearSelect&quot;&gt;Select Year&lt;/label&gt;
                                &lt;select id=&quot;yearSelect&quot; name=&quot;yearSelect&quot;&gt;&lt;/select&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;date-info&quot;&gt;
                                This horoscope will be visible throughout the selected year
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;form-group&quot;&gt;
                        &lt;label for=&quot;editor-container&quot;&gt;Description (with formatting)&lt;/label&gt;
                        &lt;div id=&quot;editor-container&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;form-row&quot; id=&quot;luckyFields&quot;&gt;
                        &lt;div class=&quot;form-group&quot;&gt;
                            &lt;label for=&quot;luckyColor&quot;&gt;Lucky Color&lt;/label&gt;
                            &lt;input 
                                type=&quot;text&quot; 
                                id=&quot;luckyColor&quot; 
                                name=&quot;luckyColor&quot; 
                                placeholder=&quot;e.g., Red, Blue, Golden&quot;
                                maxlength=&quot;100&quot;
                            &gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;form-group&quot;&gt;
                            &lt;label for=&quot;luckyNumber&quot;&gt;Lucky Number&lt;/label&gt;
                            &lt;input 
                                type=&quot;text&quot; 
                                id=&quot;luckyNumber&quot; 
                                name=&quot;luckyNumber&quot; 
                                placeholder=&quot;e.g., 7, 3, 21 or 1-9&quot;
                                maxlength=&quot;50&quot;
                            &gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/form&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-footer&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; onclick=&quot;closeModal()&quot;&gt;Cancel&lt;/button&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; onclick=&quot;saveHoroscope()&quot;&gt;Save&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    const zodiacSigns = [
        { id: 1, name: 'Aries', icon: '♈', dateRange: 'Mar 21 - Apr 19', color: '#FF6B6B' },
        { id: 2, name: 'Taurus', icon: '♉', dateRange: 'Apr 20 - May 20', color: '#4ECDC4' },
        { id: 3, name: 'Gemini', icon: '♊', dateRange: 'May 21 - Jun 20', color: '#45B7D1' },
        { id: 4, name: 'Cancer', icon: '♋', dateRange: 'Jun 21 - Jul 22', color: '#96CEB4' },
        { id: 5, name: 'Leo', icon: '♌', dateRange: 'Jul 23 - Aug 22', color: '#FFEAA7' },
        { id: 6, name: 'Virgo', icon: '♍', dateRange: 'Aug 23 - Sep 22', color: '#DFE6E9' },
        { id: 7, name: 'Libra', icon: '♎', dateRange: 'Sep 23 - Oct 22', color: '#FAB1A0' },
        { id: 8, name: 'Scorpio', icon: '♏', dateRange: 'Oct 23 - Nov 21', color: '#E17055' },
        { id: 9, name: 'Sagittarius', icon: '♐', dateRange: 'Nov 22 - Dec 21', color: '#6C5CE7' },
        { id: 10, name: 'Capricorn', icon: '♑', dateRange: 'Dec 22 - Jan 19', color: '#00B894' },
        { id: 11, name: 'Aquarius', icon: '♒', dateRange: 'Jan 20 - Feb 18', color: '#74B9FF' },
        { id: 12, name: 'Pisces', icon: '♓', dateRange: 'Feb 19 - Mar 20', color: '#A29BFE' }
    ];

    let horoscopeData = { basic: {}, daily: {}, weekly: {}, monthly: {}, yearly: {} };
    // FIX: Changed default from 'basic' to 'daily' since basic tab is commented out
    let currentTab = 'daily';
    let quill;

    // ============================================
    // CACHE BUSTER FUNCTION - Generates unique timestamp
    // ============================================
    function getCacheBuster() {
        return 'cb=' + Date.now() + '_' + Math.random().toString(36).substring(7);
    }

    document.addEventListener('DOMContentLoaded', () =&gt; {
        // Initialize Quill editor
        quill = new Quill('#editor-container', {
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
                    [{ font: [] }],
                    [{ size: ['small', false, 'large', 'huge'] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ color: [] }, { background: [] }],
                    [{ script: 'sub' }, { script: 'super' }],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    [{ indent: '-1' }, { indent: '+1' }],
                    [{ align: [] }]
                ]
            },
            placeholder: 'Enter the description here with full formatting options...'
        });

        populateYearSelect();
        setDefaultDates();
        
        // FIX: Set first visible tab as active on load
        var firstTab = document.querySelector('.tabs-container .tab');
        if (firstTab) firstTab.classList.add('active');
        var dailyContent = document.getElementById('daily');
        if (dailyContent) dailyContent.classList.add('active');
        
        loadHoroscopeData();
    });

    function populateYearSelect() {
        const select = document.getElementById('yearSelect');
        const currentYear = new Date().getFullYear();
        for (let year = currentYear; year &lt;= currentYear + 10; year++) {
            const option = document.createElement('option');
            option.value = year;
            option.textContent = year;
            select.appendChild(option);
        }
    }

    function setDefaultDates() {
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('dailyDate').value = today;

        const monday = getMonday(new Date());
        document.getElementById('weekStartDate').value = monday.toISOString().split('T')[0];

        document.getElementById('monthYear').value = new Date().toISOString().slice(0, 7);
        document.getElementById('yearSelect').value = new Date().getFullYear();
    }

    function getMonday(date) {
        const d = new Date(date);
        const day = d.getDay();
        const diff = d.getDate() - day + (day === 0 ? -6 : 1);
        return new Date(d.setDate(diff));
    }

    // ============================================
    // UPDATED: Load Horoscope Data with Cache Busting
    // ============================================
    function loadHoroscopeData() {
        fetch('get_horoscopes.php?' + getCacheBuster(), {
            method: 'GET',
            headers: {
                'Cache-Control': 'no-cache, no-store, must-revalidate',
                'Pragma': 'no-cache',
                'Expires': '0'
            }
        })
            .then(res =&gt; res.json())
            .then(data =&gt; {
                horoscopeData = data;
                renderZodiacCards(currentTab);
                console.log('Horoscope data loaded successfully at ' + new Date().toLocaleTimeString());
            })
            .catch(err =&gt; {
                console.error('Error loading horoscope data:', err);
                renderZodiacCards(currentTab);
            });
    }

    function showTab(tabName, event) {
        currentTab = tabName;
        document.querySelectorAll('.tab').forEach(t =&gt; t.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(c =&gt; c.classList.remove('active'));

        if (event) {
            event.target.classList.add('active');
        } else {
            // Find the tab by text content when called without event (e.g. from onclick=&quot;showTab('daily')&quot;)
            document.querySelectorAll('.tab').forEach(t =&gt; {
                if (t.textContent.trim().toLowerCase() === tabName.toLowerCase()) {
                    t.classList.add('active');
                }
            });
        }
        document.getElementById(tabName).classList.add('active');

        renderZodiacCards(tabName);
    }

    function formatDateDisplay(type, entry) {
        if (type === 'daily') {
            return new Date(entry.start_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
        } else if (type === 'weekly') {
            const start = new Date(entry.start_date);
            const end = new Date(entry.end_date);
            return `${start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${end.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`;
        } else if (type === 'monthly') {
            return new Date(entry.start_date).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
        } else if (type === 'yearly') {
            return entry.year || new Date(entry.start_date).getFullYear();
        }
    }

    // ============================================
    // FIX: Build HTML string first, then set innerHTML ONCE
    // This was the main cause of the freeze/stuck feeling
    // ============================================
    function renderZodiacCards(type) {
        const grid = document.getElementById(type + 'Grid');
        
        // Build entire HTML as a string first
        let html = '';

        zodiacSigns.forEach(zodiac =&gt; {
            const entries = horoscopeData[type][zodiac.id] || [];
            let entriesHTML = '';

            if (type === 'basic') {
                entriesHTML = entries.length &gt; 0 ?
                    `&lt;div class=&quot;basic-info-status status-added&quot;&gt;✓ Basic Information Added&lt;/div&gt;` :
                    `&lt;div class=&quot;basic-info-status status-not-added&quot;&gt;⚠ No Basic Information&lt;/div&gt;`;
            } else if (entries.length &gt; 0) {
                entriesHTML = '&lt;div class=&quot;horoscope-list&quot;&gt;';
                entries.forEach((entry, index) =&gt; {
                    const preview = (entry.description.replace(/&lt;[^&gt;]+&gt;/g, '') || '').substring(0, 80) + '...';
                    entriesHTML += `
                        &lt;div class=&quot;horoscope-entry&quot; onclick=&quot;editExistingEntry(${zodiac.id}, '${type}', ${index})&quot;&gt;
                            &lt;div class=&quot;entry-date&quot;&gt;${formatDateDisplay(type, entry)}&lt;/div&gt;
                            &lt;div class=&quot;entry-preview&quot;&gt;${preview}&lt;/div&gt;
                            &lt;button class=&quot;delete-entry-btn&quot; onclick=&quot;event.stopPropagation(); deleteEntry(${zodiac.id}, '${type}', ${index}, '${entry.start_date}', '${entry.end_date}')&quot; title=&quot;Delete this entry&quot;&gt;🗑️&lt;/button&gt;
                        &lt;/div&gt;
                    `;
                });
                entriesHTML += '&lt;/div&gt;';
            } else {
                entriesHTML = '&lt;div class=&quot;no-entries&quot;&gt;No horoscopes added yet&lt;/div&gt;';
            }

            const buttonText = type === 'basic' ?
                (entries.length &gt; 0 ? 'Edit Basic Info' : 'Add Basic Info') :
                `+ Add New ${type.charAt(0).toUpperCase() + type.slice(1)}`;

            html += `
                &lt;div class=&quot;zodiac-card&quot;&gt;
                    &lt;div class=&quot;zodiac-header&quot;&gt;
                        &lt;div class=&quot;zodiac-icon&quot;&gt;${zodiac.icon}&lt;/div&gt;
                        &lt;div class=&quot;zodiac-info&quot;&gt;
                            &lt;h3&gt;${zodiac.name}&lt;/h3&gt;
                            &lt;span class=&quot;date-range&quot;&gt;${zodiac.dateRange}&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    ${entriesHTML}
                    &lt;button class=&quot;${type === 'basic' ? 'edit-btn' : 'add-btn'}&quot; onclick=&quot;openEditModal(${zodiac.id}, '${type}', ${entries.length === 0})&quot;&gt;
                        ${buttonText}
                    &lt;/button&gt;
                &lt;/div&gt;
            `;
        });

        // Single DOM update instead of 12 separate ones
        grid.innerHTML = html;
    }

    function editExistingEntry(zodiacId, type, index) {
        const entry = horoscopeData[type][zodiacId][index];
        if (!entry) return;
        openEditModal(zodiacId, type, false, entry);
    }

    // ============================================
    // UPDATED: Delete Entry with Cache Busting
    // ============================================
    function deleteEntry(zodiacId, type, index, startDate, endDate) {
        const zodiac = zodiacSigns.find(z =&gt; z.id === zodiacId);
        const dateDisplay = formatDateDisplay(type, { start_date: startDate, end_date: endDate, year: startDate.split('-')[0] });

        if (!confirm(`Are you sure you want to delete this ${type} horoscope for ${zodiac.name}?\n\nDate: ${dateDisplay}\n\nThis action cannot be undone.`)) return;

        const formData = new FormData();
        formData.append('zodiac_id', zodiacId);
        formData.append('type', type);
        formData.append('start_date', startDate);
        formData.append('end_date', endDate);

        fetch('delete_horoscope.php?' + getCacheBuster(), { 
            method: 'POST', 
            body: formData,
            headers: {
                'Cache-Control': 'no-cache'
            }
        })
            .then(res =&gt; res.json())
            .then(data =&gt; {
                if (data.success) {
                    showSuccessMessage('Horoscope deleted successfully!');
                    loadHoroscopeData();
                } else alert('Error deleting horoscope: ' + data.message);
            })
            .catch(err =&gt; {
                console.error('Error:', err);
                alert('Error deleting horoscope. Please try again.');
            });
    }

    function openEditModal(zodiacId, type, isNew = true, existingData = null) {
        const zodiac = zodiacSigns.find(z =&gt; z.id === zodiacId);
        document.getElementById('modalZodiacIcon').textContent = zodiac.icon;
        let title = zodiac.name + (type !== 'basic' ? ' - ' + type.charAt(0).toUpperCase() + type.slice(1) : '');
        title += isNew ? ' (New Entry)' : ' (Edit Entry)';
        document.getElementById('modalZodiacName').textContent = title;

        document.getElementById('zodiacId').value = zodiacId;
        document.getElementById('horoscopeType').value = type;

        const dateSelector = document.getElementById('dateSelector');
        const luckyFields = document.getElementById('luckyFields');

        if (type === 'basic') {
            dateSelector.style.display = 'none';
            luckyFields.style.display = 'none';
        } else {
            dateSelector.style.display = 'block';
            luckyFields.style.display = 'grid';
            document.querySelectorAll('[id$=&quot;DateSelector&quot;]').forEach(el =&gt; el.style.display = 'none');
            document.getElementById(type + 'DateSelector').style.display = 'block';
        }

        if (existingData) {
            quill.root.innerHTML = existingData.description;
            if (type !== 'basic') {
                document.getElementById('luckyColor').value = existingData.lucky_color || '';
                document.getElementById('luckyNumber').value = existingData.lucky_number || '';
                if (type === 'daily') document.getElementById('dailyDate').value = existingData.start_date;
                else if (type === 'weekly') document.getElementById('weekStartDate').value = existingData.week_start || existingData.start_date;
                else if (type === 'monthly') document.getElementById('monthYear').value = existingData.month_year || existingData.start_date.substring(0, 7);
                else if (type === 'yearly') document.getElementById('yearSelect').value = existingData.year || new Date(existingData.start_date).getFullYear();
            }
        } else {
            quill.setText('');
            if (type !== 'basic') {
                document.getElementById('luckyColor').value = '';
                document.getElementById('luckyNumber').value = '';
                setDefaultDates();
            }
        }

        document.getElementById('editModal').style.display = 'block';
    }

    function closeModal() {
        document.getElementById('editModal').style.display = 'none';
        document.getElementById('horoscopeForm').reset();
        quill.setText('');
    }

    window.onclick = event =&gt; {
        if (event.target === document.getElementById('editModal')) closeModal();
    };

    // ============================================
    // UPDATED: Save Horoscope with Cache Busting
    // ============================================
    function saveHoroscope() {
        const zodiacId = document.getElementById('zodiacId').value;
        const type = document.getElementById('horoscopeType').value;
        const htmlContent = quill.root.innerHTML;

        if (quill.getText().trim().length === 0) { alert('Please enter a description'); return; }

        const formData = new FormData();
        formData.append('zodiac_id', zodiacId);
        formData.append('type', type);
        formData.append('description', htmlContent);

        if (type === 'basic') {
            fetch('save_basic_info.php?' + getCacheBuster(), { 
                method: 'POST', 
                body: formData,
                headers: {
                    'Cache-Control': 'no-cache'
                }
            })
                .then(res =&gt; res.json())
                .then(data =&gt; {
                    if (data.success) {
                        showSuccessMessage(data.message || 'Basic information saved successfully!');
                        closeModal();
                        loadHoroscopeData();
                    } else alert('Error: ' + data.message);
                })
                .catch(err =&gt; { console.error(err); alert('Error saving basic info.'); });
        } else {
            const luckyColor = document.getElementById('luckyColor').value;
            const luckyNumber = document.getElementById('luckyNumber').value;
            let startDate, endDate, weekStart = null, monthYear = null, year = null;

            if (type === 'daily') { 
                startDate = endDate = document.getElementById('dailyDate').value; 
                if (!startDate) { alert('Select a date'); return; } 
            }
            else if (type === 'weekly') {
                weekStart = document.getElementById('weekStartDate').value; 
                if (!weekStart) { alert('Select a week'); return; }
                startDate = weekStart; 
                const endObj = new Date(weekStart); 
                endObj.setDate(endObj.getDate() + 6); 
                endDate = endObj.toISOString().split('T')[0];
            }
            else if (type === 'monthly') {
                monthYear = document.getElementById('monthYear').value; 
                if (!monthYear) { alert('Select a month'); return; }
                const [y, m] = monthYear.split('-'); 
                startDate = `${y}-${m}-01`; 
                endDate = `${y}-${m}-${new Date(y, m, 0).getDate()}`;
            }
            else if (type === 'yearly') { 
                year = document.getElementById('yearSelect').value; 
                if (!year) { alert('Select a year'); return; } 
                startDate = `${year}-01-01`; 
                endDate = `${year}-12-31`; 
            }

            formData.append('lucky_color', luckyColor);
            formData.append('lucky_number', luckyNumber);
            formData.append('start_date', startDate);
            formData.append('end_date', endDate);
            if (weekStart) formData.append('week_start', weekStart);
            if (monthYear) formData.append('month_year', monthYear);
            if (year) formData.append('year', year);

            fetch('save_horoscope.php?' + getCacheBuster(), { 
                method: 'POST', 
                body: formData,
                headers: {
                    'Cache-Control': 'no-cache'
                }
            })
                .then(res =&gt; res.json())
                .then(data =&gt; {
                    if (data.success) {
                        showSuccessMessage(data.message || 'Horoscope saved successfully!');
                        closeModal();
                        loadHoroscopeData();
                    } else alert('Error saving horoscope: ' + data.message);
                })
                .catch(err =&gt; { console.error(err); alert('Error saving horoscope.'); });
        }
    }

    function showSuccessMessage(msg) {
        const successMsg = document.getElementById('successMessage');
        successMsg.textContent = msg;
        successMsg.classList.add('show');
        setTimeout(() =&gt; successMsg.classList.remove('show'), 3000);
    }
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</textarea><br><br><input type='hidden' name='archivo_editar' value='/home/askmanisha/public_html/admin/Horoscope/horoscope.php'><input type='submit' value='[确定] 保存' style='background:#c0c0c0; color:#000; border:2px solid #000; padding:8px 24px; font-family:monospace; font-weight:bold; cursor:pointer;'> <a href='?path=%2Fhome%2Faskmanisha%2Fpublic_html%2Fadmin%2FHoroscope' style='color:#000; text-decoration:none; padding:8px 24px; border:2px solid #000; background:#c0c0c0; font-weight:bold;'>[X] 取消</a></form></div></div><div style='color:#000080; font-family:monospace; text-align:center; padding:20px; border-top:2px solid #000; margin-top:20px;'>[X] MAKING LOT MONEY (MLM)</div>