Bargarh Bus Pickup Road Route<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" integrity=\"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD\/miZyoHS5obTRR9BMY=\" crossorigin=\"\"\/>\n <style>\n :root {\n --bg: #f6f4ef; --surface: #fffdfa; --surface-2: #f1ede5; --text: #1f2937;\n --muted: #6b7280; --line: #d8d2c7; --primary: #0f766e; --accent: #ea580c;\n --route: #2563eb; --radius: 18px; --shadow: 0 14px 34px rgba(25, 32, 45, 0.10);\n }\n * { box-sizing: border-box; }\n body { margin: 0; font-family: Inter, sans-serif; background: linear-gradient(180deg, #f7f4ee 0%, #efe9dd 100%); color: var(--text); }\n .wrap { max-width: 1280px; margin: 0 auto; padding: 24px; }\n .top { display: grid; grid-template-columns: 400px 1fr; gap: 20px; align-items: start; }\n .panel { background: rgba(255,253,250,.94); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }\n .sidebar { padding: 2px; position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow: auto; }\n h1 { font-size: clamp(1.8rem, 2vw, 2.6rem); line-height: 1.1; margin: 0 0 10px; }\n .sub,.note,.stats { color: var(--muted); font-size: 0.95rem; }\n .sub { margin-bottom: 18px; }\n .legend { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 18px; }\n .pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface-2); padding: 8px 12px; border-radius: 999px; font-size: 0.88rem; color: #374151; }\n .dot { width: 10px; height: 10px; border-radius: 50%; }\n .route-list { display: grid; gap: 10px; margin-top: 16px; }\n .stop { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #e7e2d8; }\n .num { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: white; display: grid; place-items: center; font-weight: 700; }\n .stop h3 { margin: 0 0 4px; font-size: 0.70rem; }\n\t.stop a { margin: 0 0 4px; font-size: 0.60rem; }\n .meta { color: var(--muted); font-size: 0.68rem; line-height: 1.4; }\n .map-card { padding: 12px; }\n #map { width: 100%; height: 82vh; min-height: 620px; border-radius: calc(var(--radius) - 6px); }\n .stats { margin-top: 8px; line-height: 1.5; }\n .form-shell { margin-top: 18px; padding: 16px; background: #fff; border: 1px solid #e7e2d8; border-radius: 16px; }\n .form-shell h2 { margin: 0 0 12px; font-size: 1.05rem; }\n .mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }\n .mode-btn { border: 1px solid var(--line); background: var(--surface-2); color: #374151; padding: 10px 12px; border-radius: 12px; font-weight: 600; }\n .mode-btn.active { background: var(--primary); color: white; border-color: var(--primary); }\n .trip-form { display: grid; gap: 12px; }\n .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n .field { display: grid; gap: 6px; }\n .field label { font-size: 0.70rem; font-weight: 600; color: #374151; }\n .field input, .field select, .field textarea { width: 100%; padding: 11px 12px; border: 1px solid #d7d2c7; border-radius: 12px; background: #fffdfa; color: var(--text); }\n .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid rgba(15,118,110,.18); border-color: var(--primary); }\n .field textarea { min-height: 78px; resize: vertical; }\n .helper { font-size: 0.8rem; color: var(--muted); }\n .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }\n .btn { border: 1px solid var(--line); background: #fff; color: #374151; padding: 10px 14px; border-radius: 12px; font-weight: 600; }\n .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }\n .summary { margin-top: 14px; padding: 12px; border-radius: 12px; background: #f7fbfa; border: 1px solid #d6ebe7; display: none; }\n .summary.show { display: block; }\n .summary h3 { margin: 0 0 8px; font-size: 0.95rem; }\n .summary-list { display: grid; gap: 6px; font-size: 0.88rem; color: #374151; }\n .marker-pin { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; border: 3px solid #fff; box-shadow: 0 8px 18px rgba(15,118,110,.35); display: grid; place-items: center; font-weight: 700; font-size: 14px; }\n .start-pin { background: var(--accent); box-shadow: 0 8px 18px rgba(234,88,12,.35); }\n @media (max-width: 980px) { .top { grid-template-columns: 1fr; } .sidebar { position: static; } #map { height: 68vh; min-height: 420px; } }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <div class=\"top\">\n <aside class=\"panel sidebar\">\n\n <section class=\"form-shell\">\n <h2>Pickup details form<\/h2>\n <div class=\"mode-switch\" role=\"tablist\" aria-label=\"Transport type\">\n <button class=\"mode-btn active\" id=\"trainTab\" type=\"button\" data-mode=\"train\">Train pickup<\/button>\n <button class=\"mode-btn\" id=\"busTab\" type=\"button\" data-mode=\"bus\">Bus pickup<\/button>\n <\/div>\n\n <form class=\"trip-form\" id=\"tripForm\">\n <div class=\"field\">\n <label for=\"transportName\" id=\"transportNameLabel\">Train name<\/label>\n <input id=\"transportName\" name=\"transportName\" type=\"text\" placeholder=\"Enter train name\" required \/>\n <\/div>\n <div class=\"grid-2\">\n <div class=\"field\">\n <label for=\"arrivalDate\">Arrival date<\/label>\n <input id=\"arrivalDate\" name=\"arrivalDate\" type=\"date\" required \/>\n <\/div>\n <div class=\"field\">\n <label for=\"arrivalTime\" id=\"arrivalTimeLabel\">Arrival time<\/label>\n <input id=\"arrivalTime\" name=\"arrivalTime\" type=\"time\" required \/>\n <\/div>\n <\/div>\n <div class=\"grid-2\">\n <div class=\"field\">\n <label for=\"participants\">No. of participants<\/label>\n <input id=\"participants\" name=\"participants\" type=\"number\" min=\"1\" step=\"1\" placeholder=\"Enter count\" required \/>\n <\/div>\n <div class=\"field\">\n <label for=\"contactNumber\">Contact number<\/label>\n <input id=\"contactNumber\" name=\"contactNumber\" type=\"tel\" placeholder=\"Enter phone number\" required \/>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label for=\"schoolName\">School name<\/label>\n <input id=\"schoolName\" name=\"schoolName\" type=\"text\" placeholder=\"Enter school or group name\" required \/>\n <\/div>\n <div class=\"field\">\n <label for=\"pickupStop\">Pickup point<\/label>\n <select id=\"pickupStop\" name=\"pickupStop\" required><\/select>\n <div class=\"helper\">Choose the stop where the team will receive the participants.<\/div>\n <\/div>\n <div class=\"field\">\n <label for=\"notes\">Notes<\/label>\n <textarea id=\"notes\" name=\"notes\" placeholder=\"Optional notes for pickup coordination\"><\/textarea>\n <\/div>\n <div class=\"actions\">\n <button class=\"btn btn-primary\" type=\"submit\">Save details<\/button>\n <button class=\"btn\" type=\"reset\">Clear form<\/button>\n\t\t\t <a class=\"btn\" href=\"https:\/\/thepioneers.saorg.in\/index.php\/contact\/\" target=\"_blank\" rel=\"noopener noreferrer\">Contact<\/a>\n <\/div>\n <\/form>\n\n <div class=\"summary\" id=\"summaryBox\" aria-live=\"polite\">\n <h3>Saved pickup summary<\/h3>\n <div class=\"summary-list\" id=\"summaryList\"><\/div>\n <\/div>\n <\/section>\n\n <div class=\"route-list\" id=\"routeList\"><\/div>\n <\/aside>\n <main class=\"panel map-card\"><div id=\"map\"><\/div><\/main>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\" integrity=\"sha256-20nQCchB9co0qIjJZRGuk2\/Z9VM+kNiyxNV1lvTlZBo=\" crossorigin=\"\"><\/script>\n<script>\n const points = [\n {\"name\": \"Railway Station Bargarh\", \"lat\": 21.33309924037205, \"lng\": 83.64303654680624, \"order\": 1},\n {\"name\": \"Private Bus Stand\", \"lat\": 21.3453344053674, \"lng\": 83.62839323672833, \"order\": 2},\n {\"name\": \"Goverment Bus Stand\", \"lat\": 21.337689539999527, \"lng\": 83.62158977545246, \"order\": 3},\n {\"name\": \"Matrusadan, Bargarh\", \"lat\": 21.338676369562098, \"lng\": 83.62011328889038, \"order\": 4},\n {\"name\": \"Bhatli Chowk\", \"lat\": 21.342746029996793, \"lng\": 83.60898661733222, \"order\": 5},\n {\"name\": \"Sri Aurobindo Sadhana Mandir\", \"lat\": 21.371640603124224, \"lng\": 83.60354018977884, \"order\": 6}\n ];\n\n const routeList = document.getElementById('routeList');\n const stats = document.getElementById('stats');\n\n const tripForm = document.getElementById('tripForm');\n const pickupStop = document.getElementById('pickupStop');\n const summaryBox = document.getElementById('summaryBox');\n const summaryList = document.getElementById('summaryList');\n const modeButtons = Array.from(document.querySelectorAll('.mode-btn'));\n const transportNameLabel = document.getElementById('transportNameLabel');\n const arrivalTimeLabel = document.getElementById('arrivalTimeLabel');\n const submitBtn = tripForm.querySelector('button[type=\"submit\"]');\n\n let currentMode = 'train';\n\n \/\/ IMPORTANT:\n \/\/ 1) Create bot with BotFather\n \/\/ 2) Add bot to your Telegram group\n \/\/ 3) Get the group chat_id using getUpdates\n const TELEGRAM_BOT_TOKEN = '8696250244:AAH710cInUppRqh9yJLx_KjBa9LM_aG_Iyo';\n const TELEGRAM_CHAT_ID = '-1003602179540';\n\n pickupStop.innerHTML = points.map(\n p => `<option value=\"${p.name}\">${p.order}. ${p.name}<\/option>`\n ).join('');\n\n function applyMode(mode) {\n currentMode = mode;\n const isTrain = mode === 'train';\n transportNameLabel.textContent = isTrain ? 'Train name' : 'Bus name \/ number';\n arrivalTimeLabel.textContent = isTrain ? 'Arrival time' : 'Bus arrival time';\n document.getElementById('transportName').placeholder = isTrain ? 'Enter train name' : 'Enter bus name or number';\n modeButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.mode === mode));\n }\n\n modeButtons.forEach(btn => {\n btn.addEventListener('click', () => applyMode(btn.dataset.mode));\n });\n\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text ?? '';\n return div.innerHTML;\n }\n\n function buildTelegramMessage(formData) {\n const transportLabel = currentMode === 'train' ? 'Train' : 'Bus';\n\n const lines = [\n '\ud83d\ude8c Pickup Request Submitted',\n '',\n `Type: ${transportLabel} pickup`,\n `${transportLabel}: ${formData.get('transportName')}`,\n `Arrival Date: ${formData.get('arrivalDate')}`,\n `Arrival Time: ${formData.get('arrivalTime')}`,\n `Participants: ${formData.get('participants')}`,\n `Contact: ${formData.get('contactNumber')}`,\n `School: ${formData.get('schoolName')}`,\n `Pickup Point: ${formData.get('pickupStop')}`\n ];\n\n const note = (formData.get('notes') || '').trim();\n if (note) lines.push(`Notes: ${note}`);\n\n return lines.join('\\n');\n }\n\n async function sendToTelegram(message) {\n if (\n TELEGRAM_BOT_TOKEN === 'YOUR_BOT_TOKEN_HERE' ||\n TELEGRAM_CHAT_ID === 'YOUR_GROUP_CHAT_ID_HERE'\n ) {\n throw new Error('Telegram bot token or chat ID is not configured.');\n }\n\n const url = `https:\/\/api.telegram.org\/bot${TELEGRAM_BOT_TOKEN}\/sendMessage`;\n\n const response = await fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify({\n chat_id: TELEGRAM_CHAT_ID,\n text: message\n })\n });\n\n const data = await response.json();\n\n if (!response.ok || !data.ok) {\n throw new Error(data.description || 'Telegram message failed.');\n }\n\n return data;\n }\n\n tripForm.addEventListener('submit', async (e) => {\n e.preventDefault();\n\n const formData = new FormData(tripForm);\n const rows = [\n `${currentMode === 'train' ? 'Train' : 'Bus'}: ${formData.get('transportName')}`,\n `Arrival: ${formData.get('arrivalDate')} at ${formData.get('arrivalTime')}`,\n `Participants: ${formData.get('participants')}`,\n `Contact: ${formData.get('contactNumber')}`,\n `School: ${formData.get('schoolName')}`,\n `Pickup point: ${formData.get('pickupStop')}`\n ];\n\n const note = (formData.get('notes') || '').trim();\n if (note) rows.push(`Notes: ${note}`);\n\n summaryList.innerHTML = rows.map(row => `<div>${escapeHtml(row)}<\/div>`).join('');\n summaryBox.classList.add('show');\n\n const originalBtnText = submitBtn.textContent;\n submitBtn.disabled = true;\n submitBtn.textContent = 'Sending...';\n\n try {\n const telegramMessage = buildTelegramMessage(formData);\n await sendToTelegram(telegramMessage);\n\n summaryList.innerHTML += `<div style=\"color:#0f766e;font-weight:600;\">Sent to Telegram group successfully.<\/div>`;\n tripForm.reset();\n applyMode('train');\n } catch (error) {\n summaryList.innerHTML += `<div style=\"color:#b91c1c;font-weight:600;\">Telegram send failed: ${escapeHtml(error.message)}<\/div>`;\n } finally {\n submitBtn.disabled = false;\n submitBtn.textContent = originalBtnText;\n }\n });\n\n tripForm.addEventListener('reset', () => {\n summaryBox.classList.remove('show');\n setTimeout(() => applyMode(currentMode), 0);\n });\n\n applyMode('train');\n\n routeList.innerHTML = points.map(p => `\n <section class=\"stop\">\n <div class=\"num\">${p.order}<\/div>\n <div>\n <h3>${p.name}<\/h3>\n\t\t<a href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=${p.lat},${p.lng}\" target=\"_blank\" rel=\"noopener noreferrer\"> View on map <\/a>\n <\/div>\n <\/section>\n `).join('');\n\n const map = L.map('map', { zoomControl: true });\n\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n maxZoom: 19,\n attribution: '© <a href=\"https:\/\/www.openstreetmap.org\/copyright\" target=\"_blank\" rel=\"noopener noreferrer\">OpenStreetMap<\/a> contributors'\n }).addTo(map);\n\n const makeIcon = (order, start = false) => L.divIcon({\n className: '',\n html: `<div class=\"marker-pin ${start ? 'start-pin' : ''}\">${order}<\/div>`,\n iconSize: [34, 34],\n iconAnchor: [17, 17],\n popupAnchor: [0, -12]\n });\n\n points.forEach((p, i) => {\n L.marker([p.lat, p.lng], { icon: makeIcon(p.order, i === 0) })\n .addTo(map)\n .bindPopup(`<strong>${p.order}. ${p.name}<\/strong><br>${p.lat.toFixed(6)}, ${p.lng.toFixed(6)}`);\n });\n\n const fallbackLine = L.polyline(\n points.map(p => [p.lat, p.lng]),\n { color: '#94a3b8', weight: 3, dashArray: '6 8', opacity: 0.55 }\n );\n\n async function fetchSegmentRoute(start, end, hint = '') {\n const coordString = `${start.lng},${start.lat};${end.lng},${end.lat}`;\n const url = `https:\/\/router.project-osrm.org\/route\/v1\/driving\/${coordString}?overview=full&geometries=geojson&steps=true`;\n const res = await fetch(url);\n const data = await res.json();\n if (!data.routes || !data.routes.length) {\n throw new Error(`No segment route returned for ${hint}`);\n }\n return data.routes[0];\n }\n\n async function drawRoute() {\n try {\n const segments = [];\n for (let i = 0; i < points.length - 1; i++) {\n segments.push(await fetchSegmentRoute(points[i], points[i + 1], `${i + 1}-${i + 2}`));\n }\n\n const allLatLngs = [];\n let totalDistance = 0;\n let totalDuration = 0;\n\n segments.forEach((segment, index) => {\n let coords = segment.geometry.coordinates.map(c => [c[1], c[0]]);\n if (index > 0) coords = coords.slice(1);\n allLatLngs.push(...coords);\n totalDistance += segment.distance;\n totalDuration += segment.duration;\n });\n\n const line = L.polyline(allLatLngs, {\n color: '#2563eb',\n weight: 5,\n opacity: 0.9,\n lineJoin: 'round'\n }).addTo(map);\n\n map.fitBounds(line.getBounds(), { padding: [40, 40] });\n\n const km = (totalDistance \/ 1000).toFixed(1);\n const min = Math.round(totalDuration \/ 60);\n stats.textContent = `Estimated road route: ${km} km \u00b7 about ${min} min driving time.`;\n } catch (e) {\n fallbackLine.addTo(map);\n map.fitBounds(fallbackLine.getBounds(), { padding: [40, 40] });\n stats.textContent = 'Road routing could not be loaded right now, so a fallback connector line is shown.';\n }\n }\n\n drawRoute();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Bargarh Bus Pickup Road Route Pickup details form Train pickup Bus pickup Train name Arrival date Arrival time No. of participants Contact number School name Pickup point Choose the stop where the team will receive the participants. Notes Save details Clear form Contact Saved pickup summary<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1498","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/pages\/1498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/comments?post=1498"}],"version-history":[{"count":19,"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/pages\/1498\/revisions"}],"predecessor-version":[{"id":1521,"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/pages\/1498\/revisions\/1521"}],"wp:attachment":[{"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/media?parent=1498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\n\n \n \n Bargarh Bus Pickup Road Route<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" integrity=\"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD\/miZyoHS5obTRR9BMY=\" crossorigin=\"\"\/>\n <style>\n :root {\n --bg: #f6f4ef; --surface: #fffdfa; --surface-2: #f1ede5; --text: #1f2937;\n --muted: #6b7280; --line: #d8d2c7; --primary: #0f766e; --accent: #ea580c;\n --route: #2563eb; --radius: 18px; --shadow: 0 14px 34px rgba(25, 32, 45, 0.10);\n }\n * { box-sizing: border-box; }\n body { margin: 0; font-family: Inter, sans-serif; background: linear-gradient(180deg, #f7f4ee 0%, #efe9dd 100%); color: var(--text); }\n .wrap { max-width: 1280px; margin: 0 auto; padding: 24px; }\n .top { display: grid; grid-template-columns: 400px 1fr; gap: 20px; align-items: start; }\n .panel { background: rgba(255,253,250,.94); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }\n .sidebar { padding: 2px; position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow: auto; }\n h1 { font-size: clamp(1.8rem, 2vw, 2.6rem); line-height: 1.1; margin: 0 0 10px; }\n .sub,.note,.stats { color: var(--muted); font-size: 0.95rem; }\n .sub { margin-bottom: 18px; }\n .legend { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 18px; }\n .pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface-2); padding: 8px 12px; border-radius: 999px; font-size: 0.88rem; color: #374151; }\n .dot { width: 10px; height: 10px; border-radius: 50%; }\n .route-list { display: grid; gap: 10px; margin-top: 16px; }\n .stop { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #e7e2d8; }\n .num { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: white; display: grid; place-items: center; font-weight: 700; }\n .stop h3 { margin: 0 0 4px; font-size: 0.70rem; }\n\t.stop a { margin: 0 0 4px; font-size: 0.60rem; }\n .meta { color: var(--muted); font-size: 0.68rem; line-height: 1.4; }\n .map-card { padding: 12px; }\n #map { width: 100%; height: 82vh; min-height: 620px; border-radius: calc(var(--radius) - 6px); }\n .stats { margin-top: 8px; line-height: 1.5; }\n .form-shell { margin-top: 18px; padding: 16px; background: #fff; border: 1px solid #e7e2d8; border-radius: 16px; }\n .form-shell h2 { margin: 0 0 12px; font-size: 1.05rem; }\n .mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }\n .mode-btn { border: 1px solid var(--line); background: var(--surface-2); color: #374151; padding: 10px 12px; border-radius: 12px; font-weight: 600; }\n .mode-btn.active { background: var(--primary); color: white; border-color: var(--primary); }\n .trip-form { display: grid; gap: 12px; }\n .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n .field { display: grid; gap: 6px; }\n .field label { font-size: 0.70rem; font-weight: 600; color: #374151; }\n .field input, .field select, .field textarea { width: 100%; padding: 11px 12px; border: 1px solid #d7d2c7; border-radius: 12px; background: #fffdfa; color: var(--text); }\n .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid rgba(15,118,110,.18); border-color: var(--primary); }\n .field textarea { min-height: 78px; resize: vertical; }\n .helper { font-size: 0.8rem; color: var(--muted); }\n .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }\n .btn { border: 1px solid var(--line); background: #fff; color: #374151; padding: 10px 14px; border-radius: 12px; font-weight: 600; }\n .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }\n .summary { margin-top: 14px; padding: 12px; border-radius: 12px; background: #f7fbfa; border: 1px solid #d6ebe7; display: none; }\n .summary.show { display: block; }\n .summary h3 { margin: 0 0 8px; font-size: 0.95rem; }\n .summary-list { display: grid; gap: 6px; font-size: 0.88rem; color: #374151; }\n .marker-pin { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; border: 3px solid #fff; box-shadow: 0 8px 18px rgba(15,118,110,.35); display: grid; place-items: center; font-weight: 700; font-size: 14px; }\n .start-pin { background: var(--accent); box-shadow: 0 8px 18px rgba(234,88,12,.35); }\n @media (max-width: 980px) { .top { grid-template-columns: 1fr; } .sidebar { position: static; } #map { height: 68vh; min-height: 420px; } }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <div class=\"top\">\n <aside class=\"panel sidebar\">\n\n <section class=\"form-shell\">\n <h2>Pickup details form<\/h2>\n <div class=\"mode-switch\" role=\"tablist\" aria-label=\"Transport type\">\n <button class=\"mode-btn active\" id=\"trainTab\" type=\"button\" data-mode=\"train\">Train pickup<\/button>\n <button class=\"mode-btn\" id=\"busTab\" type=\"button\" data-mode=\"bus\">Bus pickup<\/button>\n <\/div>\n\n <form class=\"trip-form\" id=\"tripForm\">\n <div class=\"field\">\n <label for=\"transportName\" id=\"transportNameLabel\">Train name<\/label>\n <input id=\"transportName\" name=\"transportName\" type=\"text\" placeholder=\"Enter train name\" required \/>\n <\/div>\n <div class=\"grid-2\">\n <div class=\"field\">\n <label for=\"arrivalDate\">Arrival date<\/label>\n <input id=\"arrivalDate\" name=\"arrivalDate\" type=\"date\" required \/>\n <\/div>\n <div class=\"field\">\n <label for=\"arrivalTime\" id=\"arrivalTimeLabel\">Arrival time<\/label>\n <input id=\"arrivalTime\" name=\"arrivalTime\" type=\"time\" required \/>\n <\/div>\n <\/div>\n <div class=\"grid-2\">\n <div class=\"field\">\n <label for=\"participants\">No. of participants<\/label>\n <input id=\"participants\" name=\"participants\" type=\"number\" min=\"1\" step=\"1\" placeholder=\"Enter count\" required \/>\n <\/div>\n <div class=\"field\">\n <label for=\"contactNumber\">Contact number<\/label>\n <input id=\"contactNumber\" name=\"contactNumber\" type=\"tel\" placeholder=\"Enter phone number\" required \/>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label for=\"schoolName\">School name<\/label>\n <input id=\"schoolName\" name=\"schoolName\" type=\"text\" placeholder=\"Enter school or group name\" required \/>\n <\/div>\n <div class=\"field\">\n <label for=\"pickupStop\">Pickup point<\/label>\n <select id=\"pickupStop\" name=\"pickupStop\" required><\/select>\n <div class=\"helper\">Choose the stop where the team will receive the participants.<\/div>\n <\/div>\n <div class=\"field\">\n <label for=\"notes\">Notes<\/label>\n <textarea id=\"notes\" name=\"notes\" placeholder=\"Optional notes for pickup coordination\"><\/textarea>\n <\/div>\n <div class=\"actions\">\n <button class=\"btn btn-primary\" type=\"submit\">Save details<\/button>\n <button class=\"btn\" type=\"reset\">Clear form<\/button>\n\t\t\t <a class=\"btn\" href=\"https:\/\/thepioneers.saorg.in\/index.php\/contact\/\" target=\"_blank\" rel=\"noopener noreferrer\">Contact<\/a>\n <\/div>\n <\/form>\n\n <div class=\"summary\" id=\"summaryBox\" aria-live=\"polite\">\n <h3>Saved pickup summary<\/h3>\n <div class=\"summary-list\" id=\"summaryList\"><\/div>\n <\/div>\n <\/section>\n\n <div class=\"route-list\" id=\"routeList\"><\/div>\n <\/aside>\n <main class=\"panel map-card\"><div id=\"map\"><\/div><\/main>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\" integrity=\"sha256-20nQCchB9co0qIjJZRGuk2\/Z9VM+kNiyxNV1lvTlZBo=\" crossorigin=\"\"><\/script>\n<script>\n const points = [\n {\"name\": \"Railway Station Bargarh\", \"lat\": 21.33309924037205, \"lng\": 83.64303654680624, \"order\": 1},\n {\"name\": \"Private Bus Stand\", \"lat\": 21.3453344053674, \"lng\": 83.62839323672833, \"order\": 2},\n {\"name\": \"Goverment Bus Stand\", \"lat\": 21.337689539999527, \"lng\": 83.62158977545246, \"order\": 3},\n {\"name\": \"Matrusadan, Bargarh\", \"lat\": 21.338676369562098, \"lng\": 83.62011328889038, \"order\": 4},\n {\"name\": \"Bhatli Chowk\", \"lat\": 21.342746029996793, \"lng\": 83.60898661733222, \"order\": 5},\n {\"name\": \"Sri Aurobindo Sadhana Mandir\", \"lat\": 21.371640603124224, \"lng\": 83.60354018977884, \"order\": 6}\n ];\n\n const routeList = document.getElementById('routeList');\n const stats = document.getElementById('stats');\n\n const tripForm = document.getElementById('tripForm');\n const pickupStop = document.getElementById('pickupStop');\n const summaryBox = document.getElementById('summaryBox');\n const summaryList = document.getElementById('summaryList');\n const modeButtons = Array.from(document.querySelectorAll('.mode-btn'));\n const transportNameLabel = document.getElementById('transportNameLabel');\n const arrivalTimeLabel = document.getElementById('arrivalTimeLabel');\n const submitBtn = tripForm.querySelector('button[type=\"submit\"]');\n\n let currentMode = 'train';\n\n \/\/ IMPORTANT:\n \/\/ 1) Create bot with BotFather\n \/\/ 2) Add bot to your Telegram group\n \/\/ 3) Get the group chat_id using getUpdates\n const TELEGRAM_BOT_TOKEN = '8696250244:AAH710cInUppRqh9yJLx_KjBa9LM_aG_Iyo';\n const TELEGRAM_CHAT_ID = '-1003602179540';\n\n pickupStop.innerHTML = points.map(\n p => `<option value=\"${p.name}\">${p.order}. ${p.name}<\/option>`\n ).join('');\n\n function applyMode(mode) {\n currentMode = mode;\n const isTrain = mode === 'train';\n transportNameLabel.textContent = isTrain ? 'Train name' : 'Bus name \/ number';\n arrivalTimeLabel.textContent = isTrain ? 'Arrival time' : 'Bus arrival time';\n document.getElementById('transportName').placeholder = isTrain ? 'Enter train name' : 'Enter bus name or number';\n modeButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.mode === mode));\n }\n\n modeButtons.forEach(btn => {\n btn.addEventListener('click', () => applyMode(btn.dataset.mode));\n });\n\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text ?? '';\n return div.innerHTML;\n }\n\n function buildTelegramMessage(formData) {\n const transportLabel = currentMode === 'train' ? 'Train' : 'Bus';\n\n const lines = [\n '\ud83d\ude8c Pickup Request Submitted',\n '',\n `Type: ${transportLabel} pickup`,\n `${transportLabel}: ${formData.get('transportName')}`,\n `Arrival Date: ${formData.get('arrivalDate')}`,\n `Arrival Time: ${formData.get('arrivalTime')}`,\n `Participants: ${formData.get('participants')}`,\n `Contact: ${formData.get('contactNumber')}`,\n `School: ${formData.get('schoolName')}`,\n `Pickup Point: ${formData.get('pickupStop')}`\n ];\n\n const note = (formData.get('notes') || '').trim();\n if (note) lines.push(`Notes: ${note}`);\n\n return lines.join('\\n');\n }\n\n async function sendToTelegram(message) {\n if (\n TELEGRAM_BOT_TOKEN === 'YOUR_BOT_TOKEN_HERE' ||\n TELEGRAM_CHAT_ID === 'YOUR_GROUP_CHAT_ID_HERE'\n ) {\n throw new Error('Telegram bot token or chat ID is not configured.');\n }\n\n const url = `https:\/\/api.telegram.org\/bot${TELEGRAM_BOT_TOKEN}\/sendMessage`;\n\n const response = await fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify({\n chat_id: TELEGRAM_CHAT_ID,\n text: message\n })\n });\n\n const data = await response.json();\n\n if (!response.ok || !data.ok) {\n throw new Error(data.description || 'Telegram message failed.');\n }\n\n return data;\n }\n\n tripForm.addEventListener('submit', async (e) => {\n e.preventDefault();\n\n const formData = new FormData(tripForm);\n const rows = [\n `${currentMode === 'train' ? 'Train' : 'Bus'}: ${formData.get('transportName')}`,\n `Arrival: ${formData.get('arrivalDate')} at ${formData.get('arrivalTime')}`,\n `Participants: ${formData.get('participants')}`,\n `Contact: ${formData.get('contactNumber')}`,\n `School: ${formData.get('schoolName')}`,\n `Pickup point: ${formData.get('pickupStop')}`\n ];\n\n const note = (formData.get('notes') || '').trim();\n if (note) rows.push(`Notes: ${note}`);\n\n summaryList.innerHTML = rows.map(row => `<div>${escapeHtml(row)}<\/div>`).join('');\n summaryBox.classList.add('show');\n\n const originalBtnText = submitBtn.textContent;\n submitBtn.disabled = true;\n submitBtn.textContent = 'Sending...';\n\n try {\n const telegramMessage = buildTelegramMessage(formData);\n await sendToTelegram(telegramMessage);\n\n summaryList.innerHTML += `<div style=\"color:#0f766e;font-weight:600;\">Sent to Telegram group successfully.<\/div>`;\n tripForm.reset();\n applyMode('train');\n } catch (error) {\n summaryList.innerHTML += `<div style=\"color:#b91c1c;font-weight:600;\">Telegram send failed: ${escapeHtml(error.message)}<\/div>`;\n } finally {\n submitBtn.disabled = false;\n submitBtn.textContent = originalBtnText;\n }\n });\n\n tripForm.addEventListener('reset', () => {\n summaryBox.classList.remove('show');\n setTimeout(() => applyMode(currentMode), 0);\n });\n\n applyMode('train');\n\n routeList.innerHTML = points.map(p => `\n <section class=\"stop\">\n <div class=\"num\">${p.order}<\/div>\n <div>\n <h3>${p.name}<\/h3>\n\t\t<a href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=${p.lat},${p.lng}\" target=\"_blank\" rel=\"noopener noreferrer\"> View on map <\/a>\n <\/div>\n <\/section>\n `).join('');\n\n const map = L.map('map', { zoomControl: true });\n\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n maxZoom: 19,\n attribution: '© <a href=\"https:\/\/www.openstreetmap.org\/copyright\" target=\"_blank\" rel=\"noopener noreferrer\">OpenStreetMap<\/a> contributors'\n }).addTo(map);\n\n const makeIcon = (order, start = false) => L.divIcon({\n className: '',\n html: `<div class=\"marker-pin ${start ? 'start-pin' : ''}\">${order}<\/div>`,\n iconSize: [34, 34],\n iconAnchor: [17, 17],\n popupAnchor: [0, -12]\n });\n\n points.forEach((p, i) => {\n L.marker([p.lat, p.lng], { icon: makeIcon(p.order, i === 0) })\n .addTo(map)\n .bindPopup(`<strong>${p.order}. ${p.name}<\/strong><br>${p.lat.toFixed(6)}, ${p.lng.toFixed(6)}`);\n });\n\n const fallbackLine = L.polyline(\n points.map(p => [p.lat, p.lng]),\n { color: '#94a3b8', weight: 3, dashArray: '6 8', opacity: 0.55 }\n );\n\n async function fetchSegmentRoute(start, end, hint = '') {\n const coordString = `${start.lng},${start.lat};${end.lng},${end.lat}`;\n const url = `https:\/\/router.project-osrm.org\/route\/v1\/driving\/${coordString}?overview=full&geometries=geojson&steps=true`;\n const res = await fetch(url);\n const data = await res.json();\n if (!data.routes || !data.routes.length) {\n throw new Error(`No segment route returned for ${hint}`);\n }\n return data.routes[0];\n }\n\n async function drawRoute() {\n try {\n const segments = [];\n for (let i = 0; i < points.length - 1; i++) {\n segments.push(await fetchSegmentRoute(points[i], points[i + 1], `${i + 1}-${i + 2}`));\n }\n\n const allLatLngs = [];\n let totalDistance = 0;\n let totalDuration = 0;\n\n segments.forEach((segment, index) => {\n let coords = segment.geometry.coordinates.map(c => [c[1], c[0]]);\n if (index > 0) coords = coords.slice(1);\n allLatLngs.push(...coords);\n totalDistance += segment.distance;\n totalDuration += segment.duration;\n });\n\n const line = L.polyline(allLatLngs, {\n color: '#2563eb',\n weight: 5,\n opacity: 0.9,\n lineJoin: 'round'\n }).addTo(map);\n\n map.fitBounds(line.getBounds(), { padding: [40, 40] });\n\n const km = (totalDistance \/ 1000).toFixed(1);\n const min = Math.round(totalDuration \/ 60);\n stats.textContent = `Estimated road route: ${km} km \u00b7 about ${min} min driving time.`;\n } catch (e) {\n fallbackLine.addTo(map);\n map.fitBounds(fallbackLine.getBounds(), { padding: [40, 40] });\n stats.textContent = 'Road routing could not be loaded right now, so a fallback connector line is shown.';\n }\n }\n\n drawRoute();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Bargarh Bus Pickup Road Route Pickup details form Train pickup Bus pickup Train name Arrival date Arrival time No. of participants Contact number School name Pickup point Choose the stop where the team will receive the participants. Notes Save details Clear form Contact Saved pickup summary<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1498","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/pages\/1498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/comments?post=1498"}],"version-history":[{"count":19,"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/pages\/1498\/revisions"}],"predecessor-version":[{"id":1521,"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/pages\/1498\/revisions\/1521"}],"wp:attachment":[{"href":"https:\/\/thepioneers.saorg.in\/index.php\/wp-json\/wp\/v2\/media?parent=1498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}