1736324018a:1:{s:27:"bali-tiket/booking-page.htm";a:8:{s:8:"fileName";s:27:"bali-tiket/booking-page.htm";s:7:"content";s:24451:"title = "Booking Page"
url = "/bali-tiket/booking-page"
layout = "BaliTiket"
==

use Yuren\BaliTiket\Models\Vendor;
use Yuren\BaliTiket\Models\Product;
use Yuren\BaliTiket\Models\Ticket;
use Yuren\BaliTiket\Models\Bookings;

function onStart()
{
	//ambil hari ini dan besok
	$datenow = date('Y-m-d');
	$tommorrow = date('Y-m-d', strtotime('+1 day'));
	$this['datenow'] = $datenow;
	$this['tommorrow'] = $tommorrow;

	//cek input
	$slug = Input::get('slug');
	$this['slug'] = $slug;
	$vendorname = Input::get('vendorname');
	$this['vendorname'] = $vendorname;
	$arrival = Input::get('arrival');
	$this['arrival'] = $arrival;
	$adult = Input::get('adult');
	$this['adult'] = $adult;
	$children = Input::get('children');
	$this['children'] = $children;
	$infant = Input::get('infant');
	$this['infant'] = $infant;

	$this['vendor'] = Vendor::orderBy('id','asc')->get();

	$this['other_vendor'] = Vendor::orderBy('id','asc')->get();

	if ($slug != null){
		$this['product'] = Product::where('published', 1)
		->with('vendor')
		->whereHas('vendor', function($query) use ($slug) {
			$query->where('slug', $slug);
		})
		->orderBy('count_book','desc')
		->get();
		$this['ticket'] = Ticket::where('published', 1)
		->with('vendor')
		->whereHas('vendor', function($query) use ($slug) {
			$query->where('slug', $slug);
		})
		->orderBy('id','asc')
		->get();
	}
}
==

<section>
	<div class="container px-0">
		<div class="row g-0">
			<div class="col-md-12">
				<div class="ratio ratio-21x9">
					<img src="{{ vendor[0].images[0].path }}" class="w-100 h-100 object-fit-cover">
				</div>
			</div>
		</div>

		<div class="row g-0 px-3 py-2" style="background-color: whitesmoke; margin-top: -8px;">
			<!-- form booking widget -->
			<form class="col-md-8 row g-0 py-2 py-md-0" action="{{ url('bali-tiket/booking-page') }}" method="GET" enctype="multipart/form-data">
				<div class="col-md-10 row g-0">
					<div class="col-md-3 col-6 py-1 p-md-2 px-2">
						<label class="mb-1 fw-bold fs-small">Vendor</label>
						<select required class="form-control fs-small rounded-1 py-2" name="slug">
							{% if slug != null %}
							{% for vendor in vendor %}
							{% if vendor.slug == slug %}
							<option value="{{vendor.slug}}" selected>{{vendor.name}}</option>
							{% else %}
							<option value="{{vendor.slug}}">{{vendor.name}}</option>
							{% endif %}
							{% endfor %}

							{% else %}
							<option value="" selected disabled>Select Vendor</option>
							{% for vendor in vendor %}
							<option value="{{vendor.slug}}">{{vendor.name}}</option>
							{% endfor %}

							{% endif %}
						</select>
					</div>
					<div class="col-md-3 col-6 py-1 p-md-2 px-2">
						<label class="mb-1 fw-bold fs-small">Arrival</label>
						<input type="date" required class="form-control fs-small rounded-1 py-2" id="arrival" name="arrival" value="{{ (arrival != null) ? arrival : datenow }}">
					</div>
					<div class="col-md-2 col-6 py-1 p-md-2 px-2">
						<label class="mb-1 fw-bold fs-small">Adult</label>
						<input type="number" min="1" placeholder="Adult" value="{{ (adult != null) ? adult : '1' }}" class="form-control fs-small rounded-1 py-2" name="adult">
					</div>
					<div class="col-md-2 col-6 py-1 p-md-2 px-2">
						<label class="mb-1 fw-bold fs-small">Children</label>
						<input type="number" min="0" placeholder="Children" value="{{ (children != null) ? children : '0' }}" class="form-control fs-small rounded-1 py-2" name="children">
					</div>
					<div class="col-md-2 col-6 py-1 p-md-2 px-2">
						<label class="mb-1 fw-bold fs-small">Infant</label>
						<input type="number" min="0" placeholder="Infant" value="{{ (infant != null) ? infant : '0' }}" class="form-control fs-small rounded-1 py-2" name="infant">
					</div>
				</div>
				<div class="col-md-2 p-md-2 p-3 px-2 px-md-2">
					<label class="mb-1 fs-small d-none d-md-inline-block">&ensp;</label>
					<button type="submit" class="btn btn-primary rounded-1 fs-small w-100 py-2">Apply</button>
				</div>
			</form>
			<!-- end form booking widget -->
		</div>
	</div>

	<div class="container py-4">
		<div class="row g-0">
			<div class="col-md-9 row g-0">

				<!-- jika tidak ada parameter akan tampil ini-->
				{% if slug == null and arrival == null %}
				{% for vendor in vendor %}
				<div class="col-md-12 mb-3">
					<div class="card rounded-0 w-100">
						<div class="row g-0 align-items-stretch">
							<div class="col-md-4">
								<a role="button" data-bs-toggle="modal" data-bs-target="#DetailVendor-{{vendor.slug}}">
									<div class="ratio ratio-4x3">
										<img src="{{ vendor.images[0].path }}" class="w-100 object-fit-cover">
									</div>
								</a>
							</div>
							<div class="col-md-8 p-3 row g-0">
								<p class="fs-5 fw-bold mb-2 text-uppercase">{{vendor.name}}</p>
								<p class="mb-3 fs-small text-truncate-4">
									{{vendor.short_desc}}
								</p>
								<p class="mb-2"><a role="button" class="text-decoration-none fs-small" data-bs-toggle="modal" data-bs-target="#DetailVendor-{{vendor.slug}}">More Information</a></p>
								<p align="right" class="mb-0"><button type="button" data-bs-toggle="modal" data-bs-target="#BookByVendor-{{vendor.slug}}" class="btn btn-primary btn-sm rounded-1 py-1 px-4 fw-medium"><i class="ri-cursor-fill align-middle fs-6 fw-bold"></i> SELECT</button></p>
							</div>
						</div>
					</div>

					<!-- modal detail vendor -->
					<div class="modal fade" id="DetailVendor-{{vendor.slug}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog modal-xl modal-dialog-centered">
							<div class="modal-content">
								<div class="modal-body position-relative">
									<button type="button" class="z-3 btn-close position-absolute top-0 end-0 m-3 d-none d-md-block" data-bs-dismiss="modal" aria-label="Close"></button>
									<p class="d-block d-md-none text-end mb-1" align="right"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></p>

									<p class="text-md-center text-start fw-bold fs-5 text-uppercase">{{vendor.name}}</p>
									<div class="row g-0 align-items-start">
										<!-- image room -->
										<div class="col-md-6 row g-0">
											<div class="col-md-12 mb-1">
												<div class="big-slider px-1">
													{% for img in vendor.images %}
													<a href="{{ img.path }}"  data-fancybox="gallery" class="ratio ratio-16x9">
														<img src="{{ img.path }}" class="w-100 h-100 object-fit-cover">
													</a>
													{% endfor %}
												</div>
											</div>
											<div class="col-md-12">
												<div class="small-slider px-1">
													{% for img in vendor.images %}
													<div href="{{ img.path }}" class="ratio ratio-16x9" style="cursor: pointer">
														<img src="{{ img.path }}" class="w-100 h-100 px-1 object-fit-cover">
													</div>
													{% endfor %}
												</div>
											</div>
										</div>
										<!-- end image room -->
										<div class="col-md-6 ps-md-4">
											<div class="line-title text-primary text-center fs-small mb-2 fw-semibold"><span>DESCRIPTION</span></div>
											<div class="mb-4 fs-small">{{vendor.description|raw}}</div>
											<div class="line-title text-primary text-center fs-small mb-2 fw-semibold"><span>OPENING HOUR</span></div>
											<div class="fs-small">
												{% for opening in vendor.schedule %}
												<div class="row g-0 justify-content-center mb-1">
													<div class="col-3 fw-bold">
														{{ opening.day }}
													</div>
													<div class="col-1">
														:
													</div>
													<div class="col-3">
														{{ opening.start_time|date('H:i') }} - {{ opening.end_time|date('H:i') }}
													</div>
												</div>
												{% endfor %}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- end modal detail vendor -->

					<!-- modal book -->
					<div class="modal fade" id="BookByVendor-{{vendor.slug}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog modal modal-dialog-centered">
							<div class="modal-content">
								<div class="modal-body position-relative">
									<button type="button" class="z-3 btn-close position-absolute top-0 end-0 m-3 d-none d-md-block" data-bs-dismiss="modal" aria-label="Close"></button>
									<p class="d-block d-md-none text-end mb-1" align="right"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></p>

									<form action="{{url('bali-tiket/booking-page')}}" method="GET" enctype="multipart/form-data" class="row g-0">
										<div class="col-md-12 col-12 mb-3 px-2">
											<label class="mb-2 fw-bold fs-small">Vendor</label>
											<input type="hidden" name="slug" value="{{vendor.slug}}">
											<input type="text" class="form-control fs-small rounded-1 py-2" readonly value="{{vendor.name}}">
										</div>
										<div class="col-md-6 col-12 mb-3 px-2">
											<label class="mb-2 fw-bold fs-small">Arrival</label>
											<input type="date" required class="form-control fs-small rounded-1 py-2" id="arrival-2" name="arrival" value="{{ (arrival != null) ? arrival : datenow }}">
										</div>
										<div class="col-md-6 col-12 mb-3 px-2">
											<label class="mb-2 fw-bold fs-small">Adult</label>
											<input type="number" min="1" placeholder="Adult" value="{{ (adult != null) ? adult : '1' }}" class="form-control fs-small rounded-1 py-2" name="adult">
										</div>
										<div class="col-md-6 col-12 mb-3 px-2">
											<label class="mb-2 fw-bold fs-small">Children</label>
											<input type="number" min="0" placeholder="Children" value="{{ (children != null) ? children : '0' }}" class="form-control fs-small rounded-1 py-2" name="children">
										</div>
										<div class="col-md-6 col-12 mb-3 px-2">
											<label class="mb-2 fw-bold fs-small">Infant</label>
											<input type="number" min="0" placeholder="Infant" value="{{ (infant != null) ? infant : '0' }}" class="form-control fs-small rounded-1 py-2" name="infant">
										</div>
										<button type="submit" class="btn btn-primary btn-sm rounded-1 py-1 px-4 fw-medium"></i> APPLY</button>
									</form>
								</div>
							</div>
						</div>
					</div>
					<!-- end modal book -->
				</div>
				{% endfor %}
				<!-- end jika parameter kosong -->

				<!-- jika parameter terisi -->
				{% else %}
				{% for product in product %}
				<div class="col-md-12 mb-3">
					<div class="card rounded-0 w-100">
						<div class="row g-0 align-items-stretch border-1 border-bottom">
							<div class="col-md-4">
								<div class="ratio ratio-4x3">
									<img src="{{ product.images[0].path }}" class="w-100 object-fit-cover">
								</div>
							</div>
							<div class="col-md-8 p-3 row g-0">
								<p class="fs-5 fw-bold mb-2 text-uppercase">{{product.name}}</p>
								<p class="mb-3 fs-small text-truncate-4">
									{{product.short_desc}}
								</p>
								<p class="mb-2"><a role="button" class="text-decoration-none fs-small" data-bs-toggle="modal" data-bs-target="#DetailProduct-{{product.slug}}">More Information</a></p>
								<p align="right" class="mb-0">
									<span class="rounded-1 py-1 px-4 fw-medium text-decoration-none text-black">
										{% set i = 0 %}
										{% for ticket in ticket %}
										{% if ticket.product_id == product.id %}
										{% set i = i + 1 %}
										{% endif %}
										{% endfor %}
										{{i}}
										{{ (i > 1) ? 'Tickets' : 'Ticket' }}
										<i class="ri-coupon-2-line fs-6 fw-bold ms-2"></i>
									</span>
								</p>
							</div>
						</div>

						<!-- modal detail product -->
						<div class="modal fade" id="DetailProduct-{{product.slug}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
								<div class="modal-content">
									<div class="modal-body position-relative">
										<button type="button" class="z-3 btn-close position-absolute top-0 end-0 m-3 d-none d-md-block" data-bs-dismiss="modal" aria-label="Close"></button>
										<p class="d-block d-md-none text-end mb-1" align="right"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></p>

										<p class="text-md-center text-start fw-bold fs-5 text-uppercase">{{product.name}}</p>
										<div class="row g-0 align-items-start">
											<!-- image room -->
											<div class="col-md-6 row g-0">
												<div class="col-md-12 mb-1">
													<img src="{{ product.images[0].path }}" class="img-fluid w-100">
												</div>
											</div>
											<!-- end image room -->
											<div class="col-md-6 ps-md-4">
												<div class="line-title text-primary text-uppercase text-center fs-small mb-2 fw-semibold"><span>DESCRIPTION</span></div>
												<div class="mb-4 fs-small">{{product.description|raw}}</div>

												<div class="line-title text-primary text-uppercase text-center fs-small mb-2 fw-semibold"><span>Highlight</span></div>
												<div class="mb-4 fs-small">{{product.description|raw}}</div>
											</div>
											<div class="col-md-12 mt-3">
												<ul class="nav nav-tabs border-0 ">
													<li class="nav-item">
														<a class="nav-link text-black active" id="nav-tab-1-{{product.id}}" data-bs-toggle="tab" data-bs-target="#tab-1-{{product.id}}" role="button">Inclusion</a>
													</li>
													<li class="nav-item">
														<a class="nav-link text-black" id="nav-tab-2-{{product.id}}" data-bs-toggle="tab" data-bs-target="#tab-2-{{product.id}}" role="button">Facilities</a>
													</li>
													<li class="nav-item">
														<a class="nav-link text-black" id="nav-tab-3-{{product.id}}" data-bs-toggle="tab" data-bs-target="#tab-3-{{product.id}}" role="button">Location</a>
													</li>
													<li class="nav-item">
														<a class="nav-link text-black" id="nav-tab-4-{{product.id}}" data-bs-toggle="tab" data-bs-target="#tab-4-{{product.id}}" role="button">Map Area</a>
													</li>
												</ul>

												<div class="">
													<div class="tab-content" id="nav-tabContent">
														<div class="tab-pane p-3 rounded-bottom-2 border-end-2 fade col-md-12 show active" id="tab-1-{{product.id}}" role="tabpanel" aria-labelledby="nav-tab-1-{{product.id}}" tabindex="0">
															<ul class="ps-2 fs-small">
																{% for list in product.inclusion %}
																<li>{{list.item}}</li>
																{% endfor %}
															</ul>
														</div>

														<div class="tab-pane p-3 rounded-bottom-2 border-end-2 fade col-md-12" id="tab-2-{{product.id}}" role="tabpanel" aria-labelledby="nav-tab-2-{{product.id}}" tabindex="0">
															<div class="w-100 d-flex align-items-end">
																{% for list in product.facilities %}
																<div class="me-3">
																	<img src="{{list.path}}" style="width: 60px;">
																	<p class="fs-small mb-0 text-center mt-2">{{list.title}}</p>
																</div>
																{% endfor %}
															</div>
														</div>

														<div class="tab-pane p-3 rounded-bottom-2 border-end-2 fade col-md-12" id="tab-3-{{product.id}}" role="tabpanel" aria-labelledby="nav-tab-3-{{product.id}}" tabindex="0">
															<p class="mb-2 fs-small">{{product.address}}</p>
															<p class="mb-3 fs-small"><a href="{{product.link_address}}" target="_blank" class="btn btn-sm fs-small btn-primary rounded-1">Show Location</a></p>
														</div>

														<div class="tab-pane p-3 rounded-bottom-2 border-end-2 fade col-md-12" id="tab-4-{{product.id}}" role="tabpanel" aria-labelledby="nav-tab-4-{{product.id}}" tabindex="0">
															<a href="{{product.map[0].path}}">
																<img src="{{product.map[0].path}}" style="max-width: 30%;">
															</a>
														</div>

													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end modal detail product -->

						<div class="row g-0 p-4">
							{% for ticket in ticket %}
							{% if ticket.product_id == product.id %}
							<div class="col-md-12 mb-3">
								<div class="card rounded-0 w-100">
									<div class="row g-0 align-items-stretch">
										<div class="col-md-4">
											<img src="{{ ticket.images[0].path }}" class="w-100 h-100 object-fit-cover">
										</div>
										<div class="col-md-8 p-3 row g-0">
											<p class="fs-5 fw-bold mb-3 text-uppercase">{{ticket.name}}</p>
											<div class="mb-3 fs-small row g-0">
												<div class="col-md-4 p-2">
													<p class="fw-bold mb-2">Date</p>
													<p class="mb-0">{{arrival|date('l, d M Y') }}</p>
												</div>
												<div class="col-md-4 p-2">
													<p class="fw-bold mb-2">Session Time</p>
													<p class="mb-0">{{ ticket.start_time|date('H:i') }} - {{ ticket.end_time|date('H:i') }}</p>
												</div>
												<div class="col-md-4 p-2">
													<p class="fw-bold mb-2">Cancellation Policy</p>
													<p class="mb-0">{{ ticket.cancellation }}</p>
												</div>
												<div class="col-md-6 p-2">
													<p class="fw-bold mb-2">Inclusions : </p>
													<ul class="ps-2">
														{% for list in ticket.inclusion %}
														<li>{{list.item}}</li>
														{% endfor %}
													</ul>
												</div>
												<div class="col-md-6 p-2 row g-0">
													<div class="col-md-12">
														<p class="fw-bold mb-2">Price Breakdown : </p>
													</div>
													<div class="col-md-12 row g-0">
														{% if adult != '0' %}
														<div class="col-8 mb-1">
															Adult {{adult}} x IDR {{ticket.priceFormat(ticket.adult_price)}}
														</div>
														<div class="col-4 mb-1 fw-bold">
															{% set total_adult_price = adult * ticket.adult_price %}
															IDR {{ ticket.priceFormat(total_adult_price) }}
														</div>
														{% endif %}

														{% if children != '0' %}
														<div class="col-8 mb-1">
															Children {{children}} x IDR {{ticket.priceFormat(ticket.children_price)}}
														</div>
														<div class="col-4 mb-1 fw-bold">
															{% set total_children_price = children * ticket.children_price %}
															IDR {{ ticket.priceFormat(total_children_price) }}
														</div>
														{% endif %}

														{% if infant != '0' %}
														<div class="col-8 mb-1">
															Infant {{infant}} x IDR {{ticket.priceFormat(ticket.infant_price)}}
														</div>
														<div class="col-4 mb-1 fw-bold">
															{% set total_infant_price = infant * ticket.infant_price %}
															IDR {{ ticket.priceFormat(total_infant_price) }}
														</div>
														{% endif %}
													</div>
												</div>
											</div>
											<div class="row g-0">
												<div class="col-md-6">
													<p class="mb-2"><a role="button" class="text-decoration-none fs-small fw-bold" data-bs-toggle="modal" data-bs-target="#DetailTerms-{{ticket.id}}">Terms & Conditions</a></p>
												</div>
												<div class="col-md-6">
													<form action="{{url('/bali-tiket/booking-detail')}}" method="POST" enctype="multipart/form-data">
														<input type="hidden" value="{{ ticket.id }}" name="id">

														<input type="hidden" value="{{ slug }}" name="slug">

														<input type="hidden" value="{{ arrival }}" name="arrival">

														<input type="hidden" value="{{ adult }}" name="adult">
														<input type="hidden" value="{{ children }}" name="children">
														<input type="hidden" value="{{ infant }}" name="infant">

														<input type="hidden" value="{{ ticket.adult_price }}" name="adult_price">
														<input type="hidden" value="{{ ticket.children_price }}" name="children_price">
														<input type="hidden" value="{{ ticket.infant_price }}" name="infant_price">

														<input type="hidden" value="{{ total_adult_price }}" name="total_adult_price">
														<input type="hidden" value="{{ total_children_price }}" name="total_children_price">
														<input type="hidden" value="{{ total_infant_price }}" name="total_infant_price">

														<p align="right" class="mb-0"><button type="submit" class="btn btn-primary btn-sm rounded-1 py-1 px-4 fw-medium">BOOK NOW</button></p>
													</form>
												</div>
											</div>
										</div>
									</div>
								</div>

								<!-- modal detail terms conditions -->
								<div class="modal fade" id="DetailTerms-{{ticket.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
									<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
										<div class="modal-content">
											<div class="modal-body position-relative">
												<button type="button" class="z-3 btn-close position-absolute top-0 end-0 m-3 d-none d-md-block" data-bs-dismiss="modal" aria-label="Close"></button>
												<p class="d-block d-md-none text-end mb-1" align="right"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></p>

												<p class="fw-semibold">Terms & Conditions</p>
												<hr class="my-2">
												<div class="fs-small">
													{{ ticket.terms|raw }}
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- end modal detail terms conditions -->

							</div>
							{% endif %}
							{% endfor %}
						</div>
					</div>				
				</div>
				{% endfor %}
				{% endif %}
				<!-- end parameter terisi -->


			</div>
		</div>
	</div>
</section>

{% put styles %}
<style type="text/css">
	.fs-small{
		font-size: 12px!important;
	}
	.line-title{
		position: relative;
		z-index: 1;
	}
	.line-title:before{
		position: absolute;
		content: "";
		top: 50%;
		margin: 0 auto;
		width: 100%;
		border-top: 2px solid grey;
		left: 0;
	}
	.line-title span{
		padding: 0 15px;
		background: #fff;
		position: relative;
	}
	.text-truncate-4{
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;  
		overflow: hidden;
	}
	.list-facilities ul{
		padding-left: 1rem;
		columns: 2;
	}
</style>
{% endput %}

{% put scripts %}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script type="text/javascript">
	$('[data-fancybox="gallery"]').fancybox({
		loop: true,
		infobar: false,
		buttons: [
			"zoom",
			"close"
			],
	});
</script>

<script type="text/javascript">
	$("#arrival").flatpickr({
		enableTime: false,
		dateFormat: "Y-m-d",
		minDate: "today",
	});
	$("#arrival-2").flatpickr({
		enableTime: false,
		dateFormat: "Y-m-d",
		minDate: "today",
	});

	$('.main-slider').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		autoplay: true,
		autoplaySpeed: 2000,
		fade: false,
		arrows: false,
	});
	$('.big-slider').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		fade: true,
		asNavFor: '.small-slider',
		arrows: false,
	});
	$('.small-slider').slick({
		slidesToShow: 3,
		slidesToScroll: 1,
		asNavFor: '.big-slider',
		centerMode: true,
		focusOnSelect: true,
		autoplay: true,
		autoplaySpeed: 3000,
		arrows: false,
	});
	$('.product-slider').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		fade: true,
		arrows: false,
	});
