<form id="cars-search" class="content m-0 search_box" style="background-color:#fff; 
    border-radius: 8px;" >
   <div class="row mb-0 pt-1 g-2" style="justify-content: center;">
      <div class="col-md-4" style="margin-top: 30px;">
            <div class="input-items">
                <div style="position: absolute; z-index: 10; margin-top: 16px; margin-left: 12px;">
                <svg width="18" height="18" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Transport" transform="translate(-576.000000, 0.000000)">
                                <g id="flight_land_line" transform="translate(576.000000, 0.000000)">
                                    <path
                                        d="M24,0 L24,24 L0,24 L0,0 L24,0 Z M12.5934901,23.257841 L12.5819402,23.2595131 L12.5108777,23.2950439 L12.4918791,23.2987469 L12.4918791,23.2987469 L12.4767152,23.2950439 L12.4056548,23.2595131 C12.3958229,23.2563662 12.3870493,23.2590235 12.3821421,23.2649074 L12.3780323,23.275831 L12.360941,23.7031097 L12.3658947,23.7234994 L12.3769048,23.7357139 L12.4804777,23.8096931 L12.4953491,23.8136134 L12.4953491,23.8136134 L12.5071152,23.8096931 L12.6106902,23.7357139 L12.6232938,23.7196733 L12.6232938,23.7196733 L12.6266527,23.7031097 L12.609561,23.275831 C12.6075724,23.2657013 12.6010112,23.2592993 12.5934901,23.257841 L12.5934901,23.257841 Z M12.8583906,23.1452862 L12.8445485,23.1473072 L12.6598443,23.2396597 L12.6498822,23.2499052 L12.6498822,23.2499052 L12.6471943,23.2611114 L12.6650943,23.6906389 L12.6699349,23.7034178 L12.6699349,23.7034178 L12.678386,23.7104931 L12.8793402,23.8032389 C12.8914285,23.8068999 12.9022333,23.8029875 12.9078286,23.7952264 L12.9118235,23.7811639 L12.8776777,23.1665331 C12.8752882,23.1545897 12.8674102,23.1470016 12.8583906,23.1452862 L12.8583906,23.1452862 Z M12.1430473,23.1473072 C12.1332178,23.1423925 12.1221763,23.1452606 12.1156365,23.1525954 L12.1099173,23.1665331 L12.0757714,23.7811639 C12.0751323,23.7926639 12.0828099,23.8018602 12.0926481,23.8045676 L12.108256,23.8032389 L12.3092106,23.7104931 L12.3186497,23.7024347 L12.3186497,23.7024347 L12.3225043,23.6906389 L12.340401,23.2611114 L12.337245,23.2485176 L12.337245,23.2485176 L12.3277531,23.2396597 L12.1430473,23.1473072 Z"
                                        id="MingCute" fill-rule="nonzero"> </path>
                                    <path
                                        d="M20.99989,20.0001 C21.5522,20.0001 21.99989,20.4478 21.99989,21.0001 C21.99989,21.51295 21.6138716,21.9356092 21.1165158,21.9933725 L20.99989,22.0001 L2.99989,22.0001 C2.4476,22.0001 1.99989,21.5524 1.99989,21.0001 C1.99989,20.48725 2.38592566,20.0645908 2.8832679,20.0068275 L2.99989,20.0001 L20.99989,20.0001 Z M8.10346,3.20538 C8.00550211,2.52548211 8.59636283,1.96050997 9.25436746,2.06249271 L9.36455,2.08576 L12.1234,2.82499 C12.4699778,2.91787 12.7577704,3.15444975 12.9168957,3.47137892 L12.9704,3.59387 L15.7807,11.0953 L19.4455,12.4121 C20.7461,12.8794 21.709,13.991 21.9861,15.3449 C22.1241,16.0194 21.9516,16.7079 21.4218,17.1734 C20.6038313,17.8923687 19.4996906,18.183398 18.4402863,17.9692815 L18.2291,17.9197 L3.15287,13.8799 C2.75789727,13.7740818 2.45767661,13.459338 2.36633273,13.0674492 L2.34531,12.9477 L1.71732,7.68232 C1.63740111,7.01225556 2.22049639,6.4660062 2.86699575,6.56318572 L2.98162,6.58712 L5.25293,7.19571 C5.61177444,7.29186111 5.90680062,7.54177815 6.06199513,7.87418144 L6.11349,8.00256 L6.45329,9.00701 L8.99512,9.39414 L8.10346,3.20538 Z M10.2971,4.4062 L11.165,10.4298 C11.2559176,11.0610471 10.7489114,11.6064588 10.1303657,11.5834026 L10.0132,11.5723 L5.5565,10.8935 C5.22469556,10.8429222 4.94258198,10.6316333 4.79900425,10.3341508 L4.75183,10.2187 L4.34758,9.02368 L3.87642,8.89743 L4.25907,12.1058 L18.7467,15.9878 C19.1906,16.1067 19.6625,16.0115 20.0243,15.7345 C19.8949769,15.1206538 19.4803805,14.6088858 18.9139056,14.3528832 L18.7692,14.2943 L14.673,12.8225 C14.4336857,12.7364429 14.2371306,12.5639857 14.1203003,12.3415274 L14.0687,12.2263 L11.233,4.65695 L10.2971,4.4062 Z"
                                        id="形状" fill="#09244B"> </path>
                                </g>
                            </g>
                        </g>
                    </svg>
                </div>
                <div class="form-floating">
                <select id="" name="city" class="origin cars_flights_origin form-control w-100" required>
                <?php if(isset($_SESSION['cars_flights_origin'])){ ?> 
                <option value="<?=strtoupper($_SESSION['cars_flights_origin'])?>" selected><?=strtoupper($_SESSION['cars_flights_origin'])?></option>
                <?php } else {?>
                <option value="Select City"><?=T::select?></option>
                <?php } ?>
                </select>
                <label style="margin: 0 24px" for=""><?=T::from_airport?></label>
                </div>
         </div>
         <div class="d-block d-sm-none"></div>
      </div>

      <!-- <div class="col-md-3">
         <div class="input-items">
            <div style="position: absolute; z-index: 10; margin-top: 16px; margin-left: 12px;">
               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="10" r="3"/>
                  <path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z"/>
               </svg>
            </div>
            <select id="cars_city" name="city" class="cars_city form-control" required>
               <?php if(isset($_SESSION['cars_destination'])){ ?>
               <option value="<?=$_SESSION['cars_destination']; ?>">
                  <?=str_replace("-", " ", $_SESSION['cars_destination']); ?>
               </option>
               <?php } else { ?>
               <option value=""> <?=T::searchbycity?></option>
               <?php } ?>
            </select>
         </div>
         <div class="d-block d-sm-none"></div>
      </div> -->

      <div class="col-md-3" style="margin-top: 30px;">
         <div class="form-floating">
         <input name="date" class="dp form-control" id="date" type="text" placeholder="" value="<?php if(isset($_SESSION['tours_date'])){ echo $_SESSION['tours_date']; } else { $d=strtotime("+3 Days"); echo date("d-m-Y", $d); } ?>" readonly="readonly"/>
            <label for="checkin">
               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                  <line x1="16" y1="2" x2="16" y2="6"></line>
                  <line x1="8" y1="2" x2="8" y2="6"></line>
                  <line x1="3" y1="10" x2="21" y2="10"></line>
               </svg>
               <?=T::date?>
            </label>
         </div>
      </div>
       
      <div class="col-md-3" style="margin-top: 30px;">
         <div class="input-box">
            <div class="form-group">
               
            <div class="dropdown dropdown-contain">
                        <a class="dropdown-toggle dropdown-btn travellers" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                        <p class="m-0 d-flex align-items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                           <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                           <circle cx="9" cy="7" r="4"></circle>
                           <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                           <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                        </svg>
                        <?=T::travellers?> <div class="guest_cars"></div></p>
                        </a>
                        <div class="dropdown-menu dropdown-menu-wrap w-100">
                            <div class="dropdown-item">
                                <div class="qty-box d-flex align-items-center justify-content-between">
                                    <label>
                                        <i class="la la-user"></i> <?=T::adults?> <!--<small>(+12)</small>-->
                                    </label>
                                    <div class="qtyBtn d-flex align-items-center">
                                        <input type="text" name="adults" id="cars_adults" value="<?php if(isset($_SESSION['cars_adults'])){ echo $_SESSION['cars_adults']; } else { echo "1"; } ?>" class="qtyInput_cars">
                                    </div>
                                </div>
                            </div>
                            <div class="dropdown-item">
                                <div class="qty-box d-flex align-items-center justify-content-between">
                                    <label>
                                        <i class="la la-female"></i> <?=T::child?>  <!--<small>(-12)</small>-->
                                    </label>
                                    <div class="qtyBtn d-flex align-items-center">
                                        <input type="text" name="childs" id="cars_child" value="<?php if(isset($_SESSION['cars_childs'])){ echo $_SESSION['cars_childs']; } else { echo "0"; } ?>" class="qtyInput_cars">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

               <!-- end dropdown -->
            </div>
         </div>
      </div>
      
   </div>
  <div class="col-md-1" style="margin-left:42%;">
         <button style="height:50px; top: 24px; width: 200px!important; border-radius: 99px!important; border:none;" type="submit" class="search_button w-100 btn btn-primary btn-m rounded-sm font-700 text-uppercase btn-full">
            <!--<svg style="fill:currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" class="c8LPF-icon" role="img" height="24" cleanup="">-->
            <!--   <path d="M174.973 150.594l-29.406-29.406c5.794-9.945 9.171-21.482 9.171-33.819C154.737 50.164 124.573 20 87.368 20S20 50.164 20 87.368s30.164 67.368 67.368 67.368c12.345 0 23.874-3.377 33.827-9.171l29.406 29.406c6.703 6.703 17.667 6.703 24.371 0c6.704-6.702 6.704-17.674.001-24.377zM36.842 87.36c0-27.857 22.669-50.526 50.526-50.526s50.526 22.669 50.526 50.526s-22.669 50.526-50.526 50.526s-50.526-22.669-50.526-50.526z"></path>-->
            <!--</svg>-->
            <strong style="    font-size: 24px;
    line-height: 24px; font-weight: 700;">Search</strong>
         </button>

         <div class="loading_button" style="display:none">
            <button style="height:64px" class="gap-2 w-100 btn btn-primary btn-m rounded-sm font-700 text-uppercase btn-full" type="button" disabled>
            <span class="spinner-border spinner-border-sm" role="status"
               aria-hidden="true"></span>
            </button>
         </div>
      </div>
