@extends('layouts.app')
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

   <div class="d-flex flex-column flex-column-fluid" style="margin-top: -5%;">
      <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
         <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
               <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Booking List</h1>
               <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                  <li class="breadcrumb-item text-muted">
                     <a href="" class="text-muted text-hover-primary">Home</a>
                  </li>
                  <li class="breadcrumb-item">
                     <span class="bullet bg-gray-500 w-5px h-2px"></span>
                  </li>
                  <li class="breadcrumb-item text-muted">Bookings</li>
               </ul>
            </div>
         </div>
      </div>
      @if(session('emailsuccess'))
      <div class="alert alert-success">{{ session('emailsuccess') }}</div>
      @endif
      @if(session('cancelmsg'))
      <div class="alert alert-success">
         {{ session('cancelmsg') }}
      </div>
      @endif
      <div id="kt_app_content" class="app-content flex-column-fluid">
         <div id="kt_app_content_container" class="app-container container-xxl">
            <div class="card">
               <div class="card-header1 border-0 pt-6">
                  <div class="card-title">
                     <div class="d-flex align-items-center position-relative my-1">
                        <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5"></i>
                        <!-- <input type="text" class="form-control form-control-solid w-250px ps-12" placeholder="Search Booking"> -->
                     </div>
                  </div>
                  <div class="d-flex justify-content-end gap-2" style="margin-right: 13px;">
                     <a type="button" class="btn btn-primary"  class="btn btn-primary fw-semibold px-6" @if(Auth::user()->agency_id !="") href="{{ route('employeehotel.search') }}" @else href="{{ route('hotel.search') }}" @endif>
                     <i class="bi bi-building fs-5"></i>
                     Book Hotel
                     </a>
                  </div>
                  @if(session('success'))
                  <div class="alert alert-success alert-dismissible fade show" role="alert">
                     {{ session('success') }}
                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                  </div>
                  @endif
                  <form action="{{ route('booking.show') }}" method="POST">
                     @csrf
                     <input type="hidden" name="Filterval" value="Filtervalue" >
                     <div class="px-7 py-5" data-kt-user-table-filter="form">
                        <div class="d-flex flex-wrap align-items-end gap-3 p-3 border rounded" style="background:#fff;">
                           <!-- Username -->
                           <div class="mb-0" style="min-width:260px;">
                              <label class="form-label fs-6 fw-semibold mb-1">Booking Id</label>
                              <input type="text" name="passenger_name" class="form-control form-control-sm" placeholder="Enter Booking Id" 
                                 style="height:38px; border:1px solid #ccc;">
                           </div>
                           <!-- Email -->
                           <div class="mb-0" style="min-width:260px;">
                              <label class="form-label fs-6 fw-semibold mb-1">Customer Name</label>
                              <input type="text" name="email" class="form-control form-control-sm" placeholder="Enter Customer Name"
                                 style="height:38px; border:1px solid #ccc;">
                           </div>
                           <div class="mb-0" style="min-width:260px;">
                              <label class="form-label fs-6 fw-semibold mb-1">Email</label>
                              <input type="text" name="email" class="form-control form-control-sm" placeholder="Enter email"
                                 style="height:38px; border:1px solid #ccc;">
                           </div>
                           <!-- Payment Status -->
                           <div class="mb-0" style="min-width:200px;">
                              <label class="form-label fs-6 fw-semibold mb-1">Payment Status</label>
                              <select name="payment_status" class="form-select form-select-sm" style="height:38px; border:1px solid #ccc;">
                                 <option value="">Select</option>
                                 <option value="Confirmed">Confirmed</option>
                                 <option value="Cancelled">Cancelled</option>
                                 <option value="Pending">Pending</option>
                              </select>
                           </div>
                           <!-- Buttons -->
                           <div class="d-flex align-items-end mt-1">
                              <button type="submit" class="btn btn-primary btn-sm fw-semibold px-5" 
                                 style="height:38px;width:80px; border-radius:5px;">Apply</button>
                           </div>
                        </div>
                     </div>
                  </form>
                  <br><br>
                  <div class="card-toolbar" data-select2-id="select2-data-132-sv9a">
                     <form action="{{ route('booking.show') }}" method="POST">
                        @csrf
                        <!--begin::Toolbar-->
                        <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base" data-select2-id="select2-data-131-0bod">
                           <input type="hidden" name="Filterval" value="Filtervalue" >
                           <!--begin::Filter-->
                           <!--begin::Menu 1-->
                           <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true" style="">
                              <!--begin::Header-->
                              <div class="px-7 py-5">
                                 <div class="fs-5 text-gray-900 fw-bold">Filter Options</div>
                              </div>
                              <!--end::Header-->
                              <!--begin::Separator-->
                              <div class="separator border-gray-200"></div>
                              <!--end::Separator-->
                              <!--begin::Content-->
                              <div class="px-7 py-5" data-kt-user-table-filter="form">
                                 <!--begin::Input group-->
                                 <div class="mb-10" data-select2-id="select2-data-130-fhqv">
                                    <label class="form-label fs-6 fw-semibold">Passenger Name</label>
                                    <div class="d-flex align-items-center position-relative my-1">
                                       <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5"></i>
                                       <input type="text" class="form-control w-275px " name="passenger_name">
                                    </div>
                                 </div>
                                 <div class="mb-10" data-select2-id="select2-data-130-fhqv">
                                    <label class="form-label fs-6 fw-semibold">Email</label>
                                    <div class="d-flex align-items-center position-relative my-1">
                                       <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5"></i>
                                       <input type="text" class="form-control w-275px " name="email">
                                    </div>
                                 </div>
                                 <!--end::Input group-->
                                 <!--begin::Input group-->
                                 <div class="mb-10" data-select2-id="select2-data-143-itp3">
                                    <label class="form-label fs-6 fw-semibold">Payment Status</label>
                                    <select name="payment_status" class="form-select" >
                                       <option value="">Select An Option</option>
                                       <option value="Confirmed">Confirmed</option>
                                       <option value="Cancelled">Cancelled</option>
                                       <option value="Pending">Pending</option>
                                    </select>
                                 </div>
                                 <!--end::Input group-->
                                 <!--begin::Actions-->
                                 <div class="d-flex justify-content-end">
                                    <button type="reset" class="btn btn-light btn-active-light-primary fw-semibold me-2 px-6" data-kt-menu-dismiss="true" data-kt-user-table-filter="reset">Reset</button>
                                    <button type="submit" class="btn btn-primary fw-semibold px-6" data-kt-menu-dismiss="true" data-kt-user-table-filter="filter">Apply</button>
                                 </div>
                                 <!--end::Actions-->
                              </div>
                              <!--end::Content-->
                           </div>
                           <!--end::Menu 1-->
                           <!--end::Filter-->
                           <!--begin::Export-->
                           <!-- <button type="button" class="btn btn-light-primary me-3" data-bs-toggle="modal" data-bs-target="#kt_modal_export_users">
                              <i class="ki-duotone ki-exit-up fs-2">
                              	<span class="path1"></span>
                              	<span class="path2"></span>
                              </i>Export</button> -->
                           <!--end::Export-->
                           <!--begin::Add user-->
                           <!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">
                              <i class="ki-duotone ki-plus fs-2"></i>Add User</button> -->
                           <!--end::Add user-->
                        </div>
                        <!--end::Toolbar-->
                        <!--begin::Group actions-->
                        <div class="d-flex justify-content-end align-items-center d-none" data-kt-user-table-toolbar="selected">
                           <div class="fw-bold me-5">
                              <span class="me-2" data-kt-user-table-select="selected_count"></span>Selected
                           </div>
                           <button type="button" class="btn btn-danger" data-kt-user-table-select="delete_selected">Delete Selected</button>
                        </div>
                        <!--end::Group actions-->
                        <!--begin::Modal - Adjust Balance-->
                        <div class="modal fade" id="kt_modal_export_users" tabindex="-1" aria-hidden="true">
                           <!--begin::Modal dialog-->
                           <div class="modal-dialog modal-dialog-centered mw-650px">
                              <!--begin::Modal content-->
                              <div class="modal-content">
                                 <!--begin::Modal header-->
                                 <div class="modal-header">
                                    <h2 class="fw-bold">Export Users</h2>
                                    <!--end::Modal title-->
                                    <!--begin::Close-->
                                    <div class="btn btn-icon btn-sm btn-active-icon-primary" data-kt-users-modal-action="close">
                                       <i class="ki-duotone ki-cross fs-1">
                                       <span class="path1"></span>
                                       <span class="path2"></span>
                                       </i>
                                    </div>
                                    <!--end::Close-->
                                 </div>
                              </div>
                              <!--end::Modal content-->
                           </div>
                           <!--end::Modal dialog-->
                        </div>
                        <!--end::Modal - New Card-->
                        <!--begin::Modal - Add task-->
                        <div class="modal fade" id="kt_modal_add_user" tabindex="-1" aria-hidden="true">
                           <!--begin::Modal dialog-->
                           <div class="modal-dialog modal-dialog-centered mw-650px">
                              <!--begin::Modal content-->
                              <div class="modal-content">
                                 <!--begin::Modal header-->
                                 <div class="modal-header" id="kt_modal_add_user_header">
                                    <!--begin::Modal title-->
                                    <h2 class="fw-bold">Add User</h2>
                                    <!--end::Modal title-->
                                    <!--begin::Close-->
                                    <div class="btn btn-icon btn-sm btn-active-icon-primary" data-kt-users-modal-action="close">
                                       <i class="ki-duotone ki-cross fs-1">
                                       <span class="path1"></span>
                                       <span class="path2"></span>
                                       </i>
                                    </div>
                                    <!--end::Close-->
                                 </div>
                                 <!--end::Modal header-->
                                 <!--begin::Modal body-->
                                 <div class="modal-body px-5 my-7">
                                    <!--begin::Form-->
                     <form id="kt_modal_add_user_form" class="form fv-plugins-bootstrap5 fv-plugins-framework" action="#">
                     <!--begin::Scroll-->
                     <div class="d-flex flex-column scroll-y px-5 px-lg-10" id="kt_modal_add_user_scroll" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_user_header" data-kt-scroll-wrappers="#kt_modal_add_user_scroll" data-kt-scroll-offset="300px" style="max-height: 141px;">
                     <!--begin::Input group-->
                     <div class="fv-row mb-7">
                     <!--begin::Label-->
                     <label class="d-block fw-semibold fs-6 mb-5">Avatar</label>
                     <!--end::Label-->
                     <!--begin::Image placeholder-->
                     <style>.image-input-placeholder { background-image: url('assets/media/svg/files/blank-image.svg'); } [data-bs-theme="dark"] .image-input-placeholder { background-image: url('assets/media/svg/files/blank-image-dark.svg'); }</style>
                     <!--end::Image placeholder-->
                     <!--begin::Image input-->
                     <div class="image-input image-input-outline image-input-placeholder" data-kt-image-input="true">
                     <!--begin::Preview existing avatar-->
                     <div class="image-input-wrapper w-125px h-125px" style="background-image: url(assets/media/avatars/300-6.jpg);"></div>
                     <!--end::Preview existing avatar-->
                     <!--begin::Label-->
                     <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" aria-label="Change avatar" data-bs-original-title="Change avatar" data-kt-initialized="1">
                     <i class="ki-duotone ki-pencil fs-7">
                     <span class="path1"></span>
                     <span class="path2"></span>
                     </i>
                     <!--begin::Inputs-->
                     <input type="file" name="avatar" accept=".png, .jpg, .jpeg">
                     <input type="hidden" name="avatar_remove">
                     <!--end::Inputs-->
                     </label>
                     <!--end::Label-->
                     <!--begin::Cancel-->
                     <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" aria-label="Cancel avatar" data-bs-original-title="Cancel avatar" data-kt-initialized="1">
                     <i class="ki-duotone ki-cross fs-2">
                     <span class="path1"></span>
                     <span class="path2"></span>
                     </i>
                     </span>
                     <!--end::Cancel-->
                     <!--begin::Remove-->
                     <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" aria-label="Remove avatar" data-bs-original-title="Remove avatar" data-kt-initialized="1">
                     <i class="ki-duotone ki-cross fs-2">
                     <span class="path1"></span>
                     <span class="path2"></span>
                     </i>
                     </span>
                     <!--end::Remove-->
                     </div>
                     <!--end::Image input-->
                     <!--begin::Hint-->
                     <div class="form-text">Allowed file types: png, jpg, jpeg.</div>
                     <!--end::Hint-->
                     </div>
                     <!--end::Input group-->
                     <!--begin::Input group-->
                     <div class="fv-row mb-7 fv-plugins-icon-container">
                     <!--begin::Label-->
                     <label class="required fw-semibold fs-6 mb-2">Full Name</label>
                     <!--end::Label-->
                     <!--begin::Input-->
                     <input type="text" name="user_name" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Full name" value="Emma Smith">
                     <!--end::Input-->
                     <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div></div>
                     <!--end::Input group-->
                     <!--begin::Input group-->
                     <div class="fv-row mb-7 fv-plugins-icon-container">
                     <!--begin::Label-->
                     <label class="required fw-semibold fs-6 mb-2">Email</label>
                     <!--end::Label-->
                     <!--begin::Input-->
                     <input type="email" name="user_email" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="example@domain.com" value="smith@kpmg.com">
                     <!--end::Input-->
                     <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div></div>
                     <!--end::Input group-->
                     <!--begin::Input group-->
                     <div class="mb-5">
                     <!--begin::Label-->
                     <label class="required fw-semibold fs-6 mb-5">Role</label>
                     <!--end::Label-->
                     <!--begin::Roles-->
                     <!--begin::Input row-->
                     <div class="d-flex fv-row">
                     <!--begin::Radio-->
                     <div class="form-check form-check-custom form-check-solid">
                     <!--begin::Input-->
                     <input class="form-check-input me-3" name="user_role" type="radio" value="0" id="kt_modal_update_role_option_0" checked="checked">
                     <!--end::Input-->
                     <!--begin::Label-->
                     <label class="form-check-label" for="kt_modal_update_role_option_0">
                     <div class="fw-bold text-gray-800">Administrator</div>
                     <div class="text-gray-600">Best for business owners and company administrators</div>
                     </label>
                     <!--end::Label-->
                     </div>
                     <!--end::Radio-->
                     </div>
                     <!--end::Input row-->
                     <div class="separator separator-dashed my-5"></div>
                     <!--begin::Input row-->
                     <div class="d-flex fv-row">
                     <!--begin::Radio-->
                     <div class="form-check form-check-custom form-check-solid">
                     <!--begin::Input-->
                     <input class="form-check-input me-3" name="user_role" type="radio" value="1" id="kt_modal_update_role_option_1">
                     <!--end::Input-->
                     <!--begin::Label-->
                     <label class="form-check-label" for="kt_modal_update_role_option_1">
                     <div class="fw-bold text-gray-800">Developer</div>
                     <div class="text-gray-600">Best for developers or people primarily using the API</div>
                     </label>
                     <!--end::Label-->
                     </div>
                     <!--end::Radio-->
                     </div>
                     <!--end::Input row-->
                     <div class="separator separator-dashed my-5"></div>
                     <!--begin::Input row-->
                     <div class="d-flex fv-row">
                     <!--begin::Radio-->
                     <div class="form-check form-check-custom form-check-solid">
                     <!--begin::Input-->
                     <input class="form-check-input me-3" name="user_role" type="radio" value="2" id="kt_modal_update_role_option_2">
                     <!--end::Input-->
                     <!--begin::Label-->
                     <label class="form-check-label" for="kt_modal_update_role_option_2">
                     <div class="fw-bold text-gray-800">Analyst</div>
                     <div class="text-gray-600">Best for people who need full access to analytics data, but don't need to update business settings</div>
                     </label>
                     <!--end::Label-->
                     </div>
                     <!--end::Radio-->
                     </div>
                     <!--end::Input row-->
                     <div class="separator separator-dashed my-5"></div>
                     <!--begin::Input row-->
                     <div class="d-flex fv-row">
                     <!--begin::Radio-->
                     <div class="form-check form-check-custom form-check-solid">
                     <!--begin::Input-->
                     <input class="form-check-input me-3" name="user_role" type="radio" value="3" id="kt_modal_update_role_option_3">
                     <!--end::Input-->
                     <!--begin::Label-->
                     <label class="form-check-label" for="kt_modal_update_role_option_3">
                     <div class="fw-bold text-gray-800">Support</div>
                     <div class="text-gray-600">Best for employees who regularly refund payments and respond to disputes</div>
                     </label>
                     <!--end::Label-->
                     </div>
                     <!--end::Radio-->
                     </div>
                     <!--end::Input row-->
                     <div class="separator separator-dashed my-5"></div>
                     <!--begin::Input row-->
                     <div class="d-flex fv-row">
                     <div class="form-check form-check-custom form-check-solid">
                     <input class="form-check-input me-3" name="user_role" type="radio" value="4" id="kt_modal_update_role_option_4">
                     <label class="form-check-label" for="kt_modal_update_role_option_4">
                     <div class="fw-bold text-gray-800">Trial</div>
                     <div class="text-gray-600">Best for people who need to preview content data, but don't need to make any updates</div>
                     </label>
                     </div>
                     </div>
                     </div>
                     </div>
                     <div class="text-center pt-10">
                     <button type="reset" class="btn btn-light me-3" data-kt-users-modal-action="cancel">Discard</button>
                     <button type="submit" class="btn btn-primary" data-kt-users-modal-action="submit">
                     <span class="indicator-label">Submit</span>
                     <span class="indicator-progress">Please wait... 
                     <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                     </button>
                     </div>
                     </form>
                     </div>
                     </div>
                     </div>
                     </div>
                  </div>
                  </form>
               </div>
               <div class="card-body pt-0">
                  <div class="table-responsive">
                     <!-- Scroll Wrapper -->
                     <div style="position: relative; width: 100%; overflow-x: auto; overflow-y: hidden;">
                        <!-- Top Scrollbar -->
                        <div id="topScrollBar" 
                           style="overflow-x: auto; overflow-y: hidden; height: 16px; width: 100%; margin-bottom: 5px;">
                           <div id="topScrollContent" style="height: 1px;"></div>
                        </div>
                        <!-- Table Wrapper -->
                        <div id="tableScrollWrapper" 
                           style="overflow-x: auto; width: 100%; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
                           <table id="kt_customers_table"
                              style="width: 1800px; border-collapse: collapse; text-align: center; margin: 0 auto; font-family: 'Segoe UI', sans-serif;">
                              <thead style="position: sticky; top: 0; z-index: 2;">
                                 <tr style="background: linear-gradient(90deg, #f9fafb 0%, #eef1f5 100%); border-bottom: 2px solid #dee2e6;">
                                    <th style="padding:12px; font-size:13px; text-transform:uppercase;">#</th>
                                    <th style="padding:12px;">Booking Id</th>
                                    <th style="padding:12px;">Booking Reference</th>
                                    <th style="padding:12px;">Customer Name</th>
                                    <th style="padding:12px;">Email</th>
                                    <th style="padding:12px;">Destination</th>
                                    <th style="padding:12px;">Checkin</th>
                                    <th style="padding:12px;">Checkout</th>
                                    <th style="padding:12px;">Address</th>
                                    <th style="padding:12px;">Amount</th>
                                    <th style="padding:12px;">Status</th>
                                    <th style="padding:12px;">Actions</th>
                                 </tr>
                              </thead>
                              <tbody>
                                 @foreach($bookingval as $index => $booking)
                                 <tr style="vertical-align:middle; transition: all 0.2s ease-in-out; border-bottom:1px solid #f1f1f1;"
                                    onmouseover="this.style.backgroundColor='#f9fbff';"
                                    onmouseout="this.style.backgroundColor='transparent';">
                                    <td style="padding:10px;">{{ $index+1 }}</td>
                                    <td style="padding:10px;">{{ $booking->booking_id }}</td>
                                    <td style="padding:10px;">{{ $booking->booking_reference }}</td>
                                    <td style="padding:10px; font-weight:600; color:#333;">{{ $booking->holder_name }} {{ $booking->holder_surname }}</td>
                                    <td style="padding:10px; color:#666;">{{ $booking->holder_email }}</td>
                                    <td style="padding:10px;">{{ $booking->city_name }}, {{ $booking->country_name }}</td>
                                    <td style="padding:10px;">{{ \Carbon\Carbon::parse($booking->checkin)->format('d-M-Y') }}</td>
                                    <td style="padding:10px;">{{ \Carbon\Carbon::parse($booking->checkout)->format('d-M-Y') }}</td>
                                    <td style="padding:10px; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
                                       {{ $booking->hotel_address }}
                                    </td>
                                    <td style="padding:10px; font-weight:600; color:#444;">
                                       {{ number_format($booking->total_price, 2) }} {{ $booking->currency }}
                                    </td>
                                    <td style="padding:10px;">
                                       @if($booking->status === 'confirmed')
                                       <span style="background:#28a745; color:#fff; border-radius:30px; padding:4px 12px; font-size:12px;">
                                       Confirmed
                                       </span>
                                       @else
                                       <span style="background:#dc3545; color:#fff; border-radius:30px; padding:4px 12px; font-size:12px;">
                                       Cancelled
                                       </span>
                                       @endif
                                    </td>
                                    <td style="padding:10px; text-align:center;">
                                       <div style="display:inline-block; position:relative;">
                                          <button onclick="toggleMenu(this)" 
                                             style="background:#fff; border:1px solid #ddd; padding:6px 12px; border-radius:6px; font-size:12px; cursor:pointer;">
                                          Actions ▾
                                          </button>
                                          <div class="menu"
                                             style="display:none; position:absolute; right:0; top:35px; background:#fff; border:1px solid #ddd; 
                                             border-radius:6px; box-shadow:0 4px 10px rgba(0,0,0,0.1); text-align:left; z-index:10; width:170px;">
                                             <!-- Resend Email -->
                                             <a @if(Auth::user()->agency_id !="") 
                                             href="{{ route('employeebooking.resend', $booking->id) }}" 
                                             @else 
                                             href="{{ route('booking.resend', $booking->id) }}" 
                                             @endif
                                             style="display:flex; align-items:center; gap:8px; padding:8px 12px; color:#333; 
                                             text-decoration:none; font-size:13px; transition:0.2s;"
                                             onmouseover="this.style.background='#f8f9fa'" 
                                             onmouseout="this.style.background='transparent'">
                                             <i class="fa fa-envelope text-primary"></i> Resend Email
                                             </a>
                                             <!-- WhatsApp -->
                                             <a href="{{ route('whatsapp.send', $booking->id) }}" 
                                                style="display:flex; align-items:center; gap:8px; padding:8px 12px; color:#25D366; 
                                                text-decoration:none; font-size:13px; transition:0.2s;"
                                                onmouseover="this.style.background='#f8f9fa'" 
                                                onmouseout="this.style.background='transparent'">
                                             <i class="fa fa-whatsapp"></i> WhatsApp
                                             </a>
                                             <!-- Cancel Booking -->
                                             @if($booking->status === 'confirmed')
                                             <a @if(Auth::user()->agency_id !="") 
                                             href="{{ route('employeebooking.cancel', $booking->id) }}" 
                                             @else 
                                             href="{{ route('booking.cancel', $booking->id) }}" 
                                             @endif
                                             onclick="return confirm('Are you sure you want to cancel this booking?');"
                                             style="display:flex; align-items:center; gap:8px; padding:8px 12px; color:#dc3545; 
                                             text-decoration:none; font-size:13px; transition:0.2s;"
                                             onmouseover="this.style.background='#f8f9fa'" 
                                             onmouseout="this.style.background='transparent'">
                                             <i class="fa fa-times-circle"></i> Cancel Booking
                                             </a>
                                             @endif
                                             <!-- Booking Info -->
                                             <a @if(Auth::user()->agency_id !="") 
                                             href="{{ route('employeebooking.confirmation', $booking->booking_id) }}"  
                                             @else 
                                             href="{{ route('booking.confirmation', $booking->booking_id) }}"  
                                             @endif target="_blank" 
                                             style="display:flex; align-items:center; gap:8px; padding:8px 12px; color:#007bff; 
                                             text-decoration:none; font-size:13px; transition:0.2s;"
                                             onmouseover="this.style.background='#f8f9fa'" 
                                             onmouseout="this.style.background='transparent'">
                                             <i class="fa fa-info-circle"></i> Booking Info
                                             </a>
                                             <!-- Download Voucher -->
                                             @if($booking->status === 'confirmed')
                                             <a @if(Auth::user()->agency_id !="") 
                                             href="{{ route('employeebooking.voucher', $booking->booking_reference) }}"  
                                             @else 
                                             href="{{ route('booking.voucher', $booking->booking_reference) }}"  
                                             @endif
                                             style="display:flex; align-items:center; gap:8px; padding:8px 12px; color:#333; 
                                             text-decoration:none; font-size:13px; transition:0.2s;"
                                             onmouseover="this.style.background='#f8f9fa'" 
                                             onmouseout="this.style.background='transparent'">
                                             <i class="fa fa-download"></i> Download Voucher
                                             </a>
                                             @endif
                                          </div>
                                       </div>
                                       </div>
                                 </td>
                                 </tr>
                                 @endforeach
                              </tbody>
                        </table>
                     </div>
                  </div>
                  </table>
                  <!-- Cancel Booking Modal -->
                  <div class="modal fade" id="cancelBookingModal-{{ $booking->id }}" tabindex="-1" aria-hidden="true">
                     <div class="modal-dialog">
                        <form action="@if(Auth::user()->agency_id != '') {{ route('employeebooking.cancel', $booking->id) }} @else {{ route('booking.cancel', $booking->id) }} @endif" method="POST">
                           @csrf
                           <div class="modal-content">
                              <div class="modal-header">
                                 <h5 class="modal-title">Cancel Booking</h5>
                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                              </div>
                              <div class="modal-body">
                                 <!-- Reason Dropdown -->
                                 <div class="mb-3">
                                    <label for="reason-{{ $booking->id }}" class="form-label">Reason for Cancellation</label>
                                    <select name="reason" id="reason-{{ $booking->id }}" class="form-select" required>
                                       <option value="">Select reason</option>
                                       <option value="1">Found lower price on the Internet</option>
                                       <option value="2">Found lower price through a local agent</option>
                                       <option value="3">Did not like cancellation terms</option>
                                       <option value="4">Did not like payment terms</option>
                                       <option value="5">Will book a different hotel through your site</option>
                                       <option value="6">Will book with hotel directly</option>
                                       <option value="7">Decided on a different hotel not offered by your site</option>
                                       <option value="8">Booking was not confirmed quickly enough</option>
                                       <option value="9">Concerns about reliability / trustworthiness</option>
                                       <option value="10">Concerns about safety at the hotel's location</option>
                                       <option value="11">Forced to cancel or postpone trip</option>
                                       <option value="12">Natural Disaster</option>
                                       <option value="13">Others</option>
                                    </select>
                                 </div>
                                 <!-- Optional Comments -->
                                 <div class="mb-3">
                                    <label for="comments-{{ $booking->id }}" class="form-label">Comments (Optional)</label>
                                    <textarea name="comments" id="comments-{{ $booking->id }}" class="form-control" rows="3" placeholder="Add any comments here..."></textarea>
                                 </div>
                                 <div class="row">
                                    <div class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar">
                                       <div>
                                          <select class="form-select form-select-solid form-select-sm" onchange="location = this.value;">
                                          @foreach([10, 25, 50, 100] as $limit)
                                          <option value="{{ request()->fullUrlWithQuery(['per_page' => $limit]) }}"
                                          {{ request('per_page') == $limit ? 'selected' : '' }}>
                                          {{ $limit }}
                                          </option>
                                          @endforeach
                                          </select>
                                       </div>
                                    </div>
                                    <div class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                                       <div class="dt-paging paging_simple_numbers">
                                          <nav aria-label="pagination">
                                             <ul class="pagination">
                                                {{-- Previous Page --}}
                                                @if ($bookingval->onFirstPage())
                                                <li class="page-item disabled"><span class="page-link"><i class="previous"></i></span></li>
                                                @else
                                                <li class="page-item">
                                                   <a class="page-link previous" href="{{ $bookingval->previousPageUrl() }}" aria-label="Previous"><i class="previous"></i></a>
                                                </li>
                                                @endif
                                                {{-- Page Numbers --}}
                                                @foreach ($bookingval->getUrlRange(1, $bookingval->lastPage()) as $page => $url)
                                                <li class="page-item {{ $bookingval->currentPage() == $page ? 'active' : '' }}">
                                                   <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                                </li>
                                                @endforeach
                                                {{-- Next Page --}}
                                                @if ($bookingval->hasMorePages())
                                                <li class="page-item">
                                                   <a class="page-link next" href="{{ $bookingval->nextPageUrl() }}" aria-label="Next"><i class="next"></i></a>
                                                </li>
                                                @else
                                                <li class="page-item disabled"><span class="page-link"><i class="next"></i></span></li>
                                                @endif
                                             </ul>
                                          </nav>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                     </div>
                  </div>
               </div>
               <div class="modal fade" id="kt_modal_add_customer" tabindex="-1" aria-hidden="true">
               <div class="modal-dialog modal-xl modal-dialog-centered">
               <div class="modal-content">
               <!--begin::Form-->
               <form method="POST"  @if(Auth::user()->agency_id !="") action="{{ route('employeehotel.search') }}" @else action="{{ route('hotel.search') }}" @endif>
               @csrf
               <input type="hidden" name="recordid" value="{{ old('recordid') }}">
               <!--begin::Modal header-->
               <div class="modal-header">
               <h2 class="fw-bold">Add Details</h2>
               <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
               <i class="ki-duotone ki-cross fs-1">
               <span class="path1"></span><span class="path2"></span>
               </i>
               </div>
               </div>
               <!--end::Modal header-->
               <!--begin::Modal body-->
               <div class="modal-body py-10 px-lg-17">
               <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" ...>
               <div class="row g-5">
               <!-- Hotel Name Filter -->
               <div class="col-md-6">
               <div class="fv-row">
               <label class="fs-6 fw-semibold mb-2">Hotel Name </label>
               <input type="text" name="hotel_name" class="form-control form-control-solid" placeholder="e.g. Plaza">
               </div>
               </div>
               <!-- Check-In -->
               <div class="col-md-6">
               <div class="fv-row">
               <label class="required fs-6 fw-semibold mb-2">Check-In Date</label>
               <input type="date" name="checkin" class="form-control form-control-solid" required>
               </div>
               </div>
               <!-- Check-Out -->
               <div class="col-md-6">
               <div class="fv-row">
               <label class="required fs-6 fw-semibold mb-2">Check-Out Date</label>
               <input type="date" name="checkout" class="form-control form-control-solid" required>
               </div>
               </div>
               <!-- Nationality -->
               <div class="col-md-6">
               <div class="fv-row">
               <label class="required fs-6 fw-semibold mb-2">Nationality</label>
               <input type="text" name="client_nationality" class="form-control form-control-solid" maxlength="2" required placeholder="e.g. INDIA">
               </div>
               </div>
               <!-- Currency -->
               <div class="col-md-6">
               <div class="fv-row">
               <label class="fs-6 fw-semibold mb-2">Currency </label>
               <input type="text" name="currency" class="form-control form-control-solid" maxlength="3" placeholder="e.g. USD">
               </div>
               </div>
               <!-- Rate Type -->
               <div class="col-md-6">
               <div class="fv-row">
               <label class="fs-6 fw-semibold mb-2">Rate Preference</label>
               <select name="rates" class="form-select form-select-solid">
               <option value="concise" selected>Lowest Rate Only</option>
               <option value="comprehensive">All Available Rates</option>
               </select>
               </div>
               </div>
               <!-- Purpose of Travel -->
               <div class="col-md-6">
               <div class="fv-row">
               <label class="fs-6 fw-semibold mb-2">Purpose of Travel</label>
               <select name="purpose_of_travel" class="form-select form-select-solid">
               <option value="1" selected>Studying</option>
               <option value="2">Business</option>
               </select>
               </div>
               </div>
               <!-- Room Details -->
               <div class="col-12">
               <label class="fs-6 fw-semibold mb-2">Room Details</label>
               <div id="room-details-wrapper">
               <!-- Room blocks (from JS) go here -->
               </div>
               <button type="button" class="btn btn-light-primary my-3" id="add-room-btn">Add Another Room</button>
               <input type="hidden" name="rooms" id="rooms-json" required>
               </div>
               </div>
               </div>
               </div>
               <!--end::Modal body-->
               <!--begin::Modal footer-->
               <div class="modal-footer flex-end">
               <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Discard</button>
               <button type="submit" class="btn btn-primary">
               <span class="indicator-label">Submit</span>
               <span class="indicator-progress">Please wait...
               <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
               </span>
               </button>
               </div>
               <!--end::Modal footer-->
               </form>
               <!--end::Form-->
               </div>
               </div>
               </div>
            </div>
            <!-- end content column -->
         </div>
         <!-- end app-main -->
      </div>
      <!-- end wrapper -->
   </div>
   <!-- end page -->
