@extends('front.app')

@section('content')
<section data-aos="fade-up" class="inner_banner">
	<img class="img-fluid w-100 d-none d-md-block" src="{{asset('front/images/contact_banner.webp')}}" alt="banner">
	<img class="img-fluid w-100 d-block d-md-none" src="{{asset('front/images/contact_mobbanner.webp')}}" alt="banner">
	<div class="innerbanner_text"></div>
	@include('front.banner_base')
</section>
<style>
	.close {
		float: inline-end;
	}
		
	ul {
    list-style-type: none;
}

.no-arrows {
  /* Target webkit browsers (Chrome, Safari, etc.) */
  -webkit-appearance: none;
  /* Target Mozilla browsers (Firefox) */
  -moz-appearance: none;
  /* Reset default appearance for other browsers */
  appearance: none;

  /* Optional: style the input field as desired */
  border: 1px solid #ccc;
  padding: 5px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

</style>
<!--************************************* contact *************************************-->
<section class="contact text-center">
	<div class="container">
		<h1 data-aos="fade-up" class="mb-5">Contact Us</h1>
		<div class="row">
			<div data-aos="fade-up" class="col-lg-10 offset-lg-1 col-12">
				<form class="w-100 float-start" role="form" method="POST" action="{{route('front.ticket')}}">
					@csrf

					@include('alerts.alerts')
					<div class="row gx-md-5 gy-4">
						<div class="col-12">
							<div class="form-floating shadow-sm">
								<input class="form-control rounded-3" id="full_name" name="full_name" type="text"  required placeholder="Full Name">
								<label for="full_name">Full Name *</label>
							</div>
						</div>
						<div class="col-md-6 col-12">
							<div class="form-floating shadow-sm">
								<input class="form-control rounded-3" id="email" name="email" type="email"  required placeholder="Email">
								<label for="email">Email *</label>
							</div>
						</div>
						<div class="col-md-6 col-12">
							<div class="form-floating shadow-sm">
								<input class="form-control rounded-3 no-arrows" id="contact_number"   name="contact_number" type="number" required placeholder="Phone Number">
								<label for="contact_number">Phone Number *</label>
							</div>
						</div>
						<div class="col-12">
							<div class="form-floating shadow-sm">
								<textarea class="form-control rounded-3" id="message" name="message" rows="4" required placeholder="Enter Your Message"></textarea>
								<label for="message">Enter Your Message</label>
							</div>
						</div>
						<div class="w-100 text-center">
							<button class="send_btn border-0 trs mt-2" type="submit">Submit</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>
<section class="contact_bg">
	<div class="container">
		<div class="row gx-md-5 gy-5">
   			<div data-aos="fade-up" class="col-xl-8 col-md-6 col-12 order-md-1 order-2">
				<iframe class="float-start rounded-3" src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3922.18164307744!2d76.21636577503885!3d10.564954789571267!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMTDCsDMzJzUzLjgiTiA3NsKwMTMnMDguMiJF!5e0!3m2!1sen!2sin!4v1719567697482!5m2!1sen!2sin" allowfullscreen="" width="100%" height="400" frameborder="0"></iframe>
			</div>
			<div data-aos="fade-up" class="col-xl-4 col-md-6 col-12 order-md-2 order-1">
				<div class="contact_icon"><i class="fa-solid fa-map-location-dot"></i></div>
				<div class="contact_address">
					<h3 class="mb-2">Address</h3>
					<h4>
						<b>Dr. Praveena PJ</b> <br>
						Padukkad Junction <br>
						Doordarsan Road, Viyyur PO <br>
						Parathattil Garden, Thrissur <br>
						Kerala 680010
					</h4>
				</div>
				<hr>
				<div class="clearfix"></div>
				<div class="contact_icon"><i class="fa-solid fa-envelope-open-text"></i></div>
				<div class="contact_address">
					<h3>Email</h3>
					<h4><a href="mailto:drpraveena@drpraveena.com" class="trs">drpraveena@drpraveena.com</a></h4>
				</div>
				<hr>
				<div class="clearfix"></div>
				<div class="contact_icon"><i class="fa-solid fa-mobile-screen"></i></div>
				<div class="contact_address">
					<h3>Phone</h3>
					<h4><a class="trs" href="tel:+91 83049 11000">+91 83049 11000</a></h4>
				</div>
			</div>
		</div>
	</div>
</section>
@endsection


@section('page_js')
<script>
    $(document).ready(function(){
        $(".click_close").click(function(){
            $(this).closest('.alert').remove();
        });


		$(".alert.auto_hide").each(function() {
            var $this = $(this);
            setTimeout(function() {
                $this.removeClass("alert");
            }, 5000); // 5000 milliseconds = 5 seconds
        });

		$('#contact_number').on('input', function() {
        var maxLength = 12; // Maximum length
        if ($(this).val().length > maxLength) {
            $(this).val($(this).val().slice(0, maxLength)); // Truncate the input
        }
    });


    });
</script>


@endsection