<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>
<script>
    $(document).ready(function(){
      $("#myInput2").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $(".myTable2").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });
</script>
<script>
    $(document).ready(function(){
      $("#myInput3").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $(".myTable3").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });
</script>
<style type="text/css">
  #Div1,#Div2,#Div3,#Div4
  {
    display: none;
  }
  .typeradio
  {
    width:20px;
    float: left;
    margin-right: 12px;
    margin-top: 0px;
    height: 20px!important;
  }
  @media (min-width: 1200px)
  {
    .r-slider-serach.form-search
    {
      left: 0;
      top: 120px;
      /*position: fixed;*/
    }
    .r-slider-serach > form
    {
      max-width: 370px;
    }
  }
  .r-slider-serach.form-search
  {

  }
  .col-mdd-4
  {
      width:33.33%;
      float:left;
  }
  .hoverr:hover
  {
    box-shadow: 0px 0px 10px black;
    border-radius: 10px;
  }
</style>

<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);
            
              $("#Div").hide();
              $("#Divv").hide();
              $("#Div1").show();
            
            //alert(rate);
            var parentID = rate;
           // var brr= $('#brand').attr('id')
           //         var parentID = brr.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>

<script type="text/javascript">
   $(document).ready(function(){
       $('.city').on('click',function(){
           //$('#Div3').load(location.href + ' #Div3');
           //$("#randomdiv").load("#randomdiv");
            var id1 = $(this).attr("id");
            $(".city").css('background-color', '#fff');
            $(".city").css('color', '#000');
            $(this).css('color', '#fff');
            $(this).css('background-color', 'green');
            var data1 =id1.split(":"); 
            var rate1=data1[1];
            //alert(rate1);
            $('#city').val(rate1);
            
            
       });
   });
</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';
    //             document.getElementById('Divv').style.display = 'none';
    //         }
    //         else {
    //             document.getElementById('Div1').style.display = 'none';
                
    //         }
    //     }
    // }
</script>

<script>
    function switchVisiblee() 
    {
        if (document.getElementById('Div')) {

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

<script>
    // function switchVisible1() {
    //     if (document.getElementById('Div2')) {

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

<script>
    function switchVisiblee1() {
        if (document.getElementById('Div1')) {

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

<script>
    // function switchVisible2() {
    //     if (document.getElementById('Div3')) {

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

<script>
    function switchVisiblee2() {
        if (document.getElementById('Div2')) {

            if (document.getElementById('Div2').style.display == 'none') {
                document.getElementById('Div2').style.display = 'block';
                document.getElementById('Div3').style.display = 'none';
                
            }
            
        }
    }
</script>

<script>
    function switchVisible3() {
        
        if (document.getElementById('Div4')) {

            if (document.getElementById('Div4').style.display == 'none') {
                document.getElementById('Div4').style.display = 'block';
                
            }
            
        }
    }
</script>
<div class="r-slider-serach form-search dark">
              <form action="search.php" method="POST">
                  <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 Windshields</b></h2>-->
                       <h2>Choose <b>Service</b></h2>
                      <!--<small> 120+ WINDSHIELDS &amp; BRANDS </small>-->
                       <small>Right Time. Right Place. Right Price</small>
                  </div>
                  <!-- <input type="radio" name="typa">.r-slider-serach.form-search
                  <input type="radio" name="typa"> -->
                  <div class="row row-inputs" id="Divv">
                    <div class="col-sm-12">
                        <div class="form-group has-icon has-label" style="float:left;margin-right:10px;">
                            <label><img src="assets/images/windshield.png" style="width: 50px;margin-top: -15px;"></label>
                            <input type="radio" class="typeradio" value="windshield" name="type" checked>
                            
                            <label>Windshield Glass Fitment</label>
                        </div>
                        <div class="form-group has-icon has-label" style="float:left;">
                            <label><img src="assets/img/serviceico.png" style="width: 45px;margin-top: -15px;"></label>
                            <input type="radio" class="typeradio" value="service" name="type">
                            
                            <label>Car Service</label>
                        </div>
                    </div>
                  </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 col-mdd-4 myTable">
                            <img src="AdminPanel/<?php echo $a['image']; ?>" title="Double Click" style="width:100%;cursor:pointer;" id="brand:<?php echo $a['id']; ?>" class="brand hoverr"  onclick="switchVisible();">
                            <h6 class="text" data-title="double click" style="cursor:pointer;"><?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  onclick="switchVisiblee();"> <i class="fa fa-arrow-left"></i> back</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">
                          
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row row-inputs" id="Div2">
                    <div class="col-sm-12">
                        <div class="form-group has-icon has-label">
                            <label  onclick="switchVisiblee1();"> <i class="fa fa-arrow-left"></i> back</label> 
                            <input type="text" class="form-control" id="myInput2" placeholder="Search Year">
                            <!-- <span class="form-control-icon"><i class="fa fa-search"></i></span> -->
                            <input type="hidden" name="year" value="" id="year">
                        </div>
                    </div>
                    <div class="col-sm-12">
                      <div class="form-group has-icon has-label brand_box">
                        <div class="row" id="yearr">
                          
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row row-inputs" id="Div3">
                    <div class="col-sm-12">
                        <div class="form-group has-icon has-label">
                            <label  onclick="switchVisiblee2();"> <i class="fa fa-arrow-left"></i> back</label> 
                            <input type="text" class="form-control" id="myInput3" placeholder="Search City">
                            <!-- <span class="form-control-icon"><i class="fa fa-search"></i></span> -->
                            <input type="hidden" name="city" value="" id="city">
                        </div>
                    </div>
                    <div class="col-sm-12" id="randomdiv">
                      <div class="form-group has-icon has-label brand_box" style="background:transparent;">
                        <div class="row">
                          <?php 
                            $disk="select * from city";
                            $qqk=mysqli_query($db,$disk) or die('error');
                            while($ak = mysqli_fetch_assoc($qqk))
                            {
                          ?>
                          <div class="col-md-4 col-mdd-4 myTable3 cityu" align="center">
                            
                            <h6 id="city:<?php echo $ak['city_id']; ?>" class="city" onclick="switchVisible3();" title="Double Click" style="font-size: 15px;cursor:pointer;"><?php echo $ak['city_name']; ?></h6>
                          </div>
                          <!--<div class="col-md-4 col-mdd-4 myTable3" align="center">-->
                            
                          <!--  <button id="city:<?php echo $ak['city_id']; ?>" class="city btn btn-success" onclick="switchVisible3();"><?php echo $ak['city_name']; ?></button>-->
                          <!--</div>-->
                          <?php } ?>
                        </div>
                      </div>
                    </div>
                    <div class="inner clearfix">
                        <button type="submit" class="btn m-auto d-block btn-full" name="find" style="max-width:100%;"><img src="assets/img/book.png" style="margin-right:15px;width:45px;">Book Now</button>
                    </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" id="Div4">-->
                  <!--  <div class="inner clearfix">-->
                  <!--      <button type="submit" class="btn m-auto d-block btn-full" name="find" style="max-width:100%;">Find Car</button>-->
                  <!--  </div>-->
                  <!--</div>-->
              </form>
            </div>
<style>
    .cityu h6
    {
        background: #fff; border-radius: 5px;cursor:pointer;
        padding:10px 5px;
        
    }
    .cityu h6::selection
    {
        background:transparent;
    }
    /*.cityu h6:hover*/
    /*{*/
    /*    background:yellow;*/
    /*    outline:none;*/
    /*    border:1px solid white;*/
    /*}*/
  
</style>