{extends file='cms_template:csm master'}

{block name='content'}



    <!-- breadcrumb area start -->
    <!-- rts breadcrumb area start -->
<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 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->subtitle}</h4>
                                <ul class="meta-area">
                                    <li><i class="fa-regular fa-location-dot"></i> {$item->destination}</li>
                                    <li><i class="fa-solid fa-hashtag"></i> {$item->trip_types}</li>
                                    <li><i class="fa-solid fa-hashtag"></i> {$item->package_code}</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>
                        <ul class="feature-list-area">
                            <li>
                                <div class="icon"><img src="{uploads_url}/csm/assets/images/trip/icon/03.svg" alt=""></div>
                                <div class="text">
                                    <p>Activity Level</p>
                                    <h6>{$item->activity_level}</h6>
                                </div>
                            </li>
                            <li>
                                <div class="icon"><img src="{uploads_url}/csm/assets/images/trip/icon/04.svg" alt=""></div>
                                <div class="text">
                                    <p>Accommodation</p>
                                    <h6>Budget</h6>
                                </div>
                            </li>
                            <li>
                                <div class="icon"><img src="{uploads_url}/csm/assets/images/trip/icon/06.svg" alt=""></div>
                                <div class="text">
                                    <p>Starts from</p>
                                    <h6>{$item->start}</h6>
                                </div>
                            </li>

                            </li>
                        </ul>
                    </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>
                            <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>

                            <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->route}</p>
                                        <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">
                                            <h2>Itinerary</h2>
                                            {$item->route}
                                        </div>
                                        <div class="itinerary-list">
                                            <style>
                                                .itinerary-list {
                                                    width: 100%;
                                                    text-align: left;
                                                    padding-left: 15px !important;
                                                    margin-left: 0 !important;
                                                }

                                                .itinerary-item {
                                                    padding-left: 40px !important;
                                                    margin-left: 0 !important;
                                                }

                                                .itinerary-title {
                                                    text-align: left !important;
                                                    background: transparent;
                                                    border: none;
                                                    display: flex !important;
                                                    align-items: center !important;
                                                    padding-left: 0 !important;
                                                    margin-left: 0 !important;
                                                }

                                                .itinerary-content {
                                                    padding-left: 5px !important;
                                                    margin-left: 0 !important;
                                                }
                                            </style>
                                            <div class="itinerary-list">
                                                {$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}
                                                    <div class="itinerary-item {if $smarty.foreach.itinerary.first}active{/if}">
                                                        {$parts = ":"|explode:$day_text:2}
                                                        {$day_title = $parts[0]|trim}
                                                        {$day_content = $parts[1]|trim}
                                                        <button
                                                            class="itinerary-title {if $smarty.foreach.itinerary.first}active{/if}">
                                                            {if $smarty.foreach.itinerary.first}
                                                                <span class="icon"><img
                                                                        src="{uploads_url}/csm/assets/images/trip/icon/14.svg"
                                                                        alt=""></span>
                                                            {elseif $smarty.foreach.itinerary.last}
                                                                <span class="icon-2"><img
                                                                        src="{uploads_url}/csm/assets/images/trip/icon/15.svg"
                                                                        alt=""></span>
                                                            {/if}
                                                            {$day_title}
                                                        </button>
                                                        <div class="itinerary-content"
                                                            {if $smarty.foreach.itinerary.first}style="display: block;" {/if}>
                                                            <p>{$day_content}</p>
                                                        </div>
                                                    </div>
                                                {/foreach}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <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>
                                        <div class="map-area overflow-hidden radius-10">
                                            <a href="https://www.openstreetmap.org/search?query={$item->start}"><img
                                                    src="{uploads_url}/{$item->map}" width="100%"></a>
                                        </div>
                                    </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">
                        <h5 class="title mb--30">You can send your enquiry via the form below.</h5>
                        {* Form code stays exactly as it is... *}
                        <form id="contact-form" action="#" class="contact-form border radius-10 ">
                            <div class="input-div">
                                <div class="row g-24">
                                    <div class="col-lg-6">
                                        <div class="single-input"><input type="text" placeholder="Enter your first name*"
                                                required></div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="single-input"><input type="text" placeholder="Enter your last name*"
                                                required></div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="single-input"><input type="email"
                                                placeholder="Enter your email address..." required></div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="single-input"><textarea placeholder="Enter your message*"
                                                required></textarea></div>
                                    </div>
                                    <div class="col-lg-12"><button type="submit" class="rts-btn btn-primary border">Send
                                            Mail</button></div>
                                </div>
                            </div>
                        </form>
                    </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>
                            <a href="#" class="rts-btn btn-primary m-w-100 text-center border">Check Availability</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{/block}