{extends file='cms_template:csm master'}

{block name='content'}



    <!-- breadcrumb area start -->
    <!-- rts breadcrumb area start -->
    {if empty($item->image)}
   <div class="rts-breadcrumb-area one" data-bg-src="https://www.csmtravel.com/cmss/uploads/csm/assets/images/breadcrumb/01.webp">
{else}
   <div class="rts-breadcrumb-area one" data-bg-src="{uploads_url}/{$item->image|replace:' ':'%20'}">
{/if}
        <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">Packages</a>
                </div>
                <h1 class="title"></h1>
            </div>
        </div>
    </div>
    <!-- rts breadcrumb area end -->
    <!-- breadcrumb area end -->

    <div class="rts-tour-details-area pt--60 rts-section-gapBottom bg-white">
        <div class="container">
            <div class="bottom-content-area g-5 mt--50">
                <div class="left">
                    <div class="tour-details-wrapper content-box radius-10 border overflow-hidden">
                        <div class="tour-content">
                            <div class="left-content" style="max-width: 650px;">
                                <h4 class="title">{$item->title}{$item->subtitle}</h4>

                                <ul class="meta-area">
                                    <li><i class="fa-regular fa-location-dot"></i> {$item->destination}</li>
                                    <li><i class="fa-light fa-users"></i> {$item->trip_types}</li>
                                    <li><i class="fa-solid fa-code-branch"></i> {$item->package_code}</li>
                                </ul>
                                <ul class="meta-area" style="margin-top: 10px;">
                                    <li><i class="fa-solid fa-chart-line"></i> {$item->activity_level}</li>
                                    <li><i class="fa-solid fa-plane"></i> {$item->start}</li>

                                </ul>
                                <ul class="meta-area" style="margin-top: 10px;">
                                    <li> <i class="fa-solid fa-route"></i> {$item->route}</li>


                                </ul>



                            </div>
                            <div class="right-content">
                                <div class="day-left">
                                    <h4>{$item->duration|regex_replace:'/^(\d+).*/':'$1'}</h4>
                                    <p>days</p>
                                </div>
                            </div>
                        </div>


                    </div>

                    <div class="content-box tour-details-tab-area radius-10 border overflow-hidden">
                        <ul class="nav nav-tabs border-bottom" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="overview-tab" data-bs-toggle="tab"
                                    data-bs-target="#overview" type="button" role="tab" aria-controls="overview"
                                    aria-selected="true">Overview</button>
                            </li>

                            {if !empty($item->package_details)}
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="itinerary-tab" data-bs-toggle="tab" data-bs-target="#itinerary"
                                        type="button" role="tab" aria-controls="itinerary" aria-selected="false">
                                        Itinerary
                                    </button>
                                </li>
                            {/if}



                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="location-tab" data-bs-toggle="tab" data-bs-target="#location"
                                    type="button" role="tab" aria-controls="location"
                                    aria-selected="false">Location</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="gallery-tab" data-bs-toggle="tab" data-bs-target="#gallery"
                                    type="button" role="tab" aria-controls="gallery" aria-selected="false">Gallery</button>
                            </li>
                        </ul>

                        <div class="tour-details-tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="overview" role="tabpanel"
                                aria-labelledby="overview-tab">
                                <div class="tab-content-inner">
                                    <div class="overview-area mb--60">
                                        <h5 class="title mb--15">Overview</h5>
                                        <p class="desc">{$item->introduction}</p>
                                    </div>
                                    <div class="highlight-area">
                                        <h5 class="title">Highlights:</h5>

                                        <style>
                                            .tour-inclusions ul {
                                                list-style: none;
                                                padding: 0;
                                                margin: 0;
                                            }

                                            .tour-inclusions li {
                                                position: relative;

                                                margin-bottom: 10px;
                                            }
                                        </style>

                                        <div class="tour-inclusions">
                                            {$item->body|replace:'<li>':'<li><i class="fa-regular fa-check">&nbsp;&nbsp;  </i>  '}
                                        </div>


                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="itinerary" role="tabpanel" aria-labelledby="itinerary-tab">
    <div class="tab-content-inner">
        <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">
                {* Logic to clean the HTML list and split into days *}
                {$clean_details = $item->package_details|replace:'<ul>':''|replace:'</ul>':''|trim}
                {$li_items = "<li>"|explode:$clean_details}
                {$itinerary_days = []}
                {foreach from=$li_items item=li}
                    {$cleaned_li = $li|replace:'</li>':''|trim}
                    {if !empty($cleaned_li)}{$itinerary_days[] = $cleaned_li}{/if}
                {/foreach}

                {foreach from=$itinerary_days item=day_text name=itinerary}
                    {$parts = ":"|explode:$day_text:2}
                    {$day_title = $parts[0]|trim}
                    {$day_content = $parts[1]|trim}
                    
                    <div class="itinerary-item {if $smarty.foreach.itinerary.first}active{/if}">
                        <div class="icon-box">
                            {if $smarty.foreach.itinerary.first}
                                <img src="{uploads_url}/csm/assets/images/trip/icon/14.svg" width="34">
                            {else}
                                <div class="blue-ring"></div>
                            {/if}
                        </div>

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

                        <div class="itinerary-content">
                            <p>{$day_content}</p>
                        </div>
                    </div>
                {/foreach}
            </div>
        </div>
    </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 {
            // Collapse all except the first one
            if (index === 0) item.classList.add('active');
            else item.classList.remove('active');
        }
    });
}
</script>



                            <div class="tab-pane fade" id="location" role="tabpanel" aria-labelledby="location-tab">
                                <div class="tab-content-inner">
                                    <div class="highlight-area">
                                        <h5 class="title">Tour Map: {$item->title}</h5>

                                        <!-- 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>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="gallery" role="tabpanel" aria-labelledby="gallery-tab">
                                <div class="tab-content-inner">

                                    <div class="highlight-area">
                                        <h5 class="title">Gallery</h5>

                                        <style>
                                            .gallery-wrapper .hover-image {
                                                width: 100%;
                                                height: 250px;
                                                object-fit: cover;
                                                display: block;
                                            }

                                            .mfp-counter {
                                                display: none !important;
                                            }

                                            /* Added a small style helper for your text captions */
                                            .gallery-caption {
                                                display: block;
                                                margin-top: 8px;
                                                font-size: 14px;
                                                color: #333;
                                                text-align: center;
                                                font-weight: 500;
                                                text-transform: capitalize;
                                                /* Optional: Capitalizes the first letter of each word */
                                            }
                                        </style>

                                        {$img1 = $item->fielddefs.gallery1.value|trim}
                                        {$img2 = $item->fielddefs.gallery2.value|trim}
                                        {$img3 = $item->fielddefs.gallery3.value|trim}
                                        {$img4 = $item->fielddefs.gallery4.value|trim}
                                        {$img5 = $item->fielddefs.gallery5.value|trim}

                                        {if $img1 != '' || $img2 != '' || $img3 != '' || $img4 != '' || $img5 != ''}
                                            <div class="row">
                                                {$my_gallery = [$img1, $img2, $img3, $img4, $img5]}

                                                {foreach from=$my_gallery item=img name=galleryLoop}
                                                    {if $img != ''}
                                                        {* Clean up the image name: remove path, remove extension, replace underscores/dashes with spaces *}
                                                        {$cleanName = $img|regex_replace:'/.*\//':''|regex_replace:'/\.[^.]+$/':''|replace:'_':' '|replace:'-':' '}

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

                                                                <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>

                                                                {* THIS DISPLAYS THE CLEAN TEXT DIRECTLY UNDER THE PHOTO *}
                                                                <span class="gallery-caption">

                                                                </span>

                                                            </div>
                                                        </div>
                                                    {/if}
                                                {/foreach}
                                            </div>
                                        {/if}
                                    </div>
                                </div>
                            </div>
                        </div> {* End of myTabContent *}
                    </div> {* End of tour-details-tab-area *}

                    <div class="contact-area content-box radius-10 border overflow-hidden">





                        <div class="row g-24">
                            <div class="col-lg-12">
                                <a href="mailto:sales@example.com?subject=CSM Website %20Enquiry%20-%20{$item->title|replace:' ':'%20'}&body=Hello%2C%0A%0AI%20am%20interested%20in%20booking%20the%20following%20package%3A%0A%0APackage%3A%20{$item->title|replace:' ':'%20'}%0ACode%3A%20{$item->package_code|replace:' ':'%20'}%0APrice%3A%20%24{$item->starting_price}%2F%20per%20person%0ADuration%3A%20{$item->duration|regex_replace:'/^(\d+).*/':'$1'}%20days%0ARoute%3A%20{$item->route|replace:' ':'%20'}%0A%0AI%20have%20the%20following%20questions%2Fadjustments%3A%0A%0A%0AThank%20you"
                                    style="text-decoration: none; width: 100%;">
                                    <button type="button" class="rts-btn btn-primary border" style="width: 100%;">
                                        Send Inquiry
                                    </button>
                                </a>
                            </div>
                        </div>



                    </div>
                </div>

                <div class="right">
                    <div class="sticky-top">
                        <div class="content-box radius-10 border overflow-hidden pricing-box">

                            <h5>$ {$item->starting_price}<span>/ per person</span></h5>

                            <div class="mid-area">

                                <style>
                                    /* 1. Reduce space between list items (li) */
                                    .tour-inclusions li {
                                        display: flex !important;
                                        align-items: flex-start !important;
                                        margin-bottom: 4px !important;
                                        /* Reduced from 10px to 4px */
                                        line-height: 1.3 !important;
                                        /* Slightly tighter line spacing */
                                    }

                                    /* 2. Reduce space under "Package includes" and "Package excludes" titles */
                                    .tour-inclusions h5,
                                    .tour-inclusions .title {
                                        margin-bottom: 5px !important;
                                        /* Tightens space under the heading */
                                    }

                                    /* 3. Reduce space for the list container itself */
                                    .tour-inclusions ul {
                                        list-style: none !important;
                                        padding: 0 !important;
                                        margin-top: 5px !important;
                                        /* Tightens gap between title/line and the first item */
                                        margin-bottom: 20px !important;
                                        /* Space before the next section starts */
                                    }

                                    /* 4. Icon alignment for tighter lines */
                                    .tour-inclusions li i {
                                        flex-shrink: 0 !important;
                                        margin-right: 8px !important;
                                        margin-top: 3px !important;
                                        /* Adjusted slightly for the new line-height */
                                        color: #0088cc;
                                        font-size: 14px !important;
                                    }

                                    .tour-inclusions p {
                                        font-size: var(--font-size-b2);
                                        line-height: var(--line-height-b2);
                                        font-weight: 500;
                                        color: var(--color-body-1);
                                        margin: 0 0 00px;
                                    }
                                </style>

                                <div class="tour-inclusions">
                                    <span style="margin-bottom: 27px>;">Travel dates</span>
                                    {$item->departure_dates}<br>
                                    {$item->price_conditions|replace:'<li>':'<li><i class="fa-regular fa-check"></i>'}
                                </div>
                            </div>
                            {if !empty($item->reslynx_url)}
                                <a href="{$item->reslynx_url}" class="rts-btn btn-primary m-w-100 text-center border">Book
                                    online</a>
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{/block}