<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mylai Maha Periyava Anusham Trust - Invitations</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Lora:wght@500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-saffron: #FF6B35;
            --mid-saffron: #FF9933;
            --gold-accent: #D4AF37;
            --light-gold: #FFF8DC;
            --bg-cream: #FFFDF9;
            --dark-brown: #2C1810;
            --deep-terracotta: #B84300;
            --card-shadow: 0 6px 20px rgba(44, 24, 16, 0.08);
            --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        body {
            font-family: 'Lora', serif;
            background-color: var(--bg-cream);
            color: var(--dark-brown);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            box-sizing: border-box;
        }

        /* BALANCED SINGLE ROW SAFRON HEADER */
        .main-header-bar {
            background: linear-gradient(135deg, #FF6B35 0%, #FF9933 50%, #FFA726 100%);
            border-bottom: 4px solid var(--deep-terracotta);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
            width: 100%;
            padding: 15px 20px;
            box-sizing: border-box;
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 15px;
        }

        .header-left-block {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-shrink: 0;
            min-width: 220px; /* Forces symmetry with the right side button container */
        }

        .logo-cell img {
            width: 65px;
            height: 65px;
            border-radius: 50%;
            border: 2px solid var(--light-gold);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            object-fit: cover;
            display: block;
        }

        .title-cell {
            flex-grow: 1;
            text-align: center;
        }

        .main-title {
            font-family: 'Cinzel', serif;
            margin: 0;
            font-size: clamp(1.1rem, 2.5vw, 1.8rem);
            color: #FFFFFF;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            font-weight: 900;
            letter-spacing: 0.5px;
            line-height: 1.2;
        }

        .header-right-block {
            display: flex;
            justify-content: flex-end;
            flex-shrink: 0;
            min-width: 220px; /* Perfectly matches left container bounds for absolute centering */
        }

        .btn-back-nav {
            font-family: 'Cinzel', serif;
            background: var(--dark-brown);
            color: var(--light-gold);
            border: 2px solid var(--gold-accent);
            padding: 8px 16px;
            font-size: 0.8rem;
            font-weight: 700;
            text-decoration: none;
            border-radius: 6px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: var(--transition-smooth);
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

            .btn-back-nav:hover {
                background: var(--light-gold);
                color: var(--dark-brown);
                border-color: #FFFFFF;
                transform: translateY(-1px);
            }

        /* SUB TITLE BAR */
        .subtitle-bar {
            background-color: var(--dark-brown);
            border-bottom: 2px solid var(--gold-accent);
            width: 100%;
            padding: 12px 20px;
            box-sizing: border-box;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .sub-title {
            font-family: 'Cinzel', serif;
            margin: 0;
            font-size: clamp(1.1rem, 3vw, 1.5rem);
            color: var(--light-gold);
            font-weight: 700;
            letter-spacing: 1px;
        }

        /* MAIN CONTENT HOLDER */
        .content-container {
            max-width: 600px;
            width: 100%;
            padding: 30px 20px;
            box-sizing: border-box;
            text-align: center;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 25px;
        }

        .instruction-text {
            font-size: 1.15rem;
            color: #4A3525;
            font-weight: 500;
            margin: 0;
            font-style: italic;
        }

        /* DYNAMIC EVENT SELECTION BUTTONS & CONTAINERS */
        .event-group {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin: 10px 0;
        }

        .event-wrapper {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            box-sizing: border-box;
        }

        .event-btn {
            display: block;
            font-family: 'Lora', serif;
            background: #FFFFFF;
            color: var(--dark-brown);
            border: 2px solid #FFE5B4;
            padding: 14px 20px;
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            box-shadow: 0 4px 10px rgba(44, 24, 16, 0.04);
            transition: var(--transition-smooth);
            width: 100%;
            box-sizing: border-box;
        }

        .event-btn-date {
            display: block;
            font-family: 'Cinzel', serif;
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--deep-terracotta);
            margin-bottom: 4px;
            letter-spacing: 0.5px;
        }

        .event-btn-title {
            display: block;
            font-size: 1.05rem;
            font-weight: 600;
            line-height: 1.4;
        }

        .event-btn:hover {
            border-color: var(--gold-accent);
            background-color: var(--light-gold);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(44, 24, 16, 0.1);
        }

        .event-wrapper.active-event-block .event-btn {
            background: linear-gradient(135deg, var(--dark-brown) 0%, #1F100A 100%);
            border-color: var(--gold-accent);
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
            transform: none;
        }

        .event-wrapper.active-event-block .event-btn-date {
            color: var(--light-gold);
        }

        .event-wrapper.active-event-block .event-btn-title {
            color: #FFFFFF;
        }

        /* INLINE NESTED LANGUAGE PANELS */
        .language-selection-pane {
            background-color: #FFF6EC;
            border: 2px dashed var(--gold-accent);
            border-top: none;
            border-radius: 0 0 12px 12px;
            padding: 20px 15px;
            box-sizing: border-box;
            animation: slideDownStrap 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
            width: 100%;
        }

        @keyframes slideDownStrap {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .button-group {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 12px;
        }

        .invite-btn {
            display: block;
            font-family: 'Cinzel', serif;
            background: linear-gradient(135deg, #FF6B35 0%, #B84300 100%);
            color: #FFFFFF;
            border: 2px solid var(--gold-accent);
            padding: 10px 24px;
            font-size: 0.95rem;
            font-weight: 700;
            border-radius: 6px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            box-shadow: 0 4px 10px rgba(44, 24, 16, 0.15);
            transition: var(--transition-smooth);
            min-width: 130px;
            box-sizing: border-box;
            letter-spacing: 0.5px;
        }

            .invite-btn:hover {
                background: linear-gradient(135deg, var(--dark-brown) 0%, #1F100A 100%);
                color: var(--light-gold);
                transform: translateY(-1px);
            }

        /* BOTTOM PORTRAIT FOOTER ROW */
        .bottom-portrait-frame {
            width: 100%;
            max-width: 320px;
            margin: 10px auto 20px auto;
            text-align: center;
            padding: 0 20px;
            box-sizing: border-box;
        }

            .bottom-portrait-frame img {
                width: 100%;
                height: auto;
                border-radius: 10px;
                border: 4px solid var(--gold-accent);
                box-shadow: 0 8px 25px rgba(44, 24, 16, 0.15);
                background-color: #FFFFFF;
                display: block;
                margin: 0 auto;
            }

        .maps-split-view {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .contact-details-box {
            background: #FFFFFF;
            border: 2px solid var(--gold-accent);
            border-radius: 12px;
            padding: 30px;
            box-shadow: var(--card-shadow);
        }

            .contact-details-box h3 {
                color: var(--deep-terracotta);
                margin-top: 0;
                border-bottom: 2px solid var(--mid-saffron);
                padding-bottom: 10px;
            }

        .whatsapp-link {
            color: #25D366;
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: var(--transition-smooth);
        }

            .whatsapp-link:hover {
                text-decoration: underline;
                color: #128C7E;
            }



        .map-container-box {
            background: #FFFFFF;
            border: 2px solid var(--gold-accent);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            height: 100%;
            min-height: 320px;
            position: relative;
        }

        .map-label-overlay {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(44, 24, 16, 0.85);
            color: var(--light-gold);
            padding: 6px 14px;
            font-family: 'Cinzel', serif;
            font-size: 0.8rem;
            font-weight: 600;
            border-radius: 4px;
            border-right: 3px solid var(--primary-saffron);
            z-index: 5;
            pointer-events: none;
        }

        .map-container-box iframe {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }

        /* FOOTER PATTERN */
        .mini-footer {
            background-color: var(--dark-brown);
            color: var(--light-gold);
            width: 100%;
            padding: 15px 20px;
            text-align: center;
            font-size: 0.8rem;
            border-top: 3px solid var(--gold-accent);
            font-family: 'Cinzel', serif;
            letter-spacing: 0.5px;
            box-sizing: border-box;
            margin-top: auto;
        }

        /* RESPONSIVE LAYOUT ADJUSTMENTS FOR MOBILE SCREEN PHONES */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                gap: 12px;
                text-align: center;
            }

            .header-left-block {
                min-width: auto;
                justify-content: center;
            }

            .header-right-block {
                min-width: auto;
                justify-content: center;
                width: 100%;
            }

            .btn-back-nav {
                width: 100%;
                justify-content: center;
            }

            .maps-split-view {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>

    <header class="main-header-bar">
        <div class="header-container">

            <div class="header-left-block">
                <div class="logo-cell">
                    <img src="Invites/mp1.jpg" onerror="this.src='Invites/mp1.jpg'" alt="Mylai Maha Periyava Anusham Trust Logo">
                </div>
            </div>

            <div class="title-cell">
                <h1 class="main-title">Mylai Maha Periyava Anusham Trust</h1>
            </div>

            <div class="header-right-block">
                <a href="mylai.html" class="btn-back-nav">
                    ← Back to Mylai Page
                </a>
                <a href="index.html" class="btn-back-nav">
                    ← Back to GanesaSarma
                </a>
            </div>

        </div>
    </header>

    <div class="subtitle-bar">
        <h2 class="sub-title">Upcoming Program Invitations</h2>
    </div>

    <main class="content-container">

        <div id="loadingStatusText" class="instruction-text">Loading upcoming program schedule...</div>

        <div id="dynamicEventGroup" class="event-group"></div>

        <div class="bottom-portrait-frame">
            <img src="Invites/mp2.jpg" onerror="this.src='Invites/mp2.jpg'" alt="Sri Kanchi Maha Periyava Sacred Portrait">
        </div>

    </main>

    <div class="section-header">
        <h2>Connect & Visit Us</h2>
    </div>
    <div class="maps-split-view">
        <div class="contact-details-box">
            <h3>Sri MahaPeriyava Sannidhi</h3>
            <p>
                <strong>Sanctuary Address:</strong><br>
                New No. 4, Old No. 23,<br>
                Pichupillai Street, Mylapore,<br>
                Chennai - 600004,<br>
                Tamil Nadu, India.
            </p>
            <p>
                <strong>Contact Telephone / WhatsApp:</strong><br>
                <a href="https://wa.me/918610214138" class="whatsapp-link" target="_blank">
                    📱 +91 861 021 4138 (Click to Chat)
                </a>
            </p>
            <p>
                <strong>Activities & Services:</strong><br>
                • Monthly Anusham Pooja Celebrations<br>
                • Daily Veda Parayanams & Special Homams<br>
                • Cultural Heritage & Spiritual Archives Maintenance
            </p>
        </div>
        <div class="map-container-box">
            <div class="map-label-overlay">Sri MahaPeriyava Sannidhi Location Map</div>
            <iframe src="https://maps.google.com/maps?q=Pitchu%20Pillai%20Street,%20Mylapore,%20Chennai&t=&z=15&ie=UTF8&iwloc=&output=embed"
                    allowfullscreen=""
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>
    </div>
    <footer class="mini-footer">
        © 2026 Mylai Maha Periyava Anusham Trust Archives. All Rights Reserved.
    </footer>

    <script>
        let currentlySelectedDatePrefix = '';

        function getOrdinalSuffix(dayNum) {
            if (dayNum > 3 && dayNum < 21) return 'th';
            switch (dayNum % 10) {
                case 1: return "st";
                case 2: return "nd";
                case 3: return "rd";
                default: return "th";
            }
        }

        function formatDisplaySpokenDate(dateIsoString) {
            const parts = dateIsoString.split('-');
            if (parts.length !== 3) return dateIsoString;

            const year = parts[0];
            const monthIndex = parseInt(parts[1], 10) - 1;
            const day = parseInt(parts[2], 10);

            const monthNames = ["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"];

            return `${day}${getOrdinalSuffix(day)} ${monthNames[monthIndex]} ${year}`;
        }

        async function loadInviteTextDatabase() {
            const container = document.getElementById('dynamicEventGroup');
            const statusLabel = document.getElementById('loadingStatusText');

            try {
                const response = await fetch('Invites/Invite.txt');
                if (!response.ok) throw new Error("File missing");

                const rawText = await response.text();
                const textLines = rawText.split('\n');

                const absoluteToday = new Date();
                absoluteToday.setHours(0, 0, 0, 0);

                let activeEventsCount = 0;
                container.innerHTML = '';

                textLines.forEach(line => {
                    const cleanLine = line.trim();
                    if (!cleanLine) return;

                    const dateMatchPattern = cleanLine.match(/^([\d{4}-\d{2}-\d{2}\/]*\d{4}-\d{2}-\d{2})-(.+)$/);
                    if (!dateMatchPattern) return;

                    const datePart = dateMatchPattern[1];
                    const eventHeadingTitle = dateMatchPattern[2].trim();

                    let displayDateString = '';
                    let targetFilePrefix = '';
                    let shouldKeepEvent = false;

                    if (datePart.includes('/')) {
                        const rangeParts = datePart.split('/');
                        const startDateStr = rangeParts[0];
                        const endDateStr = rangeParts[1];

                        const endDateBoundary = new Date(endDateStr);
                        endDateBoundary.setHours(0, 0, 0, 0);

                        if (endDateBoundary >= absoluteToday) {
                            shouldKeepEvent = true;
                        }

                        displayDateString = `${formatDisplaySpokenDate(startDateStr)} - ${formatDisplaySpokenDate(endDateStr)}`;
                        targetFilePrefix = endDateStr;
                    } else {
                        const eventDateBoundary = new Date(datePart);
                        eventDateBoundary.setHours(0, 0, 0, 0);

                        if (eventDateBoundary >= absoluteToday) {
                            shouldKeepEvent = true;
                        }

                        displayDateString = formatDisplaySpokenDate(datePart);
                        targetFilePrefix = datePart;
                    }

                    if (!shouldKeepEvent) return;

                    activeEventsCount++;

                    const wrapper = document.createElement('div');
                    wrapper.className = 'event-wrapper';

                    const buttonElement = document.createElement('button');
                    buttonElement.className = 'event-btn';

                    buttonElement.innerHTML = `
                                    <span class="event-btn-date">${displayDateString}</span>
                                    <span class="event-btn-title">${eventHeadingTitle}</span>
                                `;

                    const dynamicDrawer = document.createElement('div');
                    dynamicDrawer.className = 'drawer-container';

                    buttonElement.onclick = function () {
                        const allWrappers = container.getElementsByClassName('event-wrapper');

                        if (wrapper.classList.contains('active-event-block')) {
                            wrapper.classList.remove('active-event-block');
                            dynamicDrawer.innerHTML = '';
                            currentlySelectedDatePrefix = '';
                            return;
                        }

                        for (let w of allWrappers) {
                            w.classList.remove('active-event-block');
                            const deepDrawer = w.querySelector('.drawer-container');
                            if (deepDrawer) deepDrawer.innerHTML = '';
                        }

                        wrapper.classList.add('active-event-block');
                        currentlySelectedDatePrefix = targetFilePrefix;

                        dynamicDrawer.innerHTML = `
                                        <div class="language-selection-pane">
                                            <span style="font-size: 0.95rem; font-weight: 600; display: block; margin-bottom: 5px;">Select Language:</span>
                                            <div class="button-group">
                                                <button class="invite-btn" onclick="openActiveInvitationAsset('English', event)">English</button>
                                                <button class="invite-btn" onclick="openActiveInvitationAsset('Tamil', event)">தமிழ் (Tamil)</button>
                                            </div>
                                        </div>
                                    `;

                        setTimeout(() => {
                            wrapper.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                        }, 100);
                    };

                    wrapper.appendChild(buttonElement);
                    wrapper.appendChild(dynamicDrawer);
                    container.appendChild(wrapper);
                });

                if (activeEventsCount === 0) {
                    statusLabel.textContent = "There are no upcoming program invitations available at this time.";
                } else {
                    statusLabel.textContent = "Please select an upcoming program to view its invitation:";
                }

            } catch (error) {
                statusLabel.textContent = "Unable to fetch invitation index. Please verify path assets.";
                console.error("Fetch failure:", error);
            }
        }

        async function openActiveInvitationAsset(languageChoiceString, eventObj) {
            if (eventObj) eventObj.stopPropagation();

            if (!currentlySelectedDatePrefix) return;

            const baseFileUrl = `Invites/${currentlySelectedDatePrefix}-${languageChoiceString}`;
            const pdfUrl = `${baseFileUrl}.pdf`;
            const jpgUrl = `${baseFileUrl}.jpg`;

            try {
                const checkResponse = await fetch(pdfUrl, { method: 'HEAD' });
                if (checkResponse.ok) {
                    window.open(pdfUrl, '_blank');
                } else {
                    window.open(jpgUrl, '_blank');
                }
            } catch (e) {
                window.open(pdfUrl, '_blank');
            }
        }

        window.onload = function () {
            loadInviteTextDatabase();
        };
    </script>

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <!-- hitwebcounter Code START -->
    <a href="https://www.hitwebcounter.com" target="_blank">
        <center>
            <img src="https://hitwebcounter.com/counter/counter.php?page=7749412&style=0001&nbdigits=5&type=page&initCount=4500" title="Free Counter" Alt="web counter" border="0" />
        </center>
    </a>

</body>
</html>