@extends('front')
@section('content')
<div class="breadcrumb-bar text-center">
	<div class="container">
		<div class="row">
			<div class="col-md-12 col-12">
				<h2 class="breadcrumb-title mb-2">{{__('Bookings')}}</h2>
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb justify-content-center mb-0">
						<li class="breadcrumb-item"><a href="{{route('user.dashboard')}}"><i class="ti ti-home-2"></i></a></li>
						<li class="breadcrumb-item">{{__('Customer')}}</li>
						<li class="breadcrumb-item active" aria-current="page">{{__('Bookings')}}</li>
					</ol>
				</nav>
			</div>
		</div>
	</div>
</div>
<div class="page-wrapper">
	<div class="content">
		<div class="container">
			<div class="row justify-content-center">
				@include('user.partials.sidebar')
				<div class="col-xl-9 col-lg-8">
					<div class="d-flex align-items-center justify-content-between flex-wrap row-gap-3 mb-4">
						<h4>{{__('Booking List')}}</h4>
					</div>
					@if(count($data['bookingdata']) > 0)
					@foreach($data['bookingdata'] as $val)
					<div class="card shadow-none booking-list" data-booking-service-id="{{ $val->product_id }}">
						<div class="card-body d-md-flex align-items-center">
							<div class="booking-widget d-sm-flex align-items-center row-gap-3 flex-fill mb-3 mb-md-0">
								<div class="booking-img me-sm-3 mb-3 mb-sm-0">
									<a href="#" data-bs-toggle="modal" data-bs-target="#booking_details" data-booking-details-id="{{ $val->id }}" class="avatar booking_details_btn">
										<img src="{{ $val->productimage }}" alt="Product Image" class="img-fluid profileImagePreview">
									</a>
								</div>
								<div class="booking-det-info">
									<h6 class="mb-3">
										<a href="#" class="booking_details_btn" data-bs-toggle="modal" data-bs-target="#booking_details" data-booking-details-id="{{ $val->id }}">
											<span>{{ $val->source_name ?? ''}}</span>
										</a>
										<span class="booking-status bookingstatus{{$val->id}}" data-status="{{ $val->booking_status }}">{{ $val->booking_status_label }}</span>
										</h5>
										<ul class="booking-details">
											@if (!empty($val->service_offer))
											@php
											$service_offer = unserialize($val->service_offer);
											@endphp
											<div class="additional-service">
												<h6 class="mb-3 fs-16 fw-bold">{{__('Additional Services')}}</h6>
												<ul class="list-unstyled ms-5">
													@foreach ($service_offer as $offer)
													@php
													[$serviceName, $price] = explode('_', $offer);
													@endphp
													<li class="d-flex justify-content-between align-items-center mb-2">
														<span class="service-name font-weight-bold">{{ $serviceName }}</span>
														<span class="service-price text-muted">{{ $data['currency'] }}{{ number_format($price, 2) }}</span>
													</li>
													@endforeach
												</ul>
											</div>
											@endif
											<li class="d-flex align-items-center mb-2">
												<span class="book-item font-weight-bold">{{__('order_id')}}</span> <small class="mx-2">:</small> {{ $val->order_id ?? '-' }}
											</li>
											<li class="d-flex align-items-center mb-2">
												<span class="book-item font-weight-bold">{{__('Booking Date')}}</span>
                                                @php
                                                    $appointmentTime = '';
                                                    if ($val->fromtime && $val->totime) {
                                                        $appointmentTime = $val->fromtime . ' - ' . $val->totime;
                                                    }
                                                @endphp
                                                <small class="mx-2">:</small> {{ $val->bookingdate }}&nbsp;&nbsp;{{ $appointmentTime }}
											</li>
											<li class="d-flex align-items-center mb-2">
												<span class="book-item font-weight-bold">{{__('Amount')}}</span> <small class="mx-2">:</small> 
												@if($val->reschedule_status == 1)
													{{ $data['currency'] }}{{ $val->total_amount }} + ${{ $val->reschedule_amount }}
													<span class="badge badge-soft-warning ms-2">{{__('Rescheduled')}}</span>
												@else
													{{ $data['currency'] }}{{ $val->total_amount }}
												@endif
												<span class="badge badge-soft-primary ms-2">{{ $val->paymenttype }}</span>
											</li>
											<li class="d-flex align-items-center mb-2">
												<span class="book-item font-weight-bold">{{__('Location')}}</span> <small class="mx-2">:</small> {{ $val->user_city }}
											</li>
											<li class="d-flex align-items-center flex-wrap">
												<span class="book-item font-weight-bold">{{__('Provider')}}</span> <small class="mx-2">:</small>
												<div class="user-book d-flex align-items-center flex-wrap">
													<div class="avatar avatar-xs me-2">
														<img src="{{ $val->profile_image }}" alt="User Profile Image" class="img-fluid rounded-circle profileImagePreview">
													</div>
													<span class="me-4">{{ $val->provider_name ?? '' }}</span>
												</div>
												@if($val->booking_status_label=='Open')
												@if($val->email!='')
												<p class="mb-0 me-2"><i class="ti ti-mail fs-10 text-muted me-1"></i> {{($val->email ?? null) ? maskEmail($val->email) : ''}}</p>
												@endif
												@if($val->phone_number!='')
												<p><i class="ti ti-phone-filled fs-10 text-muted me-2"></i>{{ ($val->phone_number ?? null) ? mask_mobile_number($val->phone_number) : '' }}
												</p>
												@endif
												@else
												@if($val->email!='')
												<p class="mb-0 me-3"><i class="ti ti-mail fs-10 text-muted me-1"></i> {{$val->email ?? ''}}</p>
												@endif
												@if($val->phone_number!='')
												<p><i class="ti ti-phone-filled fs-10 text-muted me-2"></i> {{ $val->phone_number ?? '' }}</p>
												@endif
												@endif
											</li>
											@if(!empty($val->coupon_code))
											<li class="d-flex align-items-center mb-2 mt-2">
												<span class="book-item font-weight-bold">{{ __('Coupon Applied') }}</span>
												<small class="mx-2">:</small>
												{{ $val->coupon_code }}
											</li>
											@endif

										</ul>

										<div class="mt-3 d-flex gap-5">
											<a class="raise-dispute-btn text-danger fs-14"
												href="#"
												data-bs-toggle="modal"
												data-bs-target="#reschedule"
												data-booking-id="{{ $val->id }}">
												<i class="ti ti-pennant-filled me-2"></i>{{__('Raise Dispute')}}
											</a>
											@if($val->booking_status_label == 'Refund Completed')
											<a class="viewpaymentproof" href="javascript:void(0);" data-bookingid="{{ $val->id }}" data-proof="{{ $val->payment_proof_url ?? '' }}">
												<i class="ti ti-file fs-20"></i><span>{{__('View Proof')}}</span>
											</a>
											@endif
										</div>
								</div>
							</div>

							@if($val->booking_status_label == 'Customer Cancelled' || $val->booking_status_label == 'Provider Cancelled' )
							<div class="refunddiv{{ $val->id }}">
								<a class="btn btn-success refund" data-bs-toggle="modal" data-bs-target="#refund" data-id="{{ $val->id }}">{{__('Refund')}}</a>
							</div>
							@elseif($val->booking_status_label == 'Completed')
							<div class="orderdiv{{ $val->id }}">
								<a class="btn btn-success ordercomplete" data-bs-toggle="modal" data-bs-target="#orderclose" data-id="{{ $val->id }}">{{__('Order Complete')}}</a>
							</div>
							@elseif($val->booking_status_label == 'Open')
							<div class="orderdiv{{ $val->id }}">
								<a href="#" class="btn btn-danger cancel cancel-btn-{{ $val->id }}" data-bs-toggle="modal" data-bs-target="#cancel_appointment" data-id="{{$val->id}}">{{__('Cancel')}}</a>
								<a class="btn btn-primary reschedule mt-2 reschedule-btn-{{ $val->id }}" data-payment_type="{{ $val->payment_type }}" data-bs-toggle="modal" data-bs-target="#rescheduleModal" data-booking-id="{{ $val->id }}" data-id="{{ $val->product_id }}" data-provider-id="{{ $val->provider_id ?? '' }}" style="display: none;">{{__('Reschedule')}}</a>
							</div>
							@elseif($val->booking_status_label == 'User Cancelled')
							<div class="refunddiv{{ $val->id }}">
								<a class="btn btn-success refund" data-bs-toggle="modal" data-bs-target="#refund" data-id="{{ $val->id }}">{{__('Refund')}}</a>
							</div>
							@elseif($val->booking_status_label == 'Order Completed')
							@if(is_null($val->payment_type))

									<div class="orderdiv{{ $val->id }}">
										<a href="#"
										class="btn btn-warning make-payment-btn"
										data-bs-toggle="modal"
										data-bs-target="#makePaymentModal"
										data-booking-id="{{ $val->id }}"
										data-chore-id="{{ $val->chore_id }}"
										data-amount="{{ $val->total_amount }}">
										Make Payment
										</a>
									</div>

								@else
								@if ($val->review)
									<a href="#!" class="booking_details_btn btn btn-success" data-bs-toggle="modal" data-bs-target="#booking_details" data-booking-details-id="{{ $val->id }}">
										{{__('View Order')}}
									</a>
								@else
								<div class="orderdiv{{ $val->id }}">
									<a href="#!" class="btn btn-success add_review_btn" data-bs-toggle="modal"
										data-bs-target="#add-review"
										data-id="{{$val->id}}"
										data-booking_id="{{ $val->id }}"
										data-product_id="{{ $val->product_id }}">
										{{__('add_review')}}</a>
								</div>
								@endif
								@endif
							@endif
						</div>
					</div>
					@endforeach
					@else
					<div class="card shadow-none booking-list h-80">
						<div class="card-body d-flex align-items-center justify-content-center">
							<p class="fw-bold">{{__('No Bookings Available')}}</p>
						</div>
					</div>
					@endif

				</div>
			</div>
			<div class="d-flex justify-content-center">
				{{ $data['bookingdata']->links('pagination::bootstrap-4') }}
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="add-review" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header d-flex align-items-center justify-content-between">
				<h5>{{ __('add_review') }}</h5>
				<a href="javascript:void(0);" data-bs-dismiss="modal" aria-label="Close"><i class="ti ti-circle-x-filled fs-20"></i></a>
			</div>
			<form id="addCommentsForm">
				<div class="modal-body">
					<input type="hidden" id="user_id" value="{{ Auth::id() }}">
					<input type="hidden" id="review_booking_id" name="review_booking_id">
					<input type="hidden" id="review_product_id" name="review_product_id">
					<div class="mb-3">
						<label class="form-label">{{ __('rate_your_review') }}</label>
						<div class="rating-select mb-0">
							<a href="javascript:void(0);"><i class="fas fa-star"></i></a>
							<a href="javascript:void(0);"><i class="fas fa-star"></i></a>
							<a href="javascript:void(0);"><i class="fas fa-star"></i></a>
							<a href="javascript:void(0);"><i class="fas fa-star"></i></a>
							<a href="javascript:void(0);"><i class="fas fa-star"></i></a>
						</div>
					</div>
					<div class="mb-0">
						<label class="form-label">{{ __('write_your_review') }}</label>
						<textarea class="form-control" name="review" id="review" rows="3" maxlength="350"></textarea>
						<span class="error-text text-danger" id="review_error"></span>
					</div>
				</div>
				<div class="modal-footer d-flex align-items-center justify-content-end">
					<a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">{{ __('Cancel') }}</a>
					<button type="submit" class="btn btn-primary" id="save_comment_btn">{{ __('Save') }}</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="modal fade custom-modal" id="reschedule">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header d-flex align-items-center justify-content-between border-bottom">
				<h5 class="modal-title">{{__('Raise Dispute')}}</h5>
				<a href="javascript:void(0);" data-bs-dismiss="modal" aria-label="Close"><i class="ti ti-circle-x-filled fs-20"></i></a>
			</div>
			<div class="modal-body">
				<div id="loadingMessage" style="display: none; text-align: center; font-weight: bold; font-style: italic;">
					{{__('Loading, please wait...')}}
				</div>

				<!-- Dispute Form -->
				<form id="raiseDispute" style="display: none;">
					{{ csrf_field() }}
					<input type="hidden" name="booking_id" id="booking_id" value="">
					<input type="hidden" name="product_id" id="product_id" value="">
					<input type="hidden" name="provider_id" id="provider_id" value="">

					<div class="card-body p-3">
                        <input type="hidden" name="booking_date" id="selected_date" value="">
                        <input type="hidden" name="from_time" id="from_time" value="">
                        <input type="hidden" name="to_time" id="to_time" value="">
                        <input type="text" class="form-control d-none" id="rescheduleDatePicker">
                        <div class="bookingDatepic"></div>
                    </div>
					<div class="row">
						<div class="col-md-12">
							<div class="mb-3">
								<label class="form-label">{{__('Subject')}} <span class="text-danger">*</span></label>
								<input type="text" name="subject" id="subject" class="form-control" placeholder="{{ __('Enter Subject') }}">
								<span class="invalid-feedback" id="subject_error" data-required="{{ __('this_field_required') }}"></span>
							</div>
						</div>

						<div class="col-md-12">
							<div class="mb-3">
								<label class="form-label">{{__('Content')}} <span class="text-danger">*</span></label>
								<textarea name="content" id="content" class="form-control" rows="5" placeholder="{{ __('Enter Content') }}"></textarea>
								<span class="invalid-feedback" id="content_error"></span>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">{{__('Cancel')}}</a>
						<button class="btn btn-dark btn_dispute" type="submit">{{__('Save')}}</button>
					</div>
				</form>

				<!-- Admin Reply Section -->
				<!-- Admin Reply Section -->
				<div id="adminReplySection" style="display: none;">
					<div class="mb-3">
						<label class="form-label fw-bold">{{__('Subject')}} :</label>
						<input type="text" id="admin_subject" class="form-control border-0 text-danger fw-bold" readonly>
					</div>
					<div class="mb-3">
						<label class="form-label fw-bold">{{__('Content')}} :</label>
						<textarea id="admin_content" class="form-control border-0 text-danger fw-bold" rows="2" readonly></textarea>
					</div>
					<hr style="border: 1px solid #000; margin: 10px 0;">
					<div class="mb-3">
						<label class="form-label fw-bold">{{__('Admin Reply')}}:</label>
						<textarea id="admin_reply" class="form-control border-0 fw-bold" rows="5" readonly></textarea>
					</div>
				</div>


			</div>


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

