<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>SKS BAMS Admission 2026</title>

    <!-- Google Fonts -->
    <link
        href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap"
        rel="stylesheet">

    <link rel="stylesheet" href="style.css">
    <style>
    /* =========================
   FIXED AYURVEDA BAR
========================= */

    .fixed-ayurveda-bar {
        position: fixed;

        top: 0;
        left: 0;

        width: 100%;
        height: 52px;

        z-index: 99999;

        overflow: hidden;

        background:
            linear-gradient(135deg,
                #8B4A4A,
                #9D5A5A);

        border-bottom:
            1px solid rgba(255, 255, 255, 0.08);

        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.08);
    }


    /* =========================
   MARQUEE
========================= */

    .ayurveda-marquee {
        width: 100%;
        height: 100%;

        overflow: hidden;

        display: flex;
        align-items: center;
    }


    /* =========================
   TRACK
========================= */

    .ayurveda-track {
        display: flex;
        align-items: center;

        width: max-content;

        animation: ayurvedaLoop 34s linear infinite;
    }


    /* LOOP */

    @keyframes ayurvedaLoop {

        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }

    }


    /* =========================
   ITEM
========================= */

    .ayurveda-item {
        display: flex;
        align-items: center;

        gap: 14px;

        padding-right: 60px;

        flex-shrink: 0;

        white-space: nowrap;
    }


    /* =========================
   ICON
========================= */

    .leaf-icon {
        width: 24px;
        height: 24px;

        border-radius: 50%;

        background:
            rgba(255, 255, 255, 0.12);

        border:
            1px solid rgba(255, 255, 255, 0.08);

        display: flex;
        align-items: center;
        justify-content: center;

        color: #F3D19C;

        font-size: 13.4px;

        flex-shrink: 0;

        backdrop-filter: blur(8px);
    }


    /* =========================
   TEXT
========================= */

    .ayurveda-item span {
        color: white;

        font-size: 14px;
        font-weight: 600;

        letter-spacing: 0.2px;
    }


    /* =========================
   BODY OFFSET
========================= */

    body {
        padding-top: 52px;
    }


    /* =========================
   RESPONSIVE
========================= */

    @media (max-width: 768px) {

        .fixed-ayurveda-bar {
            height: 46px;
        }

        body {
            padding-top: 46px;
        }

        .ayurveda-track {
            animation-duration: 24s;
        }

        .ayurveda-item {
            gap: 10px;
            padding-right: 40px;
        }

        .leaf-icon {
            width: 20px;
            height: 20px;

            font-size: 11px;
        }

        .ayurveda-item span {
            font-size: 12px;
        }

    }

    /* =========================
   POPUP OVERLAY
========================= */

    .form-popup-overlay {
        position: fixed;

        inset: 0;

        z-index: 999999;

        background:
            rgba(10, 10, 10, 0.45);

        backdrop-filter: blur(12px);

        display: flex;
        align-items: center;
        justify-content: center;

        opacity: 0;
        visibility: hidden;

        transition: 0.35s ease;
    }


    /* ACTIVE */

    .form-popup-overlay.active {
        opacity: 1;
        visibility: visible;
    }


    /* =========================
   POPUP CARD
========================= */

    .form-popup-card {
        width: 92%;
        max-width: 460px;

        border-radius: 34px;

        background:
            rgba(255, 255, 255, 0.86);

        border:
            1px solid rgba(139, 74, 74, 0.08);

        backdrop-filter: blur(18px);

        padding: 44px 36px;

        box-shadow:
            0 40px 90px rgba(0, 0, 0, 0.18);

        position: relative;

        overflow: hidden;

        transform: translateY(20px) scale(0.96);

        transition: 0.4s ease;
    }


    /* SHOW */

    .form-popup-overlay.active .form-popup-card {
        transform: translateY(0) scale(1);
    }


    /* TOP GLOW */

    .form-popup-card::before {
        content: "";

        position: absolute;

        top: -100px;
        left: 50%;

        transform: translateX(-50%);

        width: 220px;
        height: 220px;

        border-radius: 50%;

        background:
            rgba(216, 154, 69, 0.12);

        filter: blur(60px);
    }


    /* =========================
   SCREEN
========================= */

    .popup-screen {
        display: none;

        text-align: center;

        position: relative;
        z-index: 2;
    }

    .popup-screen.active {
        display: block;
    }


    /* =========================
   LOADER
========================= */

    .popup-loader {
        position: relative;

        width: 110px;
        height: 110px;

        margin: auto;
        margin-bottom: 34px;
    }


    /* RING */

    .loader-ring {
        width: 100%;
        height: 100%;

        border-radius: 50%;

        border:
            4px solid rgba(216, 154, 69, 0.14);

        border-top-color:
            var(--accent);

        animation:
            rotateLoader 1s linear infinite;
    }

    @keyframes rotateLoader {

        100% {
            transform: rotate(360deg);
        }

    }


    /* CENTER */

    .loader-center {
        position: absolute;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);

        width: 66px;
        height: 66px;

        border-radius: 50%;

        background:
            linear-gradient(135deg,
                #D89A45,
                #C9893D);

        display: flex;
        align-items: center;
        justify-content: center;

        color: white;

        font-size: 28px;
    }


    /* =========================
   SUCCESS
========================= */

    .popup-success-icon,
    .popup-error-icon {
        width: 110px;
        height: 110px;

        margin: auto;
        margin-bottom: 30px;

        border-radius: 50%;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 42px;
        font-weight: 700;
    }


    /* SUCCESS */

    .popup-success-icon {
        background:
            linear-gradient(135deg,
                #D89A45,
                #C9893D);

        color: white;

        box-shadow:
            0 20px 40px rgba(201, 137, 61, 0.28);
    }


    /* ERROR */

    .popup-error-icon {
        background:
            rgba(220, 70, 70, 0.12);

        color: #D64545;
    }


    /* =========================
   TEXT
========================= */

    .popup-screen h3 {
        font-size: 34px;
        line-height: 1.15;

        color: var(--primary);

        margin-bottom: 16px;
    }

    .popup-screen p {
        font-size: 15px;
        line-height: 1.9;

        color: #666;

        max-width: 340px;

        margin: auto;
    }


    /* =========================
   BUTTON
========================= */

    .popup-btn {
        margin-top: 34px;

        width: 100%;
        height: 58px;

        border: none;

        border-radius: 18px;

        background:
            linear-gradient(135deg,
                #D89A45,
                #C9893D);

        color: white;

        font-size: 15px;
        font-weight: 600;

        cursor: pointer;

        transition: 0.35s ease;
    }

    .popup-btn:hover {
        transform: translateY(-3px);
    }


    /* =========================
   MOBILE
========================= */

    @media (max-width: 768px) {

        .form-popup-card {
            padding: 36px 24px;

            border-radius: 28px;
        }

        .popup-screen h3 {
            font-size: 28px;
        }

        .popup-loader,
        .popup-success-icon,
        .popup-error-icon {
            width: 90px;
            height: 90px;
        }

    }
    </style>

</head>

<body>
    <?php include('components/header-hero.php'); ?>
    <?php include('components/trust.php'); ?>
    <?php include('components/why_us.php'); ?>
    <?php include('components/cta-banner-2.php'); ?>
    <?php include('components/campus-life.php'); ?>
    <?php include('components/bams-dept.php'); ?>
    <?php include('components/cta-banner.php'); ?>
    <?php include('components/footer.php'); ?>


    <!-- =========================
     FIXED AYURVEDA BAR
========================== -->

    <div class="fixed-ayurveda-bar">

        <div class="ayurveda-marquee">

            <div class="ayurveda-track">

                <!-- SET 1 -->

                <div class="ayurveda-item">

                    <div class="leaf-icon">
                        ❋
                    </div>

                    <span>
                        BAMS Admissions Open for Academic Session 2026–27
                    </span>

                </div>

                <div class="ayurveda-item">

                    <div class="leaf-icon">
                        ❋
                    </div>

                    <span>
                        NEET Qualified Students Can Apply for Admission Guidance
                    </span>

                </div>

                <div class="ayurveda-item">

                    <div class="leaf-icon">
                        ❋
                    </div>

                    <span>
                        Clinical Exposure • Modern Campus • Hostel Facilities
                    </span>

                </div>

                <div class="ayurveda-item">

                    <div class="leaf-icon">
                        ❋
                    </div>

                    <span>
                        Begin Your Journey in Holistic Medical Education
                    </span>

                </div>

                <!-- DUPLICATE SET -->

                <div class="ayurveda-item">

                    <div class="leaf-icon">
                        ❋
                    </div>

                    <span>
                        BAMS Admissions Open for Academic Session 2026–27
                    </span>

                </div>

                <div class="ayurveda-item">

                    <div class="leaf-icon">
                        ❋
                    </div>

                    <span>
                        NEET Qualified Students Can Apply for Admission Guidance
                    </span>

                </div>

                <div class="ayurveda-item">

                    <div class="leaf-icon">
                        ❋
                    </div>

                    <span>
                        Clinical Exposure • Modern Campus • Hostel Facilities
                    </span>

                </div>

                <div class="ayurveda-item">

                    <div class="leaf-icon">
                        ❋
                    </div>

                    <span>
                        Begin Your Journey in Holistic Medical Education
                    </span>

                </div>

            </div>

        </div>

    </div>


    <!-- =========================
     FORM POPUP
========================== -->

    <div class="form-popup-overlay" id="formPopupOverlay">

        <div class="form-popup-card" id="formPopupCard">

            <!-- LOADING -->

            <div class="popup-screen loading-screen active">

                <div class="popup-loader">

                    <div class="loader-ring"></div>

                    <div class="loader-center">
                        ❋
                    </div>

                </div>

                <h3>
                    Submitting Your Enquiry
                </h3>

                <p>
                    Please wait while we process your admission request.
                </p>

            </div>

            <!-- SUCCESS -->

            <div class="popup-screen success-screen">

                <div class="popup-success-icon">
                    ✓
                </div>

                <h3>
                    Enquiry Submitted Successfully
                </h3>

                <p>
                    Our admission counsellor will contact you shortly
                    regarding BAMS admissions.
                </p>

                <button class="popup-btn" id="popupCloseBtn">
                    Close
                </button>

            </div>

            <!-- ERROR -->

            <div class="popup-screen error-screen">

                <div class="popup-error-icon">
                    !
                </div>

                <h3>
                    Something Went Wrong
                </h3>

                <p id="errorMessage">
                    Please try again later.
                </p>

                <button class="popup-btn" id="popupErrorBtn">
                    Try Again
                </button>

            </div>

        </div>

    </div>

    <script>
    /* =========================
   POPUP ELEMENTS
========================= */
    document.addEventListener("DOMContentLoaded", () => {

        const popupOverlay =
            document.getElementById("formPopupOverlay");

        const loadingScreen =
            document.querySelector(".loading-screen");

        const successScreen =
            document.querySelector(".success-screen");

        const errorScreen =
            document.querySelector(".error-screen");

        const errorMessage =
            document.getElementById("errorMessage");


        /* =========================
           OPEN POPUP
        ========================= */

        function openPopup() {

            popupOverlay.classList.add("active");

        }


        /* =========================
           CLOSE POPUP
        ========================= */

        function closePopup() {

            popupOverlay.classList.remove("active");

        }


        /* =========================
           SCREEN SWITCH
        ========================= */

        function showScreen(screen) {

            loadingScreen.classList.remove("active");
            successScreen.classList.remove("active");
            errorScreen.classList.remove("active");

            screen.classList.add("active");

        }


        /* =========================
           FORM SUBMIT
        ========================= */

        document
            .getElementById("admissionForm")
            .addEventListener("submit", async function(e) {

                e.preventDefault();

                const form = document.getElementById("admissionForm");

                const formData = new FormData(form);

                openPopup();

                showScreen(loadingScreen);

                try {

                    const response = await fetch("submit.php", {

                        method: "POST",
                        body: formData

                    });

                    const text = await response.text();

                    console.log(text);

                    const result = JSON.parse(text);

                    if (result.status === "success") {

                        showScreen(successScreen);

                        form.reset();

                        generateCaptcha();

                    } else {

                        errorMessage.innerText =
                            result.message ||
                            "Something went wrong.";

                        showScreen(errorScreen);

                    }

                } catch (error) {

                    errorMessage.innerText =
                        "Unable to submit the form right now.";

                    showScreen(errorScreen);

                }

            });


        /* =========================
           CLOSE BUTTONS
        ========================    = */

        document
            .getElementById("popupCloseBtn")
            .addEventListener("click", closePopup);

        document
            .getElementById("popupErrorBtn")
            .addEventListener("click", closePopup);

    });
    </script>
</body>

</html>