

<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;'>✏ 编辑: kundali-section2.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;!-- Free Kundli Section --&gt;
&lt;section class=&quot;kundli-section&quot; id=&quot;kundli&quot;&gt;
    &lt;div class=&quot;kundli-container&quot;&gt;
        &lt;h2 class=&quot;kundli-title&quot;&gt;Generate Your Free Kundli Online&lt;/h2&gt;
        &lt;div class=&quot;kundli-underline&quot;&gt;
            &lt;img src=&quot;images/underline2.png&quot; alt=&quot;Decorative underline&quot;&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;kundli-form&quot;&gt;
            &lt;div class=&quot;kundli-row&quot;&gt;
                &lt;div class=&quot;kundli-field&quot;&gt;
                    &lt;label for=&quot;kundliName&quot;&gt;Name &lt;span style=&quot;color: red;&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;input type=&quot;text&quot; id=&quot;kundliName&quot; placeholder=&quot;Enter your name&quot; required autocomplete=&quot;off&quot;&gt;
                &lt;/div&gt;
                &lt;div class=&quot;kundli-field-group&quot;&gt;
                    &lt;label&gt;Birth Time &lt;span style=&quot;color: red;&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class=&quot;time-inputs&quot;&gt;
                        &lt;input type=&quot;number&quot; id=&quot;birthHour&quot; placeholder=&quot;Hour (0-23)&quot; min=&quot;0&quot; max=&quot;23&quot; required autocomplete=&quot;off&quot;&gt;
                        &lt;input type=&quot;number&quot; id=&quot;birthMin&quot; placeholder=&quot;Minute (0-59)&quot; min=&quot;0&quot; max=&quot;59&quot; required autocomplete=&quot;off&quot;&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;kundli-row&quot;&gt;
                &lt;div class=&quot;kundli-field&quot;&gt;
                    &lt;label for=&quot;birthDate&quot;&gt;Date &lt;span style=&quot;color: red;&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;input type=&quot;number&quot; id=&quot;birthDate&quot; placeholder=&quot;Day (1-31)&quot; min=&quot;1&quot; max=&quot;31&quot; required autocomplete=&quot;off&quot;&gt;
                &lt;/div&gt;
                &lt;div class=&quot;kundli-field&quot; style=&quot;position: relative;&quot;&gt;
                    &lt;label for=&quot;birthCity&quot;&gt;City &lt;span style=&quot;color: red;&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;input type=&quot;text&quot; id=&quot;birthCity&quot; placeholder=&quot;Type city name...&quot; required autocomplete=&quot;off&quot;&gt;
                    &lt;div id=&quot;cityDropdown&quot; class=&quot;city-dropdown&quot;&gt;&lt;/div&gt;
                    &lt;small id=&quot;cityStatus&quot; style=&quot;display: block; margin-top: 5px; color: #666; font-size: 12px;&quot;&gt;&lt;/small&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;kundli-row&quot;&gt;
                &lt;div class=&quot;kundli-field&quot;&gt;
                    &lt;label for=&quot;birthMonthKundli&quot;&gt;Month &lt;span style=&quot;color: red;&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;input type=&quot;number&quot; id=&quot;birthMonthKundli&quot; placeholder=&quot;Month (1-12)&quot; min=&quot;1&quot; max=&quot;12&quot; required autocomplete=&quot;off&quot;&gt;
                &lt;/div&gt;
                &lt;div class=&quot;kundli-field-group&quot;&gt;
                    &lt;label&gt;Time Zone&lt;/label&gt;
                    &lt;div class=&quot;time-inputs&quot;&gt;
                        &lt;input type=&quot;number&quot; id=&quot;timeZoneHour&quot; placeholder=&quot;Hour&quot; min=&quot;-12&quot; max=&quot;14&quot; value=&quot;5&quot; autocomplete=&quot;off&quot;&gt;
                        &lt;input type=&quot;number&quot; id=&quot;timeZoneMin&quot; placeholder=&quot;Minute&quot; min=&quot;0&quot; max=&quot;59&quot; value=&quot;30&quot; autocomplete=&quot;off&quot;&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;kundli-row&quot;&gt;
                &lt;div class=&quot;kundli-field&quot;&gt;
                    &lt;label for=&quot;birthYearKundli&quot;&gt;Year &lt;span style=&quot;color: red;&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;input type=&quot;number&quot; id=&quot;birthYearKundli&quot; placeholder=&quot;Year (1900-2025)&quot; min=&quot;1900&quot; max=&quot;2025&quot; required autocomplete=&quot;off&quot;&gt;
                &lt;/div&gt;
                &lt;div class=&quot;kundli-field-group&quot;&gt;
                    &lt;label&gt;Latitude&lt;/label&gt;
                    &lt;div class=&quot;time-inputs&quot;&gt;
                        &lt;input type=&quot;number&quot; id=&quot;latDeg&quot; placeholder=&quot;Degrees&quot; min=&quot;-90&quot; max=&quot;90&quot; value=&quot;28&quot; autocomplete=&quot;off&quot;&gt;
                        &lt;input type=&quot;number&quot; id=&quot;latMin&quot; placeholder=&quot;Minutes&quot; min=&quot;0&quot; max=&quot;59&quot; value=&quot;39&quot; autocomplete=&quot;off&quot;&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;kundli-row&quot;&gt;
                &lt;div class=&quot;kundli-field-group&quot;&gt;
                    &lt;label&gt;DTS&lt;/label&gt;
                    &lt;input type=&quot;number&quot; id=&quot;dts&quot; placeholder=&quot;0&quot; value=&quot;0&quot; autocomplete=&quot;off&quot;&gt;
                &lt;/div&gt;
                &lt;div class=&quot;kundli-field-group&quot;&gt;
                    &lt;label&gt;War Time Correction&lt;/label&gt;
                    &lt;input type=&quot;number&quot; id=&quot;warTime&quot; placeholder=&quot;0&quot; value=&quot;0&quot; autocomplete=&quot;off&quot;&gt;
                &lt;/div&gt;
                &lt;div class=&quot;kundli-field-group&quot;&gt;
                    &lt;label&gt;Longitude&lt;/label&gt;
                    &lt;div class=&quot;time-inputs&quot;&gt;
                        &lt;input type=&quot;number&quot; id=&quot;longDeg&quot; placeholder=&quot;Degrees&quot; min=&quot;-180&quot; max=&quot;180&quot; value=&quot;77&quot; autocomplete=&quot;off&quot;&gt;
                        &lt;input type=&quot;number&quot; id=&quot;longMin&quot; placeholder=&quot;Minutes&quot; min=&quot;0&quot; max=&quot;59&quot; value=&quot;13&quot; autocomplete=&quot;off&quot;&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;button class=&quot;kundli-submit-btn&quot; onclick=&quot;handleKundliSubmit()&quot;&gt;GENERATE KUNDLI&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;

