@php
    $business_id = session()->get('user.business_id') ?: 1;
    
    // 1. LIVE DATABASE QUERY: Fetch services from products & variations in Ultimate POS
    $products = \App\Product::with(['variations', 'category'])
        ->where('business_id', $business_id)
        ->where('is_inactive', 0)
        ->get();

    $services = $products->map(function($p) {
        $price = 0;
        $variation_id = null;
        if ($p->variations && $p->variations->first()) {
            $price = $p->variations->first()->sell_price_inc_tax;
            $variation_id = $p->variations->first()->id;
        }
        $duration = $p->salon_duration_minutes ?: ($p->preparation_time_in_minutes ?: 45);
        $chairType = $p->salon_required_chair_type ?: 'Styling Chair';

        return (object) [
            'id' => $p->id,
            'variation_id' => $variation_id,
            'name' => $p->name,
            'sku' => $p->sku,
            'duration_minutes' => $duration,
            'price' => $price ?: 2500,
            'requires_chair_type' => $chairType,
            'category_name' => $p->category ? $p->category->name : 'Services'
        ];
    });

    // 2. LIVE DATABASE QUERY: Fetch active stylists / service staff (users)
    $stylists = \App\User::where('business_id', $business_id)
        ->where('status', 'active')
        ->get()
        ->map(function($u) {
            return (object) [
                'id' => $u->id,
                'name' => trim($u->first_name . ' ' . $u->last_name),
                'role' => $u->role_name ?? 'Stylist'
            ];
        });

    if ($stylists->isEmpty()) {
        $stylists = collect([
            (object)['id' => 1, 'name' => 'Amelda Fernando', 'role' => 'Lead Stylist'],
            (object)['id' => 2, 'name' => 'Kasun Jayawardena', 'role' => 'Senior Hair Designer'],
            (object)['id' => 3, 'name' => 'Niluka Perera', 'role' => 'Bridal Specialist']
        ]);
    }

    // 3. LIVE DATABASE QUERY: Fetch salon chairs from salon_chairs table
    $chairs = \Modules\SalonBooking\Entities\SalonChair::where('business_id', $business_id)->get();
    if ($chairs->isEmpty()) {
        $defaultChairs = [
            ['business_id' => $business_id, 'name' => 'Chair #1 (VIP Styling Station)', 'type' => 'Styling Chair', 'status' => 'available'],
            ['business_id' => $business_id, 'name' => 'Chair #2 (Main Floor Styling)', 'type' => 'Styling Chair', 'status' => 'available'],
            ['business_id' => $business_id, 'name' => 'Chair #3 (Hair & Color Station)', 'type' => 'Styling Chair', 'status' => 'available'],
            ['business_id' => $business_id, 'name' => 'Chair #4 (Makeup Suite)', 'type' => 'Makeup / Beauty Chair', 'status' => 'available'],
            ['business_id' => $business_id, 'name' => 'Suite #1 (Luxury Bridal Room)', 'type' => 'Bridal Suite', 'status' => 'available'],
            ['business_id' => $business_id, 'name' => 'Bed #1 (Facial & Skin Care Bed)', 'type' => 'Facial / Spa Bed', 'status' => 'available']
        ];
        foreach ($defaultChairs as $dc) {
            \Modules\SalonBooking\Entities\SalonChair::create($dc);
        }
        $chairs = \Modules\SalonBooking\Entities\SalonChair::where('business_id', $business_id)->get();
    }

    // Existing customers for fast search and duplicate prevention
    $customers = \App\Contact::where('business_id', $business_id)
        ->whereIn('type', ['customer', 'both'])
        ->orderBy('name')
        ->limit(1000)
        ->get();

    // 4. LIVE DATABASE QUERY: Salon / Business Name
    $business = \App\Business::find($business_id);
    $salonName = $business ? $business->name : 'Amelda Hair & Makeup';
@endphp