</form>

<!-- MOST POPULAR OPTIONS CARS ORIGIN -->
<template id="most--popular-cars-origin">
   <div class="most--popular-cars-origin">
      <small class="mb-2 px-2 text-muted fw-bold">Most popular Airport</small>
      
      <?php foreach (base()->cars_suggestions as $s) { 
            ?>

            <div class="d-flex align-items-center p-2 to--insert overflow-hidden">
                <button class="btn btn-outline-primary btn-sm mx-0" style="font-size: 12px; font-weight: bold; min-width:57px"><?=$s->city_airport?></button>
                <div class="mx-2" style="line-height: 14px;">
                    <strong><?=$s->city?> <small><?=$s->country?></small></strong> 
                    <div class="d-block">
                        <small class="d-inline-block overflow-hidden airport--name"><?=$s->airport?></small>
                    </div>
                </div>
            </div>
            <?php } ?>

   </div>
</template>

<!-- MOST POPULAR OPTIONS CARS TO -->
<template id="most--popular-cars-city">
   <div class="most--popular-cars-city">
      <small class="mb-2 px-2 text-muted fw-bold">Most popular Cities</small>
      
      <div class="d-flex align-items-center p-2 to--insert overflow-hidden">
            <button class="btn btn-outline-primary btn-sm mx-0" style="font-size: 12px; font-weight: bold; min-width:57px">JED</button>
            <div class="mx-2" style="line-height: 14px;">
               <strong>Jeddah <small>Saudi Arabia</small></strong> 
               <div class="d-block">
                  <small class="d-inline-block overflow-hidden airport--name">2King Abdulaziz International Airport</small>
               </div>
            </div>
      </div>
      
      <div class="d-flex align-items-center p-2 to--insert overflow-hidden">
            <button class="btn btn-outline-primary btn-sm mx-0" style="font-size: 12px; font-weight: bold; min-width:57px">LHE</button>
            <div class="mx-2" style="line-height: 14px;">
               <strong>Lahore <small>Pakistan</small></strong> 
               <div class="d-block">
                  <small class="d-inline-block overflow-hidden airport--name">2Alama Iqbal International Airport</small>
               </div>
            </div>
      </div>
      
      <div class="d-flex align-items-center p-2 to--insert overflow-hidden">
            <button class="btn btn-outline-primary btn-sm mx-0" style="font-size: 12px; font-weight: bold; min-width:57px">MNL</button>
            <div class="mx-2" style="line-height: 14px;">
               <strong>Manila <small>Philippines</small></strong> 
               <div class="d-block">
                  <small class="d-inline-block overflow-hidden airport--name">2Ninoy Aquino International Airport</small>
               </div>
            </div>
      </div>
      
      <div class="d-flex align-items-center p-2 to--insert overflow-hidden">
            <button class="btn btn-outline-primary btn-sm mx-0" style="font-size: 12px; font-weight: bold; min-width:57px">BER</button>
            <div class="mx-2" style="line-height: 14px;">
               <strong>Berlin <small>Germany</small></strong> 
               <div class="d-block">
                  <small class="d-inline-block overflow-hidden airport--name">2Berlin Brandenburg Willy Brandt</small>
               </div>
            </div>
      </div>

   </div>