<div class="modal fade custom-modal" id="cancel_appointment">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header d-flex align-items-center justify-content-between border-bottom">
				<h5 class="modal-title">{{__('Cancel Booking')}}</h5>
				<a href="javascript:void(0);" data-bs-dismiss="modal" aria-label="Close"><i class="ti ti-circle-x-filled fs-20"></i></a>
			</div>
			<form>
				<div class="modal-body">
					<p>{{__('Are you sure you want to cancel this booking?')}}</p>
					
					<!-- Cancellation Policy Section -->
					<div id="cancellation-policy-section" class="mt-3" style="display: none;">
						<hr>
						<h6 class="fw-bold mb-3">{{__('Cancellation Policy')}}</h6>
						<div id="cancellation-policy-content">
							<div class="text-center">
								<div class="spinner-border spinner-border-sm me-2"></div>
								{{__('Loading cancellation policy...')}}
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<div class="acc-submit">
						<a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">{{__('Dismiss')}}</a>
						<button class="btn btn-dark cancelbooking bookingid" data-id="" data-type="8" data-yes_cancel="{{ __('Yes, Cancel') }}" type="button">{{__('Yes, Cancel')}}</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="modal fade custom-modal" id="refund">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header d-flex align-items-center justify-content-between border-bottom">
				<h5 class="modal-title">{{__('Refund Process')}}</h5>
				<a href="javascript:void(0);" data-bs-dismiss="modal" aria-label="Close"><i class="ti ti-circle-x-filled fs-20"></i></a>
			</div>
			<form>
				<div class="modal-body">
					<p>{{__('Are you sure you want to Initiate Refund Process?')}}</p>
					</p>
				</div>
				<div class="modal-footer">
					<div class="acc-submit">
						<a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">{{__('Dismiss')}}</a>
						<button class="btn btn-success refundprocess" type="submit" data-id='' data-type='4' data-yes="{{ __('Yes') }}">{{__('Yes')}}</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="modal fade custom-modal" id="orderclose">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header d-flex align-items-center justify-content-between border-bottom">
				<h5 class="modal-title">{{__('Order Complete')}}</h5>
				<a href="javascript:void(0);" data-bs-dismiss="modal" aria-label="Close"><i class="ti ti-circle-x-filled fs-20"></i></a>
			</div>
			<form>
				<div class="modal-body">
					<p>{{__('Are you sure you want to complete order?')}}</p>
					</p>
				</div>
				<div class="modal-footer">
					<div class="acc-submit">
						<a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">{{__('Dismiss')}}</a>
						<button class="btn btn-success ordercompleteprocess" type="submit" data-id='' data-type='6' data-yes="{{ __('Yes') }}">{{__('Yes')}}</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="modal fade" id="dispute_modal" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-body text-center">
				<div class="mb-4">
					<span class="success-icon mx-auto mb-4">
						<i class="ti ti-check"></i>
					</span>
					<h4 class="mb-1">{{ __('Dispute Submitted Successfully') }}</h4>
					<p>{{ __('dispute_submit_success_info') }}</p>
				</div>
				<a href="javascript:void(0);" data-bs-dismiss="modal" class="btn btn-linear-primary">{{__('Close')}}</a>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="booking_details" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">{{ __('Booking Details') }} <span id="order_id" class="badge bg-primary ms-2"></span></h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body fs-12">

				<!-- Service Information -->
				<div class="mb-3">
					<div class="skeleton label-skeleton label-loader w-75"></div>
					<h6 class="fs-16 fw-bold mb-2 text-decoration-underline d-none real-label">{{ __('Service Information') }}</h6>
					<div class="d-flex flex-column gap-2">
						<!-- Service Name -->
						<div class="d-flex align-items-center gap-2">
							<div class="skeleton label-skeleton label-loader flex-grow-1 w-50"></div>
							<label class="d-none real-label d-flex gap-2 w-100">
								<strong class="w-25">{{ __('Service Name') }}</strong>:
								<span class="text-dark flex-grow-1" id="service_name"></span>
							</label>
						</div>

						<!-- Service Code -->
						<div class="d-flex align-items-center gap-2">
							<div class="skeleton label-skeleton label-loader flex-grow-1 w-50"></div>
							<label class="d-none real-label d-flex gap-2 w-100">
								<strong class="w-25">{{ __('service_code') }}</strong>:
								<span class="text-dark flex-grow-1" id="service_code"></span>
							</label>
						</div>

						<!-- Amount -->
						<div class="d-flex align-items-center gap-2">
							<div class="skeleton label-skeleton label-loader flex-grow-1 w-50"></div>
							<label class="d-none real-label d-flex gap-2 w-100">
								<strong class="w-25">{{ __('Service Amount') }}</strong>:
								<span class="text-dark flex-grow-1" id="service_amount"></span>
							</label>
						</div>

						<!-- Total Amount -->
						<div class="d-flex align-items-center gap-2">
							<div class="skeleton label-skeleton label-loader flex-grow-1 w-50"></div>
							<label class="d-none real-label d-flex gap-2 w-100">
								<strong class="w-25">{{ __('Total Amount') }}</strong>:
								<span class="text-dark flex-grow-1" id="total_amount"></span>
							</label>
						</div>

						<div class="d-flex align-items-center gap-2">
							<div class="skeleton label-skeleton label-loader flex-grow-1 w-50"></div>
							<label class="d-none real-label d-flex gap-2 w-100">
								<strong class="w-25">{{ __('booking_status') }}</strong>:
								<span class="text-dark flex-grow-1" id="booking_status"></span>
							</label>
						</div>

						<div class="d-flex align-items-center gap-2">
							<div class="skeleton label-skeleton label-loader flex-grow-1 w-50"></div>
							<label class="d-none real-label d-flex gap-2 w-100">
								<strong class="w-25">{{ __('Payment Status') }}</strong>:
								<span class="text-dark flex-grow-1" id="payment_type"></span>
							</label>
						</div>

						<div class="d-flex align-items-center gap-2">
							<div class="skeleton label-skeleton label-loader flex-grow-1 w-50"></div>
							<label class="d-none real-label d-flex gap-2 w-100">
								<strong class="w-25">{{ __('Payment Type') }}</strong>:
								<span class="text-dark flex-grow-1" id="payment_status"></span>
							</label>
						</div>

						<div class="d-flex align-items-center gap-2">
							<div class="skeleton label-skeleton label-loader flex-grow-1 w-50"></div>
							<label class="d-none real-label d-flex gap-2 w-100">
								<strong class="w-25">{{ __('Booking Date') }}</strong>:
								<span class="text-dark flex-grow-1" id="booking_date"></span>
							</label>
						</div>
					</div>
				</div>

				<div class="additional_service d-none mb-3">
					<h6 class="fs-16 fw-bold mb-2 text-decoration-underline d-none real-label">{{ __('Additional Services') }}</h6>
                    <div class="mb-3" id="additional_service_list"></div>
                </div>

				<!-- Slot Details -->
				<div class="mb-3 slot_info" style="display: none;">
					<div class="skeleton label-skeleton label-loader w-75"></div>
					<h6 class="fs-16 fw-bold mb-2 text-decoration-underline d-none real-label">{{ __('slot_details') }}</h6>
					<div class="d-flex flex-column gap-2">
						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('slot_date') }}</strong>:
							<span class="text-dark flex-grow-1" id="slot_date"></span>
						</label>

						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('slot_day') }}</strong>:
							<span class="text-dark flex-grow-1" id="slot_day"></span>
						</label>

						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('slot_time') }}</strong>:
							<span class="text-dark flex-grow-1" id="slot_time"></span>
						</label>
					</div>
				</div>

				<!-- Buyer Information -->
				<div class="mb-3">
					<div class="skeleton label-skeleton label-loader w-75"></div>
					<h6 class="fs-16 fw-bold mb-2 text-decoration-underline d-none real-label">{{ __('buyer_information') }}</h6>
					<div class="d-flex flex-column gap-2">
						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('name') }}</strong>:
							<span class="text-dark flex-grow-1" id="buyer_name"></span>
						</label>

						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('email') }}</strong>:
							<span class="text-dark flex-grow-1" id="buyer_email"></span>
						</label>

						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('phone_number') }}</strong>:
							<span class="text-dark flex-grow-1" id="buyer_phone"></span>
						</label>

						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('city') }}</strong>:
							<span class="text-dark flex-grow-1" id="buyer_city"></span>
						</label>
					</div>
				</div>

				<!-- Provider Information -->
				<div class="mb-3">
					<div class="skeleton label-skeleton label-loader w-75"></div>
					<h6 class="fs-16 fw-bold mb-2 text-decoration-underline d-none real-label">{{ __('provider_information') }}</h6>
					<div class="d-flex flex-column gap-2">
						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('name') }}</strong>:
							<span class="text-dark flex-grow-1" id="provider_name"></span>
						</label>

						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('email') }}</strong>:
							<span class="text-dark flex-grow-1" id="provider_email"></span>
						</label>

						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('phone_number') }}</strong>:
							<span class="text-dark flex-grow-1" id="provider_mobile"></span>
						</label>
					</div>
				</div>

				<!-- Staff Information -->
				<div class="mb-3 staff_info" style="display: none;">
					<div class="skeleton label-skeleton label-loader w-75"></div>
					<h6 class="fs-16 fw-bold mb-2 text-decoration-underline d-none real-label">{{ __('staff_information') }}</h6>
					<div class="d-flex flex-column gap-2">
						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('name') }}</strong>:
							<span class="text-dark flex-grow-1" id="staff_name"></span>
						</label>

						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('email') }}</strong>:
							<span class="text-dark flex-grow-1" id="staff_email"></span>
						</label>

						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('phone_number') }}</strong>:
							<span class="text-dark flex-grow-1" id="staff_mobile"></span>
						</label>
					</div>
				</div>

				<!-- Branch Information -->
				<div class="mb-3 branch_info" style="display: none;">
					<div class="skeleton label-skeleton label-loader w-75"></div>
					<h6 class="fs-16 fw-bold mb-2 text-decoration-underline d-none real-label">{{ __('Branch Information') }}</h6>
					<div class="d-flex flex-column gap-2">
						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('Branch Name') }}</strong>:
							<span class="text-dark flex-grow-1" id="branch_name"></span>
						</label>

						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('email') }}</strong>:
							<span class="text-dark flex-grow-1" id="branch_email"></span>
						</label>

						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('phone_number') }}</strong>:
							<span class="text-dark flex-grow-1" id="branch_mobile"></span>
						</label>

						<div class="skeleton label-skeleton label-loader w-50"></div>
						<label class="d-none real-label d-flex gap-2">
							<strong class="w-25">{{ __('address') }}</strong>:
							<span class="text-dark flex-grow-1" id="branch_address"></span>
						</label>
					</div>
				</div>

				<!-- Review Information -->
				<div class="mb-3 review-section d-none">
					<h6 class="fs-16 fw-bold mb-2 text-decoration-underline">{{ __('Review Details') }}</h6>
					<div class="d-flex flex-column gap-2">

						<label class="d-flex gap-2">
							<strong class="w-25">{{ __('Rating') }}</strong>:
							<span class="text-dark flex-grow-1 d-flex" id="review_rating"></span>
						</label>

						<label class="d-flex gap-2">
							<strong class="w-25">{{ __('Review') }}</strong>:
							<span class="text-dark flex-grow-1" id="review_text"></span>
						</label>

						<label class="d-flex gap-2 provider_reply_section">
							<strong class="w-25">{{ __('Provider Reply') }}</strong>:
							<span class="text-dark flex-grow-1" id="reply_review"></span>
						</label>

						<label class="d-flex gap-2">
							<strong class="w-25">{{ __('Review Date') }}</strong>:
							<span class="text-dark flex-grow-1" id="review_date"></span>
						</label>
						
					</div>
				</div>

				<!-- Notes -->
				<div class="mb-3 notes_info d-none">
					<div class="skeleton label-skeleton label-loader w-75"></div>
					<h6 class="fs-16 fw-bold mb-2 text-decoration-underline d-none real-label">{{ __('Notes') }}</h6>
					<div class="d-flex flex-column gap-2">
						<div class="skeleton label-skeleton label-loader w-50"></div>
						<span class="text-dark d-none real-label" id="notes"></span>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('close') }}</button>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="makePaymentModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Complete Payment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <form id="make-payment-form">
                @csrf

                <input type="hidden" id="mp_booking_id" name="booking_id">
                <input type="hidden" id="mp_chore_id" name="chore_id">
                <input type="hidden" id="mp_total_amount" name="total_amount">
                <input type="hidden" name="booking_type" value="chore">

                <div class="modal-body">

                    <div class="alert alert-info mb-3">
                        Your booking is confirmed.
                        Please complete the payment to proceed.
                    </div>

                    <div class="mb-3">
                        <label class="fw-bold mb-2 d-block">
                            Choose Payment Method
                        </label>

                        {{-- Stripe --}}
                        @if(($data['paymentInfo']['stripe_status'] ?? 0) == 1)
                        <div class="form-check mb-2">
                            <input class="form-check-input"
                                   type="radio"
                                   name="payment_type"
                                   value="stripe"
                                   checked>
                            <label class="form-check-label">Stripe</label>
                        </div>
                        @endif

                        {{-- COD --}}
                        @if(($data['paymentInfo']['cod_status'] ?? 0) == 1)
                        <div class="form-check mb-2">
                            <input class="form-check-input"
                                   type="radio"
                                   name="payment_type"
                                   value="cod">
                            <label class="form-check-label">
                                Cash on Delivery (COD)
                            </label>
                        </div>
                        @endif

                        {{-- PayPal --}}
                        @if(($data['paymentInfo']['paypal_status'] ?? 0) == 1)
                        <div class="form-check mb-2">
                            <input class="form-check-input"
                                   type="radio"
                                   name="payment_type"
                                   value="paypal">
                            <label class="form-check-label">PayPal</label>
                        </div>
                        @endif

                    </div>

                    <div class="text-end fw-bold fs-16">
                        Amount:
                        {{ $data['currency'] ?? '$' }}
                        <span id="mp_amount_text"></span>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary pay-now-btn">
                        Pay Now
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Reschedule Modal -->
<div class="modal fade custom-modal" id="rescheduleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header d-flex align-items-center justify-content-between border-bottom">
                <h5 class="modal-title">{{__('Reschedule Booking')}}</h5>
                <a href="javascript:void(0);" data-bs-dismiss="modal" aria-label="Close"><i class="ti ti-circle-x-filled fs-20"></i></a>
            </div>
            <form id="rescheduleForm">
                <div class="modal-body">
                    <input type="hidden" id="reschedule_booking_id" name="booking_id">
                    <input type="hidden" id="reschedule_service_id" name="service_id">
                    <input type="hidden" id="reschedule_provider_id" name="provider_id">
                    <input type="hidden" id="reschedule_fee_amount" name="reschedule_fee_amount" value="0">
                    <input type="hidden" id="original_payment_type" name="original_payment_type">
                    <input type="hidden" id="total_amount" name="total_amount">
                    
                    <!-- Step 1: Date & Time Selection -->
                    <div id="rescheduleStep1">
                        <div class="booking-slot">
                            <div class="booking-header mb-3">
                                <div class="d-flex align-items-center mb-2">
                                    <h6 class="fs-16 me-2 mb-2">{{ __('Select Date & Time') }}</h6>
                                </div>
                            </div>
                            <div class="row g-3">
                                <div class="col-md-5">
                                    <h6 class="fs-13 fw-medium mb-2">{{ __('Select date') }}</h6>
                                    <div class="card border mb-0">
                                        <div class="card-body p-3">
                                            <input type="hidden" name="booking_date" id="selected_date" value="">
                                            <input type="hidden" name="from_time" id="from_time" value="">
                                            <input type="hidden" name="to_time" id="to_time" value="">
                                            <input type="text" class="form-control d-none" id="rescheduleDatePicker">
                                            <div class="bookingDatepic"></div>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="time_status" id="time_status">
                                <div class="col-md-7 time-section">
                                    <h6 class="fs-13 fw-medium mb-2">{{ __('Select time') }}</h6>
                                    <div class="slotLoader-skaliaton"></div>
                                    <div class="row g-2 text-center pt-4 fw-bold text-primary" id="slot-input">
                                        <p>{{ __('No slots available at this moment') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Reschedule Fee Information -->
                        <div id="rescheduleFeeInfo" class="alert alert-info mt-3" style="display: none;">
                            <h6 class="alert-heading">{{__('Reschedule Fee')}}</h6>
                            <div class="d-flex justify-content-between align-items-center">
                                <span>{{__('Reschedule Fee Amount')}}</span>
                                <span class="fw-bold" id="rescheduleFeeDisplay">$0.00</span>
                            </div>
                            <small class="text-muted">{{__('This fee will be charged for rescheduling your booking')}}</small>
                        </div>
                    </div>
                    
                    <!-- Step 2: Payment Selection -->
                    <div id="rescheduleStep2" style="display: none;">
                        <div class="payment-section">
                            <h6 class="fs-16 mb-3">{{__('Payment Details')}}</h6>
                            
                            <!-- Payment Methods -->
                            <div class="payment-methods mb-4">
                                <h6 class="fs-13 fw-medium mb-3">{{__('Select Payment Method')}}</h6>
                                
                                {{-- Stripe --}}
                                @if(($data['paymentInfo']['stripe_status'] ?? 0) == 1)
                                <div class="form-check mb-2">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="payment_method"
                                           value="stripe"
                                           id="reschedule_stripe_payment">
                                    <label class="form-check-label" for="reschedule_stripe_payment">
                                        <div class="card">
                                            <div class="card-body p-3">
                                                <div class="d-flex align-items-center">
                                                    <i class="fab fa-stripe fs-20 text-primary me-3"></i>
                                                    <div>
                                                        <h6 class="mb-0">{{__('Stripe')}}</h6>
                                                        <small class="text-muted">{{__('Pay with credit card')}}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                @endif

                                
                                {{-- COD --}}
                                @if(($data['paymentInfo']['cod_status'] ?? 0) == 1)
                                <div class="form-check mb-2 cod_payment_option">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="payment_method"
                                           value="cod"
                                           id="reschedule_cod_payment">
                                    <label class="form-check-label" for="reschedule_cod_payment">
                                        <div class="card">
                                            <div class="card-body p-3">
                                                <div class="d-flex align-items-center">
                                                    <i class="ti ti-cash fs-20 text-primary me-3"></i>
                                                    <div>
                                                        <h6 class="mb-0">{{__('Cash on Delivery')}}</h6>
                                                        <small class="text-muted">{{__('Pay on service day')}}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                @endif

                                {{-- PayPal --}}
                                @if(($data['paymentInfo']['paypal_status'] ?? 0) == 1)
                                <div class="form-check mb-2">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="payment_method"
                                           value="paypal"
                                           id="reschedule_paypal_payment">
                                    <label class="form-check-label" for="reschedule_paypal_payment">
                                        <div class="card">
                                            <div class="card-body p-3">
                                                <div class="d-flex align-items-center">
                                                    <i class="fab fa-paypal fs-20 text-primary me-3"></i>
                                                    <div>
                                                        <h6 class="mb-0">{{__('PayPal')}}</h6>
                                                        <small class="text-muted">{{__('Pay with PayPal')}}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                @endif

                                {{-- Mollie --}}
                                @if(($data['paymentInfo']['mollie_status'] ?? 0) == 1)
                                <div class="form-check mb-2">
                                    <input class="form-check-input"
                                           type="radio"
                                           name="payment_method"
                                           value="mollie"
                                           id="reschedule_mollie_payment">
                                    <label class="form-check-label" for="reschedule_mollie_payment">
                                        <div class="card">
                                            <div class="card-body p-3">
                                                <div class="d-flex align-items-center">
                                                    <i class="ti ti-credit-card fs-20 text-primary me-3"></i>
                                                    <div>
                                                        <h6 class="mb-0">{{__('Mollie')}}</h6>
                                                        <small class="text-muted">{{__('Pay with Mollie')}}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                @endif
                            </div>
                            
                            <!-- Payment Summary at Bottom -->
                            <div class="payment-summary-card">
                                <div class="card border-primary">
                                    <div class="card-header bg-primary text-white">
                                        <h6 class="mb-0">{{__('Payment Summary')}}</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="payment-summary">
                                                    <div class="d-flex justify-content-between mb-2">
                                                        <span class="text-muted">{{__('Original Booking Amount')}}</span>
                                                        <span class="fw-medium" id="originalAmountDisplay">$0.00</span>
                                                    </div>
                                                    <div class="d-flex justify-content-between mb-2">
                                                        <span class="text-muted">{{__('Reschedule Fee')}}</span>
                                                        <span class="fw-medium text-warning" id="rescheduleFeeAmountDisplay">$0.00</span>
                                                    </div>
                                                    <div class="border-top pt-2 mt-2">
                                                        <div class="d-flex justify-content-between">
                                                            <span class="fw-bold">{{__('Total Payable Amount')}}</span>
                                                            <span class="fw-bold text-primary fs-4" id="totalPayableDisplay">$0.00</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4 d-flex align-items-center justify-content-center">
                                                <div class="text-center">
                                                    <i class="ti ti-receipt fs-40 text-primary mb-2"></i>
                                                    <p class="small text-muted mb-0">{{__('Secure Payment')}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">{{__('Cancel')}}</a>
                    <button type="button" class="btn btn-primary" id="proceedBtn" style="display: none;">{{__('Proceed to Payment')}}</button>
                    <button type="submit" class="btn btn-primary" id="rescheduleBtn">{{__('Reschedule')}}</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
<style>
/* Ensure proper date picker alignment in modal */
#rescheduleModal .bootstrap-datetimepicker-widget {
    z-index: 1060 !important;
}

#rescheduleModal .bookingDatepic {
    min-height: 300px;
}

#rescheduleModal .bootstrap-datetimepicker-widget table {
    width: 100%;
}

