@extends('frontend.home')
@section('content')

<!-- Sidebar Cart Item -->
<div class="xs-sidebar-group info-group">
	<div class="xs-overlay xs-bg-black"></div>
	<div class="xs-sidebar-widget">
		<div class="sidebar-widget-container">
			<div class="widget-heading">
				<a href="#" class="close-side-widget">
					<i class="far fa-times-circle"></i>
				</a>
			</div>
			<div class="sidebar-textwidget">
				<!-- Sidebar Info Content -->
				<div class="sidebar-info-contents">
					<div class="content-inner">
						<div class="nav-logo">
							<a href="{{url('/')}}"><img src="assets/images/logo.png" alt="sid img" ></a>
						</div>
						<div class="row padding-two">
							<div class="col-lg-6">
								<div class="content-thumb-box">
									<img src="assets/images/home_one/team.jpg" alt="">
								</div>
							</div>
							<div class="col-lg-6 ">
								<div class="content-thumb-box">
									<img src="assets/images/home_one/team1.jpg" alt="">
								</div>
							</div>
							<div class="col-lg-6 ">
								<div class="content-thumb-box">
									<img src="assets/images/home_one/team2.jpg" alt="">
								</div>
							</div>
							<div class="col-lg-6 ">
								<div class="content-thumb-box">
									<img src="assets/images/home_one/team.jpg" alt="">
								</div>
							</div>
						</div>
						<div class="contact-info">
							<h2>Contact Info</h2>
							<ul class="list-style-one">
								<li><i class="bi bi-geo-alt-fill"></i>Flat no 101,1st Floor, Prashanthi Hills, Hyderabad, Telangana 500090</li>
								<li><i class="bi bi-telephone-fill"></i>+91 94409 03071</li>
								<li><i class="bi bi-envelope"></i>info@kiyosolutions.com</li>
								<li><i class="bi bi-calendar2-week"></i>Week Days: 09.00 to 18.00 Sunday: Closed</li>
							</ul>
						</div>
						<!-- Social Box -->
						<ul class="social-box">
							<li class="facebook"><a href="https://www.facebook.com/kiyosolutionspvtltd" class="fab fa-facebook-f" target="_blank"></a></li>
							<li class="instagram"><a href="https://www.instagram.com/kiyocrm/" class="fab fa-instagram" target="_blank"></a></li>
							<!-- <li class="twitter"><a href="{{asset('#')}}" class="fab fa-twitter" target="_blank"></a></li> -->
							<!-- <li class="pinterest"><a href="{{asset('#')}}" class="fab fa-pinterest-p" target="_blank"></a></li> -->
							<li class="linkedin"><a href="https://www.linkedin.com/company/kiyosolutions/" class="fab fa-linkedin-in" target="_blank"></a></li>
						</ul>
					</div>
				</div>		
			</div>
		</div>
	</div>
</div>


<!--==================================================-->
<!-- Start KiyoHR Breadcumb Area -->
<!--==================================================-->
<div class="breadcumb-area d-flex">
	<div class="container">
		<div class="row align-items-center">
			<div class="col-lg-12 text-center">
				<div class="breadcumb-content">
					<div class="breadcumb-title">
						<h4>Contact Us</h4>
					</div>
					<!-- <ul>
						<li><a href="{{url('/')}}"><i class="bi bi-house-door-fill"></i> Home </a></li>
						<li class="rotates"><i class="bi bi-slash-lg"></i>Contact</li>
					</ul> -->
				</div>
			</div>
		</div>
	</div>
</div>
<!--==================================================-->
<!-- End KiyoHR Breadcumb Area -->
<!--==================================================-->

