@section('title', 'Schedule')
@section('heading', 'Schedule')

@section('top-menu-items')
<x-partials.top-menu-item name="Calendar" route="calendar" />
@can('write_schedule')
<x-partials.top-menu-item name="Add Order" route="orders.createAndRedirect" />
@endcan
@endsection

<section class="content d-flex flex-column flex-column-fluid">
    <div id="event-sidebar">
        <div id="event-time"></div>
        <div id="custom-box"></div>
        <div id="event-seats">
            <span class="fa fa-user"></span>
            <span id="event-seats-count">5 passengers</span>
        </div>
        <div id="event-title">
            <span id="event-icon"></span>
            <span id="event-title-text"></span>
        </div>
        <div id="event-image">
            <img id="event-img" src="" alt="Event Image">
        </div>
    </div>
    <div class="container-xxl position-fixed"
        style="top: 109px; left: 144px; padding-top:10px; width: calc(100% - 144px); z-index: 1050; background-color: white;">
        <div class="d-flex justify-content-between align-items-center w-100">
            <div class="row mb-10">
                <x-partials.vessel-filters colsize="col-6" :sellectedItem="$toursOfSelectedVessel" :tours="$tours" />
            </div>
            <div class="calendar-header mx-auto text-center d-flex align-items-center justify-content-center">
                <h2 class="date-title mb-0">{{ \Carbon\Carbon::parse($currentDate)->format('D M j, Y') }}</h2>
                <div class="btn-group ml-3">
                    <button type="button" class="btn-circle prev-date border-0" wire:click="previousDate">&lt;</button>
                    <button type="button" class="btn-circle next-date border-0" wire:click="nextDate">&gt;</button>
                </div>
            </div>
            <div class="d-flex align-items-center">
                <button type="button" class="btn btn-light mx-2" wire:click="resetToToday">Today</button>
                <div class="position-relative d-inline-block">
                    <input type="date" id="selected-date" class="form-control"
                        style="opacity: 1; padding-right: 40px; width: 180px;" wire:model="selectedDate"
                        wire:change="setDate($event.target.value)" />
                </div>
                <div class="ml-5 menu_link p-3 rounded text-red"
                    style="background-color: #F3F3F3 !important;  color: #F4404B !important;">
                    {{ $totalTripsToday }} Total Trips Today
                </div>
                <button type="button" class="btn btn-light mx-2" wire:click="toggleNotes">Notes</button>
            </div>
        </div>
    </div>
    <div class="calendar-wrapper" style="margin-top: 85px;">
        <div class="calendar-container" style="--tour-count: {{ $vessels->count() }}">
            <div class="tours-grid">
                <div class="time-label"></div>
                @foreach ($vessels as $vessel)
                <div class="tour-title">
                    <i class="{{ $vessel->icon() }} text-danger"></i> {{ $vessel->name }}<br>
                    @if ($vessel->default_availability != 'available')
                    <span class="" style="font-size: 0.8em; font-weight: normal; color: black;">Not
                        Available</span>
                    @endif
                <div class="vessel-notes" wire:click="toggleVesselNotes({{ $vessel->id }})" style="cursor: pointer;">
                @php
                    $vesselNote = $vesselNotes[$vessel->id] ?? null;
                @endphp
                @if($vesselNote && ($vesselNote['pilot_name'] || $vesselNote['aircraft_id']))
                    <div style="font-size: 0.7em; font-weight: normal; color: #666; margin-top: 2px;">
                        @if($vesselNote['pilot_name'])
                            <div><strong>Pilot:</strong> {{ $vesselNote['pilot_name'] }}</div>
                        @endif
                        @if($vesselNote['aircraft_id'])
                            <div><strong>Aircraft:</strong> {{ $vesselNote['aircraft_id'] }}</div>
                        @endif
                    </div>
                @else
                    <div style="font-size: 0.7em; font-weight: normal; color: #999; margin-top: 2px;">
                        Click to add pilot/aircraft
                    </div>
                @endif
            </div>
                </div>
                @endforeach
                @foreach ($timeSlots as $slot)
                <div class="time-label">{{ $slot }}</div>
                @foreach ($vessels as $vessel)
                @php
                $bookingCount = 0;
                $bookingDetails = [];
                $bookedSeats = 0;
                @endphp

                @foreach ($bookings as $booking)
                @php
                $slotStart = \Carbon\Carbon::parse($slot);
                $slotEnd = (clone $slotStart)->addMinutes((int) $increment);
                $bookingTime = \Carbon\Carbon::parse($booking['start']);
                $slotStartTime = $slotStart->format('H:i:s');
                $bookingTimeTime = $bookingTime->format('H:i:s');
                $formattedSlotStart = $slotStart->format('H:i:s');
                $formattedSlotEnd = $slotEnd->format('H:i:s');
                $formattedBookingTime = $bookingTime->format('H:i:s');
                @endphp

                @if (
                $formattedBookingTime >= $formattedSlotStart &&
                $formattedBookingTime < $formattedSlotEnd &&
                    $booking['vessel']==$vessel->id)
                    @php
                    $bookingCount++;
                    $bookingDetails[] = $booking;
                    $bookedSeats += $booking['seats'];
                    @endphp
                    @endif
                    @endforeach
                    @php
                    // Calculate remaining seats based on regular bookings only (exclude block bookings)
                    $regularBookings = collect($bookingDetails)->filter(function($b) {
                        return  !($b['hasBlockedBooking'] ?? false);
                    });
                    $regularBookedSeats = $regularBookings->sum('seats');
                    $maxSeatsForRegular = $regularBookings->max('tour_max_seats') ?? 0;
                    $totalSeats = min($vessel->seats, $maxSeatsForRegular);
                    $remSeats = $totalSeats - $regularBookedSeats;
                    $remainingSeats = max(0, $remSeats);
                    $lastTopOffset = 0;
                    @endphp

                    <div class="time-slot d-flex
                                {{ count($bookingDetails) > 1 ? 'more-than-one' : '' }}
                                {{ count($bookingDetails) > 2 ? 'more-than-two' : '' }}
                                {{ $this->isSlotUnavailable($slot, $currentDate) ? 'unavailable-slot unavailable' : '' }}
                                {{ $this->isSlotUnavailableTour($slot, $currentDate, $vessel->id) ? 'unavailable-slot unavailable' : '' }}
                                  {{$orderable_id ? 'highlight-orderable' : '' }}"
                        data-slot="{{ $slot }}" data-vessel="{{ $vessel->id }}"
                        @php
                       $canBooking = Auth::user()->hasRole(['Owner', 'Administrator']) 
                       || Auth::user()->can('schedule_override');
                        @endphp

                        @if (
                        !$isHoliday &&
                        $vessel->default_availability == 'available' &&
                        (!$this->isSlotUnavailable($slot, $currentDate) ||  $canBooking ) &&
                        (!$this->isSlotUnavailableTour($slot, $currentDate, $vessel->id) ||  $canBooking )
                        )
                        wire:click="openSidebar('{{ $slot }}', '{{ $vessel->name }}', {{ $vessel->vessel_type_id }}, {{ $vessel->id }})"
                        @else
                        @click="window.dispatchEvent(new CustomEvent('show-blockbooking-modal'))" @endif>

                        <div class="booking-scroll">
                            @foreach ($bookingDetails as $booking)
                            @php                         
                            $isRelated = in_array(
                            $booking['id'],
                            is_array($this->relatedBookingIds)
                            ? $this->relatedBookingIds
                            : $this->relatedBookingIds->toArray(),
                            );
                            $isSelected = $this->selectedBookingId === $booking['id'];
                            $slotStart = \Carbon\Carbon::parse($slot);
                            $bookingTime = \Carbon\Carbon::parse($booking['start']);
                            $slotStartTime = $slotStart->format('H:i:s');
                            $bookingTimeTime = $bookingTime->format('H:i:s');
                            $timeDifference = Carbon\Carbon::parse($slotStartTime)->diffInMinutes(
                            Carbon\Carbon::parse($bookingTimeTime),
                            false,
                            );
                            $topOffset = $timeDifference * ($increment == '15' ? 4 : 2);
                            $lastTopOffset = $topOffset;
                            @endphp

                            <div id="booking-{{ $booking['id'] }}"  class="booking-info d-flex flex-column    
                                                    {{ count($bookingDetails) > 1 ? 'd-flex flex-column m-0 p-0' : '' }}
                                                    {{ $isRelated && $isSelected ? 'selected' : ($isRelated ? 'highlighted' : '') }}
                                                    {{ is_null($booking['tour_id']) ? 'stripeyellow' : '' }}  
                                                     {{ strtolower($booking['order_status']) === 'pending' ? 'booking-infojs' : '' }}                     "
                                data-bookingId="{{ $booking['id'] }}" data-booking-id="{{ $booking['id'] }}"
                                data-order-id="{{ $booking['order'] ?? '' }}"
                                data-order-status="{{ $booking['order_status'] ?? '' }}"
                                style="height: {{ $booking['duration'] * ($increment == '15' ? 4 : 2) }}px;
                                                top: {{ $topOffset }}px;
                                                background-color:{{ $booking['schedule_colour'] ?? '#FFFFFF' }};"
                                wire:click="{{ ($booking['block'] ?? false) || is_null($booking['tour_id']) ? "blockdetail('{$booking['id']}')" : "showBookingDetails('{$booking['id']}')" }}"
                                @click.stop>
                                {!! $booking['notes'] !!}

                                <div style="font-weight: 500;"
                                    class="d-flex justify-content-between align-items-center w-75
                                                {{ count($bookingDetails) > 1 ? 'd-flex flex-column align-items-center ' : '' }}">
                                @if(!($booking['block'] ?? false) || ($booking['is_blocked_seats'] ?? false))
                                    <div style="font-weight: 500;"
                                        class="left-section fs-3 mb-0
                                            {{ count($bookingDetails) > 1 ? 'd-flex align-items-center' : '' }}
                                            {{ !$booking['block'] && $booking['seats'] > $vessel->seats ? 'fw-bold text-success border border-success rounded p-2' : '' }}">
                                        {{ $booking['seats'] }} {!! $booking['customer_partner'] !!}
                                    </div>

                                    @if(!($booking['block'] ?? false))
                                    <div class="d-flex align-items-center" style="font-weight: 500;">
                                        <span class="pe-1">{{ $booking['order'] }}</span> {!! $booking['icon_status'] !!}
                                    </div>
                                    @endif
                                @endif
                                </div>
                                @foreach (['customer_name', 'partner_name', 'group_title', 'title'] as $field)
                                @if(!empty($booking[$field]))
                                    <p class="truncate mb-0 booking-title {{ $loop->first ? 'mt-2' : '' }} {{ count($bookingDetails) > 1 ? 'd-flex mb-0' : '' }}"
                                    style="max-width: 75%; font-weight: 500;">
                                    {{ $booking[$field] }}
                                    </p>
                                @endif
                            @endforeach

                            </div>
                            @endforeach
                        </div>
                        @php
                        $hasRegularBooking = collect($bookingDetails)->contains(function($b) {
                            return !is_null($b['tour_id']) && !($b['hasBlockedBooking'] ?? false);
                        });
                        // Get the first regular booking for duration calculation
                        $firstRegularBooking = collect($bookingDetails)->first(function($b) {
                            return !is_null($b['tour_id']) && !($b['hasBlockedBooking'] ?? false);
                        });
                        @endphp
                        @if (
                        $remainingSeats > 0 &&
                        $hasRegularBooking &&
                        $firstRegularBooking
                        &&  !$booking['hasBlockedBooking'] && !$booking['private_flight']
                        )
                        <div class="remaining-seats-box d-flex flex-column justify-content-center align-items-center text-white fw-bold"
                            wire:click="openSidebarFromRemaining('{{ $slot }}', '{{ $vessel->name }}', {{ $vessel->vessel_type_id }}, {{ $vessel->id }})"
                            @click.stop
                            style="width: 20%; height: {{ ($firstRegularBooking['duration'] ?? 60) * ($increment == '15' ? 4 : 2) }}px; border: 1px solid #F4404B; border-left: none; text:black; position: relative; opacity: 1!important; top: {{ $lastTopOffset }}px !important; z-index: 10;">
                            <span class="fs-4 text-black">+</span>
                            <span class="text-black">{{ $remainingSeats }}</span>
                        </div>
                        @endif
                    </div>
                    @endforeach
                    @endforeach
            </div>


        </div>
        <div id="sidebar1" class="pt-4 ps-4 sidebar {{ $sidebarOpen ? 'open' : '' }} border-0 md:shadow-md"
            style="z-index: 1050;">
            <div class="scrollable-content">
                <span class="btn-close" style="margin-top: -10px;" wire:click="hideBookingDetails">✖</span>
                <div class="mt-4" id="mainButtons" style="display: block;">                   
                @if ($showVesselNotes)
                <div class="vessel-notes-section">
                    <div>
                    <h5>Pilot & Aircraft Details</h5>
                    </div>                                    
                    @if($selectedVesselForNotes)
                        @php
                            $selectedVessel = $vessels->firstWhere('id', $selectedVesselForNotes);
                        @endphp
                        <p><strong>Vessel:</strong> {{ $selectedVessel->name }}</p>
                        <p><strong>Date:</strong> {{ \Carbon\Carbon::parse($currentDate)->format('M j, Y') }}</p>
                    @endif
                 
                    <div class="mb-3">
                        <label class="form-label fw-bold">Pilot Name</label>
                        <input type="text" 
                            class="form-control form-control-solid" 
                            wire:model.live.debounce.500ms="pilotName"
                            placeholder="Enter pilot name">
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Aircraft ID</label>
                        <input type="text" 
                            class="form-control form-control-solid" 
                            wire:model.live.debounce.500ms="aircraftId"
                            placeholder="Enter aircraft ID">
                    </div>

                    <button class="btn btn-primary mt-3" wire:click="closeSidebar">Close</button>
                </div>
                @endif
                    @if (!$showBlockSchedule && !$showBlockSeats && !$blockSchedule && !$showNotes && !$showVesselNotes )
                    <input type="button" value="New Customer Order" id="cusOrderBtn" class="custom-button mt-5 mb-4" />
                    <input type="button" value="New Partner Order" id="parOrderBtn" class="custom-button mt-5 mb-4" />
                    @if ($skipBlockScheduleReset)
                    <input type="button" value="Block Schedule" wire:click="showBlockSechduleDetail"
                        class="custom-button mt-5 mb-4" />
                    @else
                    <input type="button" value="Block Seats" wire:click="showBlockSeatsDetail"
                        class="custom-button mt-5 mb-4" />
                    @endif
                    @endif
                </div>

                <div id="partnerButtons" style="display: none;" class="mt-4">
                    <input type="button" value="Add Partner" id="addPartnerBtn" class="custom-button mt-5 mb-4" />
                    <p class="text-center fw-bold">OR</p>

                    <input type="text" id="searchInput" placeholder="Search Partner" style="background-color: #F3F3F3;"
                        class="form-control form-control-solid text-center" />
                    <ul id="partnerList" style=" list-style-type: none; margin: 0; padding: 0;">
                        @foreach ($partners as $partner)
                        <li class="partner-item" id="partner-item-list"
                            data-id="{{ $partner->id }}"
                            data-name="{{ strtolower(preg_replace('/[^a-z0-9\s]/i', '', $partner->organization_name)) }}"
                            onclick="selectPartner({{ $partner->id }}, {{ json_encode($partner->organization_name) }})"
                            style="cursor: pointer;">
                            {{ $partner->organization_name }}
                        </li>
                        @endforeach
                    </ul>

                </div>

                @if ($showBlockSchedule)
                <livewire:block-schedule-form
                    :currentDate="$currentDate"
                    :selectedTimeSlot="$selectedTimeSlot"
                    :vesselId="$selectedVesselId" />

                @if ($selectedCustomer)
                <div class="seat-allocation-list mt-4">
                    <h4>Blocking Details</h4>
                    {{-- <p><strong>Customer:</strong> {{ $selectedCustomer->first_name }}
                    {{ $selectedCustomer->last_name }}</p> --}}
                    {{-- <p><strong>Tour:</strong> {{ $tourSelected->name }}</p> --}}
                    <p><strong>Seats:</strong> {{ $selectedSeats }}</p>
                    <p><strong>Dutation:</strong> {{ $selectedDuration }} Minutes</p>

                    @if (count($seatAllocation) > 0)
                    <h5>Seat Allocation</h5>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Vessel Name</th>
                                <th>Time Slot</th>
                                <th>Allocated Seats</th>
                                <th>Duration</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($seatAllocation as $allocation)
                            <tr>
                                <td>{{ $allocation['vessel_name'] }}</td>
                                <td>{{ $allocation['time'] }}</td>
                                <td>{{ $allocation['allocated_seats'] }}</td>
                                <td>{{ $allocation['duration'] }} min</td>
                                {{-- <td>{{ \Carbon\Carbon::parse($allocation['duration'])->diffInMinutes(\Carbon\Carbon::now()) }} mins</td> --}}
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @endif

                    <!-- Save Button to Create Booking -->
                    <div class="mt-3">
                        <button wire:click="saveBooking" class="btn btn-success w-100">Block
                            Schedule</button>
                    </div>
                </div>
                @endif

                @endif
                @if ($showBlockSeats)
                <livewire:block-seats-form
                    :currentDate="$currentDate"
                    :selectedTimeSlot="$selectedTimeSlot"
                    :vesselId="$selectedVesselId" />
                @endif
                <div style="display: {{ $blockSchedule ? 'block' : 'none' }};">
                    <livewire:block-schedule-details />
                </div>
                <div id="customersButtons" style="display: none;" class="mt-4">
                    <input type="button" value="Add Customer" class="custom-button mt-5 mb-4" id="addCustomerBtn" />
                    <p class="text-center fw-bold">OR</p>

                    <input type="text" id="customerSearchInput" placeholder="Search Customer"
                        style="background-color: #F3F3F3;" class="form-control form-control-solid text-center" />

                    <ul id="customerList" style="list-style-type: none; margin: 0; padding: 0;">
                        @foreach ($customers as $customer)
                        <li class="customer-item" id="customer-item-list"
                            data-id="{{ $customer->id }}"
                            data-name="{{ strtolower($customer->name) }}"
                            data-email="{{ strtolower($customer->email) }}"
                            onclick="selectCustomer({{ $customer->id }}, '{{ $customer->name }}')"
                            style="cursor: pointer;">
                            {{ $customer->name }} ({{ $customer->email }})
                        </li>
                        @endforeach
                    </ul>
                </div>



                <div id="primary_contact" style="display: none;">
                    @if ($beforeStayAddress && !$orderable_id)
                    <div class="fv-row mb-5">
                        <label class="fs-6 fw-bold mb-2 d-flex align-items-center">
                            <span>Before Stay
                                City</span>
                        </label>
                        <select id="before_stay" wire:model.defer="before_stay_address" class="form-select form-select-solid">
                            <option value="">- Select -</option>
                            <option value="Canmore">Canmore</option>
                            <option value="Banff">Banff</option>
                            <option value="Calgary">Calgary</option>
                            <option value="Edmonton">Edmonton</option>
                            <option value="Lake Louise">Lake Louise</option>
                            <option value="Alberta Other">Alberta Other</option>
                            <option value="British Columbia">British Columbia</option>
                            <option value="Other">Other</option>
                        </select>
                        @error('before_stay_address')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    @endif

                    @if ($afterStayAddress && !$orderable_id)
                    <div class="fv-row mb-5">
                        <label class="fs-6 fw-bold mb-2 d-flex align-items-center">
                            <span>After Stay
                                City</span>
                        </label>
                        <select id="after_stay" wire:model.defer="after_stay_address" class="form-select form-select-solid">
                            <option value="">- Select -</option>
                            <option value="Canmore">Canmore</option>
                            <option value="Banff">Banff</option>
                            <option value="Calgary">Calgary</option>
                            <option value="Edmonton">Edmonton</option>
                            <option value="Lake Louise">Lake Louise</option>
                            <option value="Alberta Other">Alberta Other</option>
                            <option value="British Columbia">British Columbia</option>
                            <option value="Other">Other</option>
                        </select>
                        @error('after_stay_address')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    @endif

                    <div>
                        <!-- Switch Toggle -->
                        <div
                            class="fv-row mt-5 mb-5 d-flex justify-content-between align-items-center">
                            <label class="fs-6 fw-bold mb-2 d-flex align-items-center">
                                <i class="fa fa-user me-2 text-dark"></i>
                                <span>Primary Contact</span>
                            </label>
                            <div class="passenger-input">
                                <div class="form-check form-switch form-check-custom form-check-solid">
                                    <input class="form-check-input h-20px w-40px" type="checkbox" wire:model="showForm2"
                                        checked id="flexSwitch20x30" />
                                </div>
                            </div>
                        </div>

                        <div id="primaryContactForm" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label fw-bold">First Name</label>
                                <input type="text" class="form-control form-control-solid"
                                    wire:model="primary_first_name" placeholder="Enter First Name"
                                    style="background-color: #F3F3F3;" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-bold">Last Name</label>
                                <input type="text" class="form-control form-control-solid"
                                    wire:model="primary_last_name" placeholder="Enter Last Name"
                                    style="background-color: #F3F3F3;" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-bold">Email</label>
                                <input type="email" class="form-control form-control-solid"
                                    wire:model="email" placeholder="Enter Email"
                                    style="background-color: #F3F3F3;" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-bold">Phone</label>
                                <input type="text" class="form-control form-control-solid"
                                    wire:model="phone" placeholder="Enter Phone Number"
                                    style="background-color: #F3F3F3;">
                            </div>

                        </div>
                    </div>

                    @if ($selectedPartner)
                    <div>
                        <label for="conciergeName" class="fs-6 fw-bold mb-2 d-flex align-items-center">
                            Concierge Name:</label>
                        <x-text-input wire:model="conciergeName" id="conciergeName"
                            class="form-control form-control-solid mb-2" type="text"
                            placeholder="Concierge Name" style="background-color: #F3F3F3;" />
                        <x-input-error :messages="$errors->get('conciergeName')" class="mt-2" />
                    </div>
                    @endif
                    <button id="nextStep" class="btn btn-primary mt-4">Next </button>
                </div>

                <div class="fv-row mt-5 mb-5" style="display: none;" id="tourInput">
                    <select class="form-control form-control-solid text-center"
                        style="background-color: #F3F3F3;" x-data
                        @change="$wire.dispatch('tour-selected', { tourId: $event.target.value })">
                        <option value="">Select Tour</option>
                        @foreach ($tours as $tour)
                        <option value="{{ $tour['id'] }}">{{ $tour['name'] }}</option>
                        @endforeach
                    </select>
                    @error('tour_id')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                @if ($order)
                <button class="btn btn-danger mt-3 ms-2" wire:click="hideBookingDetails">Done</button>
                @endif
                <div id="customerForm" style="display: none;">
                    @livewire('customer-form')
                </div>
                <div id="newPartnerbtn" style="display: none;">
                    @livewire('partner-form')
                </div>
            </div>
            @if ($showNewOrder && !$showNotes )
            <div>
                @if ($selectedCustomer && $selectedCustomer->partner_id )
                <div class="fv-row mb-5">
                    <label class="fs-6 fw-bold mb-2 d-flex align-items-center">
                        <span>Partner Reference ID</span>
                    </label>
                    <input type="text" wire:model="partner_ref_id"
                        class="form-control form-control-solid" placeholder="Partner Reference ID"
                        onwheel="this.blur()" />
                    @error('partner_ref_id')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                @endif
            </div>
            @endif
            <div>
                @if ($showNotes)
                <h5>Notes</h5>
                <textarea id="live-notes" wire:model.live.debounce.1000ms="text" class="form-control mt-3" rows="5"
                    placeholder="Enter notes..."></textarea>
                @endif
            </div>
        </div>
    </div>
   

    <div id="sidebar2" @if ($isSidebarVisible) style="display: block;" @else style="display: none;" @endif>

        @if ($selectedBooking)
        <x-partials.calendar.booking-details :booking="$selectedBooking" :isSidebarVisible="$isSidebarVisible" :isEditing="$isEditing" :customers="$customers"
            :tours="$tours" :privateFlightFee="$privateFlightFee" :privateFlight="$privateFlight" :showAddParticipantModal="$showAddParticipantModal" :currentDate="$currentDate" />
        @endif
    </div>

    @if (($showAddParticipantModal && $selectedTour) && !$isEditing)

    <div class="modal fade show d-block" tabindex="-1" id="participant" style="background: rgba(0,0,0,0.5);">
        <div class="modal-dialog mw-650px modal-dialog-centered">
            <div class="modal-content shadow-lg border-0 rounded-4">

                <!-- Header -->
                <div class="modal-header rounded-top-4">
                    <h5 class="modal-title">Add Participants</h5>
                    <button id="close-flyout" class="btn-close" style="margin-top: 0px;margin-right: 0px;" wire:click="cancel">✖</button>
                </div>

                     @if(!$selectedBookingId)
                        <div class="p-3 mt-4 border rounded-3 bg-light ms-5 me-5">
                            <label class="fw-bold"> Max Participants</label>
                            <input type="number" min="0" max="{{ $selectedTour->max_seats }}" 
                                class="form-control mt-2" 
                                wire:model="selectedSeats"
                                onwheel="this.blur()"
                                @unless($this->canOverrideSchedule)
                                    oninput="if(parseInt(this.value) > {{ $selectedTour->max_seats }}) { this.value = {{ $selectedTour->max_seats }}; }"
                                @endunless
                            >
                            <small class="text-danger">Max Allowed: {{ $selectedTour->max_seats }}</small>
                            @error('selectedSeats')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>               
                    @endif

                <!-- Price per Tour Toggle -->
                @if ($selectedTour->price_by_tour !== null && $selectedTour->pricePerPersons->isNotEmpty() && ( !$selectedBooking || !$selectedBooking->passengers->first()?->type === 'tour') )
                <div class="form-check form-switch mb-3 mt-5 ms-8">
                    <input class="form-check-input" type="checkbox" id="toggleTextarea" wire:model="mainToggle">
                    <label class="form-check-label fw-semibold" for="toggleTextarea"> Price per Tour</label>
                </div>
                @endif

                <div class="modal-body">
                    <div id="manualInputs">
                        @if ($filteredPricePerPersons->isNotEmpty() && ( !$selectedBooking || $selectedBooking->passengers->first()?->type !== 'tour'))                        
                        @foreach ($filteredPricePerPersons as $personType)
                        @php $key = 'type_' . $personType['id']; @endphp

                        <div class="person-group p-3 mb-4 border rounded-3 bg-light">
                            <label class="fw-bold mb-1">{{ $personType['name'] }}</label>
                            <input type="number" min="0" step="1" class="form-control d-none" wire:model="personCounts.{{ $key }}" onwheel="this.blur()">

                            <div class="form-check form-switch mt-2">
                                <input class="form-check-input person-toggle" type="checkbox" wire:model="personToggles.{{ $key }}" data-target="#note_{{ $key }}">
                                <label class="form-check-label"> Enter Names (One per row)</label>
                            </div>
                            <textarea class="form-control mt-3 rounded-3 shadow-sm" id="note_{{ $key }}" wire:model="personNamesRaw.{{ $key }}" placeholder="FirstName LastName"></textarea>
                        </div>
                        @endforeach

                        <!-- Private Flight -->
                        @if($selectedTour->private_flight_fee && !$selectedBookingId )
                        <div class=" p-3 mb-4 border rounded-3 bg-light">
                            <div class="form-check form-switch ">
                                <input class="form-check-input" type="checkbox" wire:model="privateFlight" id="privateFlightToggle">
                                <label class="form-check-label fw-semibold"> Private Flight</label>
                            </div>
                                
                            <div id="privateFlightFeeWrapper" class="form-check mt-4 ms-2" @if(!$privateFlight) style="display: none;" @endif>
                                <input class="form-check-input" type="checkbox" wire:model="privateFlightFee">
                                <label class="form-check-label"> Private Flight Fee</label>
                            </div>
                        </div>
                        @endif
                        @endif
                    </div>

                    <!-- Price per Tour Block -->
                    @if ($selectedTour->price_by_tour !== null && ( !$selectedBooking || $selectedBooking->passengers->first()?->type === 'tour') )
                    <div id="pricePerPersonBlock" class="p-3 border rounded-3  bg-light {{ $selectedBooking ? '' : ($selectedTour?->pricePerPersons->isNotEmpty() ? 'd-none' : '') }}">
                        <div class="person-group">
                            <label class="fw-bold mb-1">Person</label>
                            <input type="number" min="0" step="1" class="form-control d-none" wire:model="pricePerTourCount" onwheel="this.blur()">

                            <div class="form-check form-switch mt-2">
                                <input class="form-check-input person-toggle" type="checkbox" wire:model="pricePerTourToggle" data-target="#personNote">
                                <label class="form-check-label"> Enter Names (One per row)</label>
                            </div>
                            <textarea class="form-control mt-3 rounded-3 shadow-sm" id="personNote" wire:model="pricePerTourNames" placeholder="FirstName LastName"></textarea>
                        </div>
                    </div>
                    @endif  

                    <!-- Error -->
                    @error('seats')
                    <div class="alert alert-danger alert-dismissible fade show mt-4" role="alert">
                        <strong> Error:</strong> {{ $message }}
                    </div>
                    @enderror

                    <!-- Max Participants -->
                </div>

                <!-- Footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" wire:click="cancel">Cancel</button>
                    @if (!$addBtn)
                    <div class="d-flex mt-1 custom-btn-bg text-white rounded">
                        <div class="menu-item d-flex align-items-center justify-content-center px-3" style="width: 80%;">
                            <a href="#" class="menu-link act-btn d-flex text-white justify-content-center w-100 text-center" wire:click.prevent="applyAndSave" wire:loading.attr="disabled">
                                Save
                            </a>
                        </div>
                        <a href="#" class="btn custom-btn-bg flex-grow-1 rounded" id="some-id" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                            <span class="svg-icon svg-icon-5 m-0 text-white">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" fill="white" viewBox="0 0 24 24">
                                    <path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z" />
                                </svg>
                            </span>
                        </a>
                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4" data-kt-menu="true">
                            <div class="menu-item px-3">
                                <a href="#" class="menu-link px-3" wire:click.prevent="saveBookings('view')">Save and View booking</a>
                            </div>
                            <div class="menu-item px-3">
                                <a href="#" class="menu-link px-3" wire:click.prevent="saveBookings('redirect')">Save and edit order</a>
                            </div>
                        </div>
                    </div>
                    @else
                    <button type="button" class="btn btn-primary" wire:click="submitAddParticipants">Add</button>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- JS Section --}}
    @push('scripts')
    
