<?php

global $wpdb;

$citytablename = $wpdb->prefix.'findus_city'; 
$loctablename = $wpdb->prefix.'findus_location';

$cities = $wpdb->get_results( $wpdb->prepare( "SELECT * FROM $citytablename"), ARRAY_A);

?>


<div class="findus_list">

	<div class="city_loc">
		<div class="find_city">
			<select name="find_cities" id="findus_city">
				<option value="0">Choose City</option>
				<?php foreach ($cities as $city) { ?>
					<option value="<?=$city['id']?>"><?=$city['city_name']?></option>
				<?php } ?>
			</select>
		</div>

		<div class="find_loc" id="location-data">
			<select name="find_loc" id="findus_loc" disabled="true">
				<option value="0">Choose Location</option>
			</select>
		</div>
	</div>

	<div class="loc_img" id="loc_img"></div>

</div>

<!-- <img src="<?=site_url()?>/wp-content/uploads/2021/09/ajax-loader.gif" id="loader"> -->


<style type="text/css">
    #loader{
        display: none;
    }
</style> 




 
<script>
    jQuery(document).ready(function(){
        
        jQuery("#findus_city").change(function(){
                
                jQuery("#findus_loc").html('<option value="0">Choose Location</option>');
                jQuery("#loc_img").html('');
                //jQuery("#loader").show();
                
                var getCityID = jQuery(this).val();
                
                if(getCityID != '0')
                {
                    jQuery.ajax({
                        type: 'POST',
                        url: '<?=FIND_US_URL?>/frontend/ajaxlocations.php',
                        data: {city_id:getCityID},
                        success: function(data){
                            //jQuery("#loader").hide();
                            jQuery("#findus_loc").html(data);
                            jQuery("#findus_loc").removeAttr("disabled");
                        }
                    });
                }
                else
                {
                    jQuery("#findus_loc").html('');
                    //jQuery("#loader").hide();
                }
        });

        jQuery("#findus_loc").change(function(){
                
                jQuery("#loc_img").html('');
                //jQuery("#loader").show();
                
                var getLocID = jQuery(this).val();
                
                if(getLocID != '0')
                {
                    jQuery.ajax({
                        type: 'POST',
                        url: '<?=FIND_US_URL?>/frontend/ajaxlocations.php',
                        data: {loc_id:getLocID},
                        success: function(data){
                            //jQuery("#loader").hide();
                            jQuery("#loc_img").html(data);
                        }
                    });
                }
                else
                {
                    jQuery("#loc_img").html('');
                    //jQuery("#loader").hide();
                }
        });
        
    });
</script>