https://studyinindia.gov.in/js/customjs/whyindia.js?v=DLceoU_zo266CHbTt0uw024nG1Dpqm4aMwReJ5wfxNg

1(function () {
2    "use strict";
3
4    // ── Cost of Living ──────────────────────────────────────────────────────────
5
6    function initCostOfLiving() {
7        const cityButtons = document.querySelectorAll(".city-btn");
8        if (!cityButtons.length) return;
9
10        const accommodation = document.querySelector(".cs-exp-item-top .cs-exp-description");
11        const food = document.querySelector(".cs-exp-item-middle .cs-exp-description");
12        const transport = document.querySelector(".cs-exp-item-bottom .cs-exp-description");
13        const total = document.querySelector(".total-amount");
14
15        cityButtons.forEach(function (button) {
16            button.addEventListener("click", async function () {
17                const city = button.textContent.trim();
18
19                cityButtons.forEach(function (btn) { btn.classList.remove("city-btn-active"); });
20                button.classList.add("city-btn-active");
21
22                accommodation.textContent = food.textContent = transport.textContent = "Loading...";
23                total.textContent = "Loading...";
24
25                try {
26                    const response = await fetch("?handler=CostOfLiving&cityName=" + encodeURIComponent(city));
27                    if (!response.ok) throw new Error("Data not found");
28
29                    const data = await response.json();
30                    const info = data[0];
31
32                    const currencySymbol = (info.act === 0 || !info.act) ? "₹" : info.act;
33                    accommodation.textContent = currencySymbol + " " + info.max_ACost + " / Month";
34                    food.textContent = currencySymbol + " " + info.max_FCost + " / Month";
35                    transport.textContent = "No data available";
36
37                    const totalCost = (info.max_ACost || 0) + (info.max_FCost || 0);
38                    total.textContent = currencySymbol + " " + totalCost.toLocaleString() + " / Month";
39
40                } catch (err) {
41                    accommodation.textContent = "No data available";
42                    food.textContent = "";
43                    transport.textContent = "";
44                    total.textContent = "--";
45                }
46            });
47        });
48    }
49
50    // ── Map Accordion ───────────────────────────────────────────────────────────
51
52    var currentActiveLocation = null;
53
54    function hideAllMapPopups() {
55        document.querySelectorAll(".location-dot").forEach(function (dot) {
56            dot.classList.remove("active");
57        });
58        document.querySelectorAll(".connection-line").forEach(function (line) {
59            line.classList.remove("active");
60        });
61        document.querySelectorAll(".connection-line1").forEach(function (line) {
62            line.classList.remove("active");
63        });
64        document.querySelectorAll(".svg-tooltip-group").forEach(function (tooltip) {
65            tooltip.classList.remove("visible");
66        });
67        currentActiveLocation = null;
68    }
69
70    function initMapAccordion() {
71        const headers = document.querySelectorAll(".accordion-header");
72        if (!headers.length) return;
73
74        headers.forEach(function (header) {
75            hideAllMapPopups();
76
77            header.addEventListener("click", function () {
78                const city = this.dataset.city;
79                const actualCity = city === "pune" ? "mumbai" : city;
80                const content = this.nextElementSibling;
81                const isActive = this.classList.contains("active");
82
83                // Close all
84                document.querySelectorAll(".accordion-header").forEach(function (h) {
85                    h.classList.remove("active");
86                    h.nextElementSibling.classList.remove("active");
87                });
88                document.querySelectorAll(".state").forEach(function (s) { s.classList.remove("active"); });
89                document.querySelectorAll(".city-marker").forEach(function (m) { m.classList.remove("visible"); });
90                document.querySelectorAll(".connection-line").forEach(function (l) { l.classList.remove("active"); });
91                document.querySelectorAll(".connection-line1").forEach(function (l) { l.classList.remove("active"); });
92                document.querySelectorAll(".svg-tooltip-group").forEach(function (t) { t.classList.remove("visible"); });
93
94                if (!isActive) {
95                    this.classList.add("active");
96                    content.classList.add("active");
97
98                    var cityMarker = document.getElementById(city + "-marker");
99                    if (cityMarker) cityMarker.classList.add("visible");
100
101                    var stateEl = document.querySelector("[data-region=\"" + actualCity + "\"]");
102                    if (stateEl) stateEl.classList.add("active");
103
104                    var line = document.querySelector("[data-location=\"" + city + "\"].connection-line");
105                    var line1 = document.querySelector("[data-location=\"" + city + "\"].connection-line1");
106                    var tooltip = document.querySelector("[data-location=\"" + city + "\"].svg-tooltip-group");
107                    if (line) line.classList.add("active");
108                    if (line1) line1.classList.add("active");
109                    if (tooltip) tooltip.classList.add("visible");
110                } else {
111                    hideAllMapPopups();
112                }
113            });
114        });
115
116        // Default: open Mumbai
117        var mumbaiHeader = document.querySelector("[data-city=\"mumbai\"]");
118        if (mumbaiHeader) {
119            mumbaiHeader.classList.add("active");
120            if (mumbaiHeader.nextElementSibling) {
121                mumbaiHeader.nextElementSibling.classList.add("active");
122            }
123        }
124        var mumbaiMarker = document.getElementById("mumbai-marker");
125        if (mumbaiMarker) mumbaiMarker.classList.add("visible");
126
127        var mumbaiLine = document.querySelector("[data-location=\"mumbai\"].connection-line");
128        var mumbaiLine1 = document.querySelector("[data-location=\"mumbai\"].connection-line1");
129        var mumbaiTooltip = document.querySelector("[data-location=\"mumbai\"].svg-tooltip-group");
130        if (mumbaiLine) mumbaiLine.classList.add("active");
131        if (mumbaiLine1) mumbaiLine1.classList.add("active");
132        if (mumbaiTooltip) mumbaiTooltip.classList.add("visible");
133    }
134
135    // ── Bootstrap ───────────────────────────────────────────────────────────────
136
137    document.addEventListener("DOMContentLoaded", function () {
138        initCostOfLiving();
139        initMapAccordion();
140    });

141
142}());