<script>
    $(document).ready(function(){
      $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $(".myTable").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });
</script>
<script>
    $(document).ready(function(){
      $("#myInput1").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $(".myTable1").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });
</script>
<style type="text/css">
  #Div1
  {
    display: none;
  }
</style>


<div class="r-slider-serach form-search dark">
              <form action="#">
                  <div class="form-title form-title-large">
                      <!-- <span class="r-form-icon"><img src="assets/images/footer-form-icon.png" alt=""></span> -->
                      <h2>Search Your <b>Best Cars</b></h2>
                      <small> 120+ CARS TYPE &amp; BRANDS </small>
                  </div>
                  <div class="row row-inputs" id="Div">
                    <div class="col-sm-12">
                        <div class="form-group has-icon has-label">
                            <label></label>
                            <input type="text" class="form-control" id="myInput" placeholder="Search Brands">
                            <span class="form-control-icon"><i class="fa fa-search"></i></span>
                            <input type="hidden" name="brand" value="" id="brand">
                        </div>
                    </div>
                    <div class="col-sm-12">
                      <div class="form-group has-icon has-label brand_box">
                        <div class="row">
                          <?php 
                            $dis="select * from brand";
                            $qq=mysqli_query($db,$dis) or die('error');
                            while($a = mysqli_fetch_assoc($qq))
                            {
                          ?>
                          <div class="col-md-4 myTable">
                            <img src="AdminPanel/<?php echo $a['image']; ?>" style="width:100px; height: 100px;" id="brand:<?php echo $a['id']; ?>" class="brand"  onclick="switchVisible();">
                            <h6 class="text"><?php echo $a['brand_name']; ?></h6>
                          </div>
                          <?php } ?>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row row-inputs" id="Div1">
                    <div class="col-sm-12">
                        <div class="form-group has-icon has-label">
                            <label></label>
                            <input type="text" class="form-control" id="myInput1" placeholder="Search Models">
                            <span class="form-control-icon"><i class="fa fa-search"></i></span>
                            <input type="hidden" name="model" value="" id="model">
                        </div>
                    </div>
                    <div class="col-sm-12">
                      <div class="form-group has-icon has-label brand_box">
                        <div class="row" id="modell">
                          <?php 
                            $dis="select * from model";
                            $qq=mysqli_query($db,$dis) or die('error');
                            while($a = mysqli_fetch_assoc($qq))
                            {
                          ?>
                          <div class="col-md-4 myTable1">
                            <img src="AdminPanel/<?php echo $a['image']; ?>" style="width:100px; height: 100px;" id="model:<?php echo $a['id']; ?>" class="brand">
                            <h6 class="text"><?php echo $a['model_name']; ?></h6>
                          </div>
                          <?php } ?>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- <div class="row row-inputs">
                    <div class="col-sm-12">
                        <div class="form-group has-icon has-label">
                            <label>Dropping Off Location</label>
                            <input type="text" class="form-control" id="formSearchOffLocation" placeholder="Airport or Anywhere">
                            <span class="form-control-icon"><i class="fa fa-map-marker"></i></span>
                        </div>
                    </div>
                  </div>
                  <div class="row row-inputs">
                    <div class="col-sm-6">
                        <div class="form-group has-icon has-label label" id="datetimepicker2" data-target-input="nearest">
                            <label>Picking Up Date</label>
                            <input type="text" class="form-control datepicker" data-toggle="datetimepicker" data-target="#datetimepicker2" placeholder="dd/mm/yyyy">
                            <span class="form-control-icon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group has-icon has-label date" id="datetimepicker3" data-target-input="nearest">
                            <label>Picking Up Hour</label>
                            <input type="text" class="form-control" data-toggle="datetimepicker"  data-target="#datetimepicker3" placeholder="20:00 AM">
                            <span class="form-control-icon"><i class="fa fa-clock-o"></i></span>
                        </div>
                    </div>
                  </div>
                  <div class="row row-inputs">
                    <div class="col-sm-6">
                        <div class="form-group has-icon has-label label" id="datetimepicker4" data-target-input="nearest">
                            <label>Dropping Off Date</label>
                            <input type="text" class="form-control datepicker" data-toggle="datetimepicker" data-target="#datetimepicker4" placeholder="dd/mm/yyyy">
                            <span class="form-control-icon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group has-icon has-label date" id="datetimepicker5" data-target-input="nearest">
                            <label>Dropping Off Hour</label>
                            <input type="text" class="form-control" data-toggle="datetimepicker"  data-target="#datetimepicker5" placeholder="20:00 AM">
                            <span class="form-control-icon"><i class="fa fa-clock-o"></i></span>
                        </div>
                    </div>
                  </div> -->
                  <div class="form-footer">
                    <div class="inner clearfix">
                        <a href="#" class="float-left"><i class="fa fa-plus-circle"></i>Advanced Search</a>
                        <button type="submit" class="btn m-auto d-block btn-full">Find Car</button>
                    </div>
                  </div>
              </form>
            </div>
<script type="text/javascript">
   $(document).ready(function(){
       $('.brand').on('click',function(){
            var id = $(this).attr("id");
            var data =id.split(":"); 
            var rate=data[1];
            $('#brand').val(rate);
            //alert(rate);
           
       });
   });
</script>
<script>
    function switchVisible() {
        if (document.getElementById('Div1')) {

            if (document.getElementById('Div1').style.display == 'none') {
                document.getElementById('Div1').style.display = 'block';
                document.getElementById('Div').style.display = 'none';
            }
            else {
                document.getElementById('Div1').style.display = 'none';
                
            }
        }
    }
</script>

<script type="text/javascript">
           $(document).ready(function(){
               $('#brand').on('change',function(){
                   var parentID = $(this).val();
                   //alert(parentID);
                   if(parentID){
                       var url = 'get-model.php';
                       $.ajax({
                           type:'POST',
                           url:url,
                           data:{brand:parentID},
                           success:function(data){
                          // alert(data);
                               $('#modell').html(data);
                               
                           }
                       });
                   }
               });
           });
        </script>