@extends('provider.provider')
@section('content')
<div class="page-wrapper">
    <div class="content container-fluid">
        <div class="row">
            <div class="d-flex align-items-center justify-content-between flex-wrap row-gap-3 mb-4">
                <h4>{{ __('Lista de Reservas') }}</h4>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-xxl-12 col-lg-12">
                @if(count($data['bookingdata'])>0)
                @foreach($data['bookingdata'] as $val)
                <div class="card shadow-none booking-list">
                    <div class="card-body d-md-flex align-items-start">
                        <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="#" class="avatar booking_details_btn" data-bs-toggle="modal" data-bs-target="#booking_details" data-booking-details-id="{{ $val->id }}">
                                    <img src="{{ $val->productimage }}" alt="Product Image" class="img-fluid">
                                </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="badge @if($val->booking_status == 9 || $val->booking_status == 10 || $val->booking_status == 11) badge-soft-warning @else badge-soft-success @endif bookingstatus{{$val->id}}" data-status="{{$val->booking_status}}">{{$val->booking_status_label}}</span>
                                </h6>
                                <ul class="booking-details">
                                    <li class="d-flex align-items-center mb-2">
                                        <span class="book-item">{{__('ID da Reserva')}}</span> <small class="me-2">:</small> {{ $val->order_id ?? '-' }}
                                    </li>
                                    <li class="d-flex align-items-center mb-2">
                                        <span class="book-item">{{ __('Data da Reserva') }}</span> <small class="me-2">: </small>{{$val->bookingdate}}
                                    </li>
                                    <li class="d-flex align-items-center mb-2">
                                        <span class="book-item">{{ __('Valor') }}</span> <small class="me-2">: </small> {{number_format($val->total_amount, 2, '.', ',')}}
                                    </li>
                                    <li class="d-flex align-items-center mb-2">
                                        <span class="book-item">{{ __('Localização') }}</span> <small class="me-2">: </small>{{$val->user_city}}
                                    </li>
                                    <li class="d-flex align-items-center flex-wrap">
                                        <span class="book-item">{{ __('Cliente') }}</span> <small class="me-2">: </small>
                                        <div class="user-book d-flex align-items-center flex-wrap me-2">
                                            <div class="avatar avatar-xs me-2">
                                                @if (isset( $val->profile_image) && file_exists(public_path('storage/profile/' . $val->profile_image)))
                                                <img src="{{ asset('storage/profile/' . $val->profile_image) }}" alt="User Profile Image" class="img-fluid rounded-circle profileImagePreview">
                                                @else
                                                <img src="{{ asset('assets/img/profile-default.png') }}" alt="Default Profile Image" class="img-fluid rounded-circle profileImagePreview">
                                                @endif
                                            </div>
                                            <span class="me-4"> {{$val->user_name ?? ""}} </span>
                                        </div>
                                        @if($val->booking_status==1)
                                        @if($val->email!='')
                                        <p class="mb-0 me-2"><i class="ti ti-email 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-2"><i class="ti ti-email 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">{{ __('Cupão Aplicado') }}</span>
                                        <small class="mx-2">:</small>
                                        {{ $val->coupon_code }}
                                    </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                        @if($val->booking_status==1)
                        <div class="acceptdiv{{$val->id}} d-flex justify-content-start gap-2">
                            <a href="#" class="btn btn-success accept" data-bs-toggle="modal" data-bs-target="#accept" data-id="{{$val->id}}">{{ __('Aceitar') }}</a>
                            <a href="#" class="btn btn-danger cancel" data-bs-toggle="modal" data-bs-target="#cancel_appointment" data-id="{{$val->id}}">{{ __('Cancelar') }}</a>
                        </div>
                        @elseif($val->booking_status == 2)
                        <div class="completediv{{$val->id}} d-flex justify-content-start gap-2">
                            <a href="#" class="btn btn-success complete" data-bs-toggle="modal" data-bs-target="#completed" data-id="{{$val->id}}">{{ __('Concluir') }}</a>
                            <a href="{{ route('provider.chat.with-user', ['user_id' => customEncrypt($val->user_id, \App\Models\User::$userSecretKey)]) }}" class="btn btn-dark me-2 chattab" data-userid="{{$val->user_id}}" data-user="{{$val->user_name}}" data-authuserid="{{$data['authuserid']}}"><i class="ti ti-message-2 me-2"></i>{{ __('Chat') }}</a>
                        </div>
                        @elseif($val->booking_status == 9)
                        <div class="quotediv{{$val->id}} d-flex justify-content-start gap-2">
                            <a href="#" class="btn btn-primary propose-quote" data-bs-toggle="modal" data-bs-target="#propose_quote" data-id="{{$val->id}}" data-amount="{{$val->total_amount}}">{{ __('Propor Preço/Orçamento') }}</a>
                            <a href="#" class="btn btn-danger cancel" data-bs-toggle="modal" data-bs-target="#cancel_appointment" data-id="{{$val->id}}">{{ __('Cancelar') }}</a>
                        </div>
                        @elseif($val->booking_status == 10)
                        <div class="proposeddiv{{$val->id}} d-flex justify-content-start gap-2">
                            <span class="badge badge-soft-info p-2">{{ __('Aguardando Aceitação do Cliente') }}</span>
                            <a href="#" class="btn btn-danger cancel" data-bs-toggle="modal" data-bs-target="#cancel_appointment" data-id="{{$val->id}}">{{ __('Cancelar') }}</a>
                        </div>
                        @elseif($val->booking_status == 12)
                         <div class="confirmdiv{{$val->id}} d-flex justify-content-start gap-2">
                            <a href="#" class="btn btn-success accept" data-bs-toggle="modal" data-bs-target="#accept" data-id="{{$val->id}}">{{ __('Confirmar & Atribuir') }}</a>
                            <a href="#" class="btn btn-danger cancel" data-bs-toggle="modal" data-bs-target="#cancel_appointment" data-id="{{$val->id}}">{{ __('Cancelar') }}</a>
                        </div>
                        @elseif($val->booking_status == 13)
                        <div class="paymentdiv{{$val->id}} d-flex justify-content-start gap-2 align-items-center">
                            <a href="#" class="btn btn-success confirm-payment" 
                                data-id="{{$val->id}}" 
                                data-payment_type="{{$val->payment_type}}" 
                                data-payment_proof="{{ $val->payment_proof_path ? asset('storage/' . $val->payment_proof_path) : '' }}"
                                data-bs-toggle="modal" data-bs-target="#confirm_payment_modal">
                                <i class="ti ti-circle-check me-1"></i>{{ __('Confirmar Pagamento') }}
                            </a>
                            @if($val->payment_proof_path)
                            <a href="{{ asset('storage/' . $val->payment_proof_path) }}" target="_blank" class="btn btn-outline-secondary btn-sm">
                                <i class="ti ti-file me-1"></i>{{ __('Ver Comprovativo') }}
                            </a>
                            @endif
                        </div>
                        @elseif($val->booking_status == 6)
                            @if ($val->review)
                                <div class="orderdiv{{ $val->id }}">
                                    <a href="#!" class="btn btn-success view_review_btn" data-bs-toggle="modal"
                                        data-bs-target="#view-review"
                                        data-id="{{$val->id}}"
                                        data-review_id="{{ $val->review->id }}"
                                        data-booking_id="{{ $val->id }}"
                                        data-product_id="{{ $val->product_id }}"
                                        data-rating="{{ $val->review->rating }}"
                                        data-review="{{ $val->review->review }}"
                                        data-review_reply="{{ $val->review->reply ? $val->review->reply->review : '' }}">
                                        {{__('view_review')}}</a>
                                </div>
                            @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">{{ __('Nenhuma Reserva Disponível') }}</p>
                    </div>
                </div>
                @endif
            </div>
        </div>
        <div class="d-flex justify-content-center">
            {{ $data['bookingdata']->links('pagination::bootstrap-4') }}
        </div>
    </div>
