@extends('website.layouts.app')
@section('content')
<section class="breadcrumb_bg">
	<div class="container">
		<nav style="--bs-breadcrumb-divider:'>';" aria-label="breadcrumb">
		  	<ol class="breadcrumb px-2">
				<li class="breadcrumb-item"><a class="trs" href="index.html">Home</a></li>
				<li class="breadcrumb-item"><a class="trs" href="signature-packages.html">Packages</a></li>
				<li class="breadcrumb-item active" aria-current="page">Azerbaijan Tour Package</li>
		  	</ol>
		</nav>
	</div>
</section>
<section class="package">
	<div class="container">
		<h1>Azerbaijan Tour Package</h1>
		<div class="row gx-xl-5 gy-5">
			<div class="col-xl-8 col-lg-7 col-12">
				<div class="d-flex justify-content-between my-5">
					<div class="d-sm-flex align-items-center text-sm-start text-center">
						<img class="img-fluid package_feature_img me-sm-2 mb-sm-0 mb-2" src="images/package_map.svg" alt="Package">
						<h3>Location <br><span>Azerbaijan</span></h3>
					</div>
					<div class="vr float-start mx-3"></div>
					<div class="d-sm-flex justify-content-center align-items-center text-sm-start text-center">
						<img class="img-fluid package_feature_img me-sm-2 mb-sm-0 mb-2" src="images/package_clock.svg" alt="Package">
						<h3>Duration <br><span>3 Nights 4 Days</span></h3>
					</div>
					<div class="vr float-start mx-3"></div>
					<div class="d-sm-flex justify-content-end align-items-center text-sm-start text-center">
						<img class="img-fluid package_feature_img me-sm-2 mb-sm-0 mb-2" src="images/package_group.svg" alt="Package">
						<h3>Group <br><span>Unlimited</span></h3>
					</div>
				</div>
				<div class="swiper_box">
					<div class="swiper mySwiper2 pb-4">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<img class="img-fluid rounded-2" src="images/package_01.webp" alt="Package">
							</div>
							<div class="swiper-slide">
								<img class="img-fluid rounded-2" src="images/package_02.webp" alt="Package">
							</div>
							<div class="swiper-slide">
								<img class="img-fluid rounded-2" src="images/package_03.webp" alt="Package">
							</div>
							<div class="swiper-slide">
								<img class="img-fluid rounded-2" src="images/package_04.webp" alt="Package">
							</div>
							<div class="swiper-slide">
								<img class="img-fluid rounded-2" src="images/package_05.webp" alt="Package">
							</div>
						</div>
					</div>
					<div thumbsSlider="" class="swiper mySwiper">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<img class="img-fluid rounded-2" src="images/package_01.webp" alt="Package">
							</div>
							<div class="swiper-slide">
								<img class="img-fluid rounded-2" src="images/package_02.webp" alt="Package">
							</div>
							<div class="swiper-slide">
								<img class="img-fluid rounded-2" src="images/package_03.webp" alt="Package">
							</div>
							<div class="swiper-slide">
								<img class="img-fluid rounded-2" src="images/package_04.webp" alt="Package">
							</div>
							<div class="swiper-slide">
								<img class="img-fluid rounded-2" src="images/package_05.webp" alt="Package">
							</div>
						</div>
						<div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div>
					</div>
				</div>
			</div>
			<div class="col-xl-4 col-lg-5 col-12">
				<form class="w-100 float-start package_form" role="form">
					<h4 class="py-4 text-center">Enquiry Form</h4>
					<div class="row gy-4 p-xl-5 p-sm-4 py-4 px-2">
						<div class="col-lg-12 col-md-6 col-12">
							<div class="form-floating">
								<input class="form-control" id="enquiry_name" name="enquiry_name" type="text" placeholder="Your Name">
								<label for="enquiry_name">Your Name *</label>
							</div>
						</div>
						<div class="col-lg-12 col-md-6 col-12">
							<div class="form-floating">
								<input class="form-control" id="enquiry_city" name="enquiry_city" type="number" placeholder="City of Residence">
								<label for="enquiry_city">City of Residence *</label>
							</div>
						</div>
						<div class="col-lg-12 col-md-6 col-12">
							<div class="form-floating">
								<input class="form-control" id="enquiry_email" name="enquiry_email" type="email" placeholder="Email">
								<label for="enquiry_email">Email *</label>
							</div>
						</div>
						<div class="col-lg-12 col-md-6 col-12">
							<div class="form-floating">
								<label class="int_tel_floating" for="enquiry_phone">Phone Number</label>
								<input class="form-control" id="enquiry_phone" name="enquiry_phone" type="text">
							</div>
						</div>
						<div class="col-lg-12 col-md-6 col-12">
							<div class="input-group">
								<span class="input-group-text"><img class="img-fluid" src="images/calendar.svg" alt="calendar"></span>
								<div class="form-floating">
									<input type="text" class="form-control datepicker" id="enquiry_date" name="enquiry_date" placeholder="Date of Travel">
									<label for="enquiry_date">Date of Travel *</label>
								</div>
							</div>
						</div>
						<div class="col-lg-12 col-md-6 col-12">
							<div class="form-floating">
							  	<select class="form-select" id="enquiry_people">
									<option selected>Open this select menu</option>
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
								</select>
							 	<label for="enquiry_people">No of People</label>
							</div>
						</div>
						<div class="w-100 text-center">
							<button class="send_btn trs mt-2" type="submit">Submit</button>
						</div>
						<div class="package_address d-flex justify-content-center align-items-center">
							<img class="img-fluid trs me-3" src="images/package_call.svg" alt="package">
							<a class="trs" href="tel:+97444321132">(+974) 4432 1132</a>
						</div>
						<div class="package_address d-flex justify-content-center align-items-center">
							<img class="img-fluid trs me-3" src="images/package_mail.svg" alt="package">
							<a href="mailto:info@oitctravels.com" class="trs">info@oitctravels.com</a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>
