@extends('layouts.frontend')
@section('content')
@section('style')
<link rel="stylesheet" href="{{asset('css/nouislider.css')}}" />

@endsection
<style>
.theme_two_box_img {
    max-height: 230px !important;
    min-height: 230px !important;
}
</style>
<!-- search -->
<div class="search-overlay">
    <div class="d-table">
        <div class="d-table-cell">
            <div class="search-overlay-layer"></div>
            <div class="search-overlay-layer"></div>
            <div class="search-overlay-layer"></div>
            <div class="search-overlay-close">
                <span class="search-overlay-close-line"></span>
                <span class="search-overlay-close-line"></span>
            </div>
            <div class="search-overlay-form">
                <form>
                    <input type="text" class="input-search" placeholder="Search here...">
                    <button type="button"><i class="fas fa-search"></i></button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Common Banner Area -->
<section id="common_banner">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="common_bannner_text">
                    <h2>Hotel search result</h2>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><span><i class="fas fa-circle"></i></span> Hotel</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Form Area -->
<section id="theme_search_form_tour">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="theme_search_form_area">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="tour_search_form">
                                {{-- <form action="!#">
                                    <div class="row">
                                        <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                                            <div class="flight_Search_boxed">
                                                <p>Destination</p>
                                                <input type="text" placeholder="Where are you going?">
                                                <span>Where are you going?</span>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-6 col-sm-12 col-12">
                                            <div class="form_search_date">
                                                <div class="flight_Search_boxed date_flex_area">
                                                    <div class="Journey_date">
                                                        <p>Check In date</p>
                                                        <input type="date" value="2022-05-03">
                                                        <span>Thursday</span>
                                                    </div>
                                                    <div class="Journey_date">
                                                        <p>Check Out date</p>
                                                        <input type="date" value="2022-05-05">
                                                        <span>Thursday</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-2  col-md-6 col-sm-12 col-12">
                                            <div class="flight_Search_boxed dropdown_passenger_area">
                                                <p>kk Passenger, Class </p>
                                                <div class="dropdown">
                                                    <button class="dropdown-toggle final-count"
                                                        data-toggle="dropdown" type="button"
                                                        id="dropdownMenuButton1" data-bs-toggle="dropdown"
                                                        aria-expanded="false">
                                                        1 Guests
                                                    </button>
                                                    <div class="dropdown-menu dropdown_passenger_info"
                                                        aria-labelledby="dropdownMenuButton1">
                                                        <div class="traveller-calulate-persons">
                                                            <div class="passengers">
                                                                <h6>Guests</h6>
                                                                <div class="passengers-types">
                                                                    <div class="passengers-type">
                                                                        <div class="text"><span
                                                                                class="count pcount">2</span>
                                                                            <div class="type-label">
                                                                                <p>Adult</p>
                                                                                <span>12+
                                                                                    yrs</span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="button-set">
                                                                            <button type="button" class="btn-add">
                                                                                <i class="fas fa-plus"></i>
                                                                            </button>
                                                                            <button type="button"
                                                                                class="btn-subtract">
                                                                                <i class="fas fa-minus"></i>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                    <div class="passengers-type">
                                                                        <div class="text"><span
                                                                                class="count ccount">0</span>
                                                                            <div class="type-label">
                                                                                <p class="fz14 mb-xs-0">
                                                                                    Children
                                                                                </p><span>2
                                                                                    - Less than 12
                                                                                    yrs</span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="button-set">
                                                                            <button type="button" class="btn-add-c">
                                                                                <i class="fas fa-plus"></i>
                                                                            </button>
                                                                            <button type="button"
                                                                                class="btn-subtract-c">
                                                                                <i class="fas fa-minus"></i>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                    <div class="passengers-type">
                                                                        <div class="text"><span
                                                                                class="count incount">0</span>
                                                                            <div class="type-label">
                                                                                <p class="fz14 mb-xs-0">
                                                                                    Infant
                                                                                </p><span>Less
                                                                                    than 2
                                                                                    yrs</span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="button-set">
                                                                            <button type="button"
                                                                                class="btn-add-in">
                                                                                <i class="fas fa-plus"></i>
                                                                            </button>
                                                                            <button type="button"
                                                                                class="btn-subtract-in">
                                                                                <i class="fas fa-minus"></i>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <span>Business</span>
                                            </div>
                                        </div>
                                        <div class="top_form_search_button">
                                            <button class="btn btn_theme btn_md" type="button">Search</button>
                                        </div>
                                    </div>
                                </form> --}}
                                  <form action="{{route('frontend.hotel-list')}}" method="GET">
                                            @csrf
                                              <input class="location_input_hidden" type="hidden" name="locationhidden" value="{{ request()->get('locationhidden') }}" />
                                              <div class="row">
                                                  <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                                                      <div class="flight_Search_boxed">
                                                        {{-- here --}}
                                                        @php 
                                                        $destincation = explode("_",request()->get('locationhidden'));
                                                        @endphp
                                                          <p>Destination</p>
                                                          <input type="text" class="search__city search_hotel_city" value="{{ $destincation[0]; }}" placeholder="Where are you going?">
                                                          <span id="">Where are you going?</span>
                                                      </div>
                                                      <div class="dropdown location_list_div">
                                                        <div class="dropdown_passenger_info" aria-labelledby="dropdownMenuButton2">
                                                            <div class="traveller-calulate-persons">
                                                                <ul class="location_list">
                                                                    
                                                                </ul>
                                                            </div>
                                                       </div>
                                                      </div>
                                                      
                                                  </div>
                                                  <div class="col-lg-4 col-md-6 col-sm-12 col-12">
                                                      <div class="form_search_date">
                                                          <div class="flight_Search_boxed date_flex_area">
                                                              <div class="Journey_date">
                                                                  <p>Check In date</p>
                                                                  <input type="date" name="checkin" id="checkin" value="{{ request()->get('checkin') }}">
                                                                  {{-- <span>Thursday</span> --}}
                                                              </div>
                                                              <div class="Journey_date">
                                                                  <p>Check Out date</p>
                                                                  <input type="date" name="checkout" id="checkout" value="{{ request()->get('checkout') }}">
                                                                  {{-- <span>Thursday</span> --}}
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                                  <div class="col-lg-2  col-md-6 col-sm-12 col-12">
                                                      <div class="flight_Search_boxed dropdown_passenger_area">
                                                          <p>Select Room </p>
                                                          <a href="javascript:void" class="dropdown-toggle-htl trvl-tglhtl">
                                                            <span class="htl-ht" id="htl-ttl">
                                                              <span class="guestromm__description htl-totla"><span class="ttl-room">1</span> Room, <span class="htl-gust">1</span> Guest</span>
                                                              <i class="icofont-caret-down"></i>
                                                            </span>
                                                          </a>
                                                      </div>
                                                      <div class="htl-select-room">
                                                        
                                                        <div class="select-hotel-v hotel-wrap select-htl-sec" style="display: none">
                                                          <div class="htl-room-list">
                                                            <label for="">No of Rooms</label>
                                                            <div class="hotel-numbers ">
                                                              <label class="cstm-radio">
                                                                <input type="radio" class="bp_room_select" name="room" value="1" checked="checked">
                                                                <span class="htl-num">1</span>
                                                              </label>
                                                              <label class="cstm-radio">
                                                                <input type="radio" name="room" value="2" class="bp_room_select">
                                                                <span class="htl-num">2</span>
                                                              </label>
                                                              <label class="cstm-radio">
                                                                <input type="radio" name="room" value="3" class="bp_room_select">
                                                                <span class="htl-num">3</span>
                                                              </label>
                                                              <label class="cstm-radio">
                                                                <input type="radio" name="room" value="4" class="bp_room_select">
                                                                <span class="htl-num">4</span>
                                                              </label>
                                                            </div>
                                                          </div>
                                                          <div class="rows">
                                                            <div class="bp_room_data  roombox mt-3" totalrows="1">
                                                              <span class="d-block rmttl fwd mb-1 text-color room-labe text-block">Room 1:</span>
                                                              <div class="roomchildbox border-top pt-2 roombox ac1" id="">
                                                                <div class="row mb-2 search_section" id="">
                                                                  <div class="col-md-6">
                                                                    <label>Adults</label>
                                                                    <select name="adult_1" id="adult_1" class="form-control border radius room-pass">
                                                                      <option value="1">1 Adult</option>
                                                                      <option value="2">2 Adults</option>
                                                                      <option value="3">3 Adults</option>
                                                                      <option value="4">4 Adults</option>
                                                                    </select>
                                                                  </div>
                                                                  <div class="col-md-6">
                                                                    <label>Child</label>
                                                                    <select name="child_1" id="child_1" class="form-control border radius room-pass" onchange="return bp_child_age(this.value,1);">
                                                                      <option value="0">0 Child</option>
                                                                      <option value="1">1 Child</option>
                                                                      <option value="2">2 Children</option>
                                                                    </select>
                                                                  </div>
                                                                  <div class="clearfix "></div>
                                                                  <div class="col-md-12">
                                                                    <div id="bp_for_child_dob_1" class="mt-2"></div>
                                                                  </div>
                                                                </div>
                                                              </div>
                                                            </div>
                                                          </div>
                                                          <div class="addremovedone text-md-right mt-2">
                                                            <a id="room-trd" href="javascript:void" class="searchenginehoteldone btn btn-com text-white btn-sm">DONE</a>
                                                          </div>
                                                        </div>
                                                      </div>
                                                  </div>
                                                  <div class="top_form_search_button">
                                                      <button class="btn btn_theme btn_md">Search</button>
                                                  </div>
                                              </div>
                                          </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Hotel Search Areas -->
