@extends('website.layouts.app')
@section('content')
<!--************************************* header *************************************-->
	<section class="inner_banner px-md-5 px-0">
		<div class="container-fluid">
    @include('website.layouts.appoinment_btn')
			<div class="inner_banner_bg contact_banner p-sm-5 p-3">
    @include('website.layouts.head_nav')
				<nav data-aos="fade-up" class="w-100 float-start my-md-5 my-sm-4 my-0 justify-content-sm-start justify-content-center d-flex order-sm-1 order-2" style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
					<ol class="breadcrumb m-0">
						<li class="breadcrumb-item"><a class="trs" href="/">Home</a></li>
						<li class="breadcrumb-item active" aria-current="page">Contact</li>
					</ol>
				</nav>
				<div data-aos="fade-up" class="w-100 row align-items-sm-center align-items-start order-sm-2 order-1">
					<h1 class="inner_title text-xl-center text-sm-start text-center">Contact Us</h1>
				</div>
			</div>
		</div>
	</section>
	<section class="bookonline contact_box px-md-5 px-0">
		<div class="container-fluid">
			<div class="row d-flex align-items-center">
				<div data-aos="fade-up" class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
					<h2 class="text-sm-start text-center mb-sm-5 mb-3">Feel free to contact us<span>.</span></h2>
					<form class="w-100 float-start" role="form" action="/send-mail" method="post">
			    @csrf
						<div class="row">
							<div class="col-12 mb-3">
								<div class="form-floating">
									<input class="form-control px-5" id="name" name="firstname" type="text" placeholder="Your Name" required>
									<label class="px-5" for="name">Your Name</label>
								</div>
							</div>
							<div class="col-12 mb-3">
								<div class="form-floating">
									<input class="form-control px-5" id="phone" name="phone" type="text" minlength="8" maxlength="8" pattern="[0-9]{8}" placeholder="Phone Number" required>
									<label class="px-5" for="phone">Phone Number</label>
								</div>
							</div>
							<div class="col-12 mb-3">
								<div class="form-floating">
									<input class="form-control px-5" id="email" name="email" type="email" placeholder="Email" required>
									<label class="px-5" for="email">Email</label>
								</div>
							</div>
							<div class="col-12 mb-3">
								<div class="form-floating">
									<textarea class="form-control px-5" id="message" name="address" rows="4" placeholder="Message" required></textarea>
									<label class="px-5" for="message">Message</label>
								</div>
							</div>
							<div class="col-12 text-lg-start text-center">
								<button class="bookonline_btn mt-5 trs" type="submit">Send Message <i class="fa-solid fa-arrow-right ms-2"></i></button>
							</div>
						</div>
					</form>
				</div>
				<div data-aos="fade-up" class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 position-relative mt-lg-0 mt-5">
					<!-- <iframe class="hm_map float-start" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d154717.11670642733!2d-83.84683476661338!3d37.13719855682225!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88434d59d2a6a4ab%3A0xb24caacadd6dcd88!2sManchester%2C%20KY%2040962%2C%20USA!5e0!3m2!1sen!2sin!4v1695805423278!5m2!1sen!2sin" allowfullscreen="" width="100%" height="800" frameborder="0"></iframe> -->
					<iframe class="hm_map float-start" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3608.7571165246886!2d51.48030790000001!3d25.2451044!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45d13cbba02a1d%3A0xf707a0a37f82c4f5!2sPioneers%20Dental%20Center!5e0!3m2!1sen!2sqa!4v1699952753280!5m2!1sen!2sqa" width="100%" height="800" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
					<div class="hm_location text-center d-flex align-items-center p-2 justify-content-sm-between justify-content-center flex-sm-nowrap flex-wrap">
						<img class="img-fluid" src="{{ asset('website/images/hm_location.jpg') }}" alt="Our Location">
						<div class="px-3">
							<h4 class="my-2">Our Location</h4>
							<h5 class="mb-2">You can now find us easily on Google Maps.</h5>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	<section  data-aos="fade-up" class="bookonline  px-md-5 px-0">
		<div class="container-fluid">
			<h2 class="text-sm-start text-center mb-sm-5 mb-3">Our Clinic</h2>
			<div class="row gy-4">
				<div data-aos="fade-up" class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
					<div class="w-100 float-start clinics_bg p-lg-5 p-4 trs">
						<div class="row">
							<div class="col-12">
			
								<div class="d-flex justify-content-between mb-4">
									<h2 class="col-lg-8 col-12 mb-3 pe-2 trs clinic-name">Building number: 101 ,

										Street no: 570, 
										
										Zone no: 56, 
										
										Al rehab Street,  
										
										abu hamour,  
										
										Doha, Qatar </h2>
								<!--	<h4 class="trs">1</h4>-->
								</div>
								<a class="clinics_contact mb-3 trs" href="tel:+97444630746"><img class="img-fluid trs me-2"
										src="{{ asset('website/images/clinics_call.svg') }}" alt="clinics">
									<span>+974 4463 0746</span></a>
								<a class="clinics_contact mb-3 trs" href="mailto:mail.pioneersdentals.com"><img
										class="img-fluid trs me-2" src="{{ asset('website/images/clinics_mail.svg') }}" alt="clinics">
									<span>pioneersdentalcenter@gmail.com</span></a>
								<a class="clinics_locate w-100  float-start  text-start  trs"
									href="javascript:void(0)">Locate us <img class="img-fluid clinics_arrow ms-3 trs"
										src="{{ asset('website/images/clinics_arrow.svg') }}" alt="Arrow"></a>
							</div>
							
						</div>
					</div>
				</div>
				<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 d-lg-flex d-none"  data-aos="fade-up" >
						<img src="{{ asset('website/images/banner_01.jpg') }}" class="img-fluid clinic-image" alt="clinic Image">
				</div>
			</div>
		</div>
	</section>

	<section data-aos="fade-up" class="contact">
		<div class="container-fluid p-0">
			<div class="contact_bg">
				<div class="row m-0">
					<div class="col-xxl-5 offset-xxl-1 col-xl-5 offset-xl-1 col-lg-5 offset-lg-1 col-md-7 col-sm-7 col-12 d-flex align-items-center align-self-center flex-wrap">
						<h2 class="my-3 text-sm-start text-center">Seize the opportunity for a brighter smile starting now!</h2>
						<a class="contact_btn my-3 trs mx-sm-0 mx-auto" href="https://wa.me/97430071171?text=Hi Pioneer Dental" target="_blank">Consult Now <i class="fa-solid fa-arrow-right ms-2"></i></a>
					</div>
					<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-5 col-sm-5 col-12 text-center align-self-end">
						<img class="img-fluid contact_img" src="{{ asset('website/images/contact_bg.png') }}" alt="contact">
					</div>
				</div>
			</div>
		</div>
	</section>
@endsection