</script>
{% endput %}";s:5:"mtime";i:1718182239;s:6:"markup";s:23033:"<section>
	<div class="container px-0">
		<div class="row g-0">
			<div class="col-md-12">
				<div class="ratio ratio-21x9">
					<img src="{{ vendor[0].images[0].path }}" class="w-100 h-100 object-fit-cover">
				</div>
			</div>
		</div>

		<div class="row g-0 px-3 py-2" style="background-color: whitesmoke; margin-top: -8px;">
			<!-- form booking widget -->
			<form class="col-md-8 row g-0 py-2 py-md-0" action="{{ url('bali-tiket/booking-page') }}" method="GET" enctype="multipart/form-data">
				<div class="col-md-10 row g-0">
					<div class="col-md-3 col-6 py-1 p-md-2 px-2">
						<label class="mb-1 fw-bold fs-small">Vendor</label>
						<select required class="form-control fs-small rounded-1 py-2" name="slug">
							{% if slug != null %}
							{% for vendor in vendor %}
							{% if vendor.slug == slug %}
							<option value="{{vendor.slug}}" selected>{{vendor.name}}</option>
							{% else %}
							<option value="{{vendor.slug}}">{{vendor.name}}</option>
							{% endif %}
							{% endfor %}

							{% else %}
							<option value="" selected disabled>Select Vendor</option>
							{% for vendor in vendor %}
							<option value="{{vendor.slug}}">{{vendor.name}}</option>
							{% endfor %}

							{% endif %}
						</select>
					</div>
					<div class="col-md-3 col-6 py-1 p-md-2 px-2">
						<label class="mb-1 fw-bold fs-small">Arrival</label>
						<input type="date" required class="form-control fs-small rounded-1 py-2" id="arrival" name="arrival" value="{{ (arrival != null) ? arrival : datenow }}">
					</div>
					<div class="col-md-2 col-6 py-1 p-md-2 px-2">
						<label class="mb-1 fw-bold fs-small">Adult</label>
						<input type="number" min="1" placeholder="Adult" value="{{ (adult != null) ? adult : '1' }}" class="form-control fs-small rounded-1 py-2" name="adult">
					</div>
					<div class="col-md-2 col-6 py-1 p-md-2 px-2">
						<label class="mb-1 fw-bold fs-small">Children</label>
						<input type="number" min="0" placeholder="Children" value="{{ (children != null) ? children : '0' }}" class="form-control fs-small rounded-1 py-2" name="children">
					</div>
					<div class="col-md-2 col-6 py-1 p-md-2 px-2">
						<label class="mb-1 fw-bold fs-small">Infant</label>
						<input type="number" min="0" placeholder="Infant" value="{{ (infant != null) ? infant : '0' }}" class="form-control fs-small rounded-1 py-2" name="infant">
					</div>
				</div>
				<div class="col-md-2 p-md-2 p-3 px-2 px-md-2">
					<label class="mb-1 fs-small d-none d-md-inline-block">&ensp;</label>
					<button type="submit" class="btn btn-primary rounded-1 fs-small w-100 py-2">Apply</button>
				</div>
			</form>
			<!-- end form booking widget -->
		</div>
	</div>

	<div class="container py-4">
		<div class="row g-0">
			<div class="col-md-9 row g-0">

				<!-- jika tidak ada parameter akan tampil ini-->
				{% if slug == null and arrival == null %}
				{% for vendor in vendor %}
				<div class="col-md-12 mb-3">
					<div class="card rounded-0 w-100">
						<div class="row g-0 align-items-stretch">
							<div class="col-md-4">
								<a role="button" data-bs-toggle="modal" data-bs-target="#DetailVendor-{{vendor.slug}}">
									<div class="ratio ratio-4x3">
										<img src="{{ vendor.images[0].path }}" class="w-100 object-fit-cover">
									</div>
								</a>
							</div>
							<div class="col-md-8 p-3 row g-0">
								<p class="fs-5 fw-bold mb-2 text-uppercase">{{vendor.name}}</p>
								<p class="mb-3 fs-small text-truncate-4">
									{{vendor.short_desc}}
								</p>
								<p class="mb-2"><a role="button" class="text-decoration-none fs-small" data-bs-toggle="modal" data-bs-target="#DetailVendor-{{vendor.slug}}">More Information</a></p>
								<p align="right" class="mb-0"><button type="button" data-bs-toggle="modal" data-bs-target="#BookByVendor-{{vendor.slug}}" class="btn btn-primary btn-sm rounded-1 py-1 px-4 fw-medium"><i class="ri-cursor-fill align-middle fs-6 fw-bold"></i> SELECT</button></p>
							</div>
						</div>
					</div>

					<!-- modal detail vendor -->
					<div class="modal fade" id="DetailVendor-{{vendor.slug}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog modal-xl modal-dialog-centered">
							<div class="modal-content">
								<div class="modal-body position-relative">
									<button type="button" class="z-3 btn-close position-absolute top-0 end-0 m-3 d-none d-md-block" data-bs-dismiss="modal" aria-label="Close"></button>
									<p class="d-block d-md-none text-end mb-1" align="right"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></p>

									<p class="text-md-center text-start fw-bold fs-5 text-uppercase">{{vendor.name}}</p>
									<div class="row g-0 align-items-start">
										<!-- image room -->
										<div class="col-md-6 row g-0">
											<div class="col-md-12 mb-1">
												<div class="big-slider px-1">
													{% for img in vendor.images %}
													<a href="{{ img.path }}"  data-fancybox="gallery" class="ratio ratio-16x9">
														<img src="{{ img.path }}" class="w-100 h-100 object-fit-cover">
													</a>
													{% endfor %}
												</div>
											</div>
											<div class="col-md-12">
												<div class="small-slider px-1">
													{% for img in vendor.images %}
													<div href="{{ img.path }}" class="ratio ratio-16x9" style="cursor: pointer">
														<img src="{{ img.path }}" class="w-100 h-100 px-1 object-fit-cover">
													</div>
													{% endfor %}
												</div>
											</div>
										</div>
										<!-- end image room -->
										<div class="col-md-6 ps-md-4">
											<div class="line-title text-primary text-center fs-small mb-2 fw-semibold"><span>DESCRIPTION</span></div>
											<div class="mb-4 fs-small">{{vendor.description|raw}}</div>
											<div class="line-title text-primary text-center fs-small mb-2 fw-semibold"><span>OPENING HOUR</span></div>
											<div class="fs-small">
												{% for opening in vendor.schedule %}
												<div class="row g-0 justify-content-center mb-1">
													<div class="col-3 fw-bold">
														{{ opening.day }}
													</div>
													<div class="col-1">
														:
													</div>
													<div class="col-3">
														{{ opening.start_time|date('H:i') }} - {{ opening.end_time|date('H:i') }}
													</div>
												</div>
												{% endfor %}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- end modal detail vendor -->

					<!-- modal book -->
					<div class="modal fade" id="BookByVendor-{{vendor.slug}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog modal modal-dialog-centered">
							<div class="modal-content">
								<div class="modal-body position-relative">
									<button type="button" class="z-3 btn-close position-absolute top-0 end-0 m-3 d-none d-md-block" data-bs-dismiss="modal" aria-label="Close"></button>
									<p class="d-block d-md-none text-end mb-1" align="right"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></p>

									<form action="{{url('bali-tiket/booking-page')}}" method="GET" enctype="multipart/form-data" class="row g-0">
										<div class="col-md-12 col-12 mb-3 px-2">
											<label class="mb-2 fw-bold fs-small">Vendor</label>
											<input type="hidden" name="slug" value="{{vendor.slug}}">
											<input type="text" class="form-control fs-small rounded-1 py-2" readonly value="{{vendor.name}}">
										</div>
										<div class="col-md-6 col-12 mb-3 px-2">
											<label class="mb-2 fw-bold fs-small">Arrival</label>
											<input type="date" required class="form-control fs-small rounded-1 py-2" id="arrival-2" name="arrival" value="{{ (arrival != null) ? arrival : datenow }}">
										</div>
										<div class="col-md-6 col-12 mb-3 px-2">
											<label class="mb-2 fw-bold fs-small">Adult</label>
											<input type="number" min="1" placeholder="Adult" value="{{ (adult != null) ? adult : '1' }}" class="form-control fs-small rounded-1 py-2" name="adult">
										</div>
										<div class="col-md-6 col-12 mb-3 px-2">
											<label class="mb-2 fw-bold fs-small">Children</label>
											<input type="number" min="0" placeholder="Children" value="{{ (children != null) ? children : '0' }}" class="form-control fs-small rounded-1 py-2" name="children">
										</div>
										<div class="col-md-6 col-12 mb-3 px-2">
											<label class="mb-2 fw-bold fs-small">Infant</label>
											<input type="number" min="0" placeholder="Infant" value="{{ (infant != null) ? infant : '0' }}" class="form-control fs-small rounded-1 py-2" name="infant">
										</div>
										<button type="submit" class="btn btn-primary btn-sm rounded-1 py-1 px-4 fw-medium"></i> APPLY</button>
									</form>
								</div>
							</div>
						</div>
					</div>
					<!-- end modal book -->
				</div>
				{% endfor %}
				<!-- end jika parameter kosong -->

				<!-- jika parameter terisi -->
				{% else %}
				{% for product in product %}
				<div class="col-md-12 mb-3">
					<div class="card rounded-0 w-100">
						<div class="row g-0 align-items-stretch border-1 border-bottom">
							<div class="col-md-4">
								<div class="ratio ratio-4x3">
									<img src="{{ product.images[0].path }}" class="w-100 object-fit-cover">
								</div>
							</div>
							<div class="col-md-8 p-3 row g-0">
								<p class="fs-5 fw-bold mb-2 text-uppercase">{{product.name}}</p>
								<p class="mb-3 fs-small text-truncate-4">
									{{product.short_desc}}
								</p>
								<p class="mb-2"><a role="button" class="text-decoration-none fs-small" data-bs-toggle="modal" data-bs-target="#DetailProduct-{{product.slug}}">More Information</a></p>
								<p align="right" class="mb-0">
									<span class="rounded-1 py-1 px-4 fw-medium text-decoration-none text-black">
										{% set i = 0 %}
										{% for ticket in ticket %}
										{% if ticket.product_id == product.id %}
										{% set i = i + 1 %}
										{% endif %}
										{% endfor %}
										{{i}}
										{{ (i > 1) ? 'Tickets' : 'Ticket' }}
										<i class="ri-coupon-2-line fs-6 fw-bold ms-2"></i>
									</span>
								</p>
							</div>
						</div>

						<!-- modal detail product -->
						<div class="modal fade" id="DetailProduct-{{product.slug}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
								<div class="modal-content">
									<div class="modal-body position-relative">
										<button type="button" class="z-3 btn-close position-absolute top-0 end-0 m-3 d-none d-md-block" data-bs-dismiss="modal" aria-label="Close"></button>
										<p class="d-block d-md-none text-end mb-1" align="right"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></p>

										<p class="text-md-center text-start fw-bold fs-5 text-uppercase">{{product.name}}</p>
										<div class="row g-0 align-items-start">
											<!-- image room -->
											<div class="col-md-6 row g-0">
												<div class="col-md-12 mb-1">
													<img src="{{ product.images[0].path }}" class="img-fluid w-100">
												</div>
											</div>
											<!-- end image room -->
											<div class="col-md-6 ps-md-4">
												<div class="line-title text-primary text-uppercase text-center fs-small mb-2 fw-semibold"><span>DESCRIPTION</span></div>
												<div class="mb-4 fs-small">{{product.description|raw}}</div>

												<div class="line-title text-primary text-uppercase text-center fs-small mb-2 fw-semibold"><span>Highlight</span></div>
												<div class="mb-4 fs-small">{{product.description|raw}}</div>
											</div>
											<div class="col-md-12 mt-3">
												<ul class="nav nav-tabs border-0 ">
													<li class="nav-item">
														<a class="nav-link text-black active" id="nav-tab-1-{{product.id}}" data-bs-toggle="tab" data-bs-target="#tab-1-{{product.id}}" role="button">Inclusion</a>
													</li>
													<li class="nav-item">
														<a class="nav-link text-black" id="nav-tab-2-{{product.id}}" data-bs-toggle="tab" data-bs-target="#tab-2-{{product.id}}" role="button">Facilities</a>
													</li>
													<li class="nav-item">
														<a class="nav-link text-black" id="nav-tab-3-{{product.id}}" data-bs-toggle="tab" data-bs-target="#tab-3-{{product.id}}" role="button">Location</a>
													</li>
													<li class="nav-item">
														<a class="nav-link text-black" id="nav-tab-4-{{product.id}}" data-bs-toggle="tab" data-bs-target="#tab-4-{{product.id}}" role="button">Map Area</a>
													</li>
												</ul>

												<div class="">
													<div class="tab-content" id="nav-tabContent">
														<div class="tab-pane p-3 rounded-bottom-2 border-end-2 fade col-md-12 show active" id="tab-1-{{product.id}}" role="tabpanel" aria-labelledby="nav-tab-1-{{product.id}}" tabindex="0">
															<ul class="ps-2 fs-small">
																{% for list in product.inclusion %}
																<li>{{list.item}}</li>
																{% endfor %}
															</ul>
														</div>

														<div class="tab-pane p-3 rounded-bottom-2 border-end-2 fade col-md-12" id="tab-2-{{product.id}}" role="tabpanel" aria-labelledby="nav-tab-2-{{product.id}}" tabindex="0">
															<div class="w-100 d-flex align-items-end">
																{% for list in product.facilities %}
																<div class="me-3">
																	<img src="{{list.path}}" style="width: 60px;">
																	<p class="fs-small mb-0 text-center mt-2">{{list.title}}</p>
																</div>
																{% endfor %}
															</div>
														</div>

														<div class="tab-pane p-3 rounded-bottom-2 border-end-2 fade col-md-12" id="tab-3-{{product.id}}" role="tabpanel" aria-labelledby="nav-tab-3-{{product.id}}" tabindex="0">
															<p class="mb-2 fs-small">{{product.address}}</p>
															<p class="mb-3 fs-small"><a href="{{product.link_address}}" target="_blank" class="btn btn-sm fs-small btn-primary rounded-1">Show Location</a></p>
														</div>

														<div class="tab-pane p-3 rounded-bottom-2 border-end-2 fade col-md-12" id="tab-4-{{product.id}}" role="tabpanel" aria-labelledby="nav-tab-4-{{product.id}}" tabindex="0">
															<a href="{{product.map[0].path}}">
																<img src="{{product.map[0].path}}" style="max-width: 30%;">
															</a>
														</div>

													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end modal detail product -->

						<div class="row g-0 p-4">
							{% for ticket in ticket %}
							{% if ticket.product_id == product.id %}
							<div class="col-md-12 mb-3">
								<div class="card rounded-0 w-100">
									<div class="row g-0 align-items-stretch">
										<div class="col-md-4">
											<img src="{{ ticket.images[0].path }}" class="w-100 h-100 object-fit-cover">
										</div>
										<div class="col-md-8 p-3 row g-0">
											<p class="fs-5 fw-bold mb-3 text-uppercase">{{ticket.name}}</p>
											<div class="mb-3 fs-small row g-0">
												<div class="col-md-4 p-2">
													<p class="fw-bold mb-2">Date</p>
													<p class="mb-0">{{arrival|date('l, d M Y') }}</p>
												</div>
												<div class="col-md-4 p-2">
													<p class="fw-bold mb-2">Session Time</p>
													<p class="mb-0">{{ ticket.start_time|date('H:i') }} - {{ ticket.end_time|date('H:i') }}</p>
												</div>
												<div class="col-md-4 p-2">
													<p class="fw-bold mb-2">Cancellation Policy</p>
													<p class="mb-0">{{ ticket.cancellation }}</p>
												</div>
												<div class="col-md-6 p-2">
													<p class="fw-bold mb-2">Inclusions : </p>
													<ul class="ps-2">
														{% for list in ticket.inclusion %}
														<li>{{list.item}}</li>
														{% endfor %}
													</ul>
												</div>
												<div class="col-md-6 p-2 row g-0">
													<div class="col-md-12">
														<p class="fw-bold mb-2">Price Breakdown : </p>
													</div>
													<div class="col-md-12 row g-0">
														{% if adult != '0' %}
														<div class="col-8 mb-1">
															Adult {{adult}} x IDR {{ticket.priceFormat(ticket.adult_price)}}
														</div>
														<div class="col-4 mb-1 fw-bold">
															{% set total_adult_price = adult * ticket.adult_price %}
															IDR {{ ticket.priceFormat(total_adult_price) }}
														</div>
														{% endif %}

														{% if children != '0' %}
														<div class="col-8 mb-1">
															Children {{children}} x IDR {{ticket.priceFormat(ticket.children_price)}}
														</div>
														<div class="col-4 mb-1 fw-bold">
															{% set total_children_price = children * ticket.children_price %}
															IDR {{ ticket.priceFormat(total_children_price) }}
														</div>
														{% endif %}

														{% if infant != '0' %}
														<div class="col-8 mb-1">
															Infant {{infant}} x IDR {{ticket.priceFormat(ticket.infant_price)}}
														</div>
														<div class="col-4 mb-1 fw-bold">
															{% set total_infant_price = infant * ticket.infant_price %}
															IDR {{ ticket.priceFormat(total_infant_price) }}
														</div>
														{% endif %}
													</div>
												</div>
											</div>
											<div class="row g-0">
												<div class="col-md-6">
													<p class="mb-2"><a role="button" class="text-decoration-none fs-small fw-bold" data-bs-toggle="modal" data-bs-target="#DetailTerms-{{ticket.id}}">Terms & Conditions</a></p>
												</div>
												<div class="col-md-6">
													<form action="{{url('/bali-tiket/booking-detail')}}" method="POST" enctype="multipart/form-data">
														<input type="hidden" value="{{ ticket.id }}" name="id">

														<input type="hidden" value="{{ slug }}" name="slug">

														<input type="hidden" value="{{ arrival }}" name="arrival">

														<input type="hidden" value="{{ adult }}" name="adult">
														<input type="hidden" value="{{ children }}" name="children">
														<input type="hidden" value="{{ infant }}" name="infant">

														<input type="hidden" value="{{ ticket.adult_price }}" name="adult_price">
														<input type="hidden" value="{{ ticket.children_price }}" name="children_price">
														<input type="hidden" value="{{ ticket.infant_price }}" name="infant_price">

														<input type="hidden" value="{{ total_adult_price }}" name="total_adult_price">
														<input type="hidden" value="{{ total_children_price }}" name="total_children_price">
														<input type="hidden" value="{{ total_infant_price }}" name="total_infant_price">

														<p align="right" class="mb-0"><button type="submit" class="btn btn-primary btn-sm rounded-1 py-1 px-4 fw-medium">BOOK NOW</button></p>
													</form>
												</div>
											</div>
										</div>
									</div>
								</div>

								<!-- modal detail terms conditions -->
								<div class="modal fade" id="DetailTerms-{{ticket.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
									<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
										<div class="modal-content">
											<div class="modal-body position-relative">
												<button type="button" class="z-3 btn-close position-absolute top-0 end-0 m-3 d-none d-md-block" data-bs-dismiss="modal" aria-label="Close"></button>
												<p class="d-block d-md-none text-end mb-1" align="right"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></p>

												<p class="fw-semibold">Terms & Conditions</p>
												<hr class="my-2">
												<div class="fs-small">
													{{ ticket.terms|raw }}
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- end modal detail terms conditions -->

							</div>
							{% endif %}
							{% endfor %}
						</div>
					</div>				
				</div>
				{% endfor %}
				{% endif %}
				<!-- end parameter terisi -->


			</div>
		</div>
	</div>
