Notes

@extends('travvolt.layouts.main')
@section('main-container')

<section class="sec_container" style="background-image: url({{asset('storage/product/'.$package->file_path)}}) ">
<div class="container py-5">
<div class="row py-5 px-2">

<div class="col-lg-8 col-md-4">

</div>
<div class="col-lg-4 col-md-8">
<form action="{{url('/toursdetails1/book')}}" method="post"
class="row border shadow p-3 mb-5 bg-body rounded">
@csrf
<div class="topph text-center">
<h6 class="text-center font_weight600 fs-5 top-head1">Plase share your details to get a custom
quote
</h6>
</div>
<div class="col-12 mb-2 ">
<input type="text" name="bookemail" class="form-control input_line_height" placeholder="Eamil">
</div>
<div class="col-12 mb-2">
<input type="text" name="bookname" class="form-control input_line_height"
placeholder="Full Name">
</div>
<div class="col-12 mb-2">
<input type="text" name="bookcontact" class="form-control input_line_height"
placeholder="Contact Number">
</div>
<div class="col-12 mb-2">
<input type="text" name="bookcity" class="form-control input_line_height"
placeholder="Departure City">
</div>
<div class="col-12 mb-2">
<input type="number" name="bookpeople" class="form-control input_line_height"
placeholder="Number of People">
</div>
<div class="col-12 mb-2">
<input type="date" name="bookdate" class="form-control input_line_height d_dte"
placeholder="Departure Date">
</div>
<div class="col-12 mb-2 d-none">
<input type="number" name="bookamount" value="" class="form-control input_line_height"
placeholder="Amount">
</div>
<div class="col-12 mb-2 d-none">
<input type="text" name="bookplace" value="{{$package->name}}"
class="form-control input_line_height" placeholder="Place">
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input mb-3" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
<small class="text-muted">Agree to terms and conditions</small>
</label>
</div>
</div>
<div class="d-grid">
<button type="Submit" class="btn btn_theme fs-5 butn"
style="line-height:1.8; font-size: 12px;">Submit Details</button>
</div>


</form>
</div>
</div>
</div>

</section>




<section id="explore_area" class="section_padding_top py-5">
<div class="container swiper">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
<div class="section_heading_center1">
{!!$package->description!!}
</div>
</div>
</div>

</div>
</section>

<!-- slider start -->

<!-- slider five -->
<section id="explore_area" class="section_padding_top py-5">
<div class="container swiper">
<div class="row slide-content swiper5">
<div class="card-wrapper swiper-wrapper">
<div class="card swiper-slide border border-0">
<a href="#">
<img class="imageCSS" src="{{url('travvolt/assets/img/demo_img/demo1.jpg')}}" alt="img">
</a>
<div class="destinations_content_names">
<h3><a href="#">Name</a></h3>
</div>
</div>
<div class="card swiper-slide border border-0">
<a href="#">
<img class="imageCSS" src="{{url('travvolt/assets/img/demo_img/demo2.png')}}" alt="img">
</a>
<div class="destinations_content_names">
<h3><a href="#">Name</a></h3>
</div>
</div>
<div class="card swiper-slide border border-0">
<a href="#">
<img class="imageCSS" src="{{url('travvolt/assets/img/demo_img/demo3.jpg')}}" alt="img">
</a>
<div class="destinations_content_names">
<h3><a href="#">Name</a></h3>
</div>
</div>
<div class="card swiper-slide border border-0">
<a href="#">
<img class="imageCSS" src="{{url('travvolt/assets/img/demo_img/demo4.png')}}" alt="img">
</a>
<div class="destinations_content_names">
<h3><a href="#">Name</a></h3>
</div>
</div>
<div class="card swiper-slide border border-0">
<a href="#">
<img class="imageCSS" src="{{url('travvolt/assets/img/demo_img/demo5.jpg')}}" alt="img">
</a>
<div class="destinations_content_names">
<h3><a href="#">Name</a></h3>
</div>
</div>
</div>
</div>

<div class="swiper-button-next swiper-button-next5 swiper-navBtn"></div>
<div class="swiper-button-prev swiper-button-prev5 swiper-navBtn"></div>
<div class="swiper-pagination swiper-pagination5"></div>

</div>
</section>
<!-- slider end -->

<!-- faqs start -->


<section class="section_padding_top py-5">
<div class="container">
<!-- Section Heading -->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
<div class="section_heading_center">
<h2>Frequently Asked Questions</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-md-8 col-12 mx-auto">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false"
aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-heading1" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the
<code>.accordion-flush</code> class. This is the first item's accordion body.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false"
aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the
<code>.accordion-flush</code> class. This is the second item's accordion body. Let's
imagine this being
filled with some actual content.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the
<code>.accordion-flush</code> class. This is the third item's accordion body. Nothing
more exciting
happening here in terms of content, but just filling up the space to make it look, at
least at first
glance, a bit more representative of how this would look in a real-world application.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- faqs end -->

@endsection

@section('footer-script')

<script>
// slider javascript

// slider one
var swiper1 = new Swiper(".swiper5", {
slidesPerView: 3,
spaceBetween: 25,
loop: true,
centerSlide: 'true',
fade: 'true',
grabCursor: 'true',
pagination: {
el: ".swiper-pagination5",
clickable: true,
dynamicBullets: true,
},
navigation: {
nextEl: ".swiper-button-next5",
prevEl: ".swiper-button-prev5",
},

breakpoints: {
0: {
slidesPerView: 1,
},
576: {
slidesPerView: 2,
},
786: {
slidesPerView: 2,
},
992: {
slidesPerView: 4,
},
},
});

// carousel slidebar
$(document).ready(function() {
$('#carouselExampleDark').find('.carousel-item').first().addClass('active');
});
</script>

<script src="{{url('travvolt/assets/js/jquery-3.6.0.min.js')}}"></script>
<!-- Bootstrap js -->
<script src="{{url('travvolt/assets/js/bootstrap.bundle.js')}}"></script>
<!-- Meanu js -->
<script src="{{url('travvolt/assets/js/jquery.meanmenu.js')}}"></script>
<!-- Range js -->
<script src="{{url('travvolt/assets/js/nouislider.min.js')}}"></script>
<script src="{{url('travvolt/assets/js/wNumb.js')}}"></script>
<!-- owl carousel js -->
<script src="{{url('travvolt/assets/js/owl.carousel.min.js')}}"></script>
<!-- wow.js -->
<script src="{{url('travvolt/assets/js/wow.min.js')}}"></script>
<!-- Custom js -->
<script src="{{url('travvolt/assets/js/custom.js')}}"></script>
<script src="{{url('travvolt/assets/js/add-form.js')}}"></script>
<script src="{{url('travvolt/assets/js/form-dropdown.js')}}"></script>

</body>

</html>
@endsection