title = "Trip"
url = "/trip/:slug"
layout = "main"
is_hidden = 0
lazy_load = 1
robot_index = "index"
robot_follow = "follow"
enabled_in_sitemap = 1
model_all_posts = 0
model_include_default = 0
use_updated_at = 1
changefreq = "always"
priority = 0.1
==
<?php
use Webmors\Nezasadiscovery\Components\NezasaAPIHelper;
function onStart()
{
    $slug = $this->param('slug');
    $nezasaHelper = new NezasaAPIHelper;

    $this["listing"] = $nezasaHelper->getProduct($slug);
    
    if(0)
    {
        //$this["listing"] = json_decode(Http::get($searchString));
        echo "<pre>";
        echo print_r($this["listing"]);
       //echo var_dump($this["listing"]->fromPrices[0]->value->currencyValueStringExact);die;
        //echo print_r($this["listing"]->infoSections);
        echo "</pre>";die;
    }
}
?>
==
<!-- banner-area -->
   {% if backendLoggedIn %}
   {% partial 'main-site/slider' pageH1=listing.title slideImage=listing.pictures.0.image.url %}
   <div class="trvel-btn-area sticky-menu mt-0 wow fadeInUp">
      <div class="container">
         <form action="#" class="d-flex justify-content-center travel-btn-form">
            <div class="travel-select-div d-flex">
               <div class="d-block travel-drp w-100">
                  <a href="#information" style="display: block;"><button type="button" class="d-block w-100 item-selects"><img src="{{ 'assets/assetsmain/images/icon1.svg'|theme }}"
                        alt="image"><span>Information</span></button></a>
               </div>
               <div class="d-block travel-drp w-100">
                  <a href="#tourplan" style="display: block;"><button type="button" class="d-block w-100 item-selects"><img src="{{ 'assets/assetsmain/images/icon2.svg'|theme }}"
                        alt="image"><span>Tour Plan</span></button></a>
               </div>
               <div class="d-block travel-drp w-100">
                  <a href="#location" style="display: block;"><button type="button" class="d-block w-100 item-selects"><img src="{{ 'assets/assetsmain/images/icon3.svg'|theme }}"
                        alt="image"><span>Location</span></button></a>
               </div>
               <div class="d-block travel-drp w-100">
                  <a href="#gallery" style="display: block;"><button type="button" class="d-block w-100 item-selects"><img src="{{ 'assets/assetsmain/images/icon4.svg'|theme }}"
                        alt="image"><span>Gallery</span></button></a>
               </div>
               <div class="d-block travel-drp w-100">
                  <a href="#" style="display: block;"><button type="button" class="d-block w-100 item-selects border-0"><img src="{{ 'assets/assetsmain/images/icon5.svg'|theme }}"
                        alt="image"><span>Add to Favorites</span></button></a>
               </div>
            </div>
         </form>
      </div>
   </div>

   <div class="location__track">
      <div class="location__track--sticky sidebar--empty">
      </div>

      <!--information-area start here -->

      <section class="inform-area" id="information">
         <div class="container">
            <div class="row">
               <div class="col-lg-8 col-md-6">
                  <div class="inform-left wow fadeInUp">
                     <h3 class="wow fadeInUp">Information</h3>
                     <h2 class="wow fadeInUp">{{ listing.keySentence }} <span>{{ listing.fromPrices.0.value.currencyValueStringRounded }} / per person</span></h2>
                     <p class="wow fadeInUp">
                         {{ listing.shortDescriptionAsHtml|raw }}
                    </p>

                     <table class="table-area wow fadeInUp">
                        <tr>
                           <th>Destination:</th>
                           <td>{{ listing.countries.0 }}</td>
                        </tr>
                        {#
                        <tr>
                           <th>Departure:</th>
                           <td>Main city square, Old town</td>
                        </tr>
                        <tr>
                           <th>Departure Time:</th>
                           <td>Please arrive by 9:15 AM for a prompt departure at 9:30 AM.</td>
                        </tr>
                        <tr>
                           <th>Return Time:</th>
                           <td>Approximately 8:30 PM.</td>
                        </tr>
                        <tr>
                           <th>Dress Code:</th>
                           <td>Casual. Comfortable athletic clothing, hiking shoes, hat and warm jacket.</td>
                        </tr>
                        <tr>
                           <th>Included:</th>
                           <td>Airport Transfers |  Departure Taxes |  Personal Guide</td>
                        </tr>
                        <tr class="bor-nan">
                           <th>Not Included:</th>
                           <td>5 Star Accommodation |  Breakfast |  Entry Fees</td>
                        </tr>
                        #}
                     </table>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6">
                  <div class="inform-right">
                     <form class="wow fadeInRight">
                        <div class="book-area">
                           <h2 class="wow fadeInUp">Book this Trip</h2>
                           <input type="date">
                           <input type="number" placeholder="Number of People:*">
                           <input type="number" placeholder="Number of Children:*">
                           {#<button>CHECK</button>#}
                           <button class="book-bnt">BOOK NOW</button>
                        </div>
                        <div class="news-area">
                           <h2 class="wow fadeInUp">Newsletter</h2>
                           <p class="wow fadeInUp">Lorem ipsum dolor sit amet, ad duo<br> illum eligendi dissentiunt.
                           </p>
                           <input type="email" placeholder="E-mail:*">
                           <input type="submit" value="SUBSCRIBE">
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </section>

      <!--itenary-area start here -->

      {% if listing.infoSections|length > 0 %}
      <section class="itinerary-area" id="tourplan">
         <div class="container">
            <div class="row gy-4">
               <div class="col-lg-12 order-2 order-lg-1">
                  <div class="itinerary-content max-content">
                     <p class="mb-3 fs-6 fw-light">Details</p>
                     <h2>Itinerary</h2>
                     {#
                     <p class="mb-0 fs-6 fw-light">We have curated the perfect Bali getaway with all of the highlights
                        of the island. Can’t decide
                        where you want to stay? You can choose to split your time between two different parts of the
                        island, most of our travels opt in for Ubud and Seminyak but the choice is all yours.</p>
                     <p class="mb-0 fs-6 fw-light">Please note this is a sample itinerary and your actual itinerary
                        would be adjusted based on your
                        selected activities, dates of travel and of course your travel style!</p>
                        #}
                  </div>
               </div>
               <div class="col-lg-12 order-1 order-lg-2">
                  <div class="itinerary-tabs-container">
                     <div class="itinerary-tabs-wrapper">
                        <ul class="itinerary-tabs nav nav-pills flex-nowrap overflow-x-auto overflow-y-hidden"
                           id="itinerary-tab" role="tablist">
                           {% set counter=0 %}
                           {% for day in listing.infoSections.0.text|split('Day') %}
                               {% if day != "" %}
                               {% set counter=counter+1 %}
                               <li class="nav-item" role="presentation">
                                  <button class="nav-link bg-transparent position-relative fw-normal {% if counter == 1 %}active{% endif %}" id="day{{ counter }}-tab"
                                     data-bs-toggle="pill" data-bs-target="#day{{ counter }}" type="button" role="tab"
                                     aria-controls="day{{ counter }}" aria-selected="true">Day {{ counter }}</button>
                               </li>
                               {% endif %}
                           {% endfor %}
                        </ul>
                     </div>
                     <div class="itinerary-tabs-content tab-content" id="itinerary-tabContent">
                       {% set counter=0 %}
                       {% for day in listing.infoSections.0.text|split('Day') %}
                       {% set counter=counter+1 %}
                        <div class="single-tab-content tab-pane fade {% if counter == 1 %}show active{% endif %}" id="day{{ counter }}" role="tabpanel"
                           aria-labelledby="day1-tab" tabindex="0">
                           <div>
                              <div class="box d-flex flex-column flex-md-row align-items-center gap-3">
                                 <a href="{{ 'assets/assetsmain/images/itinerary-1.jpg'|theme }}" data-gall="itinerary-gall"
                                    class="box-thumb d-block flex-shrink-0"><img src="{{ 'assets/assetsmain/images/itinerary-1.jpg'|theme }}"
                                       alt="itinerary image" class="galary-img m-0 w-100 h-100 object-fit-cover"></a>
                                 <div class="box-content">
                                     <p class="mb-2">{{ day|raw }}</p>
                                     {#<a href="#" class="fw-medium">More Information</a>#}
                                 </div>
                              </div>
                           </div>
                        </div>
                        {% endfor %}
                        {#
                        <div class="single-tab-content tab-pane fade" id="day6" role="tabpanel"
                           aria-labelledby="day6-tab" tabindex="0">
                           <div>
                              <div class="box d-flex flex-column flex-md-row align-items-center gap-3">
                                 <a href="{{ 'assets/assetsmain/images/itinerary-1.jpg'|theme }}" data-gall="itinerary-gall"
                                    class="box-thumb d-block flex-shrink-0"><img src="{{ 'assets/assetsmain/images/itinerary-1.jpg'|theme }}"
                                       alt="itinerary image" class="galary-img m-0 w-100 h-100 object-fit-cover"></a>
                                 <div class="box-content">
                                    <h5>Welcome to Bali!</h5>
                                    <p class="mb-2">You will arrive at&nbsp;Ngurah Rai International Airport, this is
                                       the main airport in Bali. Your&nbsp;private transportation will take you to your
                                       accommodation. Get settled and relax before heading out into the town for your
                                       welcome dinner!</p>
                                    <a href="#" class="fw-medium">More Information</a>
                                 </div>
                              </div>
                           </div>
                        </div>
                        #}
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
      {% endif %}
      <!--location-area start here -->

      <section class="location-area" id="location">
         <div class="container">
            <div class="row">
               <div class="col-lg-8 col-md-8">
                  <div class="location-ctn">
                     <h2 class="wow fadeInUp">Location</h2>
                     <p class="wow fadeInUp">Lorem ipsum dolor sit amet, ad duo illum eligendi dissentiunt. In omnes
                        malorum definitionem duo. Graeci persequeris per eu. In vim oratio vulputate, vero malis
                        epicurei
                        id mel.<br> Partem facilisi deterruisset ei duo. Magna mollis eu eum, sit saperet voluptua
                        delicata
                        ut, magna adipiscing pri ei. In vis labitur expetendis argumentum, solum justo molestie pri ea.
                     </p>
                     <div class="map-area wow fadeInUp">
                        <iframe
                           src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15181.9747018041!2d-76.92438667161723!3d17.955754691251897!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8edb6b60942c0b31%3A0xae0a98e076d884d0!2zQ2FyaWJiZWFuIEVzdGF0ZXMsIFBvcnRtb3JlLCDgppzgp43gpq_gpr7gpq7gpr7gpofgppXgpr4!5e0!3m2!1sbn!2sbd!4v1729833849585!5m2!1sbn!2sbd"
                           width="725" height="310" style="border:0;" allowfullscreen="" loading="lazy"
                           referrerpolicy="no-referrer-when-downgrade"></iframe>
                     </div>
                  </div>

                  <!--city-area start here -->
                  <div class="city-area">
                     <div>
                        <div class="city-ctn">
                           <h2 class="wow fadeInUp">History of the City</h2>
                           <p class="wow fadeInUp">Lorem ipsum dolor sit amet, ad duo illum eligendi dissentiunt. In
                              omnes
                              malorum definitionem duo. Graeci persequeris per eu. In vim oratio vulputate, vero malis
                              epicurei id mel.<br> Partem facilisi deterruisset ei duo. Magna mollis eu eum, sit saperet
                              voluptua delicata ut, magna adipiscing pri ei. In vis labitur expetendis argumentum, solum
                              justo molestie pri ea. Lorem ipsum dolor sit amet, ad duo illum eligendi dissentiunt. In
                              omnes malorum definitionem duo. Graeci persequeris per eu. In vim oratio vulputate, vero
                              malis epicurei id mel.<br> Partem facilisi deterruisset ei duo. Magna mollis eu eum, sit
                              saperet voluptua delicata ut, magna adipiscing pri ei. In vis labitur expetendis
                              argumentum,
                              solum justo molestie pri ea. Lorem ipsum dolor sit amet, ad duo illum eligendi
                              dissentiunt.
                              In omnes malorum definitionem duo. Graeci persequeris per eu. In vim oratio vulputate,
                              vero
                              malis epicurei id mel.<br> Partem facilisi deterruisset ei duo. Magna mollis eu eum, sit
                              saperet voluptua delicata ut, magna adipiscing pri ei. In vis labitur expetendis
                              argumentum,
                              solum justo molestie pri ea. Lorem ipsum dolor sit amet, ad duo illum eligendi
                              dissentiunt.
                              In omnes malorum definitionem duo. Graeci persequeris per eu. In vim oratio vulputate,
                              vero
                              malis epicurei id mel.. </p>
                        </div>
                     </div>
                  </div>

               </div>
               <div class="col-lg-4 col-md-4">

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

      <!--Gallery-area start here -->

      <section class="gallery-area" id="gallery">
         <div class="container">
            <div class="galley-ctn">
               <h2 class="wow fadeInUp">Gallery</h2>
            </div>
            <div class="row">
               <div class="col-lg-3 col-md-3">
                  <a href="{{ 'assets/assetsmain/images/galary1.svg'|theme }}" data-gall="gallery01" class="galary-img d-block">
                     <img class="wow fadeInUp" src="{{ 'assets/assetsmain/images/galary1.svg'|theme }}" alt="image">
                  </a>
               </div>
               <div class="col-lg-3 col-md-3">
                  <a href="{{ 'assets/assetsmain/images/galary2.svg'|theme }}" data-gall="gallery01" class="galary-img d-block">
                     <img class="wow fadeInUp" src="{{ 'assets/assetsmain/images/galary2.svg'|theme }}" alt="image">
                  </a>
               </div>
               <div class="col-lg-3 col-md-3">
                  <a href="{{ 'assets/assetsmain/images/galary3.svg'|theme }}" data-gall="gallery01" class="galary-img d-block">
                     <img class="wow fadeInUp" src="{{ 'assets/assetsmain/images/galary3.svg'|theme }}" alt="image">
                  </a>
               </div>
               <div class="col-lg-3 col-md-3">
                  <a href="{{ 'assets/assetsmain/images/galary4.svg'|theme }}" data-gall="gallery01" class="galary-img d-block">
                     <img class="wow fadeInUp" src="{{ 'assets/assetsmain/images/galary4.svg'|theme }}" alt="image">
                  </a>
               </div>
               <div class="col-lg-3 col-md-3">
                  <a href="{{ 'assets/assetsmain/images/galary4.svg'|theme }}" data-gall="gallery01" class="galary-img d-block">
                     <img class="wow fadeInUp" src="{{ 'assets/assetsmain/images/galary4.svg'|theme }}" alt="image">
                  </a>
               </div>
               <div class="col-lg-3 col-md-3">
                  <a href="{{ 'assets/assetsmain/images/galary1.svg'|theme }}" data-gall="gallery01" class="galary-img d-block">
                     <img class="wow fadeInUp" src="{{ 'assets/assetsmain/images/galary1.svg'|theme }}" alt="image">
                  </a>
               </div>
               <div class="col-lg-3 col-md-3">
                  <a href="{{ 'assets/assetsmain/images/galary2.svg'|theme }}" data-gall="gallery01" class="galary-img d-block">
                     <img class="wow fadeInUp" src="{{ 'assets/assetsmain/images/galary2.svg'|theme }}" alt="image">
                  </a>
               </div>
               <div class="col-lg-3 col-md-3">
                  <a href="{{ 'assets/assetsmain/images/galary3.svg'|theme }}" data-gall="gallery01" class="galary-img d-block">
                     <img class="wow fadeInUp" src="{{ 'assets/assetsmain/images/galary3.svg'|theme }}" alt="image">
                  </a>
               </div>
               <div class="col-lg-3 col-md-3">
                  <a href="{{ 'assets/assetsmain/images/galary1.svg'|theme }}" data-gall="gallery01" class="galary-img d-block">
                     <img class="wow fadeInUp" src="{{ 'assets/assetsmain/images/galary1.svg'|theme }}" alt="image">
                  </a>
               </div>
               <div class="col-lg-3 col-md-3">
                  <a href="{{ 'assets/assetsmain/images/galary2.svg'|theme }}" data-gall="gallery01" class="galary-img d-block">
                     <img class="wow fadeInUp" src="{{ 'assets/assetsmain/images/galary2.svg'|theme }}" alt="image">
                  </a>
               </div>
               <div class="col-lg-3 col-md-3">
                  <a href="{{ 'assets/assetsmain/images/galary3.svg'|theme }}" data-gall="gallery01" class="galary-img d-block">
                     <img class="wow fadeInUp" src="{{ 'assets/assetsmain/images/galary3.svg'|theme }}" alt="image">
                  </a>
               </div>
               <div class="col-lg-3 col-md-3">
                  <a href="{{ 'assets/assetsmain/images/galary4.svg'|theme }}" data-gall="gallery01" class="galary-img d-block">
                     <img class="wow fadeInUp" src="{{ 'assets/assetsmain/images/galary4.svg'|theme }}" alt="image">
                  </a>
               </div>
            </div>
         </div>
      </section>
   </div>

   <!-- social icons starts -->
   <div class="social-icons d-flex flex-column gap-2 position-fixed top-50 translate-middle-y end-0 me-3">
      <a title="whatsapp" href="#" class="whatsapp-icons d-inline-block"><img src="{{ 'assets/assetsmain/images/whatsapp2.svg'|theme }}" alt="whatsapp"
            class="w-100 h-100"></a>
      <a title="email" href="#" class="mail-icon d-inline-block"><img src="{{ 'assets/assetsmain/images/email2.svg'|theme }}" alt="email"
            class="w-100 h-100"></a>
      <a title="share" href="#" class="share-icon d-flex align-items-center justify-content-center rounded-circle"><i
            class="fa-solid fa-share"></i></a>
   </div>
   <!-- social icons end -->

   {% put scripts %}
   <script>
      const lightbox = GLightbox({
         touchNavigation: true,
         loop: true,
         width: "90vw",
         height: "90vh"
      });


      document.querySelectorAll('.toggleButton').forEach(button => {
         button.addEventListener('click', () => {
            const text = button.previousElementSibling; // Get the paragraph preceding the button
            text.classList.toggle('collapsed');
            button.textContent = text.classList.contains('collapsed') ? "Less Information" :
               "More Information";
         });

         // Initialize: Hide button if text fits within the defined height
         const text = button.previousElementSibling;
         if (text.scrollHeight <= text.clientHeight) {
            button.style.display = 'none';
         }
      });
   </script>

   <script>
      document.addEventListener("DOMContentLoaded", function () {
         const contentBoxes = document.querySelectorAll('.content-box');
         const toggleButton = document.getElementById('moreday-button');

         // Check if there are more than 4 boxes
         if (contentBoxes.length > 4) {
            toggleButton.style.display = 'inline-block'; // Show button

            // Hide extra boxes
            for (let i = 4; i < contentBoxes.length; i++) {
               contentBoxes[i].style.display = 'none';
            }

            toggleButton.addEventListener('click', function () {
               const areBoxesVisible = contentBoxes[4].style.display === 'block';

               // Toggle visibility of extra boxes
               for (let i = 4; i < contentBoxes.length; i++) {
                  contentBoxes[i].style.display = areBoxesVisible ? 'none' : 'flex';
               }

               // Change button text
               toggleButton.textContent = areBoxesVisible ? 'Show More' : 'Show Less';
            });
         }
      });
   </script>

   <script>
      $('.owl-carousel').owlCarousel({
         loop: true,
         margin: 10,
         nav: true,
         responsive: {
            0: {
               items: 2
            },
            600: {
               items: 3
            },
            768: {
               items: 4,
               margin: 20
            },
            1000: {
               items: 4,
               margin: 23
            }
         }
      })
   </script>

   <script>
      // venobox active
      new VenoBox({
         selector: '.galary-img',
         numeration: true,
         infinigall: true,
         share: true,
         spinner: 'rotating-plane'
      });
   </script>
    {% endput %}
{% else %}
    {% put styles %}
    <style>
    .slider__main__content {
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: end;
        padding-left: 25px;
        padding-right: 100px;
        /*padding-top: 110px;*/
    }
    .back__btn__blk {
        padding-top: 0px;
        margin-bottom: 10px;
        margin-right: 20px;
    }
    .tab__area {
        padding-top: 20px;
        padding-bottom: 0px;
    }
    .tab__topbar {
        text-align: center;
        padding-bottom: 10px;
    }
    </style>
    {% endput %}
    {% partial 'main-site/slider' slideImage=listing.pictures.1.image.url %}
    {% partial 'main-site/searchbar' nodrop=1 %}
    {% set path = "routes" %}
    {% if this.param['slug'] %}
        {% set path = this.param['slug'] %}
    {% endif %}
    <div class="main overflow-hidden">
        <!-- =================== Slider AREA START ===================== -->
    
    
        <!-- =================== SERVICE AREA START ===================== -->
        <section class="tab__area">
            {% if backendLoggedIn and editMode %}
                <a style="position:relative;top:0;left:0;border-radius:0;z-index:10000000;width:200px;" class="btn btn-success btn-sm" href="{{ url('/') }}{{ backendUri }}/webmors/webconfig/pagesuser/update/1#primarytab-about" role="button" target="_blank">Edit About us</a>
            {% endif %}
            <div class="container mw-100">
            {#
            <div id="nz-planner" data-template-filters="true"></div>
            <div id="nz-planner" onload="nz.init()" data-init-url="/travel/create-itinerary" data-template-filters="true"></div>
            <script src="https://ibe.caribbeantravelandtours.com/integration/v1/breezetravel/embed.js" type="text/javascript"></script>
            #}
            <div id="nz-planner" onload="nz.init()" data-init-url="/travel/routes/{{ path }}" data-template-filters="true"></div>
            {% put styles %}
            <script src="https://ibe.caribbeantravelandtours.com/integration/v2/breezetravel/embed.js" type="text/javascript"></script>
            {% endput %}
            </div>
        </section>
    </div>
{% endif %}