#rescheduleModal .bootstrap-datetimepicker-widget .picker-switch {
    text-align: center;
    padding: 5px;
}

#rescheduleModal .bootstrap-datetimepicker-widget .table-condensed {
    margin-bottom: 0;
}

#rescheduleModal .bootstrap-datetimepicker-widget td,
#rescheduleModal .bootstrap-datetimepicker-widget th {
    text-align: center;
    padding: 5px;
}

#rescheduleModal .bootstrap-datetimepicker-widget td.day:hover,
#rescheduleModal .bootstrap-datetimepicker-widget td.hour:hover,
#rescheduleModal .bootstrap-datetimepicker-widget td.minute:hover,
#rescheduleModal .bootstrap-datetimepicker-widget td.second:hover {
    background: #f0f0f0;
    cursor: pointer;
}

#rescheduleModal .bootstrap-datetimepicker-widget td.active,
#rescheduleModal .bootstrap-datetimepicker-widget td.active:hover {
    background-color: #007bff;
    color: white;
}

/* Remove box shadow from selected date */
#rescheduleModal .bootstrap-datetimepicker-widget td.active {
    box-shadow: none !important;
}

/* Show date picker by default */
#rescheduleModal .bootstrap-datetimepicker-widget {
    display: block !important;
}

/* Remove card border around date picker */
#rescheduleModal .card.border {
    border: none !important;
    box-shadow: none !important;
}