</section>

{% put styles %}
<style type="text/css">
	.fs-small{
		font-size: 12px!important;
	}
	.line-title{
		position: relative;
		z-index: 1;
	}
	.line-title:before{
		position: absolute;
		content: "";
		top: 50%;
		margin: 0 auto;
		width: 100%;
		border-top: 2px solid grey;
		left: 0;
	}
	.line-title span{
		padding: 0 15px;
		background: #fff;
		position: relative;
	}
	.text-truncate-4{
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;  
		overflow: hidden;
	}
	.list-facilities ul{
		padding-left: 1rem;
		columns: 2;
	}
</style>
{% endput %}

{% put scripts %}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script type="text/javascript">
	$('[data-fancybox="gallery"]').fancybox({
		loop: true,
		infobar: false,
		buttons: [
			"zoom",
			"close"
			],
	});
</script>

<script type="text/javascript">
	$("#arrival").flatpickr({
		enableTime: false,
		dateFormat: "Y-m-d",
		minDate: "today",
	});
	$("#arrival-2").flatpickr({
		enableTime: false,
		dateFormat: "Y-m-d",
		minDate: "today",
	});

	$('.main-slider').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		autoplay: true,
		autoplaySpeed: 2000,
		fade: false,
		arrows: false,
	});
	$('.big-slider').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		fade: true,
		asNavFor: '.small-slider',
		arrows: false,
	});
	$('.small-slider').slick({
		slidesToShow: 3,
		slidesToScroll: 1,
		asNavFor: '.big-slider',
		centerMode: true,
		focusOnSelect: true,
		autoplay: true,
		autoplaySpeed: 3000,
		arrows: false,
	});
	$('.product-slider').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		fade: true,
		arrows: false,
	});
