File "service_booking.blade.php"
Full Path: /var/www/laravel_filter/resources/views/service_booking.blade.php
File size: 31.95 KB
MIME-type: text/html
Charset: utf-8
@extends('layout')
@section('title')
<title>{{ $service->seo_title }}</title>
@php
$tags = '';
if($service->tags){
foreach (json_decode($service->tags) as $service_tag) {
$tags .= $service_tag->value.', ';
}
}
@endphp
<meta name="keywords" content="{{ $tags }}">
<meta name="title" content="{{ $service->seo_title }}">
<meta name="description" content="{{ $service->seo_description }}">
@endsection
@section('frontend-content')
<!-- Breadcrumbs -->
<section class="inflanar-breadcrumb" style="background-image: url({{ asset($breadcrumb) }});">
<div class="container">
<div class="row">
<!-- Breadcrumb-Content -->
<div class="col-12">
<div class="inflanar-breadcrumb__inner">
<div class="inflanar-breadcrumb__content">
<h2 class="inflanar-breadcrumb__title m-0">{{__('admin.Services')}}</h2>
<ul class="inflanar-breadcrumb__menu list-none">
<li><a href="{{ route('home') }}">{{__('admin.Home')}}</a></li>
<li class="active"><a href="javascript:;">{{__('admin.Services')}}</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End breadcrumbs -->
<!-- Features -->
<section class="pd-top-90 pd-btm-120">
<div class="container">
<div class="row">
<div class="col-lg-8 col-12 mg-top-30">
<!--Tab Nav -->
<div class="list-group inflanar-bdetail__tabnav" id="list-tab" role="tablist">
<a class="list-group-item active service_tab" data-bs-toggle="list" href="#in-tab6" role="tab">
<span>1</span> {{__('admin.Service')}}
</a>
<a class="list-group-item information_tab" data-bs-toggle="list" href="#in-tab7" role="tab">
<span>2</span> {{__('admin.Information')}}
</a>
</div>
<!-- Tab Content -->
<div class="tab-content mg-top-30" id="nav-tabContent">
<!-- Single Tab -->
<div class="tab-pane fade active show basic_info_tab" id="in-tab6" role="tabpanel">
<div class="inflanar-sdetail">
<!-- Service Thumb -->
<div class="inflanar-sdetail__thumb">
<img src="{{ asset($service->thumbnail_image) }}" alt="#">
</div>
<!-- Service Content -->
<div class="inflanar-sdetail__content">
<h2 class="inflanar-sdetail__title mg-btm-20">{{ $service->title }}</h2>
<div class="inflanar-sdetail__tcontent">
{!! clean($service->description) !!}
<h4 class="inflanar-sdetail__tcontent--title mg-top-40">{{__('admin.Package Features')}}</h4>
<div class="row mg-btm-20">
<div class="col-lg-6 col-12">
<ul class="inflanar-list-style inflanar-list-style__grey inflanar-list-style__row list-none">
@if ($service->features)
@foreach (json_decode($service->features) as $feature)
@if ($feature)
<li><img src="{{ asset('frontend/img/in-check-icon2.svg') }}">{{ $feature }}</li>
@endif
@endforeach
@endif
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Addon List -->
@if ($additionals->count() > 0)
<div class="inflanar-opackage mg-top-60">
<h3 class="inflanar-opackage__title">{{__('admin.Upgrade your order with extras')}}</h3>
<!-- Single Addon -->
@foreach ($additionals as $additional)
<div class="inflanar-opackage__single">
<div class="inflanar-opackage__thumb">
<img src="{{ asset($additional->image) }}" alt="#">
</div>
<div class="inflanar-opackage__scontent">
<div class="inflanar-opackage__list">
<h4 class="inflanar-opackage__ltitle">{{ $additional->title }}</h4>
<ul class="inflanar-list-style inflanar-list-style__grey inflanar-list-style__row list-none">
@if ($additional->features)
@foreach (json_decode($additional->features) as $add_feature)
@if ($add_feature)
<li><img src="{{ asset('frontend/img/in-check-circle.svg') }}">{{ $add_feature }}</li>
@endif
@endforeach
@endif
</ul>
</div>
<div class="inflanar-opackage__aprice">
<div class="inflanar-opackage__apgroup">
<h4 class="inflanar-opackage__aamount">
{{ currency($additional->price) }}
</h4>
<a href="javascript:;" class="inflanar-btn inflanar-btn__border add_extra_item" data-service_id="{{ $additional->id }}" data-service_price="{{ $additional->price }}" data-service_name="{{ $additional->title }}">{{__('admin.Add Now')}}</a>
</div>
</div>
</div>
</div>
@endforeach
<!-- End Single Addon -->
</div>
@endif
<div class="inflanar-step-buttons mg-top-60">
<button href="javascript:;" id="next_btn" class="inflanar-btn">{{__('admin.Next Step')}}</button>
</div>
</div>
<!-- End Single Tab -->
<!-- Single Tab -->
<div class="tab-pane fade booking_form_tab" id="in-tab7" role="tabpanel">
<div class="inflanar-sdetail">
<!-- Service Content -->
<div class="inflanar-sdetail__content">
<h2 class="inflanar-sdetail__title m-0">{{__('admin.Booking Information')}}</h2>
<form id="submitReadyToBooking">
@csrf
<div class="row">
<div class="col-lg-6 col-md-6 col-12 mg-top-20">
<div class="form-group inflanar-form-input">
<label>{{__('admin.Name')}}*</label>
<input class="ecom-wc__form-input" type="text" name="name" placeholder="{{__('admin.Name')}}">
</div>
</div>
<div class="col-lg-6 col-md-6 col-12 mg-top-20">
<div class="form-group inflanar-form-input">
<label>{{__('admin.Email')}}</label>
<input class="ecom-wc__form-input" type="email" name="email" placeholder="{{__('admin.Email')}}">
</div>
</div>
<div class="col-lg-6 col-md-6 col-12 mg-top-20">
<div class="form-group inflanar-form-input">
<label>{{__('admin.Phone')}} *</label>
<input class="ecom-wc__form-input" type="text" name="phone" placeholder="{{__('admin.Phone')}}">
</div>
</div>
<div class="col-lg-6 col-md-6 col-12 mg-top-20">
<div class="form-group inflanar-form-input">
<label>{{__('admin.Your Address')}}*</label>
<input class="ecom-wc__form-input" type="text" name="address" placeholder="{{__('admin.Your Address')}}">
</div>
</div>
<div class="col-12 mg-top-20">
<div class="form-group inflanar-form-input">
<label>{{__('admin.Write Note')}}</label>
<div class="form-group inflanar-form-input">
<textarea placeholder="{{__('admin.Write something')}}" name="order_note"></textarea>
</div>
</div>
</div>
</div>
<input type="hidden" id="input_extra_total" name="extra_total" value="0.00">
<input type="hidden" id="input_sub_total" name="sub_total" value="{{ $service->price }}">
<input type="hidden" id="input_total" name="total" value="{{ $service->price }}">
<input type="hidden" id="input_date" name="date" value="">
<input type="hidden" id="schedule_time_slot" name="schedule_time_slot" value="">
<input type="hidden" id="schedule_time_slot_price" name="schedule_time_slot_price" value="0.00">
<input type="hidden" id="input_city_id" name="city_id" value="0.00">
<input type="hidden" id="start_date" name="start_date" value="">
<input type="hidden" id="end_date" name="end_date" value="">
<input type="hidden" id="number_of_day" name="number_of_day" value="{{ $min_booking_date }}">
<input type="hidden" name="service_id" value="{{ $service->id }}">
<div id="extra_input">
</div>
</form>
</div>
</div>
<div class="inflanar-step-buttons mg-top-60">
<button id="step-prev-button" type="submit" class="inflanar-btn inflanar-btn__border"><span>{{__('admin.Previous')}}</span></button>
<button id="goToPayment" class="inflanar-btn">{{__('admin.Next Step')}}</button>
</div>
</div>
<!-- End Single Tab -->
</div>
</div>
<div class="col-lg-4 col-12 mg-top-90">
<!-- Single Sidebar -->
<div class="book-single-sidebar two mg-top-40">
{{-- <div id="service_available_dates" ></div> --}}
<div class="form-group inflanar-form-input">
<input type="text" id="booking-dates" name="booking_dates" class="ecom-wc__form-input" placeholder="{{ __('admin.Select Booking Dates') }}">
<span class="icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4192_18095)">
<path d="M12 24C18.616 24 24 18.616 24 12C24 5.38401 18.6161 0 12 0C5.38394 0 0 5.38401 0 12C0 18.616 5.38401 24 12 24ZM12 1.59997C17.736 1.59997 22.4 6.26396 22.4 12C22.4 17.736 17.736 22.4 12 22.4C6.26396 22.4 1.59997 17.736 1.59997 12C1.59997 6.26396 6.26402 1.59997 12 1.59997Z" fill="black"/>
<path d="M15.4992 15.824C15.6472 15.944 15.8232 16.0001 15.9992 16.0001C16.2352 16.0001 16.4672 15.8961 16.6232 15.7001C16.8992 15.3561 16.8431 14.8521 16.4992 14.576L12.7992 11.616V5.60004C12.7992 5.16003 12.4392 4.80005 11.9992 4.80005C11.5592 4.80005 11.1992 5.16003 11.1992 5.60004V12.0001C11.1992 12.2441 11.3112 12.4721 11.4992 12.624L15.4992 15.824Z" fill="black"/>
</g>
</svg>
</span>
</div>
</div>
<!-- Single Sidebar -->
{{-- <div class="book-single-sidebar mg-top-30">
<h4 class="book-single-sidebar__title">{{__('admin.Location')}}</h4>
<select class="property-sidebar__group inflanar-border" name="city_id" id="city_id">
<option value="">{{__('admin.Select')}}</option>
@foreach ($cities as $city)
<option value="{{ $city->id }}">{{ $city->name }}</option>
@endforeach
</select>
</div> --}}
<!-- Single Sidebar -->
{{-- <div class="book-single-sidebar mg-top-30">
<h4 class="book-single-sidebar__title">{{__('admin.Select Schedule')}}</h4>
<select class="property-sidebar__group inflanar-border" id="schedule_box">
<option value="">{{__('admin.Select')}}</option>
</select>
</div> --}}
<!-- Single Sidebar -->
<div class="book-single-sidebar p-0 mg-top-30">
<div class="book-single-sidebar__summary">
<h4 class="book-single-sidebar__title">{{__('admin.Booking Summery')}}</h4>
<ul class="inflanar-list-style inflanar-list-style__white list-style-normal list-none">
@if ($service->features)
@foreach (json_decode($service->features) as $feature)
@if ($feature)
<li><img src="{{ asset('frontend/img/in-check-icon3.svg') }}">{{ $feature }}</li>
@endif
@endforeach
@endif
</ul>
</div>
<div class="inflanar-package-info">
<div class="inflanar-package-info__group">
<!-- Single Package Info -->
<div class="inflanar-package-info__single">
<p><span><b>{{__('admin.Package Fee')}}</b></span>
<span><b id="service_main_price">
{{ currency($service->price) }}
</b></span>
</p>
</div>
<!-- Single Package Info -->
<div class="inflanar-package-info__single">
<p><span><b>{{__('admin.Extra Service')}}</b></span> <span><b class="extra_service_price">
{{ currency(0.00) }}
</b></span></p>
<div class="extra_service_area">
</div>
</div>
<!-- Single Package Info -->
<div class="inflanar-package-info__single">
<p><span><b>{{__('admin.Total')}}</b></span> <span><b class="total_price">
{{ currency($service->price) }}
</b></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Features -->
<script src="{{ asset('date-ranger/moment.min.js') }}"></script>
<script src="{{ asset('date-ranger/daterangepicker.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('date-ranger/daterangepicker.css') }}">
<script>
let currency_icon = "{{ Session::get('currency_icon') }}"
let currency_position = "{{ Session::get('currency_position') }}"
let currency_rate = "{{ Session::get('currency_rate') }}"
let min_booking_date = "{{ $min_booking_date }}"
let extra_services = [];
(function($) {
"use strict";
$(document).ready(function () {
$("#goToPayment").on("click", function(e){
e.preventDefault();
$.ajax({
type: 'post',
data: $('#submitReadyToBooking').serialize(),
url: "{{ route('store-booking-info-to-session') }}",
success: function (response) {
if(response.status == 'success'){
window.location = "{{ route('payment', $service->slug) }}";
}
},
error: function(error) {
console.log(error);
if(error.status == 422){
if(error.responseJSON.errors.address)toastr.error(error.responseJSON.errors.address[0])
if(error.responseJSON.errors.date)toastr.error(error.responseJSON.errors.date[0])
if(error.responseJSON.errors.name)toastr.error(error.responseJSON.errors.name[0])
if(error.responseJSON.errors.phone)toastr.error(error.responseJSON.errors.phone[0])
if(error.responseJSON.errors.schedule_time_slot)toastr.error(error.responseJSON.errors.schedule_time_slot[0])
if(error.responseJSON.errors.start_date)toastr.error(error.responseJSON.errors.start_date[0])
if(error.responseJSON.errors.end_date)toastr.error(error.responseJSON.errors.end_date[0])
if(error.responseJSON.errors.number_of_day)toastr.error(error.responseJSON.errors.number_of_day[0])
}
}
});
})
//Date and time
$("#service_available_dates").flatpickr({
minDate: "today",
inline: true,
altInput: true,
altFormat: "F j, Y",
dateFormat: "d-m-Y"
});
$("#service_available_dates").on("change", function(){
let date_string = $(this).val();
$("#input_date").val(date_string)
let influencer_id = "{{ $service->influencer_id }}";
let city_id = $("#city_id").val();
let service_id = "{{ $service->id }}";
$.ajax({
type: 'get',
data: {date : date_string, influencer_id, city_id, service_id},
url: "{{ route('get-available-schedule') }}",
success: function (response) {
if(response.is_available){
$("#schedule_box").html(response.available_schedules);
}else{
let html = `<option value="">{{__('admin.Select')}}</option>`;
$("#schedule_box").html(html);
$("#schedule_time_slot").val('');
toastr.error("{{__('admin.Schedule Not Found')}}")
}
},
error: function(error) {
let html = `<option value="">{{__('admin.Select')}}</option>`;
$("#schedule_box").html(html);
$("#schedule_time_slot").val('');
toastr.error("{{__('admin.Something went wrong')}}")
}
});
})
$("#city_id").on("change", function(){
let date_string = $("#input_date").val();
if(!date_string){
toastr.error("{{ __('admin.Please select a date') }}")
}
let city_id = $(this).val();
$("#input_city_id").val(city_id);
let influencer_id = "{{ $service->influencer_id }}";
if(city_id){
$.ajax({
type: 'get',
data: {date : date_string, influencer_id, city_id},
url: "{{ route('get-available-schedule') }}",
success: function (response) {
console.log(response);
if(response.is_available){
$("#schedule_box").html(response.available_schedules);
}else{
let html = `<option value="">{{__('admin.Select')}}</option>`;
$("#schedule_box").html(html);
$("#schedule_time_slot").val('');
toastr.error("{{__('admin.Schedule Not Found')}}")
}
},
error: function(error) {
let html = `<option value="">{{__('admin.Select')}}</option>`;
$("#schedule_box").html(html);
$("#schedule_time_slot").val('');
toastr.error("{{__('admin.Something went wrong')}}")
}
});
}else{
let html = `<option value="">{{__('admin.Select')}}</option>`;
$("#schedule_box").html(html);
$("#schedule_time_slot").val('');
}
console.log($(this).val());
console.log(date_string);
})
$("#schedule_box").on("change", function(){
$("#schedule_time_slot").val($(this).val());
let schedule_time_slot_price = $(this).find(':selected').attr('data-schedule_price');
$("#schedule_time_slot_price").val(schedule_time_slot_price);
$("#input_sub_total").val(schedule_time_slot_price);
$("#input_total").val(schedule_time_slot_price);
load_extra_service()
})
$(".add_extra_item").on("click", function(){
let add_id = $(this).data('service_id');
let add_price = $(this).data('service_price');
let add_name = $(this).data('service_name');
let current_this = $(this);
if(!extra_services.some(service => service.id == add_id)){
let arr = {
id : add_id,
name : add_name,
price : add_price,
};
extra_services.push(arr);
current_this.html("{{__('admin.Remove')}}");
}else{
extra_services = extra_services.filter(service => service.id !== add_id)
current_this.html("{{__('admin.Add Now')}}");
}
load_extra_service()
})
});
})(jQuery);
function load_extra_service(){
let html_service = '';
let extra_price = 0.00;
let extra_input = '';
extra_services.forEach(service => {
extra_price = (parseFloat(extra_price) + parseFloat(service.price)).toFixed(2);
if(currency_position == 'before_price'){
html_service += `<p><span>(+) ${service.name}</span> <span>${currency_icon}${service.price * currency_rate}</span></p>`;
}else if(currency_position == 'before_price_with_space'){
html_service += `<p><span>(+) ${service.name}</span> <span>${currency_icon} ${service.price * currency_rate}</span></p>`;
}else if(currency_position == 'after_price'){
html_service += `<p><span>(+) ${service.name}</span> <span>${service.price * currency_rate}${currency_icon}</span></p>`;
}else if(currency_position == 'after_price_with_space'){
html_service += `<p><span>(+) ${service.name}</span> <span>${service.price * currency_rate} ${currency_icon}</span></p>`;
}
extra_input += `
<input type="hidden" value="${service.id}" name="ids[]">
<input type="hidden" value="${service.price}" name="prices[]">
<input type="hidden" value="${service.name}" name="names[]">
`;
});
$(".extra_service_area").html(html_service);
$("#extra_input").html(extra_input);
let extra_price_html = '';
let total_price_html = '';
let main_price_html = '';
let total_price = 0.00;
let service_main_price = "{{ $service->price }}";
let number_of_day = $("#number_of_day").val();
let schedule_time_slot_price = parseFloat(service_main_price) * parseInt(number_of_day);
console.log(schedule_time_slot_price);
if(currency_position == 'before_price'){
total_price = (parseFloat(extra_price) + parseFloat(schedule_time_slot_price)).toFixed(2);
extra_price_html += `${currency_icon}${extra_price * currency_rate}`;
total_price_html += `${currency_icon}${total_price * currency_rate}`;
main_price_html += `${currency_icon}${schedule_time_slot_price * currency_rate}`;
}else if(currency_position == 'before_price_with_space'){
total_price = (parseFloat(extra_price) + parseFloat(schedule_time_slot_price)).toFixed(2);
extra_price_html += `${currency_icon} ${extra_price * currency_rate}`;
total_price_html += `${currency_icon} ${total_price * currency_rate}`;
main_price_html += `${currency_icon} ${schedule_time_slot_price * currency_rate}`;
}else if(currency_position == 'after_price'){
total_price = (parseFloat(extra_price) + parseFloat(schedule_time_slot_price)).toFixed(2);
extra_price_html += `${extra_price * currency_rate}${currency_icon}`;
total_price_html += `${total_price * currency_rate}${currency_icon}`;
main_price_html += `${schedule_time_slot_price * currency_rate}${currency_icon}`;
}else if(currency_position == 'after_price_with_space'){
total_price = (parseFloat(extra_price) + parseFloat(schedule_time_slot_price)).toFixed(2);
extra_price_html += `${extra_price * currency_rate} ${currency_icon}`;
total_price_html += `${total_price * currency_rate} ${currency_icon}`;
main_price_html += `${schedule_time_slot_price * currency_rate} ${currency_icon}`;
}
$(".extra_service_price").html(extra_price_html);
$("#input_extra_total").val(extra_price);
$(".total_price").html(total_price_html);
$("#input_total").val(total_price);
$("#service_main_price").html(main_price_html);
}
</script>
<script>
$(document).ready(function() {
var bookedDates = @json($bookedDates);
$('#booking-dates').daterangepicker({
minDate: new Date(),
autoApply: false,
isInvalidDate: function(date) {
var formattedDate = date.format('YYYY-MM-DD');
return bookedDates.includes(formattedDate); // Disable booked dates
}
});
$('#booking-dates').on('apply.daterangepicker', function(ev, picker) {
var start = picker.startDate;
var end = picker.endDate;
var number_of_select_days = end.diff(start, 'days') + 1;
// Check for minimum booking days
if (number_of_select_days < min_booking_date) {
alert(`{{ __('admin.You have to select minimum') }} ${min_booking_date} {{ __('admin.days') }}`);
resetDatePicker();
return;
}
// Check if there are any booked dates within the selected range
var hasBookedDates = false;
for (var d = start.clone(); d.isBefore(end.clone()); d.add(1, 'days')) {
var formattedDate = d.format('YYYY-MM-DD');
if (bookedDates.includes(formattedDate)) {
hasBookedDates = true;
break;
}
}
if (hasBookedDates) {
alert(`{{ __('admin.Some selected dates are already booked. Please choose a different range.') }}`);
resetDatePicker();
return;
}
// Set values for start and end dates and number of days
$("#start_date").val(start.format('YYYY-MM-DD'));
$("#end_date").val(end.format('YYYY-MM-DD'));
$("#number_of_day").val(number_of_select_days);
load_extra_service();
});
function resetDatePicker() {
$('#booking-dates').val(''); // Reset the input
$("#start_date").val(''); // Reset the start date
$("#end_date").val(''); // Reset the end date
$("#number_of_day").val(1); // Reset the number of days
load_extra_service();
// Reopen the date range picker
setTimeout(function() {
$('#booking-dates').data('daterangepicker').show();
}, 100);
}
});
</script>
@endsection