<section class="margin-top-xs-55" style="background: #fff;position: relative;
">
	<div class="header-text mb-0">
		<div>
			<div class="row ">
				<div class="col-lg-12 col-md-12 col-sm-12 text-center">
					<svg style="width:100%;height: 450px;" viewBox="0 0 1280 679" preserveAspectRatio="none" width="100%" height="100%">
						<defs>
							<g id="shape">
								<path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="#D9D9D9"></path>
								<path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="url(#gradient)"></path>
							</g>
							<radialGradient id="gradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(640 -261.197) rotate(90) scale(815.683 664.92)">
								<stop stop-color="#4169E1"></stop>
								<stop offset="1" stop-color="#071A34"></stop>
							</radialGradient>
						</defs>
						<use href="#shape"></use>
					</svg>
					<div class="frame-image">
						<div style="position: absolute; border-radius: inherit; inset: 0px;" data-framer-background-image-wrapper="true"><img decoding="async" sizes="100vw" src="<?php echo base_url(); ?>assets/lSHGuRrPALnsNPFyY1JslN8so.png" alt="" style="display: block; width: 100%; height: 100%; border-radius: inherit; object-position: center center; object-fit: cover;"></div>
					</div>
					<div class="text-body main-header-text">
						<h1 class="text-center text-white"><b><?php echo $heading->branch_page_heading; ?></b></h1>
						<h4 class="text-center text-white"><?php echo $heading->branch_page_sub_heading; ?></h4>
					</div>
				</div>

				<div class="floating-icons">
					<i class="icon-facebook"></i>
					<i class="icon-adwords"></i>
					<i class="icon-seo"></i>
					<i class="icon-instagram"></i>
					<i class="icon-activecampaign"></i>
					<i class="icon-wordpress"></i>
					<i class="icon-shopify"></i>
					<i class="icon-youtube"></i>
					<i class="icon-analytics"></i>
					<i class="icon-kk"></i>
				</div>
			</div>
		</div>
	</div>
</section>

<!--Breadcrumb-->
<div class="relative">
	<div class="shape overflow-hidden text-white">
		<svg viewBox="0 0 2880 48" fill="none" xmsns="http://www.w3.org/2000/svg">
			<path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="#fff"></path>
		</svg>
	</div>
</div>
<?php
$a_state = [];
$this->db->select('state, city');
$this->db->where('role', 'Branch');
$all_state = $this->db->get('users')->result();
foreach ($all_state as $state) {
	$a_state[] = $state->state;
}
?>
<section class="sptb bg-white">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="card border-0 shadow-none bg-transparent">
					<div class="row justify-content-center">

						<div class="col-lg-12 col-xl-12 col-md-12 mx-auto mt-5">
							<div class="card mb-0 single-page customerpage contact custom-sadow">
								<div class="card-body wrapper wrapper2 box-shadow-0">
									<div class="row">
										<div class="col-sm-6">
											<div class="name">
												<label class="text-center">State</label>
												<select class="form-control info-textarea pagetitle" id="state" onchange="generate_data()">
													<option value="">Select State</option>
													<?php foreach (array_unique($a_state) as $state): ?>
														<option value="<?php echo $state; ?>"><?php echo $state; ?></option>
													<?php endforeach; ?>
												</select>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="name">
												<label class="text-center">Dist</label>
												<select class="form-control info-textarea pagetitle" id="dist" onchange="generate_dist_data(this.value)">
													<option value="">Select State First</option>
												</select>
											</div>
										</div>

									</div>
									<div id="main_data"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<script type="text/javascript">
	function generate_data() {
		var state = $('#state').val();
		if (state) {
			$.ajax({
				beforeSend: function() {
					$('#dist').html("<option value=''>Loading. Please Wait....</option>");
				},
				url: "<?php echo base_url() ?>/home/get_dist_by_state_id",
				method: "POST",
				data: {
					state: state
				},
				success: function(data) {
					if (data) {
						$('#dist').html(data);
					}
				}
			});
		}
	}

	function generate_dist_data(e) {
		if (e) {
			$.ajax({
				beforeSend: function() {
					// $('#dist').html("<option value=''>Loading. Please Wait....</option>");
				},
				url: "<?php echo base_url() ?>/home/get_branch_by_area",
				method: "POST",
				data: {
					area: e
				},
				success: function(data) {
					if (data) {
						$('#main_data').show();
						$('#main_data').html(data);
					}
				}
			});
		}
	}
</script>
<style type="text/css">
	#main_data {
		display: none;

		margin-top: 10px;
		padding: 10px;
	}

	#main_data span {
		color: #000;
		font-size: 20px;
		font-weight: 700;
	}

	#main_data .table-bordered td p {
		width: 100%;
		white-space: nowrap;
	}
</style>