</template>

<script>

// collecting params to send for beutified URI
$("#cars-search").submit(function() {
    event.preventDefault();  

    // LOADING EFFECT
    $("body").load(
        '<?=root?>App/Views/Loading.php', 
        {
            'root': '<?=root?>',
            'color': '<?=base()->app->default_theme?>'
        },
        function() {
            $("body").addClass("loadingfadein")
        }
    );


    $('.search_button').hide();
    $('.loading_button').show();

    // var from_airport = $('.cars_flights_origin').val();
    var from_airport = $(".cars_flights_origin option:selected").val().toLowerCase();
    var date = $('#date').val();
    var cars_adults = $('#cars_adults').val();
    var cars_child = $('#cars_child').val();
    var city_trims = from_airport.split(',').slice(0, 1).join(' ').split(' ').join('-').replace('%40', '@');

    // REMOVE - DASH FROM END OF THE CITY
    if(city_trims.slice(-1) == '-') { var city_ = city_trims.slice(0, -1);
    } else { var city_name = city_trims; }


    var finelURL = './cars/'+from_airport+'/'+date+'/'+cars_adults+'/'+cars_child;

    // PAGE TOP
    $("html, body").animate({ scrollTop: 0 }, "fast");

    /* REDIRECT */
    window.location.href = '<?=root?>' + finelURL;

});