/* Time slot styling */
#rescheduleModal .btn-check:checked + .btn-outline-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: white !important;
}

#rescheduleModal .btn-outline-primary:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

/* Payment option styling */
.payment-option {
    position: relative;
}

.payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.payment-option input[type="radio"]:checked + label .card {
    border-color: #007bff;
    background-color: #f8f9ff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.payment-option input[type="radio"]:checked + label .card i {
    color: #007bff !important;
}

.payment-option .card {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #dee2e6;
}

.payment-option .card:hover {
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.payment-option label {
    margin-bottom: 0;
    cursor: pointer;
}

/* Center align radio buttons with payment cards */
#rescheduleStep2 .form-check {
    display: flex;
    align-items: center;
    padding-left: 0;
}

#rescheduleStep2 .form-check-input {
    position: relative;
    margin-left: 0;
    margin-right: 12px;
    opacity: 1;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

#rescheduleStep2 .form-check-label {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin-bottom: 0;
}

#rescheduleStep2 .form-check-label .card {
    flex: 1;
    margin: 0;
}

/* Payment summary styling */
.payment-summary .d-flex {
    padding: 0.25rem 0;
}

.payment-summary hr {
    margin: 0.5rem 0;
    border-color: #dee2e6;
}
</style>
@endpush

@push('styles')
<style>
/* Future date button styling */
.future-date-btn:hover {
    background-color: #007bff !important;
    color: white !important;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

.future-date-btn {
    transition: all 0.2s ease;
}

/* Remove muted background for rescheduled bookings - make it consistent */
.booking-list[data-booking-service-id] .card-body[data-status="9"] {
    background-color: transparent;
    opacity: 1;
}
</style>
@endpush

<script>
	document.addEventListener('click', function (e) {

    const btn = e.target.closest('.make-payment-btn');
    if (!btn) return;

    document.getElementById('mp_booking_id').value =
        btn.dataset.bookingId;

    document.getElementById('mp_chore_id').value =
        btn.dataset.choreId;

    document.getElementById('mp_total_amount').value =
        btn.dataset.amount;

    document.getElementById('mp_amount_text').textContent =
        btn.dataset.amount;
});


document.getElementById('make-payment-form')
?.addEventListener('submit', function (e) {

    e.preventDefault();

    const form = this;
    const btn  = form.querySelector('.pay-now-btn');
    const formData = new FormData(form);

    btn.disabled = true;
    btn.innerHTML =
        '<span class="spinner-border spinner-border-sm"></span>';

    fetch('/user/make-payment-booking', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN':
                document.querySelector(
                    'meta[name="csrf-token"]'
                ).getAttribute('content')
        }
    })
    .then(res => res.json())
    .then(response => {

        if (response.data?.checkout_url) {
            window.location.href =
                response.data.checkout_url;
            return;
        }

        toastr.success(response.message);
        location.reload();
    })
    .catch(() => {
        toastr.error('Payment failed');
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = 'Pay Now';
    });
});