</div>

<div class="modal fade" id="view-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>{{ __('view_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_id" name="review_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">{{ __('Ratings') }}</label>
						<div class="review_rating_list mb-0">
						</div>
					</div>
					<div class="mb-0">
						<label class="form-label">{{ __('Review') }}</label>
						<textarea class="form-control" name="review" id="review" rows="3" maxlength="500"></textarea>
						<span class="error-text text-danger" id="review_error"></span>
					</div>
                    <div class="mb-0">
						<label class="form-label">{{ __('Reply') }}</label>
						<textarea class="form-control" name="reply_review" id="reply_review" rows="3" maxlength="500"></textarea>
						<span class="error-text text-danger" id="reply_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">{{ __('Reply') }}</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="modal fade" id="accept">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form>
                <div class="modal-body text-center">
                    <h4>{{ __('Confirmar Aceitação') }}</h4>
                    <p>{{ __('Deseja aceitar esta reserva?') }}</p>
                    <div class="mb-3 text-start">
                        <label class="form-label">{{ __('Atribuir Funcionário') }} <span class="text-danger">*</span></label>
                        <select id="assign_staff_id" class="form-control select2" required>
                            <option value="">{{ __('Selecionar Funcionário') }}</option>
                            @if(isset($data['staffs']))
                                @foreach($data['staffs'] as $staff)
                                    <option value="{{ $staff->id }}">{{ $staff->name }}</option>
                                @endforeach
                            @endif
                        </select>
                        <span class="text-danger error-text" id="assign_staff_error"></span>
                    </div>
                    <div class="d-flex justify-content-center mt-3">
                        <a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">{{ __('Cancelar') }}</a>
                        <button type="button" class="btn btn-success bookingid" id="acceptbooking" data-id="" data-type="2" data-yes_confirm="{{ __('Sim, Confirmar') }}">{{ __('Sim, Confirmar') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="completed">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form>
                <div class="modal-body text-center">
                    <h4>{{ __('Confirmar Conclusão') }}</h4>
                    <p>{{ __('Deseja marcar esta reserva como concluída?') }}</p>
                    <div class="d-flex justify-content-center">
                        <a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">{{ __('Cancelar') }}</a>
                        <button class="btn btn-success bookingid" id="completebooking" data-id="" data-type="5" data-yes_confirm="{{ __('Sim, Confirmar') }}">{{ __('Sim, Confirmar') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="propose_quote">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="proposeQuoteForm">
                <div class="modal-body text-center">
                    <h4>{{ __('Propor Orçamento') }}</h4>
                    <p>{{ __('Insira o valor total proposto para este serviço.') }}</p>
                    <div class="mb-3 text-start">
                        <label class="form-label">{{ __('Valor Proposto') }} <span class="text-danger">*</span></label>
                        <input type="number" step="0.01" id="proposed_amount" class="form-control" required>
                        <span class="text-danger error-text" id="proposed_amount_error"></span>
                    </div>
                    <div class="d-flex justify-content-center mt-3">
                        <a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">{{ __('Cancelar') }}</a>
                        <button type="button" class="btn btn-primary" id="submitProposedQuote" data-id="">{{ __('Enviar Proposta') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade custom-modal" id="add_booking">
    <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">Adicionar Reserva</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 action="provider-booking.html">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Staff</label>
                                <select class="select">
                                    <option>Select</option>
                                    <option>Jeff Fitch</option>
                                    <option>Donald Gordon</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Service</label>
                                <select class="select">
                                    <option>Select</option>
                                    <option>Computer Services</option>
                                    <option>Car Repair Services</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Customer</label>
                                <select class="select">
                                    <option>Select</option>
                                    <option>Jeff Fitch</option>
                                    <option>Donald Gordon</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-3">
                                <div class="sel-cal Calendar-icon">
                                    <span><i class="ti ti-calendar-month"></i></span>
                                    <input class="form-control datetimepicker" type="text" placeholder="dd-mm-yyyy">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <div class="sel-cal Calendar-icon">
                                            <span><i class="ti ti-clock"></i></span>
                                            <input class="form-control timepicker" type="text" placeholder="dd-mm-yyyy">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <div class="sel-cal Calendar-icon">
                                            <span><i class="ti ti-clock"></i></span>
                                            <input class="form-control timepicker" type="text" placeholder="dd-mm-yyyy">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-0">
                                <label class="form-label">Mensagem da Reserva</label>
                                <textarea rows="4" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">Cancelar</a>
                    <button type="submit" class="btn btn-dark">Submeter</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">Reagendar Reserva</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">
                <form action="user-bookings.html">
                    <div class="mb-3">
                        <label class="form-label">Data da Marcação</label>
                        <div class="form-icon">
                            <input type="text" class="form-control datetimepicker" placeholder="DD/MM/YYYY">
                            <span class="cus-icon"><i class="feather-calendar"></i></span>
                        </div>
                    </div>
                    <div class="mb-0">
                        <label class="form-label">Hora da Marcação</label>
                        <div class="form-icon">
                            <input type="text" class="form-control timepicker" placeholder="DD/MM/YYYY">
                            <span class="cus-icon"><i class="feather-clock"></i></span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <div class="acc-submit">
                    <a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">Cancelar</a>
                    <button class="btn btn-dark" type="submit">Guardar</button>
                </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">Cancelar Reserva</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>
                </div>
                <div class="modal-footer">
                    <div class="acc-submit">
                        <a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">{{ __('Fechar') }}</a>
                        <button class="btn btn-dark bookingid" id="cancelbooking" data-id="" data-type="3" type="submit">{{ __('Sim, Cancelar') }}</button>
                    </div>
                </div>
            </form>
        </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">{{ __('Detalhes da Reserva') }} <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">{{ __('Informações do Serviço') }}</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">{{ __('Nome do Serviço') }}</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>
								<strong class="w-25">{{ __('Código do Serviço') }}</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">{{ __('Valor do Serviço') }}</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">{{ __('Valor Total') }}</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">{{ __('Estado da Reserva') }}</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">{{ __('Estado do Pagamento') }}</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">{{ __('Método de Pagamento') }}</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">{{ __('Data da Reserva') }}</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">{{ __('Serviços Adicionais') }}</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">{{ __('Detalhes do Horário') }}</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">{{ __('Data') }}</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">{{ __('Dia') }}</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">{{ __('Hora') }}</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">{{ __('Informações do Cliente') }}</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">{{ __('Nome') }}</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">{{ __('Telefone') }}</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">{{ __('Cidade') }}</strong>:
							<span class="text-dark flex-grow-1" id="buyer_city"></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">{{ __('Informações do Funcionário') }}</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">{{ __('Nome') }}</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">{{ __('Telefone') }}</strong>:
							<span class="text-dark flex-grow-1" id="staff_mobile"></span>
						</label>
					</div>
				</div>

				<!-- Branch Information -->


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

						<label class="d-flex gap-2">
							<strong class="w-25">{{ __('Classificação') }}</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">{{ __('Avaliação') }}</strong>:
							<span class="text-dark flex-grow-1" id="review_text"></span>
						</label>

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

						<label class="d-flex gap-2">
							<strong class="w-25">{{ __('Data da Avaliação') }}</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">{{ __('Notas') }}</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>

				<!-- Booking Images -->
				<div class="mb-3 booking_images_info d-none">
					<h6 class="fs-16 fw-bold mb-2 text-decoration-underline">{{ __('Imagens da Solicitação') }}</h6>
					<div id="booking_images_list" class="d-flex flex-wrap gap-2 mt-2"></div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Fechar') }}</button>
			</div>
		</div>
	</div>
</div>

</div>

{{-- Modal Confirmação de Pagamento --}}
<div class="modal fade custom-modal" id="confirm_payment_modal">
    <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">{{ __('Confirmar Recebimento de Pagamento') }}</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 text-center">
                <p>{{ __('Confirma que recebeu o pagamento para esta reserva?') }}</p>
                
                <div id="receipt-preview-container" class="mt-3 p-3 border rounded bg-light" style="display: none;">
                    <h6 class="text-start mb-2"><i class="ti ti-file-text me-1"></i>{{ __('Comprovativo de Pagamento:') }}</h6>
                    <div class="mb-3">
                        <img id="receipt-preview-img" src="" alt="Comprovativo" class="img-fluid rounded shadow-sm border" style="max-height: 250px; display: none;">
                        <div id="receipt-preview-other" class="p-4 bg-white border rounded" style="display: none;">
                            <i class="ti ti-file-description fs-40 text-secondary mb-2"></i>
                            <p class="mb-0 text-muted">{{ __('O comprovativo é um documento (PDF/Outro).') }}</p>
                        </div>
                    </div>
                    <a id="receipt-preview-link" href="#" target="_blank" class="btn btn-primary btn-sm w-100">
                        <i class="ti ti-external-link me-1"></i>{{ __('Abrir Comprovativo em Nova Janela') }}
                    </a>
                </div>

                <p class="text-muted small mt-3">{{ __('Esta ação irá marcar a reserva como Concluída e Paga.') }}</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">{{ __('Cancelar') }}</a>
                    <a href="#" class="btn btn-success" id="btn-confirm-payment-action">{{ __('Sim, Confirmar') }}</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Handle click on Confirmar Pagamento button
    $(document).on('click', '.confirm-payment', function() {
        const id = $(this).data('id');
        const proof = $(this).data('payment_proof');
        const url = "{{ route('provider.booking.confirm_payment', ':id') }}".replace(':id', id);
        
        $('#btn-confirm-payment-action').attr('href', url);

        // Handle proof display
        if (proof) {
            $('#receipt-preview-container').show();
            $('#receipt-preview-link').attr('href', proof);
            
            // Check if it's an image
            const isImage = proof.match(/\.(jpeg|jpg|gif|png|webp|svg)$/i);
            if (isImage) {
                $('#receipt-preview-img').attr('src', proof).show();
                $('#receipt-preview-other').hide();
            } else {
                $('#receipt-preview-img').hide();
                $('#receipt-preview-other').show();
            }
        } else {
            $('#receipt-preview-container').hide();
        }
    });

    // Simple loading for the confirmation button
    $('#btn-confirm-payment-action').on('click', function() {
        $(this).addClass('disabled').html('<span class="spinner-border spinner-border-sm me-1"></span>A processar...');
    });
});
</script>

@endsection