</script>

<!-- AIRPORT SELECT2 -->
<script>
    var $ajax = $(".cars_flights_origin");

function formatRepo(t) {
    return t.loading ? t.text : (console.log(t),
        '<button style="font-size: 12px; font-weight: bold;" class="btn btn-outline-primary btn-sm mx-2">' + t.id +
        '</button><div style="line-height: 14px;"><strong>' + t.city + '<small class="px-1">'+ t.country + '</small>' +
        '</strong><div class="d-block"><small>' + t.airport + '<small></div></div>')
}

function formatRepoSelection(t) {

    if (typeof t.city === 'undefined') {
        var city = "";
    } else {
        var city = t.city;
    }

    return '<div class="mt-1">' + city + ' ' + '<small><strong class="mt-1">' + t.id +
        ' </strong></small></div>'
}

$ajax.select2({
    ajax: {
        url: "<?=root.api_url?>flights_locations",
        dataType: "json",
        data: function(t) {
            return {
                city: $.trim(t.term)
            }
        },
        processResults: function(t) {
            console.log(t)
            var e = [];
            return t.forEach(function(t) {

                e.push({
                    id: t.code,
                    city: t.city,
                    country: t.country,
                    airport: t.airport,

                })

            }), console.log(e), {
                results: e
            }
        },
        cache: !0
    },
    escapeMarkup: function(t) {
        return t
    },
    minimumInputLength: 3,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection,
    dropdownPosition: 'below',
    cache: !0
});
</script>