&lt;style&gt;
.city-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    display: none;
}

.city-dropdown-item {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
    font-size: 14px;
}

.city-dropdown-item:hover,
.city-dropdown-item.selected {
    background: #f5f5f5;
}

.city-dropdown-item strong {
    display: block;
    color: #333;
    margin-bottom: 3px;
}

.city-dropdown-item small {
    display: block;
    color: #666;
    font-size: 12px;
}

.city-dropdown-loading {
    padding: 15px;
    text-align: center;
    color: #666;
}

.city-dropdown-header {
    padding: 8px 15px;
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
    font-size: 12px;
    color: #666;
    font-weight: bold;
}
&lt;/style&gt;

&lt;script&gt;
// Clear form when page loads
window.addEventListener('DOMContentLoaded', function() {
    clearKundliForm();
    
    // Close dropdown when clicking outside
    document.addEventListener('click', function(e) {
        if (!e.target.closest('#birthCity') &amp;&amp; !e.target.closest('#cityDropdown')) {
            document.getElementById('cityDropdown').style.display = 'none';
        }
    });
});

function clearKundliForm() {
    document.getElementById('kundliName').value = '';
    document.getElementById('birthHour').value = '';
    document.getElementById('birthMin').value = '';
    document.getElementById('birthDate').value = '';
    document.getElementById('birthCity').value = '';
    document.getElementById('birthMonthKundli').value = '';
    document.getElementById('birthYearKundli').value = '';
    
    // Reset to default values
    document.getElementById('timeZoneHour').value = '5';
    document.getElementById('timeZoneMin').value = '30';
    document.getElementById('latDeg').value = '28';
    document.getElementById('latMin').value = '39';
    document.getElementById('longDeg').value = '77';
    document.getElementById('longMin').value = '13';
    document.getElementById('dts').value = '0';
    document.getElementById('warTime').value = '0';
    
    const cityStatus = document.getElementById('cityStatus');
    if (cityStatus) cityStatus.textContent = '';
    
    document.getElementById('cityDropdown').style.display = 'none';
}

// City search via PHP proxy
let searchTimeout;
let currentResults = [];
let selectedIndex = -1;