// Reschedule functionality
document.addEventListener('click', function (e) {
    const btn = e.target.closest('.reschedule');
    if (!btn) return;

    const bookingId = btn.dataset.bookingId;
    const serviceId = btn.dataset.id;
    const providerId = btn.dataset.providerId;
    

    // If service ID is empty, try to get it from the booking row
    let finalServiceId = serviceId;
    if (!finalServiceId) {
        // Try to find the service ID from the booking data
        const bookingRow = btn.closest('[data-booking-service-id]');
        if (bookingRow) {
            finalServiceId = bookingRow.dataset.bookingServiceId;
        } else {
            }
    }

    if (!finalServiceId) {
        toastr.error('Service ID not found. Please refresh the page and try again.');
        return;
    }

    // Set hidden fields
    document.getElementById('reschedule_booking_id').value = bookingId;
    document.getElementById('reschedule_service_id').value = finalServiceId;
    document.getElementById('reschedule_provider_id').value = providerId || '';
    
    
    // DEBUG: Check if provider ID exists
    if (!providerId) {
    } else {
    }
    
    // Reset form and show step 1
    resetRescheduleForm();
    showRescheduleStep1(true); // Don't reset buttons yet
    
    // Check if provider has reschedule settings first
    checkProviderRescheduleSettings(providerId, bookingId);
});

// Reset reschedule form
function resetRescheduleForm() {
    document.getElementById('selected_date').value = '';
    document.getElementById('from_time').value = '';
    document.getElementById('to_time').value = '';
    document.getElementById('time_status').value = '';
    document.getElementById('slot-input').innerHTML = '<p>{{ __("No slots available at this moment") }}</p>';
    document.getElementById('reschedule_fee_amount').value = '0';
    document.getElementById('original_payment_type').value = '';
    document.getElementById('total_amount').value = '';
    
    // Hide fee info
    document.getElementById('rescheduleFeeInfo').style.display = 'none';
    
    // Reset payment method selection
    document.querySelectorAll('input[name="payment_method"]').forEach(radio => {
        radio.checked = false;
    });
}

// Show reschedule step 1
function showRescheduleStep1(dontResetButtons = false) {
    document.getElementById('rescheduleStep1').style.display = 'block';
    document.getElementById('rescheduleStep2').style.display = 'none';
    
    if (!dontResetButtons) {
        document.getElementById('proceedBtn').style.display = 'none';
        document.getElementById('rescheduleBtn').style.display = 'inline-block';
    }
}

// Show reschedule step 2
function showRescheduleStep2() {
    document.getElementById('rescheduleStep1').style.display = 'none';
    document.getElementById('rescheduleStep2').style.display = 'block';
    document.getElementById('proceedBtn').style.display = 'none';
    document.getElementById('rescheduleBtn').style.display = 'inline-block';
}

// Fetch reschedule fee
function fetchRescheduleFee(bookingId) {
    
    fetch('/get/reschedule-fee?' + new Date().getTime(), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            booking_id: bookingId,
            _timestamp: new Date().getTime()
        })
    })
    .then(response => response.json())
    .then(data => {
            
        if (data.success) {
            const feeData = data.data;
            
            // Update the global provider settings variable from the response
            window.providerHasRescheduleSettings = feeData.has_settings || false;
            
            // Update hidden fields
            document.getElementById('reschedule_fee_amount').value = feeData.reschedule_fee_amount;
            document.getElementById('original_payment_type').value = feeData.original_payment_type;
            document.getElementById('total_amount').value = feeData.original_amount;
            
            
            // Update fee display
            if (feeData.reschedule_fee_amount > 0) {
                document.getElementById('rescheduleFeeDisplay').textContent = feeData.formatted_reschedule_fee_amount;
                document.getElementById('rescheduleFeeInfo').style.display = 'block';
            } else {
                document.getElementById('rescheduleFeeInfo').style.display = 'none';
            }
            
            // Update payment summary displays
            document.getElementById('originalAmountDisplay').textContent = feeData.formatted_original_amount;
            document.getElementById('rescheduleFeeAmountDisplay').textContent = feeData.formatted_reschedule_fee_amount;
            document.getElementById('totalPayableDisplay').textContent = feeData.formatted_total_payable_amount;
            
            // Update button visibility based on provider settings and fee
            const rescheduleFeeAmount = parseFloat(feeData.reschedule_fee_amount);
            const providerHasSettings = window.providerHasRescheduleSettings || false;
            
            
            if (providerHasSettings) {
                document.getElementById('proceedBtn').style.display = 'inline-block';
                document.getElementById('rescheduleBtn').style.display = 'none';
                
                // Check if there are no time slots available, if so, show proceed button immediately
                setTimeout(() => {
                    const timeSlots = document.querySelectorAll('input[name="time_slot"]');
                    if (timeSlots.length === 0) {
                        // Proceed button is already shown, user can click it to go to payment
                    }
                }, 100);
            } else {
                document.getElementById('proceedBtn').style.display = 'none';
                document.getElementById('rescheduleBtn').style.display = 'inline-block';
            }
            
        } else {
            toastr.error('Error calculating reschedule fee');
        }
    })
    .catch(error => {
        toastr.error('Error calculating reschedule fee');
    });
}