<script>

   var root = "<?=root?>";

   // select 2 location init for hotels search 
   var $ajax = $(".cars_city");
   function formatRepo(t) {  return t.loading ? t.text : (console.log(t), '<i class="flag ' + t.icon.toLowerCase() + '"></i>' + t.text +', '+'<strong>'+t.country_name+'</strong>') }
   function formatRepoSelection(t) { 
      
   if(typeof t.country_name === 'undefined') {
   var country_name_ = "";
   } else { 
   var country_name_ = t.country_name;
   }
      
   return t.text +' '+'<small><strong>'+country_name_+'</strong><small>' }
   $ajax.select2({
       ajax: {
           url: "./api/hotels_locations",
           dataType: "json",
           data: function(t) {
               return {
                   city: $.trim(t.term)
               }
           },
           processResults: function(t) {
            // console.log(t.data)
               var e = [];
               return t.data.forEach(function(t) {
                   e.push({
                       id: t.id,
                       text: t.city,
                       icon: t.country_code,
                       country_name: t.country
                   })
               }), console.log(e), {
                   results: e
               }
           },
           cache: !0
       },
       escapeMarkup: function(t) {
           return t
       },
       minimumInputLength: 3,
       templateResult: formatRepo,
       templateSelection: formatRepoSelection,
       dropdownPosition: 'below',
       cache: !0
   });
    
   // TO STORE THE SELECT2 RESULT WRAPERR 
   var _select2Result;

   let _mostPolpularCars;
   let checkFor = true;

   $(document).on('select2:open', function(e) {
    document.querySelector('.select2-search__field').focus();
    
    if(e.target.classList.contains('cars_flights_origin')) {
        setTimeout(() => $('.select2-results > ul > li').hide(), 10)
        _mostPolpularCars = document.querySelector('#most--popular-cars-origin').content.cloneNode(true);
        mostPopularCars(e.target);
    } else if(e.target.classList.contains('cars_city')) {
        setTimeout(() => $('.select2-results > ul > li').hide(), 10)
        _mostPolpularCars = document.querySelector('#most--popular-cars-city').content.cloneNode(true);
        mostPopularCars(e.target);
        checkFor = false;
    }

   });


   function mostPopularCars(_selectedId) {
      setTimeout(() => addEventCars(_mostPolpularCars, _selectedId), 10)
   }

   function addEventCars(tempCars, thisId) {

        let sibiling = $(thisId).siblings('.select2.select2-container')
        let change;

        if(checkFor) {
            change = $(sibiling).find('.select2-selection__rendered > .mt-3')
        } else {
            change = $(sibiling).find('.select2-selection__rendered')
        }

        
        let len = tempCars.querySelectorAll('div > .to--insert')

        len.forEach(li => {
            li.addEventListener('click', function(e) { 
                let innerText = this.querySelector('.btn-outline-primary').textContent;
                let outterText = this.querySelector('div > strong').textContent;

                change.html( `${outterText} <small><strong class="mt-1"> ${innerText} </strong></small>` );
                thisId.querySelector('option').value = innerText;

                // document.querySelector('.select2.select2-container.select2-container--default.select2-container--open').classList.remove('select2-container--open')
                // document.querySelector('.select2-container.select2-container--default.select2-container--open:last-child').remove()

               $('.cars_flights_origin').select2('close');

            })
        })

        $('.select2-results > ul').append(_mostPolpularCars);

        // WHEN SELECT2 GET OPENED ADD FADE ANIMATION TO THE SELECT2 
        document.querySelector('.select2-results').classList.remove("select2--fadeout");
        document.querySelector('.select2-results').classList.add("select2--fadein");
            
            // GET THE THE RESULT PARENT 
            // scope @global
            // _select2Result = document.querySelector(".select2-results");

        // ADD @KEYUP EVENT TO THE SELECT2 SEARCH INPUT 
        // document.querySelector(".select2-search__field").addEventListener("keyup", function () {
        //     setTimeout(() => {
        //         let _newHeight = document.querySelector("ul.select2-results__options" ).offsetHeight;
        //         _select2Result.style.height = _newHeight + "px";
        //     }, 300);
        // });

   }

   // WHENEVER SELECT2 GET CLOSE
   $(document).on('select2:closing', function() {
        document.querySelector('.select2-results').classList.remove("select2--fadein");
        document.querySelector('.select2-results').classList.add("select2--fadeout");
        // _select2Result.style.height = "auto";
   })
   
    
</script>

<style>
   .to--insert { height: 54px; }
</style>