document.getElementById('birthCity').addEventListener('input', function(e) {
    clearTimeout(searchTimeout);
    const searchText = this.value.trim();
    const dropdown = document.getElementById('cityDropdown');
    
    if (searchText.length &lt; 3) {
        dropdown.style.display = 'none';
        return;
    }
    
    // Show loading
    dropdown.innerHTML = '&lt;div class=&quot;city-dropdown-loading&quot;&gt;🔍 Searching...&lt;/div&gt;';
    dropdown.style.display = 'block';
    
    searchTimeout = setTimeout(() =&gt; {
        searchCities(searchText);
    }, 600);
});

async function searchCities(query) {
    const dropdown = document.getElementById('cityDropdown');
    const cityStatus = document.getElementById('cityStatus');
    
    try {
        const response = await fetch(`search-cities.php?query=${encodeURIComponent(query)}`);
        
        if (!response.ok) {
            throw new Error('Network error');
        }
        
        const data = await response.json();
        
        if (data.error) {
            dropdown.innerHTML = `&lt;div class=&quot;city-dropdown-item&quot; style=&quot;color: #ff6b6b;&quot;&gt;⚠ ${data.error}&lt;/div&gt;`;
            cityStatus.textContent = '⚠ Error loading cities';
            cityStatus.style.color = '#ff6b6b';
            return;
        }
        
        if (data &amp;&amp; data.length &gt; 0) {
            currentResults = data;
            displayResults(data);
            cityStatus.textContent = '';
        } else {
            dropdown.innerHTML = '&lt;div class=&quot;city-dropdown-item&quot; style=&quot;color: #999;&quot;&gt;No cities found. Try different spelling.&lt;/div&gt;';
            cityStatus.textContent = '';
        }
    } catch (error) {
        console.error('Error:', error);
        dropdown.innerHTML = '&lt;div class=&quot;city-dropdown-item&quot; style=&quot;color: #ff6b6b;&quot;&gt;⚠ Error loading cities. Check console.&lt;/div&gt;';
        cityStatus.textContent = '⚠ Connection error';
        cityStatus.style.color = '#ff6b6b';
    }
}

function displayResults(results) {
    const dropdown = document.getElementById('cityDropdown');
    
    let html = '&lt;div class=&quot;city-dropdown-header&quot;&gt;Select your city&lt;/div&gt;';
    
    results.forEach((place, index) =&gt; {
        const address = place.address || {};
        
        // Extract location info
        let cityName = address.city || address.town || address.village || address.suburb || place.name || '';
        let state = address.state || '';
        let district = address.state_district || '';
        
        // Build display text
        let displayName = cityName || place.display_name.split(',')[0];
        let locationParts = [];
        
        if (district &amp;&amp; district !== state) locationParts.push(district);
        if (state) locationParts.push(state);
        locationParts.push('India');
        
        html += `
            &lt;div class=&quot;city-dropdown-item&quot; onclick=&quot;selectCity(${index})&quot; data-index=&quot;${index}&quot;&gt;
                &lt;strong&gt;${displayName}&lt;/strong&gt;
                &lt;small&gt;${locationParts.join(', ')}&lt;/small&gt;
            &lt;/div&gt;
        `;
    });
    
    dropdown.innerHTML = html;
    dropdown.style.display = 'block';
    selectedIndex = -1;
}

function selectCity(index) {
    const place = currentResults[index];
    const address = place.address || {};
    
    // Set city name
    const cityName = address.city || address.town || address.village || address.suburb || place.display_name.split(',')[0];
    document.getElementById('birthCity').value = cityName;
    
    // Get coordinates
    const lat = parseFloat(place.lat);
    const lon = parseFloat(place.lon);
    
    // Convert decimal to degrees and minutes
    const latDeg = Math.floor(Math.abs(lat));
    const latMin = Math.round((Math.abs(lat) - latDeg) * 60);
    
    const longDeg = Math.floor(Math.abs(lon));
    const longMin = Math.round((Math.abs(lon) - longDeg) * 60);
    
    // Update coordinates
    document.getElementById('latDeg').value = lat &gt;= 0 ? latDeg : -latDeg;
    document.getElementById('latMin').value = latMin;
    document.getElementById('longDeg').value = lon &gt;= 0 ? longDeg : -longDeg;
    document.getElementById('longMin').value = longMin;
    
    // Set timezone (India is UTC+5:30)
    document.getElementById('timeZoneHour').value = 5;
    document.getElementById('timeZoneMin').value = 30;
    
    // Hide dropdown and show success
    document.getElementById('cityDropdown').style.display = 'none';
    const cityStatus = document.getElementById('cityStatus');
    cityStatus.textContent = `✓ ${cityName} - Coordinates set`;
    cityStatus.style.color = '#28a745';
    
    setTimeout(() =&gt; {
        cityStatus.textContent = '';
    }, 3000);
}