// Check if provider has reschedule settings
function checkProviderRescheduleSettings(providerId, bookingId) {
    
    if (!providerId) {
        return;
    }
    
    fetch('/api/check/provider-reschedule-settings', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            provider_id: providerId
        })
    })
    .then(response => {
            if (!response.ok) {
            throw new Error('Network response was not ok: ' + response.status);
        }
        return response.json();
    })
    .then(data => {
        
        if (data.success) {
            // Store the result globally for later use
            window.providerHasRescheduleSettings = data.has_reschedule_settings;
            
            if (data.has_reschedule_settings) {
                // Fetch reschedule fee for this booking
                fetchRescheduleFee(bookingId);
            } else {
                // Hide proceed button and show reschedule button directly
                document.getElementById('proceedBtn').style.display = 'none';
                document.getElementById('rescheduleBtn').style.display = 'inline-block';
            }
        } else {
                // Hide proceed button on error
            document.getElementById('proceedBtn').style.display = 'none';
            document.getElementById('rescheduleBtn').style.display = 'inline-block';
        }
    })
    .catch(error => {
        // Hide proceed button on error
        document.getElementById('proceedBtn').style.display = 'none';
        document.getElementById('rescheduleBtn').style.display = 'inline-block';
    });
}

document.addEventListener('click', function (e) {
    const btn = e.target.closest('.reschedule');
    if (!btn) return;

    let paymentType = btn.dataset.payment_type;

    if (paymentType != 5) {
        document.querySelectorAll('.cod_payment_option')
            .forEach(el => el.classList.add('d-none'));
    } else {
        document.querySelectorAll('.cod_payment_option')
            .forEach(el => el.classList.remove('d-none'));
    }
});

// Initialize date picker when modal is shown
document.getElementById('rescheduleModal').addEventListener('shown.bs.modal', function () {
    const serviceId = document.getElementById('reschedule_service_id').value;
    const providerId = document.getElementById('reschedule_provider_id').value;
    const bookingId = document.getElementById('reschedule_booking_id').value;
    
        
    // Check if provider has reschedule settings
    checkProviderRescheduleSettings(providerId, bookingId);
    
    // Small delay to ensure modal is fully rendered
    setTimeout(() => {
        initializeRescheduleDatePicker(serviceId);
    }, 100);
});

function initializeRescheduleDatePicker(serviceId) {
        
    // Wait for the modal to be fully visible
    const datepickerElement = document.querySelector('#rescheduleModal .bookingDatepic');
        
    if (!datepickerElement) {
        return;
    }
    
    // Destroy existing datetimepicker if it exists
    if ($(datepickerElement).data('DateTimePicker')) {
        $(datepickerElement).data('DateTimePicker').destroy();
    }
    
    // Clear any existing content
    $(datepickerElement).empty();
    
    // Try to initialize datetimepicker (same as service booking)
    try {
        $(datepickerElement).datetimepicker({
            format: "DD-MM-YYYY",
            keepOpen: true,
            inline: true,
            icons: {
                up: "fas fa-angle-up",
                down: "fas fa-angle-down",
                next: "fas fa-angle-right",
                previous: "fas fa-angle-left",
            },
            minDate: moment(), // Disables past dates
        }).on('dp.change', function(e) {
            const selectedDate = moment(e.date).format('DD-MM-YYYY');
            document.getElementById('selected_date').value = selectedDate;
            
            // Load slots for selected date
            loadRescheduleSlots(serviceId, selectedDate);
        });
        
        // Set today's date by default
        const today = moment().format('DD-MM-YYYY');
        document.getElementById('selected_date').value = today;
        
        // Set the date on the picker
        $(datepickerElement).data('DateTimePicker').date(moment(today, 'DD-MM-YYYY'));
        
                
        // Load slots for today
        loadRescheduleSlots(serviceId, today);
        
    } catch (error) {
        
        // Fallback: create a simple date input
        $(datepickerElement).html(`
            <input type="date" class="form-control" id="fallbackDatePicker" 
                   min="${moment().format('YYYY-MM-DD')}" 
                   value="${moment().format('YYYY-MM-DD')}">
        `);
        
        // Add event listener for fallback
        document.getElementById('fallbackDatePicker').addEventListener('change', function(e) {
            const selectedDate = moment(e.target.value).format('DD-MM-YYYY');
            document.getElementById('selected_date').value = selectedDate;
            loadRescheduleSlots(serviceId, selectedDate);
        });
        
        // Initialize with today's date
        const today = moment().format('DD-MM-YYYY');
        document.getElementById('selected_date').value = today;
        loadRescheduleSlots(serviceId, today);
    }
}

function loadRescheduleSlots(serviceId, selectedDate) {
        
    if (!serviceId) {
        document.getElementById('slot-input').innerHTML = '<div class="col-12"><p class="text-danger">Service ID not found. Please refresh the page.</p></div>';
        return;
    }
    
    // Ensure date is in DD-MM-YYYY format before sending to backend
    let formattedDate = selectedDate;
    if (selectedDate.includes('/')) {
        // Convert MM/DD/YYYY to DD-MM-YYYY
        const dateParts = selectedDate.split('/');
        if (dateParts.length === 3) {
            const month = dateParts[0].padStart(2, '0');
            const day = dateParts[1].padStart(2, '0');
            const year = dateParts[2];
            formattedDate = `${day}-${month}-${year}`;
        }
    }
    
    // Show loading
    document.getElementById('slot-input').innerHTML = '<div class="col-12"><div class="spinner-border spinner-border-sm me-2"></div>Loading slots...</div>';
    
    // Use existing get-slots API with correctly formatted date
    const payload = `service_id=${serviceId}&selected_date=${formattedDate}`;
        
    fetch('/get-slots', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: payload
    })
    .then(response => {
                        
        // Check if response is JSON
        if (!response.headers.get('content-type')?.includes('application/json')) {
            throw new Error(`Server returned non-JSON response (status: ${response.status})`);
        }
        
        return response.json();
    })
    .then(data => {
                const slotContainer = document.getElementById('slot-input');
        slotContainer.innerHTML = '';
        
        if (data.slot && data.slot.length > 0) {
            data.slot.forEach(slot => {
                const slotDiv = document.createElement('div');
                slotDiv.className = 'col-md-4 mb-2';
                slotDiv.innerHTML = `
                    <div class="slot-item" data-slot-id="${slot.id}" data-slot-time="${slot.source_values}">
                        <input type="radio" name="time_slot" id="reschedule_slot_${slot.id}" value="${slot.source_values}" class="btn-check">
                        <label class="btn btn-outline-primary w-100" for="reschedule_slot_${slot.id}">
                            ${slot.source_values}
                        </label>
                    </div>
                `;
                slotContainer.appendChild(slotDiv);
            });
            
            // Add click handlers for slot selection
            document.querySelectorAll('.slot-item').forEach(item => {
                item.addEventListener('click', function() {
                    const slotTime = this.dataset.slotTime;
                    
                    // Try different parsing methods
                    let fromTime, toTime;
                    
                    if (slotTime.includes(' - ')) {
                        // Format: "09:00 - 10:00"
                        const times = slotTime.split(' - ');
                        fromTime = times[0].trim();
                        toTime = times[1].trim();
                    } else if (slotTime.includes('-')) {
                        // Format: "09:00-10:00"
                        const times = slotTime.split('-');
                        fromTime = times[0].trim();
                        toTime = times[1].trim();
                    } else if (slotTime.includes(':')) {
                        // Format: "12:00" (single time)
                        fromTime = slotTime;
                        toTime = slotTime;
                    } else {
                        // Format: "12" (hour only)
                        fromTime = slotTime + ':00';
                        toTime = slotTime + ':00';
                    }
                    
                    
                    document.getElementById('from_time').value = fromTime;
                    document.getElementById('to_time').value = toTime;
                    document.getElementById('time_status').value = 'yes';
                });
            });
            
            // Add radio button change handler to check reschedule fee when slot is selected
            document.querySelectorAll('input[name="time_slot"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    
                    // Check if there's a fee to pay and if provider has reschedule settings
                    const rescheduleFeeAmount = parseFloat(document.getElementById('reschedule_fee_amount').value);
                    const providerHasSettings = window.providerHasRescheduleSettings || false;
                    
                    if (providerHasSettings && rescheduleFeeAmount > 0) {
                        document.getElementById('proceedBtn').style.display = 'inline-block';
                        document.getElementById('rescheduleBtn').style.display = 'none';
                        // Allow direct payment without fee confirmation alert
                    } else {
                                                document.getElementById('proceedBtn').style.display = 'none';
                        document.getElementById('rescheduleBtn').style.display = 'inline-block';
                    }
                });
            });
        } else if (data.slot_availability && data.slot_availability.length > 0) {
            // Show future availability
            let availabilityHtml = '<div class="col-12"><p class="text-warning mb-2">No slots available for the given date</p>';
            availabilityHtml += '<p class="mb-2">Future availability date:</p><div class="d-flex flex-wrap gap-2">';
            
            data.slot_availability.forEach(date => {
                availabilityHtml += `<span class="badge bg-light text-dark border future-date-btn" data-date="${date}" style="cursor: pointer;">${date}</span>`;
            });
            
            availabilityHtml += '</div></div>';
            slotContainer.innerHTML = availabilityHtml;
            
            // Add click handlers for future dates
            document.querySelectorAll('.future-date-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const selectedDate = this.dataset.date; // Already in DD-MM-YYYY format
                    
                    // Update the date picker
                    const datepickerElement = document.querySelector('#rescheduleModal .bookingDatepic');
                    if (datepickerElement && $(datepickerElement).data('DateTimePicker')) {
                        // Create moment object with the DD-MM-YYYY format
                        const momentDate = moment(selectedDate, 'DD-MM-YYYY');
                        
                        // Update the date picker
                        $(datepickerElement).data('DateTimePicker').date(momentDate);
                        
                        // Update hidden field
                        document.getElementById('selected_date').value = selectedDate;
                        
                        // Load slots for the selected date
                        const serviceId = document.getElementById('reschedule_service_id').value;
                        loadRescheduleSlots(serviceId, selectedDate);
                    } else {
                    }
                });
            });
        } else {
            slotContainer.innerHTML = '<div class="col-12"><p>{{ __("No slots available") }}</p></div>';
        }
    })
    .catch(error => {
        let errorMessage = 'Failed to load slots';
        
        if (error.message.includes('non-JSON response')) {
            errorMessage = 'Server error. Please check if the service ID is valid.';
        }
        
        document.getElementById('slot-input').innerHTML = `<div class="col-12"><p class="text-danger">${errorMessage}</p></div>`;
    });
}

