<!-- This is for Car list  -->
<section id="main_form" class="padding12top">
    <div class="banner-bottom pcenter" >
        <!-- container -->
        <div class="container">
            <div class="row">
                <?php echo $this->partial('local-hire/index/modify-search'); ?>
                <div class="banner-bottom-grids">
                    <div class="col-md-2 banner-bottom-grid widthpercent20 pull-left filter-div">
                        <?php echo $this->partial('local-hire/index/vehicle-filter'); ?>
                    </div>
                    <div class="currency-filter">

                    <div class="col-md-8 banner-bottom-grid widthpercent60" id="local-listing-car">
                        <div class="destinations-grid-info tours tours1 marginbot10" >
                            <div class="mapcantiner_inner1 no-padding">
                                <div class="marginbot10 padding-bot10px">
                                    <div class="col-md-5 sightmargin overviueimgcar" align="left"> Car Type </div>
<!--                                    <div class="col-md-2 sightmargin overviueimg2car" align="left"> </div>-->
                                    <div class="col-md-3 sightmargin" align="left" > <span class="vehicle_name">Departure</span><br></div>

                                    <div class="col-md-2 sightmargin overviueimg2car1 padding_margin0" align="left" > <span class="vehicle_name">Duration & Price</span><br></div>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix"> </div>
                        <div id="filtered-vehicle-data">
                            <?php echo $this->partial('local-hire/index/filtered-vehicle-listing'); ?>
                        </div>
                        <div id="accordion-guest" class="panel-group"></div>
                    </div>
                    <div id="payment-detail-data">
                        <?php echo $this->partial('local-hire/index/payment-detail'); ?>
                    </div>

                    </div>

                    <div class="clearfix"> </div>
                </div>
            </div>
        </div>
    </div>
</section>
<style>

.fixed .content-wrapper, .fixed .right-side {
    padding-top: 15px;
}
.main-header .logo {
         padding-top: 21px;
}

</style>


<script src="<?php echo $google_map_url; ?>?key=<?php echo $google_map_key; ?>&libraries=places" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
<?php if($data['vehicle_type_id']!=""){ ?>
    $(".continue-submit").click();
<?php }?>
});
</script>

<style>
    #package-id{
        height:auto;
    }

</style>
<script>
var $filterCheckboxes = $('input[type="checkbox"]');

$filterCheckboxes.on('change', function() {
    
  var selectedFilters = {};

  $filterCheckboxes.filter(':checked').each(function() {

    if (!selectedFilters.hasOwnProperty(this.name)) {
      selectedFilters[this.name] = [];
    }

    selectedFilters[this.name].push(this.value);

  });

  // create a collection containing all of the filterable elements
  var $filteredResults = $('.vehicle-filer-class');

  // loop over the selected filter name -> (array) values pairs
  $.each(selectedFilters, function(name, filterValues) {

    // filter each .flower element
    $filteredResults = $filteredResults.filter(function() {

      var matched = false,
        currentFilterValues = $(this).data('category').split(' ');

      // loop over each category value in the current .flower's data-category
      $.each(currentFilterValues, function(_, currentFilterValue) {
            //$('.vehicle-filer-class').find('.collapse').addClass('in');
        // if the current category exists in the selected filters array
        // set matched to true, and stop looping. as we're ORing in each
        // set of filters, we only need to match once

        if ($.inArray(currentFilterValue, filterValues) != -1) {
          matched = true;
          return false;
        }
      });

      // if matched is true the current .flower element is returned
      return matched;

    });
  });

  $('.vehicle-filer-class').hide().filter($filteredResults).show();

});
   
   
$('.vehicle-type').on('change', function() {
    if($(this).prop("checked")){ 
        $(this).parents(".supplier").find(".vehicle-name").removeClass("display-none");
    }else{     
        $(this).parents(".supplier").find(".vehicle-name").addClass("display-none");
    }
});   
   
</script>