<!-- Custom Styles for Booking Modal -->
<style>
  .salon-card-btn {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #ffffff;
    margin-bottom: 12px;
    user-select: none;
  }
  .salon-card-btn:hover {
    border-color: #0284c7 !important;
    background: #f0f9ff !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
  }
  .salon-services-scroll {
    max-height: 410px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 8px 4px 2px;
    scrollbar-width: thin;
    scrollbar-color: #38bdf8 #f1f5f9;
  }
  .salon-services-scroll::-webkit-scrollbar { width: 9px; }
  .salon-services-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
  .salon-services-scroll::-webkit-scrollbar-thumb { background: #38bdf8; border-radius: 10px; }
  .salon-card-btn.selected-service {
    border-color: #0284c7 !important;
    background: #e0f2fe !important;
    box-shadow: 0 0 0 2px rgba(2,132,199,.18);
  }
  .salon-service-check { display:none; color:#0284c7; font-size:18px; margin-left:10px; }
  .salon-card-btn.selected-service .salon-service-check { display:inline-block; }
  .salon-selected-bar { display:flex; justify-content:space-between; align-items:center; margin:0 0 10px; padding:9px 12px; border-radius:8px; background:#f0f9ff; color:#0369a1; font-size:13px; font-weight:600; }
  .salon-next-service-btn { width:100%; margin-top:12px; border-radius:22px; padding:11px; font-weight:700; background:#0284c7; border-color:#0284c7; color:#fff; }
  .salon-slot-btn {
    border: 1.5px solid #38bdf8;
    background: #ffffff;
    color: #0284c7;
    padding: 10px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
    width: 100%;
    margin-bottom: 8px;
    display: block;
    user-select: none;
  }
  .salon-slot-btn:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
  }
  .salon-slot-btn.booked {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    cursor: not-allowed;
    text-decoration: line-through;
  }
  .salon-cal-btn {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 50%;
    margin: 0 auto;
    width: 34px;
    height: 34px;
    user-select: none;
  }
  .salon-cal-btn.available {
    border: 1.5px solid #38bdf8;
    color: #0284c7;
  }
  .salon-cal-btn.available:hover {
    background: #0284c7;
    color: #ffffff;
  }
  .salon-cal-btn.selected {
    background: #0284c7;
    color: #ffffff;
  }
  .salon-cal-btn.disabled {
    color: #cbd5e1;
    cursor: not-allowed;
  }
</style>

<!-- Ultimate POS Salon Booking Engine Modal (Exact Screens 1-5 Flow) -->
<div class="modal fade" id="salonBookingEngineModal" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 10050;">
  <div class="modal-dialog modal-lg" role="document" style="max-width: 880px; margin-top: 40px;">
    <div class="modal-content" style="border-radius: 14px; border: none; overflow: hidden; border-top: 5px solid #0284c7; box-shadow: 0 20px 40px rgba(0,0,0,0.25);">
      
      <!-- Close Button -->
      <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute; right: 15px; top: 12px; z-index: 100; font-size: 24px; color: #64748b; opacity: 0.8;">
        <span aria-hidden="true">&times;</span>
      </button>

      <!-- ================= SCREEN 1: Choose Appointment Type ================= -->
      <div id="bladeScreen1" class="salon-modal-screen" style="display: block;">
        <div class="row no-gutters" style="min-height: 480px; margin: 0;">
          <!-- Left Col -->
          <div class="col-md-5 col-sm-5" style="padding: 32px 24px; border-right: 1px solid #f1f5f9; background: #ffffff;">
            <h3 style="font-weight: 800; color: #0f172a; margin-top: 0; font-size: 20px;">{{ $salonName }}</h3>
            <p style="color: #64748b; font-size: 14px; margin-top: 8px;">Choose an appointment type.</p>
          </div>
          <!-- Right Col -->
          <div class="col-md-7 col-sm-7" style="padding: 32px 24px; background: #ffffff; max-height: 520px; overflow-y: auto;">
            <div class="salon-selected-bar"><span><i class="fa fa-check-circle"></i> <span id="salonSelectedCount">0</span> service(s) selected</span><button type="button" class="btn btn-link btn-xs" onclick="salonEngine.clearServices()" style="padding:0;">Clear</button></div>
            <div style="position:relative; margin-bottom:10px;"><i class="fa fa-search" style="position:absolute; left:12px; top:11px; color:#94a3b8;"></i><input type="search" id="salonServiceSearch" class="form-control" placeholder="Search services (Hair Cut, Facial...)" oninput="salonEngine.filterServices(this.value)" style="padding-left:34px; border-radius:20px;"></div>
            <div class="service-select-group salon-services-scroll" id="salonServicesList">
              @forelse($services as $svc)
                <div class="salon-card-btn salon-service-card" data-service-name="{{ strtolower($svc->name . ' ' . ($svc->sku ?: '') . ' ' . $svc->category_name) }}" onclick="salonEngine.toggleService(this, {{ $svc->id }}, '{{ addslashes($svc->name) }}', {{ $svc->duration_minutes }}, {{ $svc->price }}, {{ $svc->variation_id ?: 'null' }})">
                  <div style="flex:1;">
                    <h5 style="margin: 0 0 6px 0; font-weight: 700; color: #1e293b; font-size: 15px;">{{ $svc->name }}</h5>
                    <span style="color: #64748b; font-size: 13px;">
                      <i class="fa fa-clock-o"></i> {{ $svc->duration_minutes }} minutes &bull; 
                      <strong style="color: #0284c7;">Rs. {{ number_format($svc->price, 2) }}</strong>
                    </span>
                  </div>
                  <div style="border-left: 1px solid #f1f5f9; padding-left: 14px; color: #94a3b8; font-size: 18px; font-weight: bold;"><span class="salon-service-check">✓</span></div>
                </div>
              @empty
                <div class="text-center text-muted" style="padding: 30px;">No services found in Products. Please add products/services in Ultimate POS.</div>
              @endforelse
            </div>
            <button type="button" class="salon-next-service-btn" onclick="salonEngine.continueWithServices()"><i class="fa fa-arrow-right"></i> Continue with selected service(s)</button>
          </div>
        </div>
      </div>

      <!-- ================= SCREEN 2: Month Calendar Grid ================= -->
      <div id="bladeScreen2" class="salon-modal-screen" style="display: none;">
        <div class="row no-gutters" style="min-height: 480px; margin: 0;">
          <!-- Left Col -->
          <div class="col-md-5 col-sm-5" style="padding: 32px 24px; border-right: 1px solid #f1f5f9; background: #ffffff;">
            <h3 style="font-weight: 800; color: #0f172a; margin-top: 0; font-size: 20px;">{{ $salonName }}</h3>
            <div class="service-badge-pill" onclick="salonEngine.showScreen(1)" style="display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cbd5e1; border-radius: 20px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 14px; background: #fff;">
              <span id="screen2SvcName">Hair Cut (45mins)</span> <i class="fa fa-pencil text-muted" style="margin-left: 4px;"></i>
            </div>
          </div>
          <!-- Right Col -->
          <div class="col-md-7 col-sm-7" style="padding: 28px 24px; background: #ffffff;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
              <button type="button" class="btn btn-default btn-xs" onclick="salonEngine.today()" style="border-radius: 14px; padding: 4px 14px; font-weight: 600;">Today</button>
              <strong style="font-size: 16px; color: #1e293b;" id="bladeMonthHeader">August 2026</strong>
              <div>
                <button type="button" class="btn btn-default btn-xs" onclick="salonEngine.prevMonth()">&lt;</button>
                <button type="button" class="btn btn-default btn-xs" onclick="salonEngine.nextMonth()">&gt;</button>
              </div>
            </div>
            
            <div style="display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; font-weight: bold; color: #64748b; margin-bottom: 10px;">
              <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>
            </div>
            <div id="bladeCalendarGridContainer" style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center;"></div>

            <div style="text-align: center; margin-top: 24px; font-size: 12px; color: #64748b;">
              <i class="fa fa-globe"></i> Time zone <strong>Asia/Colombo (11:56 AM)</strong> <i class="fa fa-caret-down"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- ================= SCREEN 3: Time Slot Generator ================= -->
      <div id="bladeScreen3" class="salon-modal-screen" style="display: none;">
        <div class="row no-gutters" style="min-height: 480px; margin: 0;">
          <!-- Left Col -->
          <div class="col-md-5 col-sm-5" style="padding: 32px 24px; border-right: 1px solid #f1f5f9; background: #ffffff;">
            <h3 style="font-weight: 800; color: #0f172a; margin-top: 0; font-size: 20px;">{{ $salonName }}</h3>
            <div class="service-badge-pill" onclick="salonEngine.showScreen(1)" style="display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cbd5e1; border-radius: 20px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 14px; background: #fff;">
              <span id="screen3SvcName">Hair Cut (45mins)</span> <i class="fa fa-pencil text-muted" style="margin-left: 4px;"></i>
            </div>
          </div>
          <!-- Right Col -->
          <div class="col-md-7 col-sm-7" style="padding: 28px 24px; background: #ffffff;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
              <button type="button" class="btn btn-default btn-xs" onclick="salonEngine.today()" style="border-radius: 14px; padding: 4px 14px; font-weight: 600;">Today</button>
              <strong style="font-size: 16px; color: #1e293b;" id="screen3MonthTitle">August 2026</strong>
              <button type="button" class="btn btn-default btn-xs" onclick="salonEngine.showScreen(2)"><i class="fa fa-calendar"></i></button>
            </div>

            <div id="bladeWeekStripContainer" style="display: flex; justify-content: space-between; margin-bottom: 16px; border-bottom: 1px solid #f1f5f9; padding-bottom: 12px;"></div>

            <h5 style="text-align: center; font-weight: 700; color: #1e293b; margin-bottom: 16px; font-size: 15px;" id="bladeSelectedDayHeader">Tuesday, August 4th</h5>

            <div id="bladeTimeSlotsVerticalList" style="max-width: 280px; margin: 0 auto; max-height: 250px; overflow-y: auto;">
              <div style="text-align: center; padding: 20px; color: #64748b; font-size: 13px;">Checking availability...</div>
            </div>

            <div style="text-align: center; margin-top: 20px; font-size: 12px; color: #64748b;">
              <i class="fa fa-globe"></i> Time zone <strong>Asia/Colombo (11:56 AM)</strong> <i class="fa fa-caret-down"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- ================= SCREEN 4: Confirm Booking Form ================= -->
      <div id="bladeScreen4" class="salon-modal-screen" style="display: none;">
        <div class="row no-gutters" style="min-height: 480px; margin: 0;">
          <!-- Left Summary Col -->
          <div class="col-md-5 col-sm-5" style="padding: 32px 24px; border-right: 1px solid #f1f5f9; background: #ffffff;">
            <h3 style="font-weight: 800; color: #0f172a; margin-top: 0; font-size: 20px;">{{ $salonName }}</h3>

            <div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; margin-top: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.03);">
              <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                <div>
                  <div style="font-size: 13px; font-weight: 700; color: #1e293b;" id="summaryDateLabel">Tuesday, August 4th, 2026</div>
                  <div style="font-size: 15px; font-weight: 800; color: #0284c7; margin-top: 2px;" id="summaryTimeLabel">9:00 AM &ndash; 9:45 AM</div>
                  <div style="font-size: 11px; color: #64748b; margin-top: 2px;"><i class="fa fa-globe"></i> Asia / Colombo</div>
                </div>
                <i class="fa fa-pencil text-muted" onclick="salonEngine.showScreen(3)" style="cursor: pointer; font-size: 14px;"></i>
              </div>
              <hr style="margin: 12px 0;">
              <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                <div>
                  <div style="font-size: 12px; color: #64748b;"><i class="fa fa-clock-o"></i> <span id="summaryDurationText">45 minutes</span></div>
                  <div style="font-size: 14px; font-weight: 700; color: #1e293b;" id="summarySvcLabel">Hair Cut</div>
                </div>
                <i class="fa fa-pencil text-muted" onclick="salonEngine.showScreen(1)" style="cursor: pointer; font-size: 14px;"></i>
              </div>
            </div>
          </div>

          <!-- Right Form Col -->
          <div class="col-md-7 col-sm-7" style="padding: 28px 24px; background: #ffffff;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
              <button type="button" class="btn btn-default btn-xs" onclick="salonEngine.showScreen(3)">&lt; Back</button>
              <h4 style="margin: 0; font-weight: 800; font-size: 18px; color: #0f172a;">Confirm Booking</h4>
            </div>

            <form id="posBladeBookingForm" onsubmit="salonEngine.submitForm(event)">
              <input type="hidden" name="_token" value="{{ csrf_token() }}">
              <div class="form-group" style="margin-bottom: 14px; background:#f0f9ff; padding:12px; border-radius:9px; border:1px solid #bae6fd;">
                <label style="font-size:13px; font-weight:700; color:#0369a1;"><i class="fa fa-search"></i> Find existing customer</label>
                <input type="search" class="form-control" id="bladeCustomerSearch" placeholder="Type customer name or phone number..." oninput="salonEngine.searchExistingCustomers(this.value)" autocomplete="off" style="border-radius:20px; margin-bottom:8px; font-size:16px;">
                <select class="form-control" id="bladeExistingCustomer" onchange="salonEngine.fillExistingCustomer(this.value)" style="border-radius:20px;">
                  <option value="">New customer — select a result below</option>
                  @foreach($customers as $customer)
                    <option value="{{ $customer->id }}" data-name="{{ e($customer->name) }}" data-first="{{ e($customer->first_name ?: $customer->name) }}" data-last="{{ e($customer->last_name) }}" data-phone="{{ e($customer->mobile) }}" data-email="{{ e($customer->email) }}">{{ $customer->name }} — {{ $customer->mobile }}</option>
                  @endforeach
                </select>
                <small style="color:#0369a1;">Existing customer select කළ විට fields auto-fill වේ.</small>
              </div>
              <div class="form-group" style="margin-bottom: 12px;">
                <label style="font-size: 13px; font-weight: 600;">Phone number <span style="color:#dc2626;">(Required)</span></label>
                <input type="tel" class="form-control input-lg" id="bladeCustPhone" placeholder="077 XXXX XXX" required style="border:2px solid #0284c7; font-size:18px; font-weight:700;">
              </div>
              <div class="form-group" style="margin-bottom: 12px;">
                <label style="font-size: 13px; font-weight: 600;">First name <span style="color:#dc2626;">(Required)</span></label>
                <input type="text" class="form-control" id="bladeCustFirst" required placeholder="e.g. Ayanthi">
              </div>
              <div class="form-group" style="margin-bottom: 12px;">
                <label style="font-size: 13px; font-weight: 600;">Last name</label>
                <input type="text" class="form-control" id="bladeCustLast" placeholder="e.g. Wickramasinghe">
              </div>

              <div class="row">
                <div class="col-xs-6">
                  <div class="form-group" style="margin-bottom: 12px;">
                    <label style="font-size: 12px; font-weight: 600;">Stylist / Staff</label>
                    <select class="form-control" id="bladeStylistSel">
                      @foreach($stylists as $st)
                        <option value="{{ $st->id }}">{{ $st->name }}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="form-group" style="margin-bottom: 12px;">
                    <label style="font-size: 12px; font-weight: 600;">Chair / Station</label>
                    <select class="form-control" id="bladeChairSel">
                      @foreach($chairs as $ch)
                        <option value="{{ $ch->id }}">{{ $ch->name }}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
              </div>

              <button type="submit" class="btn btn-block btn-primary" id="btnConfirmSubmitBlade" style="border-radius: 20px; padding: 12px; font-weight: 700; background: #0284c7; border-color: #0284c7; margin-top: 10px; font-size: 15px;">
                <span id="btnSubmitText">Confirm Booking</span>
              </button>
            </form>
          </div>
        </div>
      </div>

      <!-- ================= SCREEN 5: Booking Confirmed Success ================= -->
      <div id="bladeScreen5" class="salon-modal-screen" style="display: none; padding: 32px; background: #ffffff;">
        <h3 style="font-weight: 800; text-align: center; color: #0f172a; margin-top: 0; font-size: 22px;">{{ $salonName }}</h3>

        <div style="max-width: 520px; margin: 0 auto; text-align: center;">
          <div style="width: 56px; height: 56px; background: #10b981; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 16px auto; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);">✓</div>

          <div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; text-align: left; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <span style="font-size: 12px; color: #0284c7; font-weight: bold; background: #e0f2fe; padding: 2px 8px; border-radius: 4px;" id="screen5RefBadge">BK-2026</span>
              <span style="font-size: 11px; color: #10b981; font-weight: bold;">● Saved in Database</span>
            </div>
            <div style="font-size: 15px; font-weight: 700; color: #1e293b; margin-top: 8px;" id="screen5Date">Wednesday, August 5th, 2026</div>
            <div style="font-size: 16px; font-weight: 800; color: #0284c7; margin-top: 2px;" id="screen5Time">8:30 AM &ndash; 9:15 AM</div>
            <div style="font-size: 12px; color: #64748b; margin-top: 2px;"><i class="fa fa-globe"></i> Asia / Colombo</div>
            <hr style="margin: 12px 0;">
            <span class="label label-warning" style="background: #ea580c; font-size: 12px; padding: 4px 8px;" id="screen5SvcBadge">Hair Cut</span>
            <div style="margin-top: 10px; font-size: 13px; color: #475569;">📍 <strong>Location:</strong> <span id="screen5Loc">Chair #1</span></div>
            <div style="margin-top: 4px; font-size: 13px; color: #475569;">👩‍🦰 <strong>Stylist:</strong> <span id="screen5Styl">Amelda Fernando</span></div>
          </div>

          <p style="color: #475569; font-size: 14px; line-height: 1.5;">
            Thanks <strong id="screen5CustName">Ayanthi</strong>,<br>
            You'll receive an SMS confirmation via <strong>Notify.lk</strong> shortly.
          </p>

          <div style="display: flex; gap: 8px; justify-content: center; margin-top: 20px;">
            <button type="button" class="btn btn-success" onclick="salonEngine.loadToPos()" style="font-weight: bold;"><i class="fa fa-shopping-cart"></i> Load into POS Bill</button>
            <a href="#" target="_blank" class="btn btn-info" id="btnOpenWaLink" style="background: #25d366; border-color: #25d366; font-weight: bold;"><i class="fa fa-whatsapp"></i> WhatsApp Reminder</a>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>

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

<!-- ================= LIVE JAVASCRIPT & AJAX DATABASE SYNC ================= -->
<script>
window.salonEngine = {
  saveBookingUrl: '{{ url("salon/bookings") }}',
  slotsUrl: '{{ url("salon/available-slots") }}',
  detailsUrl: '{{ url("salon/bookings/get-details") }}',
  statusUrl: '{{ url("salon/bookings/update-status") }}',
  csrfToken: '{{ csrf_token() }}',

  selectedService: null,
  selectedServices: [],
  // Always start with today's date in Asia/Colombo, not a hard-coded demo date.
  getColomboToday: function() {
    var parts = new Intl.DateTimeFormat('en-CA', { timeZone: 'Asia/Colombo', year:'numeric', month:'2-digit', day:'2-digit' }).formatToParts(new Date());
    var value = {};
    parts.forEach(function(p) { if (p.type !== 'literal') value[p.type] = p.value; });
    return { year: parseInt(value.year), month: parseInt(value.month) - 1, date: value.year + '-' + value.month + '-' + value.day };
  },
  _todayColombo: null,
  selectedYear: new Date().getFullYear(),
  selectedMonth: new Date().getMonth(),
  selectedDate: new Date().toISOString().slice(0, 10),
  selectedSlot: null,
  savedBooking: null,

  showScreen: function(num) {
    var screens = document.querySelectorAll('.salon-modal-screen');
    for (var i = 0; i < screens.length; i++) {
      screens[i].style.display = 'none';
    }
    var target = document.getElementById('bladeScreen' + num);
    if (target) target.style.display = 'block';
  },

  toggleService: function(card, id, name, duration, price, variation_id) {
    var index = this.selectedServices.findIndex(function(s) { return String(s.id) === String(id); });
    if (index >= 0) { this.selectedServices.splice(index, 1); card.classList.remove('selected-service'); }
    else { this.selectedServices.push({id:id, name:name, duration:duration, price:price, variation_id:variation_id}); card.classList.add('selected-service'); }
    var count = document.getElementById('salonSelectedCount');
    if (count) count.innerText = this.selectedServices.length;
  },
  clearServices: function() {
    this.selectedServices = [];
    document.querySelectorAll('.salon-service-card.selected-service').forEach(function(c){ c.classList.remove('selected-service'); });
    var count = document.getElementById('salonSelectedCount'); if (count) count.innerText = '0';
  },
  searchExistingCustomers: function(query) {
    query = (query || '').toLowerCase().trim();
    var select = document.getElementById('bladeExistingCustomer');
    if (!select) return;
    var visible = 0;
    Array.prototype.forEach.call(select.options, function(opt, i) {
      if (i === 0) { opt.hidden = false; return; }
      var haystack = ((opt.getAttribute('data-name') || '') + ' ' + (opt.getAttribute('data-phone') || '') + ' ' + (opt.textContent || '')).toLowerCase();
      opt.hidden = query.length > 0 && haystack.indexOf(query) === -1;
      if (!opt.hidden) visible++;
    });
    if (query && visible === 1) {
      for (var i = 1; i < select.options.length; i++) {
        if (!select.options[i].hidden) { select.value = select.options[i].value; this.fillExistingCustomer(select.value); break; }
      }
    }
  },
  fillExistingCustomer: function(id) {
    var select = document.getElementById('bladeExistingCustomer');
    if (!select || !id) return;
    var opt = select.options[select.selectedIndex];
    if (!opt) return;
    var first = document.getElementById('bladeCustFirst');
    var last = document.getElementById('bladeCustLast');
    var phone = document.getElementById('bladeCustPhone');
    var email = document.getElementById('bladeCustEmail');
    if (first) first.value = opt.getAttribute('data-first') || '';
    if (last) last.value = opt.getAttribute('data-last') || '';
    if (phone) phone.value = opt.getAttribute('data-phone') || '';
    if (email) email.value = opt.getAttribute('data-email') || '';
  },
  filterServices: function(query) {
    query = (query || '').toLowerCase().trim();
    document.querySelectorAll('.salon-service-card').forEach(function(card) {
      card.style.display = !query || (card.getAttribute('data-service-name') || '').indexOf(query) !== -1 ? 'flex' : 'none';
    });
  },
  continueWithServices: function() {
    if (!this.selectedServices.length) { alert('Please select at least one service.'); return; }
    this.selectedService = this.selectedServices[0];
    if (this.selectedServices.length > 1) {
      this.selectedService = Object.assign({}, this.selectedServices[0], { name: this.selectedServices.map(function(s){return s.name;}).join(' + '), duration: this.selectedServices.reduce(function(t,s){return t + parseInt(s.duration || 0);},0), price: this.selectedServices.reduce(function(t,s){return t + parseFloat(s.price || 0);},0) });
    }
    this.selectService(this.selectedService.id, this.selectedService.name, this.selectedService.duration, this.selectedService.price, this.selectedService.variation_id);
  },
  selectService: function(id, name, duration, price, variation_id) {
    var t = this.getColomboToday();
    this.selectedYear = t.year;
    this.selectedMonth = t.month;
    this.selectedDate = t.date;
    this.selectedService = { id: id, name: name, duration: duration, price: price, variation_id: variation_id };
    var pillText = name + ' (' + duration + 'mins)';
    var el2 = document.getElementById('screen2SvcName');
    var el3 = document.getElementById('screen3SvcName');
    var elSum = document.getElementById('summarySvcLabel');
    var elDur = document.getElementById('summaryDurationText');
    if (el2) el2.innerText = pillText;
    if (el3) el3.innerText = pillText;
    if (elSum) elSum.innerText = name;
    if (elDur) elDur.innerText = duration + ' minutes';
    
    this.showScreen(2);
    this.renderMonthCalendar();
  },

  today: function() {
    var t = this.getColomboToday();
    this.selectedYear = t.year;
    this.selectedMonth = t.month;
    this.selectedDate = t.date;
    this.renderMonthCalendar();
  },

  prevMonth: function() {
    this.selectedMonth--;
    if (this.selectedMonth < 0) { this.selectedMonth = 11; this.selectedYear--; }
    this.renderMonthCalendar();
  },

  nextMonth: function() {
    this.selectedMonth++;
    if (this.selectedMonth > 11) { this.selectedMonth = 0; this.selectedYear++; }
    this.renderMonthCalendar();
  },

  renderMonthCalendar: function() {
    var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var hdr = document.getElementById('bladeMonthHeader');
    var hdr3 = document.getElementById('screen3MonthTitle');
    if (hdr) hdr.innerText = monthNames[this.selectedMonth] + ' ' + this.selectedYear;
    if (hdr3) hdr3.innerText = monthNames[this.selectedMonth] + ' ' + this.selectedYear;

    var firstDay = new Date(this.selectedYear, this.selectedMonth, 1).getDay();
    var daysInMonth = new Date(this.selectedYear, this.selectedMonth + 1, 0).getDate();

    var html = '';
    for (var i = 0; i < firstDay; i++) {
      html += '<div class="salon-cal-btn disabled"></div>';
    }

    for (var d = 1; d <= daysInMonth; d++) {
      var dateStr = this.selectedYear + '-' + String(this.selectedMonth + 1).padStart(2, '0') + '-' + String(d).padStart(2, '0');
      var dayOfWeek = new Date(this.selectedYear, this.selectedMonth, d).getDay();
      var isAvail = (dayOfWeek !== 0); // Mon-Sat

      var cls = isAvail ? 'available' : 'disabled';
      if (dateStr === this.selectedDate) cls += ' selected';

      var clickAttr = isAvail ? 'onclick="salonEngine.selectDate(\'' + dateStr + '\')"' : '';
      html += '<div class="salon-cal-btn ' + cls + '" ' + clickAttr + '>' + d + '</div>';
    }
    var grid = document.getElementById('bladeCalendarGridContainer');
    if (grid) grid.innerHTML = html;
  },

  selectDate: function(dateStr) {
    this.selectedDate = dateStr;
    var parts = dateStr.split('-');
    this.selectedYear = parseInt(parts[0]);
    this.selectedMonth = parseInt(parts[1]) - 1;

    this.showScreen(3);
    this.renderWeekAndSlots();
  },

  renderWeekAndSlots: function() {
    var currDate = new Date(this.selectedDate);
    var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var dayNamesFull = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var dayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

    var selHdr = document.getElementById('bladeSelectedDayHeader');
    if (selHdr) selHdr.innerText = dayNamesFull[currDate.getDay()] + ', ' + monthNames[currDate.getMonth()] + ' ' + currDate.getDate();

    var startOfWeek = new Date(currDate);
    startOfWeek.setDate(currDate.getDate() - currDate.getDay());

    var weekHtml = '';
    for (var i = 0; i < 7; i++) {
      var d = new Date(startOfWeek);
      d.setDate(startOfWeek.getDate() + i);
      var dStr = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
      var isAct = (dStr === this.selectedDate);
      weekHtml += '<div onclick="salonEngine.selectDate(\'' + dStr + '\')" style="text-align:center; cursor:pointer; padding:4px 8px; user-select:none;">' +
                    '<div style="font-size:11px; color:#64748b;">' + dayNamesShort[i] + '</div>' +
                    '<div style="width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:13px; margin:0 auto; ' + (isAct ? 'background:#0284c7; color:#fff;' : 'color:#1e293b;') + '">' + d.getDate() + '</div>' +
                  '</div>';
    }
    var wkContainer = document.getElementById('bladeWeekStripContainer');
    if (wkContainer) wkContainer.innerHTML = weekHtml;

    var slotContainer = document.getElementById('bladeTimeSlotsVerticalList');
    if (slotContainer) slotContainer.innerHTML = '<div style="text-align:center; padding:15px; color:#64748b; font-size:13px;">Checking availability in database...</div>';

    var svcId = this.selectedService ? this.selectedService.id : 1;
    var ajaxUrl = this.slotsUrl + '?date=' + this.selectedDate + '&service_id=' + svcId;

    fetch(ajaxUrl)
      .then(function(res) { return res.json(); })
      .then(function(json) {
        if (json.success && json.slots && json.slots.length > 0) {
          var html = '';
          json.slots.slice(0, 8).forEach(function(s) {
            var btnCls = s.available ? 'salon-slot-btn' : 'salon-slot-btn booked';
            var clickFn = s.available ? 'onclick="salonEngine.selectSlot(\'' + s.t12 + '\', \'' + s.t24 + '\', \'' + s.end12 + '\', \'' + s.end24 + '\')"' : '';
            html += '<div class="' + btnCls + '" ' + clickFn + '>' + s.t12 + '</div>';
          });
          if (slotContainer) slotContainer.innerHTML = html;
        } else {
          salonEngine.renderFallbackSlots();
        }
      })
      .catch(function(err) {
        salonEngine.renderFallbackSlots();
      });
  },

  renderFallbackSlots: function() {
    var slots = [
      { t12: '8:00 AM', t24: '08:00', end12: '8:45 AM', end24: '08:45' },
      { t12: '8:30 AM', t24: '08:30', end12: '9:15 AM', end24: '09:15' },
      { t12: '9:00 AM', t24: '09:00', end12: '9:45 AM', end24: '09:45' },
      { t12: '9:30 AM', t24: '09:30', end12: '10:15 AM', end24: '10:15' },
      { t12: '10:00 AM', t24: '10:00', end12: '10:45 AM', end24: '10:45' },
      { t12: '10:30 AM', t24: '10:30', end12: '11:15 AM', end24: '11:15' }
    ];
    var html = '';
    for (var j = 0; j < slots.length; j++) {
      var s = slots[j];
      html += '<div class="salon-slot-btn" onclick="salonEngine.selectSlot(\'' + s.t12 + '\', \'' + s.t24 + '\', \'' + s.end12 + '\', \'' + s.end24 + '\')">' + s.t12 + '</div>';
    }
    var slotContainer = document.getElementById('bladeTimeSlotsVerticalList');
    if (slotContainer) slotContainer.innerHTML = html;
  },

  selectSlot: function(t12, t24, end12, end24) {
    this.selectedSlot = { t12: t12, t24: t24, end12: end12, end24: end24 };

    var currDate = new Date(this.selectedDate);
    var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var dayNamesFull = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

    var sumDate = document.getElementById('summaryDateLabel');
    var sumTime = document.getElementById('summaryTimeLabel');
    if (sumDate) sumDate.innerText = dayNamesFull[currDate.getDay()] + ', ' + monthNames[currDate.getMonth()] + ' ' + currDate.getDate() + ', ' + currDate.getFullYear();
    if (sumTime) sumTime.innerHTML = t12 + ' &ndash; ' + end12;

    this.showScreen(4);
  },

  submitForm: function(e) {
    if (e) e.preventDefault();

    var submitBtn = document.getElementById('btnConfirmSubmitBlade');
    var btnText = document.getElementById('btnSubmitText');
    if (submitBtn) submitBtn.disabled = true;
    if (btnText) btnText.innerText = 'Saving to Database...';

    var first = document.getElementById('bladeCustFirst') ? document.getElementById('bladeCustFirst').value.trim() : 'Ayanthi';
    var last = document.getElementById('bladeCustLast') ? document.getElementById('bladeCustLast').value.trim() : '';
    var email = document.getElementById('bladeCustEmail') ? document.getElementById('bladeCustEmail').value.trim() : '';
    var phone = document.getElementById('bladeCustPhone') ? document.getElementById('bladeCustPhone').value.trim() : '0771239874';
    
    var stylSel = document.getElementById('bladeStylistSel');
    var stylistId = stylSel ? stylSel.value : 1;
    var stylistName = (stylSel && stylSel.options[stylSel.selectedIndex]) ? stylSel.options[stylSel.selectedIndex].text : 'Amelda Fernando';
    
    var chairSel = document.getElementById('bladeChairSel');
    var chairId = chairSel ? chairSel.value : 1;
    var chairName = (chairSel && chairSel.options[chairSel.selectedIndex]) ? chairSel.options[chairSel.selectedIndex].text : 'Chair #1';

    var payload = {
      _token: this.csrfToken,
      service_id: this.selectedService ? this.selectedService.id : 1,
      service_name: this.selectedService ? this.selectedService.name : 'Hair Cut',
      duration: this.selectedService ? this.selectedService.duration : 45,
      price: this.selectedService ? this.selectedService.price : 2500,
      booking_date: this.selectedDate,
      start_time: this.selectedSlot ? this.selectedSlot.t24 : '09:00:00',
      end_time: this.selectedSlot ? this.selectedSlot.end24 : '09:45:00',
      first_name: first,
      last_name: last,
      email: email,
      phone: phone,
      stylist_id: stylistId,
      chair_id: chairId,
      selected_services: this.selectedServices.length ? this.selectedServices : [this.selectedService]
    };

    fetch(this.saveBookingUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': this.csrfToken,
        'Accept': 'application/json'
      },
      body: JSON.stringify(payload)
    })
    .then(function(res) { return res.json(); })
    .then(function(json) {
      if (submitBtn) submitBtn.disabled = false;
      if (btnText) btnText.innerText = 'Confirm Booking';

      if (json.success) {
        salonEngine.savedBooking = json.booking;

        var refBadge = document.getElementById('screen5RefBadge');
        if (refBadge) refBadge.innerText = json.booking.booking_reference || 'BK-' + json.booking.id;

        var cName = document.getElementById('screen5CustName');
        var cDate = document.getElementById('screen5Date');
        var cTime = document.getElementById('screen5Time');
        var cSvc = document.getElementById('screen5SvcBadge');
        var cLoc = document.getElementById('screen5Loc');
        var cStyl = document.getElementById('screen5Styl');

        if (cName) cName.innerText = first;
        if (cDate) cDate.innerText = document.getElementById('summaryDateLabel') ? document.getElementById('summaryDateLabel').innerText : 'Tuesday, August 4th, 2026';
        if (cTime) cTime.innerHTML = document.getElementById('summaryTimeLabel') ? document.getElementById('summaryTimeLabel').innerHTML : '9:00 AM &ndash; 9:45 AM';
        if (cSvc) cSvc.innerText = salonEngine.selectedService ? salonEngine.selectedService.name : 'Hair Cut';
        if (cLoc) cLoc.innerText = chairName;
        if (cStyl) cStyl.innerText = stylistName;

        var cleanPhone = phone.replace(/[^0-9]/g, '');
        if (cleanPhone.startsWith('0')) cleanPhone = '94' + cleanPhone.substring(1);
        var waMsg = encodeURIComponent('Hello ' + first + ', your appointment for ' + (salonEngine.selectedService ? salonEngine.selectedService.name : 'Hair Cut') + ' is confirmed for ' + salonEngine.selectedDate + ' at ' + (salonEngine.selectedSlot ? salonEngine.selectedSlot.t12 : '09:00 AM') + '. Ref: ' + (json.booking.booking_reference || 'BK-1001') + '. Stylist: ' + stylistName + '.');
        var waLink = document.getElementById('btnOpenWaLink');
        if (waLink) waLink.setAttribute('href', 'https://wa.me/' + cleanPhone + '?text=' + waMsg);

        salonEngine.showScreen(5);
        if (typeof toastr !== 'undefined') {
          toastr.success('Appointment saved in database and SMS sent!');
        }
      } else {
        alert(json.message || 'Failed to save booking to database.');
      }
    })
    .catch(function(err) {
      if (submitBtn) submitBtn.disabled = false;
      if (btnText) btnText.innerText = 'Confirm Booking';
      console.error('Error saving booking:', err);
      alert('Error connecting to database. Please check connection.');
    });
  },

  // Load into POS Cart Table
  loadToPos: function() {
    if (typeof $ !== 'undefined' && $('#salonBookingEngineModal').modal) {
      $('#salonBookingEngineModal').modal('hide');
    } else {
      document.getElementById('salonBookingEngineModal').style.display = 'none';
      document.body.classList.remove('modal-open');
    }

    var items = this.selectedServices.length ? this.selectedServices : (this.selectedService ? [this.selectedService] : []);
    var index = 0;
    var addNext = function() {
      if (index >= items.length) return;
      var item = items[index++];
      if (item.variation_id && typeof pos_product_row === 'function') {
        pos_product_row(item.variation_id);
        setTimeout(addNext, 800);
      } else { addNext(); }
    };
    if (items.length && typeof pos_product_row === 'function') {
      addNext();
    } else if (typeof toastr !== 'undefined') {
      toastr.success('Appointment loaded into POS checkout!');
    }
  },

  // AUTO-INJECT APPOINTMENT WHEN OPENED WITH ?appointment_id=X
  injectAppointmentIntoPOS: function() {
    var urlParams = new URLSearchParams(window.location.search);
    var apptId = urlParams.get('appointment_id');
    if (!apptId) return;
    // DOMContentLoaded and window.load can both fire. Prevent duplicate POS quantities.
    if (window.__salonAppointmentInjectedId === String(apptId) || window.__salonAppointmentInjectingId === String(apptId)) return;
    window.__salonAppointmentInjectingId = String(apptId);

    fetch(this.detailsUrl + '?id=' + apptId)
      .then(function(res) { return res.json(); })
      .then(function(res) {
        if (res.success && res.booking) {
          var b = res.booking;

          // 1. SELECT CUSTOMER IN SELECT2
          if (b.contact_id && typeof $ !== 'undefined') {
            if ($('#customer_id').find("option[value='" + b.contact_id + "']").length) {
              $('#customer_id').val(b.contact_id).trigger('change');
            } else {
              var newOption = new Option(b.customer_name + ' (' + (b.customer_phone || '') + ')', b.contact_id, true, true);
              $('#customer_id').append(newOption).trigger('change');
            }
          }

          // 2. INSERT PRODUCT ROW INTO POS CART TABLE
          // 2. INSERT ALL BOOKING SERVICE ITEMS INTO POS CART
          var appointmentItems = Array.isArray(res.items) && res.items.length ? res.items : [];
          if (!appointmentItems.length && res.variation_id) {
            appointmentItems = [{ variation_id: res.variation_id }];
          }
          var addItemsToPos = function(items) {
            var index = 0;
            var addNext = function() {
              if (index >= items.length) return;
              var item = items[index++];
              if (item.variation_id && typeof pos_product_row === 'function') {
                pos_product_row(item.variation_id);
                setTimeout(addNext, 800);
              } else if (index < items.length) {
                setTimeout(addNext, 300);
              }
            };
            addNext();
          };
          var waitForPosItems = function(attempts) {
            if (typeof pos_product_row === 'function') {
              window.__salonAppointmentInjectedId = String(apptId);
              addItemsToPos(appointmentItems);
            } else if (attempts < 25) {
              setTimeout(function(){ waitForPosItems(attempts + 1); }, 400);
            } else {
              console.error('POS product function not found; appointment items not loaded');
            }
          };
          if (appointmentItems.length) waitForPosItems(0);

          // 3. SELECT SERVICE STAFF
          if (b.stylist_id && typeof $ !== 'undefined' && $('#service_staff_id').length) {
            $('#service_staff_id').val(b.stylist_id).trigger('change');
          }

          // 4. Update status in database to in_salon
          if (typeof $ !== 'undefined') {
            $.post(salonEngine.statusUrl, { _token: salonEngine.csrfToken, id: apptId, status: 'in_salon' });
          }

          // 5. Prepend Top Alert Banner on POS screen
          if (typeof $ !== 'undefined' && $('#pos_form').length) {
            var banner = '<div class="alert alert-info alert-dismissible" style="background:#e0f2fe!important; color:#0369a1!important; border: 1.5px solid #38bdf8!important; border-radius:8px; margin-bottom:12px;">' +
              '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
              '<h4 style="margin:0 0 6px 0; font-weight:800;"><i class="fa fa-scissors"></i> Active Appointment Loaded: ' + (b.booking_reference || 'BK-' + b.id) + '</h4>' +
              '<strong>Client:</strong> ' + b.customer_name + ' &bull; <strong>Service:</strong> ' + b.service_name + ' &bull; <strong>Stylist:</strong> ' + b.stylist_name + ' &bull; <strong>Station:</strong> ' + b.chair_name +
            '</div>';
            $('#pos_form').prepend(banner);
          }
        }
      })
      .catch(function(err) {
        console.error('POS Injection error:', err);
      });
  }
};

// Auto-run on POS Screen load
document.addEventListener('DOMContentLoaded', function() {
  window.salonEngine.injectAppointmentIntoPOS();
});

// Run once window is fully loaded (covers scripts loaded at footer)
window.addEventListener('load', function() {
  window.salonEngine.injectAppointmentIntoPOS();
});

// Keyboard F6 Shortcut
document.addEventListener('keydown', function(e) {
  if (e.keyCode === 117 || e.key === 'F6') {
    e.preventDefault();
    if (typeof $ !== 'undefined' && $('#salonBookingEngineModal').modal) {
      $('#salonBookingEngineModal').modal('show');
    }
    window.salonEngine.showScreen(1);
  }
});
</script>