<script>
        function confirmDelete(event, bookingId) {
            event.stopPropagation(); // prevent other click actions

            Swal.fire({
                text: "Are you sure you want to delete it?",
                icon: "warning",
                showCancelButton: true,
                buttonsStyling: false,
                confirmButtonText: "Yes, delete",
                cancelButtonText: "No, cancel",
                customClass: {
                    confirmButton: "btn fw-bold btn-danger",
                    cancelButton: "btn fw-bold btn-active-light-primary",
                },
            }).then(function(result) {
                if (result.isConfirmed) {      
                    
                    Livewire.dispatch("deletebooking", { id: bookingId });                    
                }
            });
        }
        $(document).ready(function() {
            // Toggle visibility of textareas under person inputs
            $(document).on('change', '.person-toggle', function() {
                const group = $(this).closest('.person-group');
                const input = group.find('input[type="number"]');
                const textarea = group.find('textarea');

                if ($(this).is(':checked')) {
                    input.addClass('d-none');
                    textarea.removeClass('d-none');

                } else {
                    input.removeClass('d-none');
                    textarea.addClass('d-none');
                }
            });

            // Price per person note textarea toggle
            $('#togglePriceNote').on('change', function() {
                $('#priceNoteTextarea').toggleClass('d-none');
            });
        });
    </script>
    @endpush

    <div class="modal fade" id="customerModal" tabindex="-1" role="dialog" aria-labelledby="customerModalLabel"
        aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Max Flights Reached</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">✖</span>
                    </button>
                </div>
                <div class="modal-body">
                    Maximum flights reached for this date.<br>
                    Please create booking on another day. </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Existing popup (hidden by default) -->
    <div class="modal fade" id="bookingModal" tabindex="-1" role="dialog" aria-labelledby="customerModalLabel"
        aria-hidden="true" wire:ignore.self data-bs-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Booking</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">✖</span>
                    </button>
                </div>
                <div class="modal-body">
                    <br>
                    Select a time slot to create a booking for order no <strong>{{ $orderId }}</strong>
                </div>
                <div class="modal-footer">
                    <button type="button" id="add-booking-confirm-button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Block booking Model --}}
    <div class="modal fade" id="blockbookingModal" tabindex="-1" role="dialog" aria-labelledby="customerModalLabel"
        aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Booking</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">✖</span>
                    </button>
                </div>
                <div class="modal-body">
                    <br>
                    Not available
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>

    <div wire:loading class="overlay">
        <div class="overlay-text">Loading...</div>
    </div>