<!-- end root -->
<script>
   const topScroll = document.getElementById('topScrollBar');
   const bottomScroll = document.getElementById('tableScrollWrapper');
   const topScrollContent = document.getElementById('topScrollContent');
   
   // Match width of top scrollbar to table scroll area
   topScrollContent.style.width = bottomScroll.scrollWidth + 'px';
   
   // Sync scroll positions both ways
   topScroll.addEventListener('scroll', () => {
       bottomScroll.scrollLeft = topScroll.scrollLeft;
   });
   bottomScroll.addEventListener('scroll', () => {
       topScroll.scrollLeft = bottomScroll.scrollLeft;
   });
   
   function toggleMenu(btn) {
   const menu = btn.nextElementSibling;
   
   // Close all other open menus first
   // document.querySelectorAll('.menu').forEach(m => {
   //     if (m !== menu) m.style.display = 'none';
   // });
   
   // Toggle this menu
   menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
   
   // Click outside to close
   document.addEventListener('click', function handler(event) {
       if (!btn.contains(event.target) && !menu.contains(event.target)) {
           menu.style.display = 'none';
           document.removeEventListener('click', handler); // remove after use
       }
   });
   }
   
   
   
   document.getElementById('add-room-btn').addEventListener('click', function () {
   const roomHTML = `
       <div class="room-group border p-4 rounded mb-3">
           <div class="fv-row mb-3">
               <label class="fs-6 fw-semibold">Adults</label>
               <input type="number" class="form-control form-control-solid adults-input" min="1" value="1" required>
           </div>
           <div class="fv-row mb-3">
               <label class="fs-6 fw-semibold">Children</label>
               <input type="number" class="form-control form-control-solid children-input" min="0" value="0" required>
           </div>
           <div class="fv-row mb-3">
               <label class="fs-6 fw-semibold">Child Ages (comma separated)</label>
               <input type="text" class="form-control form-control-solid child-ages-input" placeholder="e.g. 5,8">
           </div>
       </div>`;
   document.getElementById('room-details-wrapper').insertAdjacentHTML('beforeend', roomHTML);
   });
   
   // Before form submit: collect data into hidden field
   document.querySelector('form').addEventListener('submit', function (e) {
   const roomGroups = document.querySelectorAll('.room-group');
   const rooms = [];
   
   roomGroups.forEach(group => {
       const adults = parseInt(group.querySelector('.adults-input').value) || 1;
       const children = parseInt(group.querySelector('.children-input').value) || 0;
       const childAgesRaw = group.querySelector('.child-ages-input').value.trim();
       const childAges = childAgesRaw ? childAgesRaw.split(',').map(age => parseInt(age.trim())) : [];
   
       rooms.push({
           adults: adults,
           children: children,
           child_ages: childAges
       });
   });
   
   document.getElementById('rooms-json').value = JSON.stringify(rooms);
   });
</script>
@endsection