<!--==================================================-->
<!-- Start KiyoHR Contact Area Inner Page -->
<!--==================================================-->
<section class="contact_area inner_section">
	<div class="container">
		<div class="row align-items-center">
			<div class="col-lg-6">
				<div class="section_title">
					<h4>GET IN TOUCH</h4>
					<h1>Trusted By the Genius </h1>
					<h1>People with KiyoHR</h1>
					<p>Media leadership skills before cross-media innovation main technology
						develop standardized platforms without kiyohr.</p>
				</div>
				<div class="contact_main_info">
					<div class="call-do-action-info">
						<div class="call-do-social_icon">
							<i class="fas fa-phone-alt"></i>
						</div>
						<div class="call_info">
							<p>Call us Anytime</p>
							<h3>+91 9440 903071</h3>
						</div>
					</div>
					<div class="call-do-action-info">
						<div class="call-do-social_icon">
							<i class="fas fa-envelope-open"></i>
						</div>
						<div class="call_info">
							<p>Mail us Anytime</p>
							<h3>info@kiyosolutions.com</h3>
						</div>
					</div>
					<div class="call-do-action-info">
						<div class="call-do-social_icon">
							<i class="fas fa-map-marker-alt"></i>
						</div>
						<div class="call_info">
							<p>Our Locations</p>
							<span>Hyderabad, Telangana 500090</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-6">
				<!-- contact form box -->
				<div class="contact-form-box style_two">
					<!-- section title -->
					<div class="section_title style_three style_four text-center ">
						<h4>CONTACT US</h4>
						<h1>Get In Touch with KiyoHR</h1>
					</div>
					<form class="kiyohrcontactform" action="https://marketing.kiyocrm.com/form/submit?formId=4" method="POST" data-mautic-form="kiyohrcontactform" enctype="multipart/form-data">
						<div class="row">
							<div class="col-lg-6 col-md-6">
								<div class="form-box">
									<input type="text" name="mauticform[first_name]" placeholder="Your Name" required>
								</div>
							</div>
							<div class="col-lg-6 col-md-6">
								<div class="form-box">
									<input type="text" name="mauticform[phone]" placeholder="Phone No" required pattern="[0-9]{10,12}">
								</div>
							</div>
							<div class="col-lg-6 col-md-6">
								<div class="form-box">
									<input type="email" name="mauticform[email]" placeholder="E-Mail Address" required pattern="/^[a-zA-Z0-9._%+-]+@[a-zA-Z.-]+\.[a-zA-Z]{2,6}$/">
								</div>
							</div>
							<div class="col-lg-6 col-md-6">
								<div class="form-box">
									<input type="text" name="mauticform[subject]" placeholder="Subject"required>
								</div>
							</div>
							<div class="col-lg-12 col-md-12">
								<div class="form-box message">
									<textarea name="mauticform[f_message]" id="message" cols="30" rows="10" placeholder="Write Message" required></textarea>
								</div>
							</div>
							<div class="checkbox">
								<input type="checkbox" id="condition" name="condition" required>
								<label for="vehicle1"> I agree to receive promotional emails and updates from KiyoHR.</label>
							</div>
							<div class="contact-form">
							<input type="hidden" name="mauticform[formId]" id="mauticform_kiyohrcontactform_id" value="4">
							<input type="hidden" name="mauticform[return]" id="mauticform_kiyohrcontactform_return" value="{{url('/contact')}}?sync=true">
							<input type="hidden" name="mauticform[formName]" id="mauticform_kiyohrcontactform_name" value="kiyohrcontactform">
								<button name="mauticform[submit]" value="1" id="mauticform_input_kiyohrcontactform_submit" type="submit"><i class="far fa-thumbs-up"></i> Request Call Back </button>
							</div>
						</div>
					</form>
					<span class="form-control text-center contactform-success alert alert-success" style="display: none;"></span>
					<div id="status"></div>
				</div> 
			</div>
		</div>

	</div>

	<div class="contact_shape2 dance2">
		<img src="assets/images/home_3/service_shpe2.png" alt="">
	</div>
</section>
<!--==================================================-->
<!-- End KiyoHR Contact Area  Inner Page -->
<!--==================================================-->



<!--==================================================-->
<!-- Start KiyoHR Map Area -->
<!--==================================================-->
<!-- <div class="map-section">
	<div class="-custon-container-fluid">
		<div class="row">
			<div class="col-lg-12 p-0">
				<iframe src="https://www.google.com/maps/d/embed?mid=1G43f-ymu9LiTYd9EPC-ynRsoBq57k3A&ehbc=2E312F" width="1920" height="520" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
			</div>
		</div>
	</div>
</div> -->
<!--==================================================-->
<!-- Start KiyoHR Map Area -->
<!--==================================================-->

@endsection

@section('scripts')
    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const syncParam = urlParams.get('sync');
        if(syncParam === 'true'){
			$('.kiyohrcontactform').remove();
			$('.contactform-success').text('Thank you for contacting us!');
			$('.contactform-success').show();
        }
    </script>
@endsection