let currentRefundAmount = 0;

// Cancel booking functionality
document.addEventListener('click', function (e) {
    const btn = e.target.closest('.cancel');
    if (!btn) return;

    const bookingId = btn.dataset.id;
    if (!bookingId) return;

    // Set the booking ID on the cancel button in modal
    const modalCancelBtn = document.querySelector('#cancel_appointment .cancelbooking');
    if (modalCancelBtn) {
        modalCancelBtn.dataset.id = bookingId;
    }

    // Show cancellation policy section
    const policySection = document.getElementById('cancellation-policy-section');
    const policyContent = document.getElementById('cancellation-policy-content');
    
    if (policySection && policyContent) {
        policySection.style.display = 'block';
        policyContent.innerHTML = `
            <div class="text-center">
                <div class="spinner-border spinner-border-sm me-2"></div>
                {{__('Loading cancellation policy...')}}
            </div>
        `;

        // Disable the cancel button while loading
        const modalCancelBtn = document.querySelector('#cancel_appointment .cancelbooking');
        if (modalCancelBtn) {
            modalCancelBtn.disabled = true;
            modalCancelBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{__('Loading...')}}';
        }

        // Fetch cancellation policy
        fetch('/get/cancellation-policy?' + new Date().getTime(), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                booking_id: bookingId,
                _timestamp: new Date().getTime() // Cache-busting
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const policy = data.data;

                currentRefundAmount = policy.current_refund?.amount ?? 0;
                
                // Check if cancellation is allowed based on new logic
                const canCancel = policy.can_cancel !== false; // Default to true if not specified
                
                policyContent.innerHTML = `
                    <div class="booking-time-details">
                        <div class="row mb-3">
                            <div class="col-12">
                                <div class="alert alert-light border">
                                    <strong>{{__('Total Booking Amount')}}:</strong> 
                                    <span class="float-end">${policy.formatted_total_amount}</span>
                                </div>
                            </div>
                        </div>
                        
                        ${!canCancel ? `
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-danger mb-3">
                                    <i class="ti ti-alert-circle me-2"></i>
                                    <strong>{{__('Cancellation Not Allowed')}}</strong>
                                    <div>{{__('Cancellation is not allowed within the minimum time limit specified by the provider.')}}</div>
                                </div>
                            </div>
                        </div>
                        ` : ''}
                        
                        ${policy.booking_slot ? `
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-success mb-0">
                                    <strong>{{__('Current Refund Amount')}}:</strong> 
                                    <span class="float-end"><strong>${policy.current_refund.formatted_amount}</strong></span>
                                </div>
                            </div>
                        </div>
                        ` : `
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-warning mb-0">
                                    <i class="ti ti-alert-triangle me-2"></i>
                                    <strong>{{__('Cannot Calculate Refund')}}</strong>
                                    <div>{{__('Booking time information is not available. Please contact support for assistance.')}}</div>
                                </div>
                            </div>
                        </div>
                        `}
                `;
                
                // Enable/disable the cancel button based on can_cancel flag
                const modalCancelBtn = document.querySelector('#cancel_appointment .cancelbooking');
                if (modalCancelBtn) {
                    if (canCancel) {
                        modalCancelBtn.disabled = false;
                        modalCancelBtn.innerHTML = '{{__('Yes, Cancel')}}';
                        modalCancelBtn.classList.remove('disabled');
                    } else {
                        modalCancelBtn.disabled = true;
                        modalCancelBtn.innerHTML = '{{__('Cancellation Not Allowed')}}';
                        modalCancelBtn.classList.add('disabled');
                    }
                }
            } else {
                policyContent.innerHTML = `
                    <div class="alert alert-warning">
                        <i class="ti ti-alert-triangle me-2"></i>
                        ${data.message || '{{__('Unable to load cancellation policy')}}'}
                    </div>
                `;
                
                // Enable the cancel button even on error
                const modalCancelBtn = document.querySelector('#cancel_appointment .cancelbooking');
                if (modalCancelBtn) {
                    modalCancelBtn.disabled = false;
                    modalCancelBtn.innerHTML = modalCancelBtn.dataset.yes_cancel || '{{__('Yes, Cancel')}}';
                }
            }
        })
        .catch(error => {
            policyContent.innerHTML = `
                <div class="alert alert-danger">
                    <i class="ti ti-alert-circle me-2"></i>
                    {{__('Error loading cancellation policy. Please try again.')}}
                </div>
            `;
            
            // Enable the cancel button even on error
            const modalCancelBtn = document.querySelector('#cancel_appointment .cancelbooking');
            if (modalCancelBtn) {
                modalCancelBtn.disabled = false;
                modalCancelBtn.innerHTML = modalCancelBtn.dataset.yes_cancel || '{{__('Yes, Cancel')}}';
            }
        });
    }
});