</script>
{% endput %}";s:4:"code";s:1324:"use Yuren\BaliTiket\Models\Vendor;
use Yuren\BaliTiket\Models\Product;
use Yuren\BaliTiket\Models\Ticket;
use Yuren\BaliTiket\Models\Bookings;

function onStart()
{
	//ambil hari ini dan besok
	$datenow = date('Y-m-d');
	$tommorrow = date('Y-m-d', strtotime('+1 day'));
	$this['datenow'] = $datenow;
	$this['tommorrow'] = $tommorrow;

	//cek input
	$slug = Input::get('slug');
	$this['slug'] = $slug;
	$vendorname = Input::get('vendorname');
	$this['vendorname'] = $vendorname;
	$arrival = Input::get('arrival');
	$this['arrival'] = $arrival;
	$adult = Input::get('adult');
	$this['adult'] = $adult;
	$children = Input::get('children');
	$this['children'] = $children;
	$infant = Input::get('infant');
	$this['infant'] = $infant;

	$this['vendor'] = Vendor::orderBy('id','asc')->get();

	$this['other_vendor'] = Vendor::orderBy('id','asc')->get();

	if ($slug != null){
		$this['product'] = Product::where('published', 1)
		->with('vendor')
		->whereHas('vendor', function($query) use ($slug) {
			$query->where('slug', $slug);
		})
		->orderBy('count_book','desc')
		->get();
		$this['ticket'] = Ticket::where('published', 1)
		->with('vendor')
		->whereHas('vendor', function($query) use ($slug) {
			$query->where('slug', $slug);
		})
		->orderBy('id','asc')
		->get();
	}
}";s:5:"title";s:12:"Booking Page";s:3:"url";s:24:"/bali-tiket/booking-page";s:6:"layout";s:9:"BaliTiket";}}