</section>

@push('modals')
@livewire('modals.refund-modal', ['calledFrom' => 'calendar'])
@livewire('modals.bulk-discount-modal')
@livewire('modals.participant-actions')
@livewire('manage-participants')
@endpush

@push('styles')
<link rel="stylesheet" href="assets/css/custom/calendar.css">
<link rel="stylesheet" href="/assets/css/custom/tour.css" type="text/css" />
<style>
    .vessel-notes:hover {
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 2px;
}

.vessel-notes-section {
    padding: 20px;
}

.vessel-notes-display {
    font-size: 0.75em;
    line-height: 1.2;
    margin-top: 4px;
}
    .booking-title {
    white-space: nowrap;       /* single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
}
.menu.menu-sub.menu-sub-dropdown.menu-column {
    width: 160px !important;
}

</style>
@endpush

@push('scripts')

<script>
    $(document).ready(function() {
        // Toggle between manual inputs and textarea
        $(document).on('click', '#toggleTextarea', function() {
            if ($(this).is(':checked')) {
                $('#manualInputs').hide();
                $('#pricePerPersonBlock').removeClass('d-none').show(); // show when toggle is on
            } else {
                $('#manualInputs').show();
                $('#pricePerPersonBlock').hide(); // hide when toggle is off
            }
        });

        Echo.channel('vessel-notes')
        .listen('.VesselNoteUpdated', (e) => {         
            Livewire.dispatch('vesselNoteUpdated', { 
                vessel_id: e.vessel_id,
                date: e.date,
                pilot_name: e.pilot_name,
                aircraft_id: e.aircraft_id
            });
        });

        window.addEventListener('show-booking-modal', () => {
            const modal = new bootstrap.Modal(document.getElementById('bookingModal'));
            modal.show();
        });


        document.addEventListener('click', function(event) {
            if (event.target && event.target.id === 'privateFlightToggle') {
                if ($(event.target).is(':checked')) {
                    $('#privateFlightFeeWrapper').show();
                } else {
                    $('#privateFlightFeeWrapper').hide();
                }
            }
        });
    });
    $(document).ready(function() {
        $(document).on('click', '.booking-info', function() {
            console.log('Clicked booking-info div');
        });
        $(document).on('dblclick', '.booking-info', function() {
            console.log('Double clicked booking-info div');
            const orderId = $(this).data('order-id'); // CORRECT

            console.log(orderId);
            if (orderId) {
                window.location.href = `/order/${orderId}/edit`;
            }
        });

    });

    Livewire.on('show-customer-modal', () => {
        new bootstrap.Modal(document.getElementById('customerModal')).show();
    });

    window.addEventListener('show-blockbooking-modal', () => {
        const modal = new bootstrap.Modal(document.getElementById('blockbookingModal'));
        modal.show();
    });

    document.getElementById('bookingModal').addEventListener('hidden.bs.modal', function() {
        setTimeout(() => {
            document.body.style.overflow = '';
        }, 100);
    });

    function cleanUrlParams() {
        const url = new URL(window.location.href);
        url.searchParams.delete('order');
        url.searchParams.delete('orderable_id');
        window.history.replaceState({}, document.title, url.pathname + url.search);
    }

    Livewire.on('clean-url', () => {
        cleanUrlParams();
    });

    document.addEventListener('click', function(event) {
        if (event.target && event.target.id === 'parOrderBtn') {
            $('#partnerButtons').show();
            $('#mainButtons').hide();
        }

        if (event.target && event.target.id === 'cusOrderBtn') {
            $('#customersButtons').show();
            $('#mainButtons').hide();
        }

        if (event.target && event.target.id === 'addPartnerBtn') {
            $('#newPartnerbtn').show();
            $('#partnerButtons').hide();
        }

        if (event.target && event.target.id === 'cusOrderBtn') {
            $('#customersButtons').show();
            $('#mainButtons').hide();
        }

        if (event.target && event.target.id === 'addCustomerBtn') {
            $('#customerForm').show();
            $('#customersButtons').hide();
        }

        if (event.target && event.target.id === 'nextStep') {
            const showForm = document.getElementById('flexSwitch20x30').checked;
            var beforeStay = @json($beforeStayAddress);
            var afterStay = @json($afterStayAddress);

            if (!showForm) {
                const first = document.querySelector('[wire\\:model="primary_first_name"]');
                const last = document.querySelector('[wire\\:model="primary_last_name"]');
                const email = document.querySelector('[wire\\:model="email"]');

                if (!first.value.trim() || !last.value.trim() || !email.value.trim()) {
                    alert('Please fill all Primary Contact fields.');
                    event.preventDefault();
                    return;
                }
                if (!email.value.includes('@')) {
                    alert('Please enter a valid email address.');
                    event.preventDefault();
                    return;
                }
            }

            if (beforeStay == 1) {
                let beforeInput = document.getElementById('before_stay');
                if (!beforeInput.value.trim()) {
                    alert("Before Stay Address required");
                    event.preventDefault();
                    return;
                }
            }

            if (afterStay == 1) {
                let afterInput = document.getElementById('after_stay');
                if (!afterInput.value.trim()) {
                    alert("After Stay Address required");
                    event.preventDefault();
                    return;
                }
            }

            $('#tourInput').show();
            $('#primary_contact').hide();
        }



    });

    // Partner search filter
    $('#searchInput').on('input', function() {
        // Normalize query: remove special characters, convert to lowercase, and trim
        const normalizedQuery = this.value.toLowerCase().replace(/[^a-z0-9\s]/gi, '').trim();
        const list = $('#partnerList');
        let hasMatch = false;

        $('.partner-item').each(function() {
            // Get normalized name from data attribute (already normalized in blade)
            const name = $(this).data('name') || '';
            
            // Show if query is empty or if normalized name includes normalized query
            if (normalizedQuery === '' || name.includes(normalizedQuery)) {
                $(this).show();
                hasMatch = true;
            } else {
                $(this).hide();
            }
        });

        // Show/hide the list based on matches
        if (hasMatch || normalizedQuery === '') {
            list.show();
        } else {
            list.hide();
        }
    });

    // Select partner
    function selectPartner(id, name) {
        $('#searchInput').val(name);
        $('#partnerList').hide();
        $('#partnerButtons').hide();

        Livewire.dispatch('selectOrderPartner', {
            id: id
        });

    }

    Livewire.on('partner-selected', (data) => {
        $('#mainButtons').hide();
        $('#newPartnerbtn').hide();
        $('#customersButtons').show();

        const customerList = document.getElementById('customerList');
        customerList.innerHTML = '';
        data.customers.forEach(c => {
            let li = document.createElement('li');
            li.classList.add('customer-item');
            li.textContent = `${c.name} (${c.email})`;
            li.setAttribute('data-id', c.id);
            li.setAttribute('data-name', (c.name || '').toLowerCase());
            li.setAttribute('data-email', (c.email || '').toLowerCase());
            li.onclick = function() {
                selectCustomer(c.id, c.name);
            };
            customerList.appendChild(li);
        });
        $('#customerSearchInput').val('');
        $('.customer-item').show();
        $('#customerList').show();
    });

    Livewire.on('customer-selected', () => {
        $('#customersButtons').hide();
        $('#customerForm').hide();
        $('#primary_contact').show();
    });

    // Customer search filter
    $('#customerSearchInput').on('input', function() {
        const query = this.value.toLowerCase().trim();
        const list = $('#customerList');
        let hasMatch = false;

        $('.customer-item').each(function() {
            const name = (($(this).data('name') || '') + '').toLowerCase();
            const email = (($(this).data('email') || '') + '').toLowerCase();
            const text = ($(this).text() || '').toLowerCase();
            const matched = query === '' || name.includes(query) || email.includes(query) || text.includes(query);

            if (matched) {
                $(this).show();
                hasMatch = true;
            } else {
                $(this).hide();
            }
        });

        list.toggle(query === '' || hasMatch);
    });

    // Select customer
    function selectCustomer(id, name) {
        $('#customerSearchInput').val(name);
        $('#customerList').hide();
        $('#customersButtons').hide();
        $('#customerForm').hide();
        Livewire.dispatch('selectOrderCustomer', {
            id: id
        });
    }

    $(document).ready(function() {
        $('#flexSwitch20x30').on('change', function() {
            if ($(this).is(':checked')) {
                $('#primaryContactForm').hide(); // when ON, hide
            } else {
                $('#primaryContactForm').show(); // when OFF, show
            }
        });
    });

    window.addEventListener('select-tour', function() {
        document.getElementById('mainButtons').style.display = 'none';
    });

    window.addEventListener('show-tour-input', function() {
        setTimeout(() => {
            $('#mainButtons').hide();
            $('#tourInput').show();
        }, 50);
    });

    window.addEventListener('add-booking', function() {
        setTimeout(() => {
            $('#tourInput').show();
            $('#mainButtons').hide();
            $('#customersButtons').hide();
            $('#primary_contact').hide();
        }, 50);
    });

    window.addEventListener('form-cancelled-cus', function() {
        $('#customersButtons').show();
        $('#customerForm').hide();
    });

    window.addEventListener('form-cancelled-par', function() {
        $('#partnerButtons').show();
        $('#newPartnerbtn').hide();
    });
    window.addEventListener('sidebar-closed', function() {
        document.querySelector('#tourInput select').value = '';
        document.getElementById('searchInput').value = '';
        document.getElementById('customerSearchInput').value = '';
        document.getElementById('partnerList').style.display = 'none';
    });
    window.addEventListener('null-tour', function() {
        document.querySelector('#tourInput select').value = '';
    });

    function hideSidebar() {
        const sidebar = document.getElementById('sidebar1');
        if (sidebar) {
            sidebar.classList.remove('open');
            sidebar.style.display = 'none'; // instantly hides
        }
    }
    window.addEventListener('hide-default-loading', () => {
        document.getElementById('overlay').classList.add('d-none');
    });

    Livewire.on('showBooking', (event) => {
        console.log('Booking ID:', event.id);
        Livewire.dispatch('refreshBookings', {
            bookingId: event.id
        });
    });
        Livewire.on('showBlock', (event) => {
        console.log('Booking ID:', event.id);
        Livewire.dispatch('showBlock', {
            bookingId: event.id
        });
    });
        Livewire.on('reload-page', () => {
        location.reload(); // full page reload
    });
    Livewire.on('scroll-to-booking', data => {
        console.log(data);
        const id = data.booking;

    setTimeout(() => {
            const bookingElement = document.getElementById(`booking-${id}`);
            if (bookingElement) {
                bookingElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }, 500);
    });
    // Add to your scripts
</script>
<script src="/assets/plugins/custom/jquery-ui/jquery-ui.min.js"></script>
<script src="/assets/js/custom/apps/customers/list/list.js"></script>
<script src="/assets/js/custom/calendar.js"></script>
@endpush