// Handle the actual cancel booking action
document.addEventListener('click', function (e) {
    if (!e.target.matches('.cancelbooking.bookingid')) return;
    
    const bookingId = e.target.dataset.id;
    if (!bookingId) {
        toastr.error('{{__('Booking ID not found')}}');
        return;
    }

    // Show loading state
    const originalText = e.target.textContent;
    e.target.disabled = true;
    e.target.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{__('Processing...')}}';

    // Make AJAX call to cancel booking
    fetch('/api/updatebookingstatus', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: `id=${bookingId}&status=8&refund_amount=${currentRefundAmount}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.code === 200) {
            toastr.success('{{__('Booking cancelled successfully')}}');
            bootstrap.Modal.getInstance(document.getElementById('cancel_appointment')).hide();
            setTimeout(() => location.reload(), 1500);
        } else {
            toastr.error(data.message || '{{__('Failed to cancel booking')}}');
        }
    })
    .catch(error => {
        toastr.error('{{__('Error cancelling booking. Please try again.')}}');
    })
    .finally(() => {
        // Restore button state
        e.target.disabled = false;
        e.target.textContent = originalText;
    });
});

// Proceed button handler - move to payment step
document.getElementById('proceedBtn').addEventListener('click', function() {
    // Validate date and time selection
    const selectedDate = document.getElementById('selected_date').value;
    const timeSlot = document.querySelector('input[name="time_slot"]:checked');
    
    if (!selectedDate || !timeSlot) {
        toastr.error('Please select a date and time slot first');
        return;
    }
    
    // Move to payment step
    showRescheduleStep2();
});

document.getElementById('rescheduleForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Check which step we're on
    const isStep2Visible = document.getElementById('rescheduleStep2').style.display !== 'none';
    
    if (isStep2Visible) {
        // Payment step - validate payment method and process payment
        const paymentMethod = document.querySelector('input[name="payment_method"]:checked');
        
        if (!paymentMethod) {
            toastr.error('Please select a payment method');
            return;
        }
        
        // Process payment based on method
        processReschedulePayment(paymentMethod.value);
        
    } else {
        // Date/time selection step - validate and show proceed button
        const bookingId = document.getElementById('reschedule_booking_id').value;
        const serviceId = document.getElementById('reschedule_service_id').value;
        const selectedDate = document.getElementById('selected_date').value;
        const timeSlot = document.querySelector('input[name="time_slot"]:checked');
        
        if (!bookingId || !serviceId || !selectedDate || !timeSlot) {
            toastr.error('Please select a date and time slot');
            return;
        }
        
        
        // Check if there's a fee to pay
        const rescheduleFeeAmount = parseFloat(document.getElementById('reschedule_fee_amount').value);
        
        if (rescheduleFeeAmount > 0) {
            // Show proceed button for payment - DON'T submit form
            document.getElementById('proceedBtn').style.display = 'inline-block';
            document.getElementById('rescheduleBtn').style.display = 'none';
            // Allow direct payment without fee confirmation alert
            return false; // Prevent form submission
        } else {
            // No fee - process reschedule directly
            processRescheduleWithoutPayment();
        }
    }
});

// Process reschedule payment
function processReschedulePayment(paymentMethod) {
    const bookingId = document.getElementById('reschedule_booking_id');
    const serviceId = document.getElementById('reschedule_service_id');
    const selectedDate = document.getElementById('selected_date');
    const timeSlot = document.querySelector('input[name="time_slot"]:checked');
    const rescheduleFeeAmount = document.getElementById('reschedule_fee_amount');
    const originalPaymentType = document.getElementById('original_payment_type');
    const totalAmount = document.getElementById('total_amount');
    
    // Check if all required elements exist
    if (!bookingId || !serviceId || !selectedDate || !timeSlot || !rescheduleFeeAmount || !originalPaymentType || !totalAmount) {
        alert('Please fill all required fields and select a time slot.');
        return;
    }
    
    // Check if time slot is selected
    if (!timeSlot.checked) {
        alert('Please select a time slot.');
        return;
    }
    
    const formData = new FormData();
    formData.append('booking_id', bookingId.value);
    formData.append('service_id', serviceId.value);
    formData.append('booking_date', selectedDate.value);
    formData.append('time_slot', timeSlot.value);
    formData.append('reschedule_fee_amount', rescheduleFeeAmount.value);
    formData.append('original_payment_type', originalPaymentType.value);
    formData.append('total_amount', totalAmount.value);
    formData.append('payment_method', paymentMethod);
    formData.append('reschedule_status', '1');
    
    const btn = document.getElementById('rescheduleBtn');
    
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> {{__("Processing Payment...")}}';
    
    fetch('/user/reschedule-booking-payment', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            if (data.payment_required && data.payment_url) {
                // Redirect to payment gateway
                window.location.href = data.payment_url;
            } else {
                // Payment processed successfully
                toastr.success(data.message);
                bootstrap.Modal.getInstance(document.getElementById('rescheduleModal')).hide();
                setTimeout(() => location.reload(), 1500);
            }
        } else {
            toastr.error(data.message);
        }
    })
    .catch(error => {
        toastr.error('Error processing reschedule payment');
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = '{{__("Reschedule")}}';
    });
}

// Process reschedule without payment
function processRescheduleWithoutPayment() {
    const bookingId = document.getElementById('reschedule_booking_id').value;
    const serviceId = document.getElementById('reschedule_service_id').value;
    const selectedDate = document.getElementById('selected_date').value;
    const timeSlot = document.querySelector('input[name="time_slot"]:checked');
    
    const formData = new FormData();
    formData.append('booking_id', bookingId);
    formData.append('service_id', serviceId);
    formData.append('booking_date', selectedDate);
    formData.append('time_slot', timeSlot.value);
    formData.append('reschedule_fee_amount', '0');
    formData.append('reschedule_status', '1');
    
    const btn = document.getElementById('rescheduleBtn');
    
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> {{__("Processing...")}}';
    
    fetch('/user/reschedule-booking', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            toastr.success(data.message);
            bootstrap.Modal.getInstance(document.getElementById('rescheduleModal')).hide();
            setTimeout(() => location.reload(), 1500);
        } else {
            toastr.error(data.message);
        }
    })
    .catch(error => {
        toastr.error('Error rescheduling booking');
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = '{{__("Reschedule")}}';
    });
}

// Check reschedule policies for all bookings on page load
document.addEventListener('DOMContentLoaded', function() {
    // Get all booking elements that have reschedule buttons
    const rescheduleButtons = document.querySelectorAll('[class*="reschedule-btn-"]');
    const cancelButtons = document.querySelectorAll('[class*="cancel-btn-"]');
    
    // Create an array of booking IDs to check
    const bookingIds = [];
    
    // Add booking IDs from reschedule buttons
    rescheduleButtons.forEach(button => {
        const bookingId = button.dataset.bookingId;
        if (bookingId && !bookingIds.includes(bookingId)) {
            bookingIds.push(bookingId);
        }
    });
    
    // Add booking IDs from cancel buttons
    cancelButtons.forEach(button => {
        const bookingId = button.dataset.bookingId;
        if (bookingId && !bookingIds.includes(bookingId)) {
            bookingIds.push(bookingId);
        }
    });
    
    // Check policies for each booking
    bookingIds.forEach(bookingId => {
        checkReschedulePolicy(bookingId);
        checkCancellationPolicy(bookingId);
    });
});

function checkReschedulePolicy(bookingId) {
    fetch('/get/reschedule-policy?' + new Date().getTime(), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            booking_id: bookingId,
            _timestamp: new Date().getTime()
        })
    })
    .then(response => response.json())
    .then(data => {
        
        if (data.success) {
            const rescheduleBtn = document.querySelector('.reschedule-btn-' + bookingId);
            const cancelBtn = document.querySelector('.cancel-btn-' + bookingId);
            const statusBadge = document.querySelector('.bookingstatus' + bookingId);
            
            if (rescheduleBtn || cancelBtn || statusBadge) {
                const policy = data.data;
                
                // Handle reschedule button
                if (rescheduleBtn) {
                    if (policy.reschedule_allowed) {
                        // Show the reschedule button
                        rescheduleBtn.style.display = 'inline-block';
                    } else {
                        // Hide the reschedule button
                        rescheduleBtn.style.display = 'none';
                    }
                }
                
                // Handle cancel button and status badge when booking time is completed
                if (policy.is_booking_time_completed) {
                    // Hide cancel button when booking time is completed
                    if (cancelBtn) {
                        cancelBtn.style.display = 'none';
                    }
                    
                    // Hide status badge when booking time is completed
                    if (statusBadge) {
                        statusBadge.style.display = 'none';
                    }
                } else {
                    // Show cancel button if booking time is not completed
                    if (cancelBtn) {
                        cancelBtn.style.display = 'inline-block';
                    }
                    
                    // Show status badge if booking time is not completed
                    if (statusBadge) {
                        statusBadge.style.display = 'inline-block';
                    }
                }
            }
        } else {
                // Hide buttons on error to be safe
            const rescheduleBtn = document.querySelector('.reschedule-btn-' + bookingId);
            const cancelBtn = document.querySelector('.cancel-btn-' + bookingId);
            if (rescheduleBtn) {
                rescheduleBtn.style.display = 'none';
            }
            if (cancelBtn) {
                cancelBtn.style.display = 'none';
            }
        }
    })
    .catch(error => {
        // Hide buttons on error to be safe
        const rescheduleBtn = document.querySelector('.reschedule-btn-' + bookingId);
        const cancelBtn = document.querySelector('.cancel-btn-' + bookingId);
        if (rescheduleBtn) {
            rescheduleBtn.style.display = 'none';
        }
        if (cancelBtn) {
            cancelBtn.style.display = 'none';
        }
    });
}

function checkCancellationPolicy(bookingId) {
    fetch('/get/cancellation-policy?' + new Date().getTime(), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            booking_id: bookingId,
            _timestamp: new Date().getTime()
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const cancelBtn = document.querySelector('.cancel-btn-' + bookingId);
            
            if (cancelBtn) {
                const policy = data.data;
                const canCancel = policy.can_cancel !== false; // Default to true if not specified
                
                if (canCancel) {
                    // Show the cancel button
                    cancelBtn.style.display = 'inline-block';
                } else {
                    // Hide the cancel button if cancellation not allowed
                    cancelBtn.style.display = 'none';
                }
            }
        } else {
            // Hide cancel button on error to be safe
            const cancelBtn = document.querySelector('.cancel-btn-' + bookingId);
            if (cancelBtn) {
                cancelBtn.style.display = 'none';
            }
        }
    })
    .catch(error => {
        // Hide cancel button on error to be safe
        const cancelBtn = document.querySelector('.cancel-btn-' + bookingId);
        if (cancelBtn) {
            cancelBtn.style.display = 'none';
        }
    });
}


</script>
@endsection