<section class="package_includes w-100 float-start">
	<div class="container">
		<h2 class="text-center mb-5">Includes</h2>
		<div class="row d-flex justify-content-center text-center gy-4">
			<div class="col-sm-2 col-4">
				<img class="img-fluid trs mb-3" src="images/air_tickets.svg" alt="package">
				<h4>Air Tickets</h4>
			</div>
			<div class="col-sm-2 col-4">
				<img class="img-fluid trs mb-3" src="images/tours.svg" alt="package">
				<h4>Tours</h4>
			</div>
			<div class="col-sm-2 col-4">
				<img class="img-fluid trs mb-3" src="images/breakfast.svg" alt="package">
				<h4>Breakfast</h4>
			</div>
			<div class="col-sm-2 col-4">
				<img class="img-fluid trs mb-3" src="images/transfers.svg" alt="package">
				<h4>Transfers</h4>
			</div>
			<div class="col-sm-2 col-4">
				<img class="img-fluid trs mb-3" src="images/hotels.svg" alt="package">
				<h4>Hotels</h4>
			</div>
		</div>
	</div>
</section>
<section class="package_itinerary">
	<div class="container">
		<h2>Itinerary</h2>
		<div class="accordion accordion-flush" id="package_itinerary">
			<div class="accordion-item mt-sm-5 mt-4 border-0 card">
				<h2 class="accordion-header">
					<button class="accordion-button py-4" type="button" data-bs-toggle="collapse" data-bs-target="#package_itinerary01" aria-expanded="true" aria-controls="package_itinerary01">Day 1 Arrival</button>
				</h2>
				<div id="package_itinerary01" class="accordion-collapse collapse show" data-bs-parent="#package_itinerary">
					<div class="accordion-body text-md-start pt-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
				</div>
			</div>
			<div class="accordion-item mt-sm-5 mt-4 border-0 card">
				<h2 class="accordion-header">
					<button class="accordion-button py-4 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#package_itinerary02" aria-expanded="false" aria-controls="package_itinerary02">Day 2</button>
				</h2>
				<div id="package_itinerary02" class="accordion-collapse collapse" data-bs-parent="#package_itinerary">
					<div class="accordion-body text-md-start pt-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
				</div>
			</div>
			<div class="accordion-item mt-sm-5 mt-4 border-0 card">
				<h2 class="accordion-header">
					<button class="accordion-button py-4 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#package_itinerary03" aria-expanded="false" aria-controls="package_itinerary03">Day 3</button>
				</h2>
				<div id="package_itinerary03" class="accordion-collapse collapse" data-bs-parent="#package_itinerary">
					<div class="accordion-body text-md-start pt-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
				</div>
			</div>
			<div class="accordion-item mt-sm-5 mt-4 border-0 card">
				<h2 class="accordion-header">
					<button class="accordion-button py-4 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#package_itinerary04" aria-expanded="false" aria-controls="package_itinerary04">Day 4 Departure</button>
				</h2>
				<div id="package_itinerary04" class="accordion-collapse collapse" data-bs-parent="#package_itinerary">
					<div class="accordion-body text-md-start pt-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
				</div>
			</div>
		</div>
	</div>
</section>
@endsection