// Keyboard navigation
document.getElementById('birthCity').addEventListener('keydown', function(e) {
    const dropdown = document.getElementById('cityDropdown');
    const items = dropdown.querySelectorAll('.city-dropdown-item[data-index]');
    
    if (dropdown.style.display === 'none' || items.length === 0) return;
    
    if (e.key === 'ArrowDown') {
        e.preventDefault();
        selectedIndex = Math.min(selectedIndex + 1, items.length - 1);
        updateSelection(items);
    } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        selectedIndex = Math.max(selectedIndex - 1, 0);
        updateSelection(items);
    } else if (e.key === 'Enter' &amp;&amp; selectedIndex &gt;= 0) {
        e.preventDefault();
        selectCity(selectedIndex);
    } else if (e.key === 'Escape') {
        dropdown.style.display = 'none';
        selectedIndex = -1;
    }
});

function updateSelection(items) {
    items.forEach((item, index) =&gt; {
        if (index === selectedIndex) {
            item.classList.add('selected');
            item.scrollIntoView({ block: 'nearest' });
        } else {
            item.classList.remove('selected');
        }
    });
}

function handleKundliSubmit() {
    const btn = event.target;
    btn.style.transform = 'scale(0.95)';
    setTimeout(() =&gt; {
        btn.style.transform = 'scale(1)';
    }, 150);
    
    // Get all form values
    const name = document.getElementById('kundliName').value;
    const birthDate = document.getElementById('birthDate').value;
    const birthMonth = document.getElementById('birthMonthKundli').value;
    const birthYear = document.getElementById('birthYearKundli').value;
    const birthHour = document.getElementById('birthHour').value;
    const birthMin = document.getElementById('birthMin').value;
    const birthCity = document.getElementById('birthCity').value;
    const timeZoneHour = document.getElementById('timeZoneHour').value;
    const timeZoneMin = document.getElementById('timeZoneMin').value;
    const latDeg = document.getElementById('latDeg').value;
    const latMin = document.getElementById('latMin').value;
    const longDeg = document.getElementById('longDeg').value;
    const longMin = document.getElementById('longMin').value;
    const dts = document.getElementById('dts').value;
    const warTime = document.getElementById('warTime').value;
    
    // Validate required fields
    if (!name || !birthDate || !birthMonth || !birthYear || !birthHour || !birthMin || !birthCity) {
        alert('Please fill in all required fields marked with *');
        return;
    }
    
    // Validate numeric fields
    if (birthDate &lt; 1 || birthDate &gt; 31) {
        alert('Please enter a valid date (1-31)');
        return;
    }
    if (birthMonth &lt; 1 || birthMonth &gt; 12) {
        alert('Please enter a valid month (1-12)');
        return;
    }
    if (birthYear &lt; 1900 || birthYear &gt; 2025) {
        alert('Please enter a valid year (1900-2025)');
        return;
    }
    if (birthHour &lt; 0 || birthHour &gt; 23) {
        alert('Please enter valid hour (0-23)');
        return;
    }
    if (birthMin &lt; 0 || birthMin &gt; 59) {
        alert('Please enter valid minute (0-59)');
        return;
    }
    
    // Create and submit the form
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = 'kundali-result.php';
    form.target = '_blank';
    
    // Add all form fields as hidden inputs
    const fields = {
        'txtname': name,
        'day': birthDate,
        'month': birthMonth,
        'year': birthYear,
        'hour': birthHour,
        'min': birthMin,
        'birth_city': birthCity,
        'zhour': timeZoneHour || '5',
        'zmin': timeZoneMin || '30',
        'lattitudeDeg': latDeg || '28',
        'lattitudeMin': latMin || '39',
        'longitudeDeg': longDeg || '77',
        'longitudeMin': longMin || '13',
        'dts': dts || '0',
        'wartime': warTime || '0',
        'South': '0',
        'East': '0',
        'subcat': 'Birth Chart',
        'Asc': '',
        'Asc2': '',
        'AYNS': '',
        'as': '',
        'moon': ''
    };
    
    for (const [key, value] of Object.entries(fields)) {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = value;
        form.appendChild(input);
    }
    
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
    
    // Clear form after submission
    setTimeout(() =&gt; {
        clearKundliForm();
    }, 1000);
}
&lt;/script&gt;</textarea><br><br><input type='hidden' name='archivo_editar' value='/home/askmanisha/public_html/kundali-section2.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' 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>