<section id="explore_area" class="section_padding">
    <div class="container">
        <!-- Section Heading -->
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="section_heading_center">
                    <h2>Search Result</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3">
                <div class="left_side_search_area">
                    <div class="left_side_search_boxed">
                        <div class="left_side_search_heading">
                            <h5>Filter by price</h5>
                        </div>
                        <div class="filter-price">
                            <div id="price-slider"></div>
                        </div>
                        <button class="apply apply_price_filter" type="button">Apply</button>
                        <button class="apply reset_price_filter" type="button">Reset</button>
                    </div>

                    <div class="left_side_search_boxed">
                        <div class="left_side_search_heading">
                            <h5>Filter by hotel star</h5>
                        </div>
                        <div class="filter_review">
                            <form class="review_star">
                                <div class="form-check">
                                    <input class="form-check-input filter_hotel" type="checkbox" value="5" id="flexCheckDefaulta">
                                    <label class="form-check-label" for="flexCheckDefaulta">
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_theme"></i>
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input filter_hotel" type="checkbox" value="4"
                                        id="flexCheckDefaulf21">
                                    <label class="form-check-label" for="flexCheckDefaulf21">
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_asse"></i>
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input filter_hotel" type="checkbox" value="3"
                                        id="flexCheckDefaultf3">
                                    <label class="form-check-label" for="flexCheckDefaultf3">
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_asse"></i>
                                        <i class="fas fa-star color_asse"></i>
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input filter_hotel" type="checkbox" value="2"
                                        id="flexCheckDefaultf4">
                                    <label class="form-check-label" for="flexCheckDefaultf4">
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_asse"></i>
                                        <i class="fas fa-star color_asse"></i>
                                        <i class="fas fa-star color_asse"></i>
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input filter_hotel" type="checkbox" value="1"
                                        id="flexCheckDefaultf5">
                                    <label class="form-check-label" for="flexCheckDefaultf5">
                                        <i class="fas fa-star color_theme"></i>
                                        <i class="fas fa-star color_asse"></i>
                                        <i class="fas fa-star color_asse"></i>
                                        <i class="fas fa-star color_asse"></i>
                                        <i class="fas fa-star color_asse"></i>
                                    </label>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="col-lg-9">
                <div class="row">
                    @php
                        $hotelObj = new \App\Http\Controllers\Frontend\HotelController;
                    @endphp
                    @foreach ($result as $hotelList)
                    @php $hotelASJ = $hotelObj->bp_hotel_get_fare($hotelList->Price->OfferedPrice, $hotelList->Price->PublishedPrice, "1"); @endphp
                    <div class="col-lg-4 col-md-6 col-sm-6 col-12 hotel_filter_result response_main" data-star="{{$hotelList->StarRating}}" data-price="{{$hotelASJ['final_fare']}}">
                        <div class="theme_common_box_two">
                            <div class="theme_two_box_img">
                                <a href="{{route('frontend.hotel-details',['tid' => $traceId, 'hc' => $hotelList->HotelCode, 'i' => $hotelList->ResultIndex])}}"><img src="{{$hotelList->HotelPicture}}" alt="img"></a>
                                <p><i class="fas fa-map-marker-alt"></i>{{$hotelList->HotelAddress}}</p>
                            </div>
                            <div class="theme_two_box_content">
                                <h4><a href="{{route('frontend.hotel-details',['tid' => $traceId, 'hc' => $hotelList->HotelCode, 'i' => $hotelList->ResultIndex])}}">{{$hotelList->HotelName}}</a></h4>
                                @for ($i = 1; $i <= $hotelList->StarRating; $i++)
                                    <i class="fas fa-star color_theme"></i>
                                @endfor
                                
                                <h3>₹{{$hotelASJ['final_fare']}} <span>Price starts from</span></h3>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    {{-- <div class="col-lg-12">
                        <div class="pagination_area">
                            <ul class="pagination">
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
</section>
@section('scripts')

{{-- Start here for select pax --}}
<script>    
    $('.search_hotel_city').on('keyup', function() {
        $('.location_list_div').show();
      var value = $(this).val();
      if (value.length > 2) {
        $.ajax({
          type: "GET",
          url: "{{route('frontend.get-hotel-cities')}}",
          data: {
            "data": value,
            "country": "IN"
          },
          success: function(data) {
            if (data.length > 0) {
              var html = '';
              $.each(data, function(key, value) {
                console.log(value);
                html += '<li class="list-group-item location_item" index="' + value.destination + '_' + value.city_id + '_' + value.country_code + '"' + ' href="#">' + value.destination + '</a>';
              });
              $('.location_list').html(html);
            } else {
              $('.location_list').html('');
            }
          }
        });
      } else {
        $('.location_list').html('');
      }
    })


    
  </script>

<script>
    $(".bp_room_select").click(function() {
      // $(".hotelguestsdetails").show();
    });
    $(".bp_room_select").click(function() {
      // $(".hotelguestsdetails").show();
      var bp_no_rooms = this.value;
      $(".guest_numr").text("");
      $(".guest_numr").text(bp_no_rooms);
      console.log("current row" + bp_no_rooms);
      var tots_rows = $(".bp_room_data").attr('totalrows');
      console.log($(".bp_room_data").attr('totalrows'));
      var bp_room_data = "";
      if (tots_rows < bp_no_rooms) {
  
        for (var i = tots_rows; i < bp_no_rooms; i++) {
          //var ni = 1*(i+1);
          var at = parseInt(i)
          var ni = at + 1;
          bp_room_data += '<div class="row roombox ac' + ni + '">\
                        <div class="col-md-2">\
                        <strong class="block room-labe fz16 fwb black-color">Room ' + ni + ':</strong>\
                        </div>\
                         <div class="col-md-2">\
                          <select name="adult_' + ni + '" id="adult_' + ni + '" class="form-control border radius">\
                            <option value="1">1 Adult</option>\
                            <option value="2">2 Adults</option>\
                            <option value="3">3 Adults</option>\
                            <option value="4">4 Adults</option>\
                            </select>\
                          </div>\
                          <div class="col-md-2">\
                          <select name="child_' + ni + '" id="child_' + ni + '" class="form-control border radius" onchange="return bp_child_age(this.value,' + ni + ');">\
                            <option value="">0 Child</option>\
                            <option value="1">1 Child</option>\
                            <option value="2">2 Children</option>\
                           </select>\
                          </div>\
                          <div class="col-md-6">\
                          <div id="bp_for_child_dob_' + ni + '">\
                          </div>\
                          </div>\
                        </div>';
        }
  
        $(".bp_room_data").attr("totalrows", bp_no_rooms);
        $(".ac" + tots_rows).after(bp_room_data);
      } else {
        $(".bp_room_data").attr("totalrows", bp_no_rooms);
        for (var di = bp_no_rooms; di <= 4; di++) {
          var atd = parseInt(di);
          var nti = atd + 1;
          if ($(".ac" + nti)) {
            $(".ac" + nti).remove();
          }
        }
  
      }
    });
  </script>
  <script>
    function bp_child_age(value, sect) {
      if (value == "") {
        //$("#bp_for_child_dob_"+sect).fadeOut(300);
      } else {
        //$("#bp_for_child_dob_"+sect).fadeIn(300);
      }
      var bp_age_div_data = "";
      bp_age_div_data += '<div class="row mt15">';
      for (var i = 1; i <= value; i++) {
        bp_age_div_data += '<div class="col-md-6">\
                              <select name="age_' + sect + '_' + i + '" id="age_' + sect + '_' + i + '" class="form-control border radius">\
                                  <option value="1">1 Year</option>\
                                  <option value="2">2 Years</option>\
                                  <option value="3">3 Years</option>\
                                  <option value="4">4 Years</option>\
                                  <option value="5">5 Years</option>\
                                  <option value="6">6 Years</option>\
                                  <option value="7">7 Years</option>\
                                  <option value="8">8 Years</option>\
                                  <option value="9">9 Years</option>\
                                  <option value="10">10 Years</option>\
                                  <option value="11">11 Years</option>\
                                  <option value="12">12 Years</option>\
                              </select>\
                          </div>';
      }
      bp_age_div_data += '</div>';
      $("#bp_for_child_dob_" + sect).attr("childinfo", value).html(bp_age_div_data);
  
    }
    ///ffff
    $(document).ready(function() {
      $('.drp-dl a').on('click', function(e) {
        $(this).next('.dropdn-menu').slideToggle();
  
      });
      $('.radio-flght li label').on('click', function() {
        $(this).parent().addClass('active');
        $(this).parent().siblings('').removeClass('active');
      });
  
      // Traveller Numbers
      $('.pop-select').change(function() {
        var child = parseInt($(".infent_select").val());
        var infant = parseInt($(".child_select").val());
        var adult = parseInt($(".adult_select").val());
        var total = child + infant + adult;
        $(".guest_num").text(total);
      });
  
      $('.class_selected').change(function() {
        $(".flt-cls").text($(".class_selected option:selected").text());
      });
  
      $('.bp_room_select').change(function() {
        $(".guest_numr").text($(".bp_room_select option:selected").text());
      });
      $('.bp_room_select').click(function() {
        var noRooms = $(this).val();
        $('.ttl-room').text(noRooms);
      });
  
      // Hotel Room Start here
      $(".bp_room_select").click(function() {
        $(".hotelguestsdetails").show();
      });
      $(".bp_room_select").change(function() {
        $(".hotelguestsdetails").show();
        var bp_no_rooms = $(this).val(); //this.value;
        var bp_room_data = "";
        // console.log(bp_no_rooms);
        // console.log(156);
        for (var i = 1; i <= bp_no_rooms; i++) {
          bp_room_data += '<div class="roombox mt-3">\
                           <span class="d-block rmttl fwd mb-1">Room ' + i + ':</span>\
                           <div class="roomchildbox border-top pt-2">\
                             <div class="row mb-2">\
                                <div class="col-sm-6">\
                                  <label class="">Adult</label>\
                                    <select name="adult_' + i + '" id="adult_' + i + '" class="form-control custom-select room-pass">\
                                      <option value="1">1 Adult</option>\
                                      <option value="2">2 Adults</option>\
                                      <option value="3">3 Adults</option>\
                                      <option value="4">4 Adults</option>\
                                    </select>\
                                </div>\
                                <div class="col-sm-6">\
                                   <label>Child</label>\
                                   <select name="child_' + i + '" id="child_' + i + '" class="form-control custom-select room-pass" onchange="return bp_child_age(this.value,' + i + ');">\
                                      <option value="0"> Child</option>\
                                      <option value="1">1 Child</option>\
                                      <option value="2">2 Children</option>\
                                   </select>\
                                </div>\
                             </div>\
                          <div class="clearfix"></div>\
                          <div id="bp_for_child_dob_' + i + '"></div>\
                          </div>\
                        </div>';
        }
        $(".bp_room_data").html(bp_room_data);
        var total_guest = 0;
        $('.room-pass').each(function() {
          var gus = parseInt($(this).val());
          total_guest = total_guest + gus;
        });
        console.log(total_guest);
        $('.htl-gust').text(total_guest);
      });
      $('.bp_room_data .roombox select.room-pass').on('change', function() {
        var total_guest = 0;
        $('.room-pass').each(function() {
          var gus = parseInt($(this).val());
          total_guest = total_guest + gus;
        });
        $('.htl-gust').text(total_guest);
      });
  
      $(document).on('change', ".bp_room_data .roombox select.room-pass", function() {
        var total_guest = 0;
        $('.room-pass').each(function() {
          var gus = parseInt($(this).val());
          console.log(gus);
          total_guest = total_guest + gus;
        });
        $('.htl-gust').text(total_guest);
      });
  
      // Hotel Room Start end
  
      $('.trvl-tgl').on('click', function(e) {
        $('.traveller-com').slideToggle();
        e.stopPropagation();
      });
      $('.traveller-com').click(function(e) {
        e.stopPropagation();
      });
      $(document).click(function() {
        $(".traveller-com").hide();
      });
  
      // $('.trvl-tglhtl').on('click', function(e) {
      //   $('.hotel-wrap').slideToggle();
      //   e.stopPropagation();
      // });
      // $('.hotel-wrap').click(function(e) {
      //   e.stopPropagation();
      // });
      // $(document).click(function() {
      //   $(".hotel-wrap").hide();
      // });
  
      $('.dropdown-toggle-tra').click(function() {
        $('.dropdown-menu-nav').slideToggle(400);
      });
      $('.searchenginehoteldone').click(function() {
        $('.dropdown-menu-nav').hide(400);
      });
  
      $('.searchenginehoteldone, .searchenginehoteldone').on('click', function() {
        $('.traveller-com, .hotel-wrap').hide();
      });
      // $('.retrun-flt').css('opacity', '0.7');
      // $('.radio-flght #round-rad label').on('click', function() {
      //   $('.retrun-flt').css('opacity', '1');
      //   $('.retrun-flt .form-control').removeAttr('disabled');
      // });
      // $('.radio-flght #one-way-rad label').on('click', function() {
      //   $('.retrun-flt').css('opacity', '0.7');
      //   $('.retrun-flt .form-control').attr('disabled', 'disabled');
      // });
  
      // $('.radio-flght li .flght-rad').click(function() {
      //   $('#multi-flght').hide();
      //   $('#oneway-flght').show();
      // });
      // $('.radio-flght li .flght-multi-rad').click(function() {
      //   $('#oneway-flght').hide();
      //   $('#multi-flght').show();
      // });
  
  
      $('.fl-foot li a.fl-dts').on('click', function() {
        $(this).closest('.fl-foot').next('.flt-details-wrap').slideToggle();
      });
      $('.htl-ht').click(function() {
        var style = $('.select-htl-sec').attr('style');
        if (style == null || style == "display: none") {
          $('.select-htl-sec').attr('style', 'display: block');
        } else {
          $('.select-htl-sec').attr('style', 'display: none')
        }
        // alert(style);
      });
  
    });
  </script>

{{-- End here for select pax --}}
<script>
    var prices = [];
    $('.hotel_filter_result').each(function(){
        prices.push($(this).attr('data-price'));
    })
    var maxPrice = Math.max.apply(Math,prices);
    var minPrice = Math.min.apply(Math,prices);
    
</script>

<script>
    $('.filter_hotel').change(function(){
        filterHotel();
    })

    function filterHotel(){
        var starCheckedIds = [];
        $.each($('.filter_hotel:checked'),function(){
            starCheckedIds.push($(this).val());
        })
        console.log(starCheckedIds);
        if(starCheckedIds.length > 0){
            var clsName = 'hotel_filter_result';
            if($('.pf-applied').length > 0){
                clsName = 'pf-applied';
            }
            $.each($('.'+clsName),function(){
                if($.inArray($(this).attr('data-star'), starCheckedIds) != -1) {
                    $(this).removeClass('d-none');
                    $(this).addClass('sf-applied');
                } else {
                    $(this).addClass('d-none');
                    $(this).removeClass('sf-applied');
                }
            });
        } else {
            $('.hotel_filter_result').removeClass('d-none');
        }
    }
    $('.apply_price_filter').click(function(){
        applyFilter('apply');
    })

    $('.reset_price_filter').click(function(){
        $('#price-slider')[0].noUiSlider.reset();
        $('.hotel_filter_result').removeClass('pf-applied');
        filterHotel();
    })

    function applyFilter(type){
        $('.hotel_filter_result').removeClass('pf-applied');
        var lowerPrice = parseInt($('.noUi-handle-lower').find('.noUi-tooltip').text());
        var upperPrice = parseInt($('.noUi-handle-upper').find('.noUi-tooltip').text());
        console.log(lowerPrice + ' -  ' + upperPrice);
        var clsName = 'hotel_filter_result';
        if($('.sf-applied').length > 0){
            if(type != 'reset'){
                clsName = 'sf-applied';
            }
            
        }
        $.each($('.'+clsName),function(){
            if($(this).attr('data-price') >= lowerPrice && $(this).attr('data-price') <= upperPrice) {
                $(this).removeClass('d-none');
                if(type == 'apply'){
                    $(this).addClass('pf-applied');
                }
            } else {
                $(this).addClass('d-none');
                $(this).removeClass('pf-applied');
            }
        });
    }
</script>

<script>
    var priceSlider = document.getElementById('price-slider');

    // Check if #price-slider elem is exists if not return
    // to prevent error logs

    noUiSlider.create(priceSlider, {
        start: [minPrice, maxPrice],
        connect: true,
        step: 500,
        margin: 500,
        range: {
            'min': minPrice,
            'max': maxPrice
        },
        tooltips: true,
        format: wNumb({
            decimals: 0,
            prefix: ''
        })
    });
    
</script>

<script>
    $(function() {

        var prices = [];
        $('.response_main').each(function() {
            prices.push($(this).attr('data-price'));
        })
        var maxPrice = Math.max.apply(Math, prices);
        var minPrice = Math.min.apply(Math, prices);
        var $filter_lists = $("#filters .filtersInner"),
            $filter_checkboxes = $("#filters :checkbox"),
            $items = $("#filterData .response_main");

        $filter_checkboxes.click(filterSystem);


        var priceSlider = document.getElementById('price-slider');

        noUiSlider.create(priceSlider, {
            start: [minPrice, maxPrice],
            connect: true,
            step: 500,
            margin: 500,
            range: {
                'min': minPrice,
                'max': maxPrice
            },
            tooltips: true,
            format: wNumb({
                decimals: 0,
                prefix: ''
            })
        });

        $('.apply_price_filter').click(function() {
            filterSystem();
        })

        $('.reset_price_filter').click(function() {
            $('#price-slider')[0].noUiSlider.reset();
            filterSystem();
        })

        function filterSlider(elem) {
            var price = parseInt($(elem).data("price"), 10);

            var minPrice = parseInt($('.noUi-handle-lower').find('.noUi-tooltip').text());
            var maxPrice = parseInt($('.noUi-handle-upper').find('.noUi-tooltip').text());
            console.log('min', minPrice, 'max', maxPrice);
            return price >= minPrice && price <= maxPrice;
        }

        function filterCheckboxes(elem) {
            var $elem = $(elem),
                passAllFilters = true;
            $filter_lists.each(function() {
                var classes = $(this).find(':checkbox:checked').map(function() {
                    return $(this).val();
                }).get();
                console.log('classes', classes);
                var passThisFilter = false;
                $.each(classes, function(index, item) {
                    if ($elem.hasClass(item)) {
                        console.log('hasClass', item);
                        passThisFilter = true;
                        return false; //stop inner loop
                    }
                });
                if (!passThisFilter) {
                    passAllFilters = false;
                    return false; //stop outer loop
                }
            });
            return passAllFilters;
        }

        function filterSystem() {
            $items.hide().filter(function() {
                return filterSlider(this) && filterCheckboxes(this);
            }).show();
        }
    });
</script>
@endsection
@endsection