{extends file='cms_template:csm master'}

{block name='content'}



    <div class="rts-breadcrumb-area one" data-bg-src="{uploads_url}/{$item->image|replace:' ':'%20'}">
        <div class="container h-100">
            <div class="breadcrumb-area-wrapper">
                <div class="nav-bread-crumb">
                    <a href="index.html">Home</a>
                    <span><i class="fa-regular fa-chevron-right"></i></span>
                    <a href="#" class="current">Inspiration</a>
                </div>
                <h1 class="title">{$item->title}</h1>
            </div>
        </div>
    </div>


    <!-- rts Blog area start -->
    <section class="rts-blog-area inner rts-section-gap">
        <div class="container">
            <div class="section-inner">
                <div class="row g-5">
                    <div class="col-lg-8 wow fadeInLeft" data-wow-delay="0.2s">

                        <div class="blog-details-area">

                            <h2 class="mb--30">{$item->subtitle}</h2>
                            <ul class="meta-content">
                                <li><i class="fa-regular fa-location-dot"></i>Route: {$item->route}</li>
                                <li><i class="fa-regular fa-users"></i> {$item->category}</li>
                                
                            </ul>





                            <p class="mb--30">{$item->introduction}</p>
                            <p>{$item->body}</p>


                            <div class="itinerary-area">
                                <div class="itinerary-header"
                                    style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                                    <h2 style="margin: 0;">Itinerary</h2>
                                    <div class="expand-toggle" style="display: flex; align-items: center;">
                                        <span style="font-size: 14px; font-weight: 600; color: #666;">Expand all</span>
                                        <label class="switch">
                                            <input type="checkbox" id="expandAll" onclick="toggleAllItinerary()">
                                            <span class="slider"></span>
                                        </label>
                                    </div>
                                </div>

                               

                                <div class="itinerary-list-container">
                                    {* 1. Strip HTML and split the text by the word 'Day ' to create individual sections *}
                                    {$raw_text = $item->itinerary_days|strip_tags}
                                    {$day_chunks = "Day "|explode:$raw_text}

                                    {foreach from=$day_chunks item=chunk name=itinerary}
                                        {if !empty($chunk|trim)}
                                            {* Logic: the first actual day is usually index 2 in an explode like this *}
                                            <div class="itinerary-item {if $smarty.foreach.itinerary.iteration == 2}active{/if}">

                                                <div class="icon-box">
                                                    {if $smarty.foreach.itinerary.iteration == 2}
                                                        {* Day 1 Pin *}
                                                        <img src="{uploads_url}/csm/assets/images/trip/icon/14.svg" width="34">
                                                    {else}
                                                        {* Blue Rings for all other days *}
                                                        <div class="blue-ring"></div>
                                                    {/if}
                                                </div>

                                                <button class="itinerary-title-btn"
                                                    onclick="this.parentElement.classList.toggle('active')">
                                                    Day {$smarty.foreach.itinerary.iteration - 1}
                                                </button>

                                                <div class="itinerary-content">
                                                    <p>
                                                        {* Removes the leading number and colon from the text chunk *}
                                                        {$chunk|regex_replace:'/^\d+:\s*/':''}
                                                    </p>
                                                </div>
                                            </div>
                                        {/if}
                                    {/foreach}
                                </div>
                            </div>

                            <script>
                                function toggleAllItinerary() {
                                    const isChecked = document.getElementById('expandAll').checked;
                                    const items = document.querySelectorAll('.itinerary-item');
                                    items.forEach((item, index) => {
                                        if (isChecked) {
                                            item.classList.add('active');
                                        } else {
                                            // Keep only the first day active when turning off
                                            if (index === 0) item.classList.add('active');
                                            else item.classList.remove('active');
                                        }
                                    });
                                }
                            </script>


                            <p class="mb--30">All itinerary details subject to availability and confirmation. Hotel and
                                excursion prices are dynamic and subject to change.</p>

                            <h2 class="mb--30">Map</h2>



                                        <!-- 1. External Assets -->
                                        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
                                        <link rel="stylesheet"
                                            href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />
                                        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
                                        <script
                                            src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js">
                                        </script>                                        
                                        <script src="{uploads_url}/csm/assets/js/locations.js"></script>

                                        <div id="atlas-container">
                                            <div id="atlas-map"></div>
                                            <div class="map-branding-overlay">csmtravel.com</div>
                                        </div>

                                        <script>
                                            {literal}
                                                document.addEventListener('DOMContentLoaded', function() {
                                                    // 1. Database of coordinates (from your provided script)
                                                   

                                                    function boxesOverlap(a, b) {
                                                        return !(a.right < b.left || a.left > b.right || a.bottom < b
                                                            .top || a.top > b.bottom);
                                                    }

                                                    // 2. Map Initialization
                                                    const map = L.map('atlas-map', { attributionControl: false,
                                                        zoomSnap: 0.1, zoomControl: false, preferCanvas: true });
                                                    map.createPane("atlasPane").style.zIndex = 350;

                                                    L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { crossOrigin: true }).addTo(map);

                                                    atlasLabels.forEach(l => {
                                                        L.marker([l.lat, l.lng], {
                                                            pane: "atlasPane",
                                                            interactive: false,
                                                            icon: L.divIcon({ className: l.cls, html: l
                                                                    .name, iconSize: [500, 50],
                                                                iconAnchor: [250, 25] })
                                                        }).addTo(map);
                                                    });

                                                    // 3. GET ROUTE FROM SMARTY
                                                {/literal}
                                                const routeInput = "{$item->route|escape:'javascript'}";
                                                {literal}

                                                    const stops = routeInput.split(/[–—•>-]+/).map(s => s.trim())
                                                        .filter(Boolean);

                                                    const pts = stops.map(s => {
                                                        const normalized = s.toLowerCase();
                                                        const key = Object.keys(locationLookup).find(k => k
                                                            .toLowerCase() === normalized);
                                                        return key ? { name: key, lat: locationLookup[key][0],
                                                            lng: locationLookup[key][1] } : null;
                                                    }).filter(Boolean);

                                                    if (pts.length >= 2) {
                                                        const routeBounds = L.latLngBounds(pts.map(p => [p.lat, p
                                                        .lng]));
                                                        map.fitBounds(routeBounds.pad(0.35));

                                                        let pending = 0;
                                                        pts.forEach((pt, i) => {
                                                            if (i === pts.length - 1) return;
                                                            const start = pt,
                                                                end = pts[i + 1];
                                                            const isFerry = ferryPairs.some(p => (p[0]
                                                                .toLowerCase() === start.name
                                                                .toLowerCase() && p[1].toLowerCase() ===
                                                                end.name.toLowerCase()));

                                                            if (isFerry) {
                                                                L.polyline([
                                                                        [start.lat, start.lng],
                                                                        [end.lat, end.lng]
                                                                    ], { color: "#2a82c9", weight: 4,
                                                                        dashArray: "8, 12", opacity: 0.9 })
                                                                    .addTo(map);
                                                            } else {
                                                                pending++;
                                                                L.Routing.control({
                                                                    waypoints: [L.latLng(start.lat,
                                                                        start.lng), L.latLng(end
                                                                        .lat, end.lng)],
                                                                    router: L.Routing
                                                                .osrmv1({ serviceUrl: "https://router.project-osrm.org/route/v1" }),
                                                                    createMarker: () => null,
                                                                    lineOptions: { styles: [
                                                                        { color: "#2a82c9",
                                                                            opacity: 0.8,
                                                                            weight: 5 }] },
                                                                    fitSelectedRoutes: false
                                                                }).on('routesfound', () => {
                                                                    pending--;
                                                                    if (pending === 0) placeCityLabels(
                                                                        map, pts);
                                                                }).on('routingerror', () => {
                                                                    pending--;
                                                                    if (pending === 0) placeCityLabels(
                                                                        map, pts);
                                                                }).addTo(map);
                                                            }
                                                        });
                                                        if (pending === 0) placeCityLabels(map, pts);
                                                    }

                                                    function placeCityLabels(map, pts) {
                                                        const placedBoxes = [];
                                                        const renderedNames = new Set();
                                                        pts.forEach(pt => {
                                                            if (renderedNames.has(pt.name)) return;
                                                            renderedNames.add(pt.name);
                                                            const point = map.latLngToContainerPoint([pt.lat, pt
                                                                .lng
                                                            ]);
                                                            const width = pt.name.length * 9;
                                                            const topBox = { left: point.x - width / 2,
                                                                right: point.x + width / 2, top: point.y -
                                                                    25, bottom: point.y - 5 };
                                                            let cls = "pos-top";
                                                            if (placedBoxes.some(b => boxesOverlap(b,
                                                                topBox))) {
                                                                cls = "pos-bottom";
                                                                placedBoxes.push({ left: point.x - width / 2,
                                                                    right: point.x + width / 2,
                                                                    top: point.y + 5, bottom: point.y +
                                                                        25 });
                                                            } else { placedBoxes.push(topBox); }
                                                            L.marker([pt.lat, pt.lng], {
                                                                interactive: false,
                                                                icon: L.divIcon({
                                                                    className: "city-label-container",
                                                                    html: `<div class="city-dot"></div><div class="city-text ${cls}">${pt.name}</div>`, 
                                                                    iconSize: [0, 0]
                                                                })
                                                            }).addTo(map);
                                                        });
                                                    }

                                                    // 4. Tab Visibility Fix
                                                    var tabEl = document.querySelector('#location-tab');
                                                    if (tabEl) {
                                                        tabEl.addEventListener('shown.bs.tab', function() {
                                                            map.invalidateSize();
                                                            if (pts.length >= 2) {
                                                                map.fitBounds(L.latLngBounds(pts.map(p => [p
                                                                    .lat, p.lng
                                                                ])).pad(0.35));
                                                            }
                                                        });
                                                    }
                                                });
                                            {/literal}
                                        </script>                         

                            <br><br>

                            


                            <style>
                                /* This forces all gallery images to a specific height and ratio */
                                .gallery-wrapper .hover-image {
                                    width: 100%;
                                    height: 250px;
                                    /* Set the height you want here */
                                    object-fit: cover;
                                    /* This is the magic: it crops instead of stretching */
                                    display: block;
                                }

                                /* Optional: If you want them to be perfect squares, use this instead of height */
                                /*
    .gallery-wrapper .hover-image {
        width: 100%;
        aspect-ratio: 1 / 1; 
        object-fit: cover;
    }
    */
                                .mfp-counter {
                                    display: none;
                                }

                                /* Styled caption that sits cleanly under the image wrapper */
                                .gallery-caption {
                                    display: block;
                                    margin-top: 10px;
                                    font-size: 14px;
                                    color: #333;
                                    text-align: center;
                                    font-weight: 500;
                                    text-transform: capitalize;
                                }
                            </style>

                            {* 1. Extract and trim values *}
                            {$img1 = $item->fielddefs.gallery1.value|trim}
                            {$img2 = $item->fielddefs.gallery2.value|trim}
                            {$img3 = $item->fielddefs.gallery3.value|trim}
                            {$img4 = $item->fielddefs.gallery4.value|trim}

                            {if $img1 != '' || $img2 != '' || $img3 != '' || $img4 != ''}

                                <h2 class="mb--30">Gallery</h2>

                                <div class="row">
                                    {$my_gallery = [$img1, $img2, $img3, $img4]}

                                    {foreach from=$my_gallery item=img name=galleryLoop}

                                        {if $img != ''}
                                            {* Clean up the image name: strip folder path, drop file extension, and swap underscores/dashes for spaces *}
                                            {$cleanName = $img|regex_replace:'/.*\//':''|regex_replace:'/\.[^.]+$/':''|replace:'_':' '|replace:'-':' '}

                                            <div class="col-lg-3 col-md-4 col-sm-6 col-6 mb--30">
                                                {* Added margin bottom for spacing rows *}
                                                <div class="gallery-wrapper with-icon wow scaleIn"
                                                    data-wow-delay="{$smarty.foreach.galleryLoop.index * 0.2}s">

                                                    {* Fixed URLs inline to convert spaces to %20 dynamically without altering paths or underscores *}
                                                    <a href="{uploads_url}/{$img|replace:' ':'%20'}" title="{$cleanName}"
                                                        class="gallery-image image-transform">

                                                        <img class="hover-image" src="{uploads_url}/{$img|replace:' ':'%20'}"
                                                            alt="{$cleanName}">

                                                        <span class="icon">
                                                            <img src="assets/images/gallery/insta.svg" alt="">
                                                        </span>
                                                    </a>

                                                    {* Text caption output securely placed underneath the photo wrapper *}


                                                </div>
                                            </div>
                                        {/if}

                                    {/foreach}
                                </div>

                            {/if}



                            <div class="share-link mb--40 mt--40">
                                <h2>Share</h2>
                                <ul>
                                    <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-linkedin"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
                                </ul>
                            </div>



                            <div class="rts-blog-area inner">
                                <h3 class="mb--40 text-center">Related listings</h3>
                                <div class="row g-5">
                                    <div class="col-lg-6">
                                        <div class="blog-wrapper image-transform radius-10">
                                            <div class="image-area">
                                                <a href="blog-details.html"><img class="hover-image"
                                                        src="{uploads_url}/csm/assets/images/blog/01.webp" alt=""></a>
                                            </div>
                                            <div class="author-area">
                                                <div class="image"><img
                                                        src="{uploads_url}/csm/assets/images/blog/author/01.svg" alt="">
                                                </div>
                                                <p class="text">Post By <br> <span>Reacthemes</span></p>
                                            </div>
                                            <div class="content-area">
                                                <div class="blog-meta">
                                                    <ul>
                                                        <li>12 May, 2025</li>
                                                        <li class="mid"></li>
                                                        <li>2 Min Read</li>
                                                    </ul>
                                                </div>
                                                <h5 class="blog-title">
                                                    <a class="title-w-hover" href="#"> Top 10 Essential Travel Tips for
                                                        First-Time Travelers</a>
                                                </h5>
                                                <ul class="tags">
                                                    <li><a href="#">Train Journey</a></li>
                                                    <li><a href="#">Railway</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="blog-wrapper image-transform radius-10">
                                            <div class="image-area">
                                                <a href="blog-details.html"><img class="hover-image"
                                                        src="{uploads_url}/csm/assets/images/blog/02.webp" alt=""></a>
                                            </div>
                                            <div class="author-area">
                                                <div class="image"><img
                                                        src="{uploads_url}/csm/assets/images/blog/author/02.svg" alt="">
                                                </div>
                                                <p class="text">Post By <br> <span>Reacthemes</span></p>
                                            </div>
                                            <div class="content-area">
                                                <div class="blog-meta">
                                                    <ul>
                                                        <li>17 May, 2025</li>
                                                        <li class="mid"></li>
                                                        <li>2 Min Read</li>
                                                    </ul>
                                                </div>
                                                <h5 class="blog-title">
                                                    <a class="title-w-hover" href="#"> International Travel Checklist:
                                                        What You Must Not Forget</a>
                                                </h5>
                                                <ul class="tags">
                                                    <li><a href="#">Mountain</a></li>
                                                    <li><a href="#">Travel</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="sticky-top top-100px">
                            <div class="left-sidebar-area radius-10">

                                <div class="destination side-box">
                                    <h6>Destination Inspiration <h6>
                                            <ul class="checkbox-list">
                                                <li class="checkbox-item">
                                                    <label class="checkbox-label">
                                                        <input type="checkbox" checked="">
                                                        <span>Alberta</span>
                                                    </label>
                                                </li>

                                            </ul>

                                            <span class="cross"><i class="fa-regular fa-chevron-up"></i></span>
                                </div>
                                <div class="blog-post side-box">
                                    <h6>Recent Post</h6>
                                    <ul class="blog-list">
                                        <li>
                                            <div class="image-area image-transform radius-10">
                                                <a href="blog-details.html">
                                                    <img class="hover-image"
                                                        src="{uploads_url}/csm/assets/images/blog/01.webp" width="100"
                                                        alt="">
                                                </a>
                                            </div>
                                            <div class="content">
                                                <h6><a class="title-p-hover" href="blog-details.html">10 Tips for First-Time
                                                        Car What You Need to Know</a></h6>
                                                <p class="blog-meta">May 26, 2024</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="image-area image-transform radius-10">
                                                <a href="blog-details.html">
                                                    <img class="hover-image"
                                                        src="{uploads_url}/csm/assets/images/blog/02.webp" width="100"
                                                        alt="">
                                                </a>
                                            </div>
                                            <div class="content">
                                                <h6><a class="title-p-hover" href="blog-details.html">Top 5 Reasons to Buy a
                                                        for Pre-Owned Vehicle</a></h6>
                                                <p class="blog-meta">May 26, 2024</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="image-area image-transform radius-10">
                                                <a href="blog-details.html">
                                                    <img class="hover-image"
                                                        src="{uploads_url}/csm/assets/images/blog/03.webp" width="100"
                                                        alt="">
                                                </a>
                                            </div>
                                            <div class="content">
                                                <h6><a class="title-p-hover" href="blog-details.html">How to Choose the
                                                        Perfect Car for Your Lifestyle</a></h6>
                                                <p class="blog-meta">May 26, 2024</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- rts Blog area end -->



{/block}