{"id":831,"date":"2026-06-30T10:04:56","date_gmt":"2026-06-30T10:04:56","guid":{"rendered":"https:\/\/xpressgas.com\/?page_id=831"},"modified":"2026-07-13T09:40:41","modified_gmt":"2026-07-13T09:40:41","slug":"station-finder","status":"publish","type":"page","link":"https:\/\/xpressgas.com\/index.php\/station-finder\/","title":{"rendered":"Station Finder"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"831\" class=\"elementor elementor-831\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f6f86d5 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"f6f86d5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b8ebb5 elementor-widget elementor-widget-html\" data-id=\"4b8ebb5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ===================================================================\r\n  LPG STATION FINDER \u2014 MODERN REGIONAL LIST VIEW\r\n  Paste this whole block into a WordPress \"Custom HTML\" block.\r\n=================================================================== -->\r\n<div id=\"lpg-station-finder-root\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  #lpg-station-finder-root {\r\n    --lpg-bg: #F7F8FA;\r\n    --lpg-surface: #FFFFFF;\r\n    --lpg-surface-soft: #F1F3F6;\r\n    --lpg-border: #EAECEF;\r\n    --lpg-text: #14171F;\r\n    --lpg-text-secondary: #6B7280;\r\n    --lpg-text-muted: #A1A7B3;\r\n    --lpg-primary: #06A047;\r\n    --lpg-primary-dark: #048038;\r\n    --lpg-primary-soft: #E4F7EC;\r\n    --lpg-grad-1: #1ABE5E;\r\n    --lpg-grad-2: #06A047;\r\n    --lpg-accent: #FC7E0D;\r\n    --lpg-accent-dark: #D9690A;\r\n    --lpg-accent-soft: #FFF1E2;\r\n    --lpg-red: #E03E3E;\r\n    --lpg-red-soft: #FDECEC;\r\n    --lpg-shadow-sm: 0 1px 2px rgba(20,23,31,0.04), 0 1px 1px rgba(20,23,31,0.03);\r\n    --lpg-shadow-md: 0 4px 16px rgba(20,23,31,0.06), 0 1px 3px rgba(20,23,31,0.04);\r\n    --lpg-shadow-lg: 0 12px 32px rgba(20,23,31,0.10), 0 2px 6px rgba(20,23,31,0.04);\r\n    --lpg-radius: 14px;\r\n    --lpg-radius-sm: 10px;\r\n    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\r\n    color: var(--lpg-text);\r\n    background: var(--lpg-bg);\r\n    padding: 0;\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n  }\r\n  #lpg-station-finder-root *, #lpg-station-finder-root *::before, #lpg-station-finder-root *::after {\r\n    box-sizing: border-box;\r\n  }\r\n  #lpg-station-finder-root .lpg-sr-only {\r\n    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);\r\n  }\r\n\r\n  #lpg-station-finder-root .lpg-hero {\r\n    background: linear-gradient(135deg, var(--lpg-grad-1) 0%, var(--lpg-grad-2) 100%);\r\n    padding: 40px 0 68px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    \/* Full-viewport bleed: escape any parent max-width container *\/\r\n    width: 100vw;\r\n    left: 50%;\r\n    right: 50%;\r\n    margin-left: -50vw;\r\n    margin-right: -50vw;\r\n  }\r\n  #lpg-station-finder-root .lpg-hero-inner {\r\n    position: relative; z-index: 1;\r\n    max-width: 1240px;\r\n    margin: 0 auto;\r\n    padding: 0 32px;\r\n  }\r\n  #lpg-station-finder-root .lpg-hero::before {\r\n    content: '';\r\n    position: absolute; top: -60%; right: -10%;\r\n    width: 420px; height: 420px; border-radius: 50%;\r\n    background: rgba(255,255,255,0.08);\r\n  }\r\n  #lpg-station-finder-root .lpg-hero::after {\r\n    content: '';\r\n    position: absolute; bottom: -80%; left: 5%;\r\n    width: 300px; height: 300px; border-radius: 50%;\r\n    background: rgba(255,255,255,0.06);\r\n  }\r\n\r\n  #lpg-station-finder-root .lpg-eyebrow {\r\n    font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;\r\n    color: rgba(255,255,255,0.85); margin-bottom: 8px;\r\n  }\r\n  #lpg-station-finder-root .lpg-title {\r\n    font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: #fff;\r\n  }\r\n  #lpg-station-finder-root .lpg-subtitle {\r\n    font-size: 14px; color: rgba(255,255,255,0.82); margin-top: 8px; font-weight: 500;\r\n  }\r\n  #lpg-station-finder-root .lpg-mode-toggle {\r\n    display: inline-flex; gap: 3px; background: rgba(255,255,255,0.16);\r\n    backdrop-filter: blur(8px); border-radius: 999px; padding: 4px; margin-top: 22px;\r\n  }\r\n  \/* Mode toggle \u2014 only visible to logged-in admins\/editors (WordPress adds\r\n     \"admin-bar\" class to body for users with toolbar access).\r\n     Logged-out visitors see no toggle at all. *\/\r\n  #lpg-station-finder-root .lpg-mode-toggle { display: none; }\r\n  body.admin-bar #lpg-station-finder-root .lpg-mode-toggle { display: inline-flex; }\r\n  #lpg-station-finder-root .lpg-mode-btn {\r\n    padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 700;\r\n    border: none; cursor: pointer; background: transparent; color: rgba(255,255,255,0.85);\r\n    transition: all 0.2s ease; font-family: inherit;\r\n  }\r\n  #lpg-station-finder-root .lpg-mode-btn.active {\r\n    background: #fff; color: var(--lpg-primary-dark);\r\n    box-shadow: var(--lpg-shadow-sm);\r\n  }\r\n\r\n  #lpg-station-finder-root .lpg-body {\r\n    padding: 0 28px 40px;\r\n    margin-top: -36px;\r\n    position: relative; z-index: 2;\r\n    max-width: 1240px;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n  }\r\n\r\n  #lpg-station-finder-root .lpg-search-card {\r\n    background: var(--lpg-surface); border-radius: var(--lpg-radius);\r\n    box-shadow: var(--lpg-shadow-lg); padding: 8px;\r\n    display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap;\r\n  }\r\n  #lpg-station-finder-root .lpg-search-wrap {\r\n    position: relative; flex: 1; min-width: 220px;\r\n  }\r\n  #lpg-station-finder-root .lpg-search-icon {\r\n    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);\r\n    color: var(--lpg-text-muted); font-size: 16px; pointer-events: none;\r\n  }\r\n  #lpg-station-finder-root .lpg-search {\r\n    width: 100%; padding: 13px 14px 13px 42px; border-radius: 10px;\r\n    border: none; background: var(--lpg-surface-soft);\r\n    color: var(--lpg-text); font-size: 14px; outline: none; font-family: inherit;\r\n    transition: background 0.15s ease;\r\n  }\r\n  #lpg-station-finder-root .lpg-search::placeholder { color: var(--lpg-text-muted); }\r\n  #lpg-station-finder-root .lpg-search:focus { background: #fff; box-shadow: 0 0 0 2px var(--lpg-primary); }\r\n\r\n  #lpg-station-finder-root .lpg-stats-row {\r\n    display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;\r\n  }\r\n  #lpg-station-finder-root .lpg-stat-pill {\r\n    background: var(--lpg-surface); border-radius: var(--lpg-radius-sm);\r\n    padding: 12px 18px; box-shadow: var(--lpg-shadow-sm); flex: 1; min-width: 140px;\r\n  }\r\n  #lpg-station-finder-root .lpg-stat-num { font-size: 22px; font-weight: 800; color: var(--lpg-text); line-height: 1.1; }\r\n  #lpg-station-finder-root .lpg-stat-label { font-size: 12px; color: var(--lpg-text-secondary); font-weight: 600; margin-top: 2px; }\r\n\r\n  #lpg-station-finder-root .lpg-layout {\r\n    display: grid; grid-template-columns: 220px 1fr; gap: 24px;\r\n    align-items: start;\r\n  }\r\n  @media (max-width: 800px) {\r\n    #lpg-station-finder-root .lpg-layout { grid-template-columns: 1fr; }\r\n  }\r\n\r\n  #lpg-station-finder-root .lpg-region-nav-card {\r\n    background: var(--lpg-surface); border-radius: var(--lpg-radius);\r\n    box-shadow: var(--lpg-shadow-sm); padding: 18px 14px;\r\n    position: sticky; top: 16px; align-self: start;\r\n    max-height: calc(100vh - 32px); overflow-y: auto;\r\n  }\r\n  @media (max-width: 800px) {\r\n    #lpg-station-finder-root .lpg-region-nav-card { position: static; max-height: none; }\r\n  }\r\n  #lpg-station-finder-root .lpg-region-nav-label {\r\n    font-size: 11px; font-weight: 800; color: var(--lpg-text-muted);\r\n    text-transform: uppercase; letter-spacing: 1px; padding: 0 10px 10px;\r\n  }\r\n  #lpg-station-finder-root .lpg-region-list { display: flex; flex-direction: column; gap: 2px; }\r\n  #lpg-station-finder-root .lpg-region-link {\r\n    font-size: 13px; font-weight: 600; color: var(--lpg-text-secondary);\r\n    background: none; border: none; text-align: left; cursor: pointer;\r\n    padding: 9px 10px; border-radius: 8px; font-family: inherit;\r\n    transition: all 0.15s ease; display: flex; align-items: center; justify-content: space-between;\r\n  }\r\n  #lpg-station-finder-root .lpg-region-link:hover { background: var(--lpg-surface-soft); color: var(--lpg-text); }\r\n  #lpg-station-finder-root .lpg-region-link.active { background: var(--lpg-primary-soft); color: var(--lpg-primary-dark); }\r\n  #lpg-station-finder-root .lpg-region-count {\r\n    font-size: 11px; font-weight: 700; color: var(--lpg-text-muted);\r\n    background: var(--lpg-surface-soft); padding: 1px 7px; border-radius: 999px;\r\n  }\r\n  #lpg-station-finder-root .lpg-region-link.active .lpg-region-count {\r\n    background: rgba(0,135,90,0.14); color: var(--lpg-primary-dark);\r\n  }\r\n\r\n  #lpg-station-finder-root .lpg-region-group { margin-bottom: 28px; scroll-margin-top: 16px; }\r\n  #lpg-station-finder-root .lpg-region-heading {\r\n    display: flex; align-items: center; gap: 10px;\r\n    font-size: 16px; font-weight: 800; color: var(--lpg-text); margin: 0 0 12px;\r\n  }\r\n  #lpg-station-finder-root .lpg-region-dot {\r\n    width: 8px; height: 8px; border-radius: 50%; background: var(--lpg-primary); flex-shrink: 0;\r\n  }\r\n  #lpg-station-finder-root .lpg-region-heading-count {\r\n    font-size: 12px; font-weight: 600; color: var(--lpg-text-muted);\r\n  }\r\n\r\n  #lpg-station-finder-root .lpg-station-card {\r\n    background: var(--lpg-surface); border-radius: var(--lpg-radius-sm);\r\n    box-shadow: var(--lpg-shadow-sm); padding: 14px 16px; margin-bottom: 8px;\r\n    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;\r\n    transition: transform 0.15s ease, box-shadow 0.15s ease;\r\n  }\r\n  #lpg-station-finder-root .lpg-station-card:hover {\r\n    transform: translateY(-2px); box-shadow: var(--lpg-shadow-md);\r\n  }\r\n  @media (max-width: 640px) {\r\n    #lpg-station-finder-root .lpg-station-card { grid-template-columns: 1fr; gap: 10px; }\r\n  }\r\n  #lpg-station-finder-root .lpg-station-main { display: flex; align-items: center; gap: 12px; min-width: 0; }\r\n  #lpg-station-finder-root .lpg-station-icon {\r\n    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;\r\n    background: var(--lpg-accent-soft); color: var(--lpg-accent-dark);\r\n    display: flex; align-items: center; justify-content: center; font-size: 17px;\r\n  }\r\n  #lpg-station-finder-root .lpg-station-text { min-width: 0; }\r\n  #lpg-station-finder-root .lpg-station-name { font-weight: 700; font-size: 14px; color: var(--lpg-text); }\r\n  #lpg-station-finder-root .lpg-station-meta {\r\n    font-size: 12.5px; color: var(--lpg-text-secondary); margin-top: 2px;\r\n    display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\r\n  }\r\n  #lpg-station-finder-root .lpg-station-type-badge {\r\n    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;\r\n    background: var(--lpg-surface-soft); color: var(--lpg-text-secondary); white-space: nowrap;\r\n  }\r\n  #lpg-station-finder-root .lpg-station-status {\r\n    font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px;\r\n    text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;\r\n    display: inline-flex; align-items: center; gap: 5px;\r\n  }\r\n  #lpg-station-finder-root .lpg-status-dot { width: 6px; height: 6px; border-radius: 50%; }\r\n  #lpg-station-finder-root .lpg-station-status.open { background: var(--lpg-primary-soft); color: var(--lpg-primary-dark); }\r\n  #lpg-station-finder-root .lpg-station-status.open .lpg-status-dot { background: var(--lpg-primary); }\r\n  #lpg-station-finder-root .lpg-station-status.closed { background: var(--lpg-red-soft); color: var(--lpg-red); }\r\n  #lpg-station-finder-root .lpg-station-status.closed .lpg-status-dot { background: var(--lpg-red); }\r\n\r\n  #lpg-station-finder-root .lpg-directions-btn {\r\n    display: inline-flex; align-items: center; gap: 6px;\r\n    padding: 9px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700;\r\n    background: var(--lpg-accent); color: #fff; border: none; cursor: pointer;\r\n    text-decoration: none; white-space: nowrap; font-family: inherit;\r\n    transition: background 0.15s ease;\r\n  }\r\n  #lpg-station-finder-root .lpg-directions-btn:hover { background: var(--lpg-accent-dark); }\r\n\r\n  #lpg-station-finder-root .lpg-empty {\r\n    text-align: center; padding: 60px 20px; color: var(--lpg-text-secondary); font-size: 14px;\r\n    background: var(--lpg-surface); border-radius: var(--lpg-radius); box-shadow: var(--lpg-shadow-sm);\r\n  }\r\n\r\n  #lpg-station-finder-root .lpg-admin-panel {\r\n    background: var(--lpg-surface); border-radius: var(--lpg-radius);\r\n    box-shadow: var(--lpg-shadow-sm); padding: 22px 24px; margin-bottom: 16px;\r\n  }\r\n  #lpg-station-finder-root .lpg-form-label {\r\n    font-size: 11px; color: var(--lpg-text-secondary); text-transform: uppercase;\r\n    letter-spacing: 0.5px; display: block; margin-bottom: 6px; font-weight: 700;\r\n  }\r\n  #lpg-station-finder-root .lpg-form-row { margin-bottom: 14px; }\r\n  #lpg-station-finder-root .lpg-form-row-2 {\r\n    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;\r\n  }\r\n  #lpg-station-finder-root .lpg-input, #lpg-station-finder-root .lpg-select {\r\n    width: 100%; padding: 11px 13px; border-radius: 10px;\r\n    border: 1.5px solid var(--lpg-border); background: var(--lpg-bg);\r\n    color: var(--lpg-text); font-size: 13.5px; outline: none; font-family: inherit;\r\n    transition: border-color 0.15s ease;\r\n  }\r\n  #lpg-station-finder-root .lpg-input:focus, #lpg-station-finder-root .lpg-select:focus {\r\n    border-color: var(--lpg-primary);\r\n  }\r\n  #lpg-station-finder-root .lpg-form-actions { display: flex; gap: 10px; margin-top: 6px; }\r\n  #lpg-station-finder-root .lpg-btn {\r\n    padding: 11px 20px; border-radius: 999px; font-size: 13px; font-weight: 700;\r\n    border: 1.5px solid var(--lpg-border); background: #fff;\r\n    color: var(--lpg-text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;\r\n    font-family: inherit; transition: all 0.15s ease;\r\n  }\r\n  #lpg-station-finder-root .lpg-btn:hover { background: var(--lpg-surface-soft); }\r\n  #lpg-station-finder-root .lpg-btn-primary {\r\n    background: var(--lpg-primary); border-color: var(--lpg-primary); color: #fff;\r\n  }\r\n  #lpg-station-finder-root .lpg-btn-primary:hover { background: var(--lpg-primary-dark); }\r\n  #lpg-station-finder-root .lpg-btn-danger { color: var(--lpg-red); border-color: var(--lpg-red-soft); }\r\n  #lpg-station-finder-root .lpg-btn-danger:hover { background: var(--lpg-red-soft); }\r\n  #lpg-station-finder-root .lpg-admin-actions { display: flex; gap: 8px; margin-top: 12px; }\r\n  #lpg-station-finder-root .lpg-admin-actions .lpg-btn { padding: 7px 14px; font-size: 12px; }\r\n  #lpg-station-finder-root .lpg-admin-card {\r\n    background: var(--lpg-surface); border-radius: var(--lpg-radius-sm); box-shadow: var(--lpg-shadow-sm);\r\n    padding: 14px 16px; margin-bottom: 10px;\r\n  }\r\n  #lpg-station-finder-root .lpg-admin-card-head {\r\n    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;\r\n  }\r\n  #lpg-station-finder-root .lpg-hint {\r\n    font-size: 12.5px; color: var(--lpg-text-secondary); margin-bottom: 18px; line-height: 1.6;\r\n    background: var(--lpg-surface); padding: 14px 16px; border-radius: var(--lpg-radius-sm);\r\n    box-shadow: var(--lpg-shadow-sm);\r\n  }\r\n  #lpg-station-finder-root .lpg-count { font-size: 13px; color: var(--lpg-text-secondary); margin-bottom: 14px; font-weight: 600; }\r\n\r\n  \/* Location picker *\/\r\n  #lpg-station-finder-root .lpg-map-frame-wrap {\r\n    position: relative; border-radius: 10px; overflow: hidden;\r\n    border: 1.5px solid var(--lpg-border); margin-bottom: 0;\r\n    transition: border-color 0.15s;\r\n  }\r\n  #lpg-station-finder-root .lpg-map-frame-wrap.active { border-color: var(--lpg-primary); }\r\n  #lpg-station-finder-root .lpg-map-picker-hint {\r\n    font-size: 12px; color: var(--lpg-text-muted); margin-bottom: 8px; line-height: 1.5;\r\n  }\r\n  #lpg-station-finder-root .lpg-addr-result {\r\n    padding: 11px 14px; border-radius: 8px; font-size: 13px; cursor: pointer;\r\n    border: 1px solid var(--lpg-border); margin-bottom: 6px; background: var(--lpg-surface);\r\n    transition: all 0.12s ease;\r\n  }\r\n  #lpg-station-finder-root .lpg-addr-result:hover { background: var(--lpg-primary-soft); border-color: var(--lpg-primary); }\r\n  #lpg-station-finder-root .lpg-addr-result-name { font-weight: 700; color: var(--lpg-text); font-size: 13px; }\r\n  #lpg-station-finder-root .lpg-addr-result-full { font-size: 11.5px; color: var(--lpg-text-secondary); margin-top: 3px; line-height: 1.4; }\r\n  #lpg-station-finder-root .lpg-coords-row {\r\n    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;\r\n  }\r\n  #lpg-station-finder-root .lpg-coord-input {\r\n    background: var(--lpg-primary-soft) !important; border-color: var(--lpg-primary) !important;\r\n    color: var(--lpg-primary-dark) !important; font-weight: 600; font-size: 12px;\r\n  }\r\n  #lpg-station-finder-root .lpg-search-spinner {\r\n    display: inline-block; width: 13px; height: 13px;\r\n    border: 2px solid var(--lpg-primary); border-top-color: transparent;\r\n    border-radius: 50%; animation: lpgSpin 0.7s linear infinite; vertical-align: middle;\r\n  }\r\n  @keyframes lpgSpin { to { transform: rotate(360deg); } }\r\n<\/style>\r\n\r\n<h2 class=\"lpg-sr-only\">LPG station finder organized by region, with a region jump list, station details, get-directions links, and an editable station list<\/h2>\r\n\r\n<div class=\"lpg-hero\">\r\n  <div class=\"lpg-hero-inner\">\r\n    <div class=\"lpg-eyebrow\">Find LPG near you<\/div>\r\n    <h2 class=\"lpg-title\">Station finder<\/h2>\r\n    <div class=\"lpg-subtitle\" id=\"lpg-count-label\">Loading stations...<\/div>\r\n    <div class=\"lpg-mode-toggle\">\r\n      <button class=\"lpg-mode-btn active\" id=\"lpg-btn-finder\" onclick=\"lpgSetMode('finder')\">Find a station<\/button>\r\n      <button class=\"lpg-mode-btn\" id=\"lpg-btn-admin\" onclick=\"lpgSetMode('admin')\">Manage stations<\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"lpg-body\">\r\n  <div id=\"lpg-finder-mode\">\r\n    <div class=\"lpg-search-card\">\r\n      <div class=\"lpg-search-wrap\">\r\n        <i class=\"lpg-search-icon\">&#128269;<\/i>\r\n        <input class=\"lpg-search\" id=\"lpg-search-input\" placeholder=\"Search station, district, or region...\" oninput=\"lpgRenderList()\" \/>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"lpg-stats-row\" id=\"lpg-stats-row\"><\/div>\r\n\r\n    <div class=\"lpg-layout\">\r\n      <div class=\"lpg-region-nav-card\">\r\n        <div class=\"lpg-region-nav-label\">Select a region<\/div>\r\n        <div class=\"lpg-region-list\" id=\"lpg-region-nav\"><\/div>\r\n      <\/div>\r\n      <div id=\"lpg-region-groups\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div id=\"lpg-admin-mode\" style=\"display:none;\">\r\n    <div class=\"lpg-hint\">Add or edit stations here, then copy this updated file and paste it back into your WordPress Custom HTML block to publish the changes. Changes you make in this browser preview are not saved automatically.<\/div>\r\n    <div class=\"lpg-admin-panel\">\r\n      <div class=\"lpg-form-label\" style=\"font-size:13px; margin-bottom:14px;\">Add new station<\/div>\r\n      <div class=\"lpg-form-row\">\r\n        <label class=\"lpg-form-label\">Station name<\/label>\r\n        <input class=\"lpg-input\" id=\"lpg-add-name\" placeholder=\"Goaso\" \/>\r\n      <\/div>\r\n      <div class=\"lpg-form-row-2\">\r\n        <div>\r\n          <label class=\"lpg-form-label\">Type<\/label>\r\n          <select class=\"lpg-select\" id=\"lpg-add-type\">\r\n            <option value=\"Filling Station\">Filling Station<\/option>\r\n            <option value=\"Service Station\">Service Station<\/option>\r\n          <\/select>\r\n        <\/div>\r\n        <div>\r\n          <label class=\"lpg-form-label\">District<\/label>\r\n          <input class=\"lpg-input\" id=\"lpg-add-district\" placeholder=\"Asunafo North District\" \/>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"lpg-form-row-2\">\r\n        <div>\r\n          <label class=\"lpg-form-label\">Region<\/label>\r\n          <select class=\"lpg-select\" id=\"lpg-add-region\">\r\n            <option value=\"\">\u2014 Select region \u2014<\/option>\r\n            <option value=\"Ahafo Region\">Ahafo Region<\/option>\r\n            <option value=\"Ashanti Region\">Ashanti Region<\/option>\r\n            <option value=\"Bono Region\">Bono Region<\/option>\r\n            <option value=\"Bono East Region\">Bono East Region<\/option>\r\n            <option value=\"Central Region\">Central Region<\/option>\r\n            <option value=\"Eastern Region\">Eastern Region<\/option>\r\n            <option value=\"Greater Accra Region\">Greater Accra Region<\/option>\r\n            <option value=\"North East Region\">North East Region<\/option>\r\n            <option value=\"Northern Region\">Northern Region<\/option>\r\n            <option value=\"Oti Region\">Oti Region<\/option>\r\n            <option value=\"Savannah Region\">Savannah Region<\/option>\r\n            <option value=\"Upper East Region\">Upper East Region<\/option>\r\n            <option value=\"Upper West Region\">Upper West Region<\/option>\r\n            <option value=\"Volta Region\">Volta Region<\/option>\r\n            <option value=\"Western Region\">Western Region<\/option>\r\n            <option value=\"Western North Region\">Western North Region<\/option>\r\n          <\/select>\r\n        <\/div>\r\n        <div>\r\n          <label class=\"lpg-form-label\">Status<\/label>\r\n          <select class=\"lpg-select\" id=\"lpg-add-status\">\r\n            <option value=\"open\">Open<\/option>\r\n            <option value=\"closed\">Closed<\/option>\r\n          <\/select>\r\n        <\/div>\r\n      <\/div>\r\n      <!-- LOCATION PICKER -->\r\n      <div class=\"lpg-form-row\">\r\n        <label class=\"lpg-form-label\">Location<\/label>\r\n\r\n        <!-- Live search input -->\r\n        <!-- Live search -->\r\n        <div style=\"position:relative; margin-bottom:8px;\">\r\n          <span style=\"position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none;\">&#128269;<\/span>\r\n          <input class=\"lpg-input\" id=\"lpg-addr-search\"\r\n            placeholder=\"Type to search, e.g. Spintex Road, Accra...\"\r\n            oninput=\"lpgLiveSearch(this.value)\"\r\n            autocomplete=\"off\"\r\n            style=\"padding-left:38px;\" \/>\r\n        <\/div>\r\n        <div id=\"lpg-addr-results\" style=\"margin-bottom:10px;\"><\/div>\r\n\r\n        <!-- Interactive map \u2014 click to drop a pin -->\r\n        <div class=\"lpg-map-picker-hint\">&#128205; Click anywhere on the map to drop a pin, or search above<\/div>\r\n        <div id=\"lpg-pin-map\" style=\"width:100%;height:300px;border-radius:10px;border:1.5px solid var(--lpg-border);background:#e8f0e8;\"><\/div>\r\n        <div id=\"lpg-pin-status\" style=\"display:none;margin-top:6px;padding:8px 12px;background:var(--lpg-primary-soft);border-radius:8px;font-size:12px;font-weight:700;color:var(--lpg-primary-dark);\">&#10003; Pin dropped \u2014 region &amp; district filled<\/div>\r\n\r\n        <!-- Coords -->\r\n        <div class=\"lpg-coords-row\">\r\n          <div>\r\n            <label class=\"lpg-form-label\">Latitude<\/label>\r\n            <input class=\"lpg-input lpg-coord-input\" id=\"lpg-add-lat\" placeholder=\"Auto-filled\" \/>\r\n          <\/div>\r\n          <div>\r\n            <label class=\"lpg-form-label\">Longitude<\/label>\r\n            <input class=\"lpg-input lpg-coord-input\" id=\"lpg-add-lng\" placeholder=\"Auto-filled\" \/>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"lpg-form-actions\">\r\n        <button class=\"lpg-btn lpg-btn-primary\" onclick=\"lpgAddStation()\">Add station<\/button>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"lpg-count\" id=\"lpg-admin-count\"><\/div>\r\n    <div id=\"lpg-admin-list\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n\r\n  \/\/ Station data is now loaded from WordPress REST API \u2014 no hardcoded array needed\r\n  var lpgStations = [];\r\n  var editingId = null;\r\n  var activeRegion = null;\r\n\r\n  function escapeHtml(str) {\r\n    var d = document.createElement('div');\r\n    d.textContent = str == null ? '' : str;\r\n    return d.innerHTML;\r\n  }\r\n\r\n  function slugify(str) {\r\n    return 'lpg-region-' + str.toLowerCase().replace(\/[^a-z0-9]+\/g, '-').replace(\/(^-|-$)\/g, '');\r\n  }\r\n\r\n  function directionsUrl(s) {\r\n    if (s.lat == null || s.lng == null || s.lat === '' || s.lng === '') {\r\n      return 'https:\/\/www.google.com\/maps\/search\/?api=1&query=' + encodeURIComponent(s.name + ' ' + s.district + ' ' + s.region);\r\n    }\r\n    return 'https:\/\/www.google.com\/maps\/dir\/?api=1&destination=' + s.lat + ',' + s.lng + '&travelmode=driving';\r\n  }\r\n\r\n  function groupByRegion(list) {\r\n    var order = [];\r\n    var groups = {};\r\n    list.forEach(function(s) {\r\n      if (!groups[s.region]) { groups[s.region] = []; order.push(s.region); }\r\n      groups[s.region].push(s);\r\n    });\r\n    return { order: order, groups: groups };\r\n  }\r\n\r\n  window.lpgRenderList = function() {\r\n    var q = (document.getElementById('lpg-search-input').value || '').toLowerCase();\r\n    var filtered = lpgStations.filter(function(s) {\r\n      return s.name.toLowerCase().indexOf(q) !== -1 ||\r\n        s.district.toLowerCase().indexOf(q) !== -1 ||\r\n        s.region.toLowerCase().indexOf(q) !== -1;\r\n    });\r\n\r\n    var allRegionsCount = groupByRegion(lpgStations).order.length;\r\n    document.getElementById('lpg-count-label').textContent = lpgStations.length + ' station' + (lpgStations.length !== 1 ? 's' : '') + ' across ' + allRegionsCount + ' regions';\r\n\r\n    var openCount = lpgStations.filter(function(s) { return s.status === 'open'; }).length;\r\n    var closedCount = lpgStations.length - openCount;\r\n    document.getElementById('lpg-stats-row').innerHTML =\r\n      '<div class=\"lpg-stat-pill\"><div class=\"lpg-stat-num\">' + lpgStations.length + '<\/div><div class=\"lpg-stat-label\">Total stations<\/div><\/div>' +\r\n      '<div class=\"lpg-stat-pill\"><div class=\"lpg-stat-num\">' + openCount + '<\/div><div class=\"lpg-stat-label\">Open now<\/div><\/div>' +\r\n      '<div class=\"lpg-stat-pill\"><div class=\"lpg-stat-num\">' + closedCount + '<\/div><div class=\"lpg-stat-label\">Closed<\/div><\/div>' +\r\n      '<div class=\"lpg-stat-pill\"><div class=\"lpg-stat-num\">' + allRegionsCount + '<\/div><div class=\"lpg-stat-label\">Regions covered<\/div><\/div>';\r\n\r\n    var nav = document.getElementById('lpg-region-nav');\r\n    var groupsEl = document.getElementById('lpg-region-groups');\r\n\r\n    if (filtered.length === 0) {\r\n      nav.innerHTML = '';\r\n      groupsEl.innerHTML = '<div class=\"lpg-empty\">No stations match your search.<\/div>';\r\n      return;\r\n    }\r\n\r\n    var data = groupByRegion(filtered);\r\n    var allData = groupByRegion(lpgStations);\r\n    var allRegions = allData.order.slice().sort();\r\n\r\n    nav.innerHTML = allRegions.map(function(region) {\r\n      var has = data.groups[region];\r\n      var count = allData.groups[region] ? allData.groups[region].length : 0;\r\n      var isActive = region === activeRegion;\r\n      return '<button class=\"lpg-region-link' + (isActive ? ' active' : '') + '\" style=\"' + (has ? '' : 'opacity:0.35;pointer-events:none;') + '\" onclick=\"lpgScrollToRegion(\\'' + slugify(region) + '\\', \\'' + escapeHtml(region).replace(\/'\/g, \"\\\\'\") + '\\', this)\">' +\r\n        '<span>' + escapeHtml(region) + '<\/span><span class=\"lpg-region-count\">' + count + '<\/span>' +\r\n      '<\/button>';\r\n    }).join('');\r\n\r\n    groupsEl.innerHTML = data.order.map(function(region) {\r\n      var stations = data.groups[region];\r\n      return (\r\n        '<div class=\"lpg-region-group\" id=\"' + slugify(region) + '\">' +\r\n          '<h3 class=\"lpg-region-heading\"><span class=\"lpg-region-dot\"><\/span>' + escapeHtml(region) + '<span class=\"lpg-region-heading-count\">' + stations.length + ' station' + (stations.length !== 1 ? 's' : '') + '<\/span><\/h3>' +\r\n          stations.map(function(s) {\r\n            return (\r\n              '<div class=\"lpg-station-card\">' +\r\n                '<div class=\"lpg-station-main\">' +\r\n                  '<div class=\"lpg-station-icon\">&#9981;<\/div>' +\r\n                  '<div class=\"lpg-station-text\">' +\r\n                    '<div class=\"lpg-station-name\">' + escapeHtml(s.name) + '<\/div>' +\r\n                    '<div class=\"lpg-station-meta\">&#128205; ' + escapeHtml(s.district) + '<\/div>' +\r\n                  '<\/div>' +\r\n                '<\/div>' +\r\n                '<div style=\"display:flex;align-items:center;gap:8px;\">' +\r\n                  '<span class=\"lpg-station-type-badge\">' + escapeHtml(s.type) + '<\/span>' +\r\n                  '<span class=\"lpg-station-status ' + s.status + '\"><span class=\"lpg-status-dot\"><\/span>' + (s.status === 'open' ? 'Open' : 'Closed') + '<\/span>' +\r\n                '<\/div>' +\r\n                '<a class=\"lpg-directions-btn\" href=\"' + directionsUrl(s) + '\" target=\"_blank\" rel=\"noopener\">Directions &#8594;<\/a>' +\r\n              '<\/div>'\r\n            );\r\n          }).join('') +\r\n        '<\/div>'\r\n      );\r\n    }).join('');\r\n  };\r\n\r\n  window.lpgScrollToRegion = function(id, region, el) {\r\n    activeRegion = region;\r\n    document.querySelectorAll('#lpg-station-finder-root .lpg-region-link').forEach(function(l) { l.classList.remove('active'); });\r\n    if (el) el.classList.add('active');\r\n    var target = document.getElementById(id);\r\n    if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n  };\r\n\r\n  \/\/ ============================ ADMIN PANEL ============================\r\n\r\n  window.lpgRenderAdminList = function() {\r\n    document.getElementById('lpg-admin-count').textContent = lpgStations.length + ' station' + (lpgStations.length !== 1 ? 's' : '') + ' \u2014 click edit to update';\r\n    var list = document.getElementById('lpg-admin-list');\r\n    if (lpgStations.length === 0) {\r\n      list.innerHTML = '<div class=\"lpg-empty\">No stations yet. Add one above.<\/div>';\r\n      return;\r\n    }\r\n    list.innerHTML = lpgStations.map(function(s) {\r\n      if (editingId === s.id) {\r\n        return (\r\n          '<div class=\"lpg-admin-panel\">' +\r\n            '<div class=\"lpg-form-row\"><label class=\"lpg-form-label\">Station name<\/label><input class=\"lpg-input\" id=\"lpg-edit-name-' + s.id + '\" value=\"' + escapeHtml(s.name) + '\" \/><\/div>' +\r\n            '<div class=\"lpg-form-row-2\">' +\r\n              '<div><label class=\"lpg-form-label\">Type<\/label><select class=\"lpg-select\" id=\"lpg-edit-type-' + s.id + '\">' +\r\n                '<option value=\"Filling Station\"' + (s.type === 'Filling Station' ? ' selected' : '') + '>Filling Station<\/option>' +\r\n                '<option value=\"Service Station\"' + (s.type === 'Service Station' ? ' selected' : '') + '>Service Station<\/option>' +\r\n              '<\/select><\/div>' +\r\n              '<div><label class=\"lpg-form-label\">District<\/label><input class=\"lpg-input\" id=\"lpg-edit-district-' + s.id + '\" value=\"' + escapeHtml(s.district) + '\" \/><\/div>' +\r\n            '<\/div>' +\r\n            '<div class=\"lpg-form-row-2\">' +\r\n              '<div><label class=\"lpg-form-label\">Region<\/label><select class=\"lpg-select\" id=\"lpg-edit-region-' + s.id + '\">' +\r\n                ['Ahafo Region','Ashanti Region','Bono Region','Bono East Region','Central Region','Eastern Region','Greater Accra Region','North East Region','Northern Region','Oti Region','Savannah Region','Upper East Region','Upper West Region','Volta Region','Western Region','Western North Region'].map(function(r) {\r\n                  return '<option value=\"' + r + '\"' + (s.region === r ? ' selected' : '') + '>' + r + '<\/option>';\r\n                }).join('') +\r\n              '<\/select><\/div>' +\r\n              '<div><label class=\"lpg-form-label\">Status<\/label><select class=\"lpg-select\" id=\"lpg-edit-status-' + s.id + '\">' +\r\n                '<option value=\"open\"' + (s.status === 'open' ? ' selected' : '') + '>Open<\/option>' +\r\n                '<option value=\"closed\"' + (s.status === 'closed' ? ' selected' : '') + '>Closed<\/option>' +\r\n              '<\/select><\/div>' +\r\n            '<\/div>' +\r\n            '<div class=\"lpg-form-row-2\">' +\r\n              '<div><label class=\"lpg-form-label\">Latitude<\/label><input class=\"lpg-input\" id=\"lpg-edit-lat-' + s.id + '\" value=\"' + (s.lat != null ? s.lat : '') + '\" \/><\/div>' +\r\n              '<div><label class=\"lpg-form-label\">Longitude<\/label><input class=\"lpg-input\" id=\"lpg-edit-lng-' + s.id + '\" value=\"' + (s.lng != null ? s.lng : '') + '\" \/><\/div>' +\r\n            '<\/div>' +\r\n            '<div class=\"lpg-form-actions\">' +\r\n              '<button class=\"lpg-btn lpg-btn-primary\" onclick=\"lpgSaveStation(' + s.id + ')\">Save<\/button>' +\r\n              '<button class=\"lpg-btn\" onclick=\"lpgCancelEdit()\">Cancel<\/button>' +\r\n            '<\/div>' +\r\n          '<\/div>'\r\n        );\r\n      }\r\n      return (\r\n        '<div class=\"lpg-admin-card\">' +\r\n          '<div class=\"lpg-admin-card-head\">' +\r\n            '<div>' +\r\n              '<div class=\"lpg-station-name\">' + escapeHtml(s.name) + '<\/div>' +\r\n              '<div style=\"font-size:12px;color:var(--lpg-text-secondary);margin-top:3px;\">' + escapeHtml(s.type) + ' &middot; ' + escapeHtml(s.district) + ', ' + escapeHtml(s.region) + '<\/div>' +\r\n            '<\/div>' +\r\n            '<span class=\"lpg-station-status ' + s.status + '\"><span class=\"lpg-status-dot\"><\/span>' + (s.status === 'open' ? 'Open' : 'Closed') + '<\/span>' +\r\n          '<\/div>' +\r\n          '<div class=\"lpg-admin-actions\">' +\r\n            '<button class=\"lpg-btn\" onclick=\"lpgEditStation(' + s.id + ')\">Edit<\/button>' +\r\n            '<button class=\"lpg-btn lpg-btn-danger\" onclick=\"lpgDeleteStation(' + s.id + ')\">Delete<\/button>' +\r\n          '<\/div>' +\r\n        '<\/div>'\r\n      );\r\n    }).join('');\r\n  };\r\n\r\n  \/\/ ========================= REST API CONFIG ==========================\r\n  var LPG_API = 'https:\/\/xpressgas.com\/wp-json\/xpressgas\/v1\/stations';\r\n  \/\/ Get the WP nonce for authenticated requests (WordPress prints this\r\n  \/\/ automatically for logged-in users via wp_localize_script, but since\r\n  \/\/ we're in a Custom HTML block we use the REST nonce from the cookie).\r\n  \/\/ For admin actions we rely on cookie-based auth (same-origin requests).\r\n\r\n  function lpgShowToast(msg, isError) {\r\n    var t = document.getElementById('lpg-toast');\r\n    if (!t) {\r\n      t = document.createElement('div');\r\n      t.id = 'lpg-toast';\r\n      t.style.cssText = 'position:fixed;bottom:28px;left:50%;transform:translateX(-50%);padding:12px 24px;border-radius:999px;font-size:13px;font-weight:600;color:#fff;z-index:9999;opacity:0;transition:opacity 0.3s;pointer-events:none;font-family:inherit;';\r\n      document.body.appendChild(t);\r\n    }\r\n    t.textContent = msg;\r\n    t.style.background = isError ? '#E03E3E' : '#06A047';\r\n    t.style.opacity = '1';\r\n    clearTimeout(t._timer);\r\n    t._timer = setTimeout(function() { t.style.opacity = '0'; }, 3000);\r\n  }\r\n\r\n  function lpgSetLoading(btnEl, loading) {\r\n    if (!btnEl) return;\r\n    btnEl.disabled = loading;\r\n    btnEl.style.opacity = loading ? '0.6' : '1';\r\n  }\r\n\r\n  \/\/ Load all stations from WP database\r\n  function lpgFetchStations(cb) {\r\n    fetch(LPG_API, { credentials: 'same-origin' })\r\n      .then(function(r) { return r.json(); })\r\n      .then(function(data) {\r\n        lpgStations = Array.isArray(data) ? data : [];\r\n        if (cb) cb();\r\n      })\r\n      .catch(function() {\r\n        lpgShowToast('Could not load stations. Check your connection.', true);\r\n      });\r\n  }\r\n\r\n  window.lpgEditStation = function(id) { editingId = id; lpgRenderAdminList(); };\r\n  window.lpgCancelEdit = function() { editingId = null; lpgRenderAdminList(); };\r\n\r\n  window.lpgSaveStation = function(id) {\r\n    var name     = document.getElementById('lpg-edit-name-' + id).value.trim();\r\n    var type     = document.getElementById('lpg-edit-type-' + id).value;\r\n    var district = document.getElementById('lpg-edit-district-' + id).value.trim();\r\n    var region   = document.getElementById('lpg-edit-region-' + id).value.trim();\r\n    var status   = document.getElementById('lpg-edit-status-' + id).value;\r\n    var lat      = parseFloat(document.getElementById('lpg-edit-lat-' + id).value) || 0;\r\n    var lng      = parseFloat(document.getElementById('lpg-edit-lng-' + id).value) || 0;\r\n    if (!name || !district || !region) { lpgShowToast('Please fill in name, district and region.', true); return; }\r\n\r\n    var btn = document.querySelector('#lpg-admin-list .lpg-btn-primary');\r\n    lpgSetLoading(btn, true);\r\n\r\n    var body = new FormData();\r\n    body.append('name', name); body.append('type', type);\r\n    body.append('district', district); body.append('region', region);\r\n    body.append('status', status); body.append('lat', lat); body.append('lng', lng);\r\n\r\n    fetch(LPG_API + '\/' + id, { method: 'POST', credentials: 'same-origin', body: body })\r\n      .then(function(r) {\r\n        if (!r.ok) throw new Error('Save failed');\r\n        return r.json();\r\n      })\r\n      .then(function() {\r\n        editingId = null;\r\n        lpgShowToast('Station updated \u2713');\r\n        lpgFetchStations(function() { lpgRenderAdminList(); lpgRenderList(); });\r\n      })\r\n      .catch(function() { lpgShowToast('Could not save. Please try again.', true); lpgSetLoading(btn, false); });\r\n  };\r\n\r\n  window.lpgDeleteStation = function(id) {\r\n    if (!confirm('Delete this station permanently?')) return;\r\n    fetch(LPG_API + '\/' + id, { method: 'DELETE', credentials: 'same-origin' })\r\n      .then(function(r) {\r\n        if (!r.ok) throw new Error('Delete failed');\r\n        return r.json();\r\n      })\r\n      .then(function() {\r\n        lpgShowToast('Station deleted \u2713');\r\n        lpgFetchStations(function() { lpgRenderAdminList(); lpgRenderList(); });\r\n      })\r\n      .catch(function() { lpgShowToast('Could not delete. Please try again.', true); });\r\n  };\r\n\r\n  window.lpgAddStation = function() {\r\n    var name     = document.getElementById('lpg-add-name').value.trim();\r\n    var type     = document.getElementById('lpg-add-type').value;\r\n    var district = document.getElementById('lpg-add-district').value.trim();\r\n    var region   = document.getElementById('lpg-add-region').value.trim();\r\n    var status   = document.getElementById('lpg-add-status').value;\r\n    var lat      = parseFloat(document.getElementById('lpg-add-lat').value) || 0;\r\n    var lng      = parseFloat(document.getElementById('lpg-add-lng').value) || 0;\r\n    if (!name || !district || !region) { lpgShowToast('Please fill in name, district, and select a region.', true); return; }\r\n\r\n    var btn = document.querySelector('#lpg-admin-mode .lpg-btn-primary');\r\n    lpgSetLoading(btn, true);\r\n\r\n    var body = new FormData();\r\n    body.append('name', name); body.append('type', type);\r\n    body.append('district', district); body.append('region', region);\r\n    body.append('status', status); body.append('lat', lat); body.append('lng', lng);\r\n\r\n    fetch(LPG_API, { method: 'POST', credentials: 'same-origin', body: body })\r\n      .then(function(r) {\r\n        if (!r.ok) throw new Error('Add failed');\r\n        return r.json();\r\n      })\r\n      .then(function() {\r\n        lpgShowToast('Station added \u2713');\r\n        ['lpg-add-name','lpg-add-district','lpg-add-region','lpg-add-lat','lpg-add-lng'].forEach(function(fid) {\r\n          document.getElementById(fid).value = '';\r\n        });\r\n        \/\/ reset map\r\n        if (lpgMarker && lpgMap) { lpgMap.removeLayer(lpgMarker); lpgMarker = null; }\r\n        var status = document.getElementById('lpg-pin-status');\r\n        if (status) status.style.display = 'none';\r\n        lpgFetchStations(function() { lpgRenderAdminList(); lpgRenderList(); lpgSetLoading(btn, false); });\r\n      })\r\n      .catch(function() { lpgShowToast('Could not add station. Please try again.', true); lpgSetLoading(btn, false); });\r\n  };\r\n\r\n  \/\/ ====================== SEED INITIAL DATA ===========================\r\n  \/\/ On first load, if the database is empty, seed the built-in stations.\r\n  var lpgSeedData = [\r\n    { name:'Goaso', type:'Filling Station', district:'Asunafo North District', region:'Ahafo Region', lat:6.8033, lng:-2.5113, status:'open' },\r\n    { name:'Ahinsan', type:'Service Station', district:'Kumasi Metropolitan District', region:'Ashanti Region', lat:6.6985, lng:-1.6362, status:'open' },\r\n    { name:'Ahenema Kokoben', type:'Service Station', district:'Atiwa-Kwanwoma District', region:'Ashanti Region', lat:6.6280, lng:-1.6890, status:'open' },\r\n    { name:'Ahwiaa', type:'Service Station', district:'Kwabre East District', region:'Ashanti Region', lat:6.7800, lng:-1.5950, status:'open' },\r\n    { name:'Akom', type:'Service Station', district:'Afigya Kwabre District', region:'Ashanti Region', lat:6.8200, lng:-1.6300, status:'open' },\r\n    { name:'Asokore Mampong', type:'Service Station', district:'Upper Denkyira West Municipal', region:'Ashanti Region', lat:6.7350, lng:-1.5750, status:'open' },\r\n    { name:'Dichemso', type:'Service Station', district:'Kumasi Metropolitan District', region:'Ashanti Region', lat:6.7050, lng:-1.6150, status:'open' },\r\n    { name:'Duase', type:'Service Station', district:'Manhyia North District', region:'Ashanti Region', lat:6.7150, lng:-1.6050, status:'open' },\r\n    { name:'Ejura', type:'Filling Station', district:'Ejura-Sekyedumase District', region:'Ashanti Region', lat:7.3850, lng:-1.3590, status:'open' },\r\n    { name:'Kenyasi', type:'Service Station', district:'Kwabre East District', region:'Ashanti Region', lat:6.7900, lng:-1.6100, status:'open' },\r\n    { name:'Manhyia', type:'Service Station', district:'Kumasi Metropolitan District', region:'Ashanti Region', lat:6.7080, lng:-1.6180, status:'open' },\r\n    { name:'Pankrono', type:'Service Station', district:'Kwabre East District', region:'Ashanti Region', lat:6.7400, lng:-1.6020, status:'open' },\r\n    { name:'Tafo Nhyiaeso', type:'Service Station', district:'Kumasi Metropolitan District', region:'Ashanti Region', lat:6.7220, lng:-1.6080, status:'open' },\r\n    { name:'Drobo', type:'Filling Station', district:'Jaman South Municipal', region:'Bono Region', lat:7.7330, lng:-2.6970, status:'open' },\r\n    { name:'Sunyani', type:'Service Station', district:'Sunyani Municipal District', region:'Bono Region', lat:7.3390, lng:-2.3270, status:'open' },\r\n    { name:'Wenchi', type:'Service Station', district:'Wenchi Municipal', region:'Bono Region', lat:7.7370, lng:-2.1020, status:'open' },\r\n    { name:'Techiman', type:'Service Station', district:'Techiman Municipal District', region:'Bono East Region', lat:7.5910, lng:-1.9390, status:'open' },\r\n    { name:'Techiman 2', type:'Service Station', district:'Techiman Municipal District', region:'Bono East Region', lat:7.5950, lng:-1.9420, status:'open' },\r\n    { name:'Yeji', type:'Service Station', district:'Pru District', region:'Bono East Region', lat:8.2170, lng:-0.6680, status:'open' },\r\n    { name:'Ayanfuri', type:'Service Station', district:'Upper Denkyira West Municipal', region:'Central Region', lat:5.7370, lng:-1.9920, status:'open' },\r\n    { name:'Essuekyir', type:'Filling Station', district:'Cape Coast Metropolitan District', region:'Central Region', lat:5.1330, lng:-1.2570, status:'open' },\r\n    { name:'Kasoa', type:'Filling Station', district:'Awutu Senya East Municipal', region:'Central Region', lat:5.5320, lng:-0.4170, status:'open' },\r\n    { name:'Mankessim', type:'Service Station', district:'Mfantseman Municipal District', region:'Central Region', lat:5.2700, lng:-1.0220, status:'open' },\r\n    { name:'Akim Afosu', type:'Filling Station', district:'Birim North Municipal', region:'Eastern Region', lat:6.3000, lng:-0.8500, status:'open' },\r\n    { name:'Kyebi', type:'Service Station', district:'Abuakwa South District', region:'Eastern Region', lat:6.1670, lng:-0.5670, status:'open' },\r\n    { name:'Accra-Newtown', type:'Service Station', district:'Ayawaso North District', region:'Greater Accra Region', lat:5.5720, lng:-0.2120, status:'open' },\r\n    { name:'Adabraka', type:'Service Station', district:'Korley Klottey Municipal', region:'Greater Accra Region', lat:5.5610, lng:-0.2080, status:'open' },\r\n    { name:'Amamorley', type:'Filling Station', district:'Ga North District', region:'Greater Accra Region', lat:5.7100, lng:-0.2700, status:'open' },\r\n    { name:'Ashaiman Zenu', type:'Service Station', district:'Ashaiman Municipal', region:'Greater Accra Region', lat:5.6920, lng:-0.0330, status:'open' },\r\n    { name:'Chemu Road', type:'Service Station', district:'Ablekuma Municipal', region:'Greater Accra Region', lat:5.5660, lng:-0.2440, status:'open' },\r\n    { name:'Dodowa', type:'Service Station', district:'Shai Osudoku District', region:'Greater Accra Region', lat:5.8830, lng:-0.1000, status:'open' },\r\n    { name:'Korle Gonno', type:'Service Station', district:'Weija Gbawe Municipal', region:'Greater Accra Region', lat:5.5280, lng:-0.2370, status:'open' },\r\n    { name:'Mallam-Gbawe', type:'Service Station', district:'Weija Gbawe Municipal', region:'Greater Accra Region', lat:5.5680, lng:-0.3050, status:'open' },\r\n    { name:'Madina Estates', type:'Service Station', district:'La Nkwantanang Madina Municipal', region:'Greater Accra Region', lat:5.6840, lng:-0.1670, status:'open' }\r\n  ];\r\n\r\n  \/\/ ====================== LOCATION PICKER ============================\r\n  \/\/ Leaflet is loaded dynamically via JS so WordPress can never block it\r\n\r\n  var lpgMap = null, lpgMarker = null, lpgSearchTimer = null, lpgLeafletReady = false;\r\n\r\n  var lpgRegionMap = {\r\n    'ahafo':'Ahafo Region','ashanti':'Ashanti Region','brong-ahafo':'Bono Region',\r\n    'bono':'Bono Region','bono east':'Bono East Region','central':'Central Region',\r\n    'eastern':'Eastern Region','greater accra':'Greater Accra Region',\r\n    'north east':'North East Region','northern':'Northern Region','oti':'Oti Region',\r\n    'savannah':'Savannah Region','upper east':'Upper East Region',\r\n    'upper west':'Upper West Region','volta':'Volta Region','western':'Western Region',\r\n    'western north':'Western North Region'\r\n  };\r\n\r\n  function lpgMatchRegion(stateStr) {\r\n    var s = (stateStr || '').toLowerCase().replace(' region','').trim();\r\n    if (lpgRegionMap[s]) return lpgRegionMap[s];\r\n    var m = '';\r\n    Object.keys(lpgRegionMap).forEach(function(k) {\r\n      if (!m && (s.indexOf(k)!==-1 || k.indexOf(s)!==-1)) m = lpgRegionMap[k];\r\n    });\r\n    return m;\r\n  }\r\n\r\n  function lpgFillFromAddr(addr) {\r\n    if (!addr) return;\r\n    var district = addr.county || addr.state_district || addr.district || addr.city_district || addr.municipality || '';\r\n    if (district) {\r\n      var d = document.getElementById('lpg-add-district');\r\n      if (d) d.value = district;\r\n    }\r\n    var region = lpgMatchRegion(addr.state || '');\r\n    if (region) {\r\n      var r = document.getElementById('lpg-add-region');\r\n      if (r) r.value = region;\r\n    }\r\n  }\r\n\r\n  function lpgSetPin(lat, lng, addr) {\r\n    document.getElementById('lpg-add-lat').value = parseFloat(lat).toFixed(6);\r\n    document.getElementById('lpg-add-lng').value = parseFloat(lng).toFixed(6);\r\n    if (addr) lpgFillFromAddr(addr);\r\n    var status = document.getElementById('lpg-pin-status');\r\n    if (status) status.style.display = 'block';\r\n    if (lpgMap) {\r\n      if (lpgMarker) lpgMap.removeLayer(lpgMarker);\r\n      lpgMarker = window.L.marker([lat, lng]).addTo(lpgMap);\r\n      lpgMap.setView([lat, lng], 15);\r\n    }\r\n  }\r\n\r\n  function lpgReverseGeocode(lat, lng) {\r\n    fetch('https:\/\/nominatim.openstreetmap.org\/reverse?format=json&lat='+lat+'&lon='+lng+'&addressdetails=1',\r\n      { headers: {'Accept-Language':'en'} })\r\n      .then(function(r){return r.json();})\r\n      .then(function(d){ if(d && d.address) lpgFillFromAddr(d.address); })\r\n      .catch(function(){});\r\n  }\r\n\r\n  function lpgInitMap() {\r\n    if (lpgMap) { lpgMap.invalidateSize(); return; }\r\n    var el = document.getElementById('lpg-pin-map');\r\n    if (!el || !window.L) return;\r\n    el.style.height = '300px';\r\n    lpgMap = window.L.map(el, { scrollWheelZoom: false }).setView([7.9465, -1.0232], 7);\r\n    window.L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n      attribution: '\u00a9 OpenStreetMap', maxZoom: 19\r\n    }).addTo(lpgMap);\r\n    lpgMap.on('click', function(e) {\r\n      lpgSetPin(e.latlng.lat, e.latlng.lng, null);\r\n      lpgReverseGeocode(e.latlng.lat, e.latlng.lng);\r\n    });\r\n    setTimeout(function(){ lpgMap.invalidateSize(); }, 200);\r\n  }\r\n\r\n  \/\/ Dynamically inject Leaflet CSS + JS \u2014 fires when admin panel opens\r\n  function lpgLoadLeaflet(cb) {\r\n    if (window.L) { cb(); return; }\r\n    \/\/ CSS\r\n    var css = document.createElement('link');\r\n    css.rel = 'stylesheet';\r\n    css.href = 'https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css';\r\n    document.head.appendChild(css);\r\n    \/\/ JS\r\n    var js = document.createElement('script');\r\n    js.src = 'https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js';\r\n    js.onload = function() { cb(); };\r\n    document.head.appendChild(js);\r\n  }\r\n\r\n  \/\/ Live search\r\n  window.lpgLiveSearch = function(val) {\r\n    clearTimeout(lpgSearchTimer);\r\n    var el = document.getElementById('lpg-addr-results');\r\n    if (!val || val.length < 2) { el.innerHTML=''; return; }\r\n    el.innerHTML = '<div style=\"padding:10px 4px;font-size:13px;color:var(--lpg-text-muted);display:flex;align-items:center;gap:8px;\"><span class=\"lpg-search-spinner\"><\/span> Searching...<\/div>';\r\n    lpgSearchTimer = setTimeout(function() {\r\n      fetch('https:\/\/nominatim.openstreetmap.org\/search?format=json&limit=7&countrycodes=gh&addressdetails=1&q='+encodeURIComponent(val),\r\n        { headers:{'Accept-Language':'en','User-Agent':'XpressGas\/1.0'} })\r\n        .then(function(r){return r.json();})\r\n        .then(function(results) {\r\n          if (!results || !results.length) {\r\n            el.innerHTML='<div style=\"padding:10px 4px;font-size:13px;color:var(--lpg-text-muted);\">No results \u2014 try a different search.<\/div>';\r\n            return;\r\n          }\r\n          el.innerHTML = results.map(function(r) {\r\n            var parts = r.display_name.split(',');\r\n            var title = parts.slice(0,2).join(',').trim();\r\n            var sub   = parts.slice(2,4).filter(Boolean).join(', ').trim();\r\n            var addrEnc = encodeURIComponent(JSON.stringify(r.address||{}));\r\n            return '<div class=\"lpg-addr-result\" onclick=\"lpgPickSearch('+r.lat+','+r.lon+',\\''+\r\n              title.replace(\/'\/g,'&#39;')+'\\',decodeURIComponent(\\''+addrEnc+'\\'))\">' +\r\n              '<div class=\"lpg-addr-result-name\">&#128205; '+escapeHtml(title)+'<\/div>'+\r\n              (sub?'<div class=\"lpg-addr-result-full\">'+escapeHtml(sub)+'<\/div>':'')+\r\n            '<\/div>';\r\n          }).join('');\r\n        })\r\n        .catch(function(){ el.innerHTML='<div style=\"padding:10px 4px;font-size:13px;color:var(--lpg-red);\">Search failed.<\/div>'; });\r\n    }, 380);\r\n  };\r\n\r\n  window.lpgPickSearch = function(lat, lng, title, addrJson) {\r\n    try { lpgSetPin(lat, lng, JSON.parse(addrJson)); }\r\n    catch(e) { lpgSetPin(lat, lng, null); lpgReverseGeocode(lat, lng); }\r\n    var el = document.getElementById('lpg-addr-results');\r\n    el.innerHTML = '<div style=\"padding:9px 12px;background:var(--lpg-primary-soft);border:1px solid var(--lpg-primary);border-radius:8px;font-size:13px;font-weight:700;color:var(--lpg-primary-dark);display:flex;align-items:center;justify-content:space-between;\">'+\r\n      '<span>&#10003; '+escapeHtml(title)+'<\/span>'+\r\n      '<button onclick=\"document.getElementById(\\'lpg-addr-results\\').innerHTML=\\'\\';document.getElementById(\\'lpg-addr-search\\').value=\\'\\'\" style=\"background:none;border:none;cursor:pointer;font-size:16px;color:var(--lpg-text-muted);\">&times;<\/button>'+\r\n    '<\/div>';\r\n    document.getElementById('lpg-addr-search').value = '';\r\n  };\r\n\r\n  function lpgSeedIfEmpty() {\r\n    fetch(LPG_API, { credentials: 'same-origin' })\r\n      .then(function(r) { return r.json(); })\r\n      .then(function(data) {\r\n        if (Array.isArray(data) && data.length === 0) {\r\n          \/\/ Database is empty \u2014 seed all stations one by one\r\n          var chain = Promise.resolve();\r\n          lpgSeedData.forEach(function(s) {\r\n            chain = chain.then(function() {\r\n              var body = new FormData();\r\n              Object.keys(s).forEach(function(k) { body.append(k, s[k]); });\r\n              return fetch(LPG_API, { method: 'POST', credentials: 'same-origin', body: body });\r\n            });\r\n          });\r\n          chain.then(function() {\r\n            lpgFetchStations(function() { lpgRenderList(); });\r\n          });\r\n        } else {\r\n          lpgStations = data;\r\n          lpgRenderList();\r\n        }\r\n      })\r\n      .catch(function() {\r\n        \/\/ Fallback to hardcoded data if API unreachable\r\n        lpgStations = lpgSeedData.map(function(s, i) { return Object.assign({ id: i+1 }, s); });\r\n        lpgRenderList();\r\n      });\r\n  }\r\n\r\n  \/\/ admin-bar class is added by WordPress only for users with toolbar access (admins\/editors)\r\n  var lpgIsAdmin = document.body.classList.contains('admin-bar');\r\n\r\n  window.lpgSetMode = function(mode) {\r\n    if (mode === 'admin' && !lpgIsAdmin) return;\r\n    document.getElementById('lpg-btn-finder').classList.toggle('active', mode === 'finder');\r\n    document.getElementById('lpg-btn-admin').classList.toggle('active', mode === 'admin');\r\n    document.getElementById('lpg-finder-mode').style.display = mode === 'finder' ? 'block' : 'none';\r\n    document.getElementById('lpg-admin-mode').style.display  = mode === 'admin'  ? 'block' : 'none';\r\n    if (mode === 'admin') {\r\n      lpgFetchStations(function() { lpgRenderAdminList(); });\r\n      \/\/ Load Leaflet dynamically then init the pin map\r\n      lpgLoadLeaflet(function() {\r\n        setTimeout(lpgInitMap, 100);\r\n      });\r\n    }\r\n  };\r\n\r\n  \/\/ Boot\r\n  lpgSeedIfEmpty();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>LPG station finder organized by region, with a region jump list, station details, get-directions links, and an editable station list Find LPG near you Station finder Loading stations&#8230; Find a station Manage stations &#128269; Select a region Add or edit stations here, then copy this updated file and paste it back into your WordPress Custom HTML block to publish the<\/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":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"_joinchat":[],"footnotes":""},"class_list":["post-831","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xpressgas.com\/index.php\/wp-json\/wp\/v2\/pages\/831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xpressgas.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xpressgas.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xpressgas.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xpressgas.com\/index.php\/wp-json\/wp\/v2\/comments?post=831"}],"version-history":[{"count":40,"href":"https:\/\/xpressgas.com\/index.php\/wp-json\/wp\/v2\/pages\/831\/revisions"}],"predecessor-version":[{"id":1015,"href":"https:\/\/xpressgas.com\/index.php\/wp-json\/wp\/v2\/pages\/831\/revisions\/1015"}],"wp:attachment":[{"href":"https:\/\/xpressgas.com\/index.php\/wp-json\/wp\/v2\/media?parent=831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}