@extends('admin::curd.index')

@section('heading')
    <i class="fa fa-file-text-o"></i> {!! trans('booking_request::booking_request.name') !!}
    <small> {!! trans('cms.manage') !!} {!! trans('booking_request::booking_request.names') !!}</small>
@stop

@section('title')
    {!! trans('booking_request::booking_request.names') !!}
@stop

@section('breadcrumb')
    <ol class="breadcrumb">
        <li><a href="{!! trans_url('admin') !!}"><i class="fa fa-dashboard"></i> {!! trans('cms.home') !!} </a></li>
        <li class="active">{!! trans('booking_request::booking_request.names') !!}</li>
    </ol>
@stop

@section('content')
    <div class="box box-primary">
        <div class="box-body">
            <!-- Filters Row -->
            <div style="background: white; padding: 10px 14px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); margin-bottom: 16px;">
                <div style="display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; width: 100%;">
            
                    <!-- Filters -->
                    <div style="display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;">
                        <label for="roomTypeFilter" style="font-weight: 600; color: #2c3e50; font-size: 14px; white-space: nowrap;">Room Type:</label>
                        <select id="roomTypeFilter" style="flex: 1; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; min-width: 80px;">
                            @foreach(['' => 'All'] + (client_config('facility_booking.options.room_type') ?: trans('location::sub_location.options.room_type')) as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
            
                    <div style="display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;">
                        <label for="roomFilter" style="font-weight: 600; color: #2c3e50; font-size: 14px; white-space: nowrap;">Room:</label>
                        <select id="roomFilter" style="flex: 1; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; min-width: 80px;">
                            <option value="" disabled selected hidden>Select Room</option>
                        </select>
                    </div>
            
                    <div style="display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;">
                        <label for="statusFilter" style="font-weight: 600; color: #2c3e50; font-size: 14px; white-space: nowrap;">Status:</label>
                        <select id="statusFilter" style="flex: 1; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; min-width: 80px;">
                            @foreach(['' => 'All'] + trans('booking_request::booking_request.options.status') as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
            
                    <!-- Buttons -->
                    <div style="display: flex; gap: 8px; flex-shrink: 0;">
                        {{-- <button class="btn btn-primary" style="padding: 6px 12px; border-radius: 6px;" id="goButton">Go</button> --}}
                        <button class="btn btn-primary" style="padding: 6px 12px; border-radius: 6px;" id="resetButton">Reset</button>
                        <button class="btn btn-primary" style="padding: 6px 12px; border-radius: 6px;" data-toggle="modal" data-target="#eventModal">Book Room</button>
                        <button class="btn btn-primary" style="padding: 6px 12px; border-radius: 6px;" id="help">Help</button>
                        <button class="btn btn-primary" style="padding: 6px 12px; border-radius: 6px;" id="facilityDetails" data-toggle="tooltip" title="Facility Details">📜</button>
                    </div>
                </div>
            </div>

            <!-- Calendar -->
            <div id="calendar" style="margin-top: 16px;"></div>
            <!-- Status Legend -->
                <div id="calendar-legend" style="margin-top: 10px; display: flex; justify-content: center; gap: 20px; font-size: 14px;">
                    <div style="display: flex; align-items: center;">
                        <span style="width: 12px; height: 12px; background-color: gray; display: inline-block; margin-right: 5px;"></span>
                        Requested
                    </div>
                    <div style="display: flex; align-items: center;">
                        <span style="width: 12px; height: 12px; background-color: green; display: inline-block; margin-right: 5px;"></span>
                        Approved
                    </div>
                    <div style="display: flex; align-items: center;">
                        <span style="width: 12px; height: 12px; background-color: red; display: inline-block; margin-right: 5px;"></span>
                        Rejected
                    </div>
                    <div style="display: flex; align-items: center;">
                        <span style="width: 12px; height: 12px; background-color: orange; display: inline-block; margin-right: 5px;"></span>
                        Cancelled
                    </div>
                    <div style="display: flex; align-items: center;">
                        <span style="width: 12px; height: 12px; background-color: blue; display: inline-block; margin-right: 5px;"></span>
                        Conducted
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Styled medium modal for editing visit details -->
    <div class="modal fade" id="editbookingDateModal" tabindex="-1" role="dialog" aria-labelledby="editbookingDateLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
        <div class="modal-content shadow-lg border-0 rounded">
            <div class="modal-header bg-primary text-white">
            <h5 class="modal-title" id="editbookingDateLabel">Approve Booking</h5>
            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
    
            <div class="modal-body px-4">

                <div class="form-group">
                    <label for="newEventTitle" class="font-weight-bold">Meeting Title</label>
                    <input type="text" class="form-control rounded border" id="newEventTitle" placeholder="Enter title">
                </div>
    
                <div class="form-group">
                    <label for="new_room_type" class="font-weight-bold">Room Type</label>
                    <select class="form-control rounded border" id="new_room_type" name="new_room_type" required>
                        @foreach(['' => 'Please select type'] + (client_config('facility_booking.options.room_type') ?: trans('location::sub_location.options.room_type')) as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
    
                <div class="form-group">
                    <label for="new_sub_location_id">Room</label>
                    <select name="new_sub_location_id" id="new_sub_location_id" class="form-control" required>
                        <option value="">Select Room</option>
                        {{-- This will be populated dynamically --}}
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="new_meeting_type" class="font-weight-bold">Meeting Type</label>
                    <select class="form-control rounded border" id="new_meeting_type" name="new_meeting_type" required>
                        <option value="" disabled selected>Select Meeting Type</option>
                        @foreach(trans('location::sub_location.options.meeting_type') as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label for="newbookingDate" class="font-weight-bold">Booking Date</label>
                    <input type="text" id="newbookingDate" class="form-control rounded border" />
                </div>
                
                <div class="form-group mb-3 time-pair">
                    <label class="font-weight-bold">Start & End Time</label>
                    <div class="d-flex gap-2">
                        <select class="form-control startSelect" id="newStartTime"></select>
                        <select class="form-control endSelect" id="newEndTime"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="new_department_id" class="font-weight-bold">Department</label>
                    <select class="form-control rounded border" id="new_department_id" name="new_department_id" required>
                        @foreach(Department::departments() as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                    </select>
                </div>
            @if (user('admin.web')->hasPermission('facility_booking.approve_booking_request'))
                <div class="form-group">
                    <label for="bookingStatus" class="font-weight-bold">Approve / Reject</label>
                    <select class="form-control rounded border" id="bookingStatus" name="bookingStatus" required>
                        <option value="" disabled selected>Select Approve / Reject</option>
                        @foreach(trans('location::sub_location.options.booking_status') as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                {{-- Reject Remarks field --}}
                <div class="form-group" id="rejectRemarksGroup" style="display: none;">
                    <label for="rejectRemarks" class="font-weight-bold">Remarks</label>
                    <textarea class="form-control rounded border" id="rejectRemarks" name="rejectRemarks" placeholder="Enter remarks"></textarea>
                </div>
            @endif
            </div>
    
            <div class="modal-footer bg-light px-4">
                <button type="button" id="saveEditBookingBtn" class="btn btn-success px-4" style="display: none;">Save Changes</button>
                <button type="button" id="saveApprovalBtn" class="btn btn-success px-4" style="display: none;">Submit Approval</button>
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
        </div>
    </div>
  
    <!-- Event Modal -->
    <div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <form id="eventForm" class="w-100">
                <div class="modal-content enhanced-modal-content" id="eventModalContent">
                    <div class="modal-header enhanced-modal-header">
                        <h5 class="modal-title enhanced-modal-title" id="eventModalLabel">Book Room</h5>
                    </div>
    
                    <div class="modal-body enhanced-modal-body">
                        <!-- DETAILS VIEW -->
                        <div id="eventDetails" style="display: none;">
                            <input type="hidden" id="selectedEventId">
    
                            <div class="detail-row">
                                <div class="detail-label">Meeting Title</div>
                                <div class="detail-value"><span id="detailTitle"></span></div>
                            </div>
    
                            <div class="detail-row">
                                <div class="detail-label">Room Type</div>
                                <div class="detail-value"><span id="roomType"></span></div>
                            </div>
    
                            <div class="detail-row">
                                <div class="detail-label">Room</div>
                                <div class="detail-value"><span id="room"></span></div>
                            </div>
    
                            <div class="detail-row">
                                <div class="detail-label">Meeting Type</div>
                                <div class="detail-value"><span id="meetingType"></span></div>
                            </div>

                            <div class="detail-row">
                                <div class="detail-label">No. of PAX</div>
                                <div class="detail-value"><span id="noOfPAX"></span></div>
                            </div>
    
                            <div class="detail-row">
                                <div class="detail-label">Attendees / Guest</div>
                                <div class="detail-value"><span id="guestDetails"></span></div>
                            </div>

                            <div class="detail-row">
                                <div class="detail-label">VIP / Celebrities</div>
                                <div class="detail-value"><span id="vipOrCelebrities"></span></div>
                            </div>

                            <div class="detail-row">
                                <div class="detail-label">Send email invite</div>
                                <div class="detail-value"><span id="attendeesEmails"></span></div>
                            </div>
    
                            <div class="detail-row">
                                <div class="detail-label">Booking Date</div>
                                <div class="detail-value"><span id="detailbookingDate"></span></div>
                            </div>
    
                            <div class="detail-row">
                                <div class="detail-label">Start Time</div>
                                <div class="detail-value"><span id="detailStartTime"></span></div>
                            </div>
    
                            <div class="detail-row">
                                <div class="detail-label">End Time</div>
                                <div class="detail-value"><span id="detailEndTime"></span></div>
                            </div>

                            <div class="detail-row">
                                <div class="detail-label">Additional Requirements</div>
                                <div class="detail-value"><span id="additionalRequirements"></span></div>
                            </div>

                            <div class="detail-row">
                                <div class="detail-label">Meeting Notes & Other Requirements</div>
                                <div class="detail-value"><span id="detailDescription"></span></div>
                            </div>

                            <div class="detail-row">
                                <div class="detail-label">Coordinator Name</div>
                                <div class="detail-value"><span id="coordinatorName"></span></div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">Coordinator Email</div>
                                <div class="detail-value"><span id="coordinatorEmail"></span></div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">Coordinator Mobile</div>
                                <div class="detail-value"><span id="coordinatorMobile"></span></div>
                            </div>

                            <div class="detail-row">
                                <div class="detail-label">Department</div>
                                <div class="detail-value"><span id="detailDepartment"></span></div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">Requested By</div>
                                <div class="detail-value"><span id="detailRequestedBy"></span></div>
                            </div>
                            <div class="hide-row" id="rowApprovedBy">
                                <div class="detail-label">Approved By</div>
                                <div class="detail-value"><span id="detailApprovedBy"></span></div>
                            </div>
                            <div class="hide-row" id="rowRejectedBy">
                                <div class="detail-label">Rejected By</div>
                                <div class="detail-value"><span id="detailRejectedBy"></span></div>
                            </div>
                            <div class="hide-row" id="rowCancelledBy">
                                <div class="detail-label">Cancelled By</div>
                                <div class="detail-value"><span id="detailCancelledBy"></span></div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">Status</div>
                                <div class="detail-value"><span id="detailStatus"></span></div>
                            </div>
                            <div class="hide-row" id="rowConductedTime">
                                <div class="detail-label">Conducted Time</div>
                                <div class="detail-value"><span id="detailConductedTime"></span></div>
                            </div>
                            <div class="hide-row" id="rowNoOfPAXAttended">
                                <div class="detail-label">No. of PAX attended</div>
                                <div class="detail-value"><span id="detailNoOfPAX"></span></div>
                            </div><div class="hide-row" id="rowRemarks">
                                <div class="detail-label">Damages</div>
                                <div class="detail-value"><span id="detailRemarks"></span></div>
                            </div>
                        </div>
    
                        <!-- FORM FIELDS -->
                        <div id="eventFormFields">
                            <div class="form-group mb-3">
                                <label for="eventTitle" class="font-weight-bold" style="font-weight: bold;">Meeting Title</label>
                                <input type="text" class="form-control rounded border" id="eventTitle" placeholder="Enter title" required>
                            </div>
    
                            <div class="form-group mb-3">
                                <label for="room_type" class="font-weight-bold" style="font-weight: bold;">Room Type</label>
                                <select class="form-control rounded border" id="room_type" name="room_type" required>
                                    @foreach(['' => 'Select Room type'] + (client_config('facility_booking.options.room_type') ?: trans('location::sub_location.options.room_type')) as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
    
                            <div class="form-group">
                                <label for="sub_location_id" style="font-weight: bold;">Room</label>
                                <select name="sub_location_id" id="sub_location_id" class="form-control" required>
                                    <option value="">Select Room</option>
                                </select>
                            </div>
                            
                            <div class="form-group mb-3">
                                <label for="bookingDate" class="font-weight-bold" style="font-weight: bold;">Booking Date</label>
                                <input type="date" class="form-control rounded border bookingDate" id="bookingDate" required>
                            </div>
                    
                            <div class="form-group mb-3 time-pair">
                                <label class="font-weight-bold">Start & End Time</label>
                                <div class="d-flex gap-2">
                                    <select class="form-control startSelect" id="startTime"></select>
                                    <select class="form-control endSelect" id="endTime"></select>
                                </div>
                            </div>
    
                            <div class="form-group mb-3">
                                <label for="meeting_type" class="font-weight-bold" style="font-weight: bold;">Meeting Type</label>
                                <select class="form-control rounded border" id="meeting_type" name="meeting_type" required>
                                    <option value="" disabled selected>Select Meeting Type</option>
                                    @foreach(trans('location::sub_location.options.meeting_type') as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                    
                            <div class="form-group mb-3">
                                <label for="no_of_pax" class="font-weight-bold" style="font-weight: bold;">No. of PAX</label>
                                <input type="number" class="form-control rounded border" id="no_of_pax" name="no_of_pax" placeholder="Enter No. of PAX">
                            </div>

                            <div class="form-group mb-3">
                                <label for="guest_details" class="font-weight-bold" style="font-weight: bold;">Attendees / Guest</label>
                                <input type="text" class="form-control rounded border" id="guest_details" name="guest_details" placeholder="Enter Attendees / Guest details (optional)">
                            </div>

                            <div class="form-group mb-3">
                                <label for="vip_or_celebrities" class="font-weight-bold" style="font-weight: bold;">VIP/Celebrities</label>
                                <input type="text" class="form-control rounded border" id="vip_or_celebrities" name="vip_or_celebrities" placeholder="Enter VIP/Celebrities">
                            </div>
    
                            <div class="form-group mb-3">
                                <label for="attendees_emails" class="font-weight-bold" style="font-weight: bold;">Send email invite</label>
                                <input type="text" class="form-control rounded border" id="attendees_emails" name="attendees_emails" placeholder="Enter attendees email addresses, separated by commas">
                            </div>

                            <div class="form-group mb-3">
                                <label class="font-weight-bold" style="font-weight: bold;">Additional Requirements</label>
                                <div class="row">
                                    <!-- Left Column -->
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="additional_requirements[]" value="Food & Beverages" id="food">
                                            <label class="form-check-label" for="food">Food & Beverages</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="additional_requirements[]" value="IT Requirements" id="it">
                                            <label class="form-check-label" for="it">IT Requirements</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="additional_requirements[]" value="Audio Video Requirements" id="av">
                                            <label class="form-check-label" for="av">Audio Video Requirements</label>
                                        </div>
                                    </div>
                            
                                    <!-- Right Column -->
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="additional_requirements[]" value="GDA Requirement" id="gda">
                                            <label class="form-check-label" for="gda">GDA Requirement</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="additional_requirements[]" value="Additional support" id="support">
                                            <label class="form-check-label" for="support">Additional support</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="additional_requirements[]" value="Photographer required" id="photographer">
                                            <label class="form-check-label" for="photographer">Photographer required</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mb-3">
                                <label for="Description" class="font-weight-bold" style="font-weight: bold;">Meeting Notes & Other Requirements</label>
                                <textarea class="form-control rounded border" id="Description" rows="3" placeholder="Enter the meeting notes and other requirements (optional)"></textarea>
                            </div>

                            <div class="form-group mb-3">
                                <label class="font-weight-bold" style="font-weight: bold;">Coordinators & Details</label>
                                <div class="d-flex gap-2">
                                    <input type="text" class="form-control rounded border flex-grow-1 name" name="coordinator_name" placeholder="Name" id="coordinator_name">
                                    <input type="email" class="form-control rounded border flex-grow-1 email" name="coordinator_email" placeholder="Email"  id="coordinator_email">
                                    <input type="number" class="form-control rounded border flex-grow-1 mobile" name="coordinator_mobile" placeholder="Mobile"  id="coordinator_mobile">
                                </div>
                            </div>
                            {{-- <div class="form-group mb-3">
                                <label for="coordinators_details" class="font-weight-bold" style="font-weight: bold;">Coordinators Details</label>
                                <input type="text" class="form-control rounded border" id="coordinators_details" name="coordinators_details" placeholder="Enter name, mobile number, email ID, etc.">
                            </div> --}}

                            <div class="form-group mb-3">
                                <label for="department_id" class="font-weight-bold" style="font-weight: bold;">Department</label>
                                <select class="form-control rounded border" id="department_id" name="department_id" required>
                                    @foreach(Department::departments() as $id => $name)
                                        <option value="{{ $id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                    
                            <input type="hidden" class="form-control rounded border" id="user_id" value="{{ user('admin.web')->id }}">
                        </div>
                    </div>
    
                    <div class="modal-footer enhanced-modal-footer d-flex justify-content-end w-100">
                        <button type="submit" class="btn btn-success" id="addEventBtn">
                            <i class="fa fa-plus"></i> Save
                        </button>
    
                        @if (user('admin.web')->hasPermission('facility_booking.edit_booking_request'))
                            <button type="button" id="openEditBookingBtn" class="btn btn-warning" style="display: none;">
                                <i class="fa fa-pencil"></i> Edit
                            </button>
                        @endif
    
                        @if (user('admin.web')->hasPermission('facility_booking.approve_booking_request'))
                            <button type="button" id="openApproveRejectBtn" class="btn btn-success" style="display: none;">
                                <i class="fa fa-exchange"></i> Approve / Reject
                            </button>
                        @endif
    
                        <button type="button" id="openConductedBtn" class="btn btn-success" style="display: none;">
                            <i class="fa fa-check-circle"></i> Conducted
                        </button>
    
                        <button type="button" class="btn btn-danger text-white fw-bold" id="deleteEventBtn" style="display: none;">
                            <i class="fa fa-trash"></i> Cancel Booking
                        </button>
                    
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            Close
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Conducted Modal -->
    <div class="modal fade" id="conductedModal" tabindex="-1" role="dialog" aria-labelledby="conductedModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content shadow-lg border-0 rounded">
                
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="conductedModalLabel">Mark as Conducted</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body px-4">
                    <div class="form-group">
                        <label for="conductedStartTime" class="font-weight-bold">Start Time</label>
                        <input type="time" id="conductedStartTime" class="form-control rounded border" />
                    </div>
                    <div class="form-group">
                        <label for="conductedEndTime" class="font-weight-bold">End Time</label>
                        <input type="time" id="conductedEndTime" class="form-control rounded border" />
                    </div>

                    <div class="form-group mb-3"> 
                        <label for="no_of_pax_attended" class="font-weight-bold">No. of PAX</label>
                        <input type="number" class="form-control rounded border" id="no_of_pax_attended" name="no_of_pax_attended" placeholder="Enter No. of PAX attended">                            
                    </div>
                    <div class="form-group mb-3">
                        <label for="conducted_remarks" class="font-weight-bold">Damages (if any)</label> 
                        <textarea class="form-control rounded border" id="conducted_remarks" rows="3" placeholder="Enter any damages or other misuses"></textarea>
                    </div>
                </div>

                <div class="modal-footer bg-light px-4">
                    <button type="button" id="saveConductedBtn" class="btn btn-success px-4">Submit</button>
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                </div>

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

    <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h3 class="modal-title" style="text-align: center" id="helpModalLabel">Facility Booking Help</h3>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="max-height: 500px; overflow-y: auto;">
                    <!-- The content will be injected here by JavaScript -->
                    <p>Loading content...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="facilityDetailsModal" tabindex="-1" role="dialog" aria-labelledby="facilityDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h3 class="modal-title" style="text-align: center" id="facilityDetailsModalLabel">Facility Details</h3>
                </div>
                <div class="modal-body" style="max-height: 500px; overflow-y: auto;">
                    <!-- The content will be injected here by JavaScript -->
                    <p>Loading content...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@stop


@section('script')
    <script src="{{ asset('assets/fullcalendar/main.min.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="{{asset('js/sweetalert2.all.min.js')}}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const $bookingStatus = $('#bookingStatus');
            const $rejectGroup = $('#rejectRemarksGroup');
            const $reject = $('#rejectRemarks');

            // helper to detect "reject" — adjust if your reject value is specific
            function isRejectSelected() {
                const val = ($bookingStatus.val() || '').toString().toLowerCase();
                const txt = ($bookingStatus.find('option:selected').text() || '').toLowerCase();
                return val === 'rejected' ;
            }

            // toggle remarks on change
            $bookingStatus.on('change', function () {
                if (isRejectSelected()) {
                    $rejectGroup.show();
                    $reject.attr('required', 'required');
                } else {
                    $rejectGroup.hide();
                    $reject.removeAttr('required').val('');
                }
            });

            function loadRoomsByType(selectedType, selectedRoomName = null) {
                if (!selectedType) {
                    $('#new_sub_location_id').empty().append('<option value="">Select Room</option>');
                    return;
                }

                $.ajax({
                    url: "{{ url('admin/facility_booking/booking_request/rooms') }}",
                    type: 'GET',
                    data: {
                        room_type: selectedType
                    },
                    dataType: 'json',
                    success: function(data) {
                        var roomDropdown = $('#new_sub_location_id');
                        roomDropdown.empty().append('<option value="">Select Room</option>');

                        let selectedRoomId = null;
                        $.each(data, function(id, name) {
                            roomDropdown.append('<option value="' + id + '">' + name + '</option>');
                            if (name.trim() === selectedRoomName) {
                                selectedRoomId = id;
                            }
                        });

                        if (selectedRoomId) {
                            roomDropdown.val(selectedRoomId).trigger('change');
                        }
                    },
                    error: function() {
                        alert('Failed to load rooms.');
                    }
                });
            }

            function to24HourFormat(timeStr) {
                if (!timeStr) return '';
                let [time, meridian] = timeStr.split(' ');
                let [hours, minutes] = time.split(':').map(Number);
                if (meridian === 'PM' && hours !== 12) hours += 12;
                if (meridian === 'AM' && hours === 12) hours = 0;
                return String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0');
            }

            function openEditBookingModal(showDateTime, showApproval) {
                // Change heading
                if (showDateTime && !showApproval) {
                    $('#editbookingDateLabel').text('Edit Booking');
                    $('#saveEditBookingBtn').show();
                    $('#saveApprovalBtn').hide();
                } else if (!showDateTime && showApproval) {
                    $('#editbookingDateLabel').text('Approve or Reject Booking');
                    $('#saveEditBookingBtn').hide();
                    $('#saveApprovalBtn').show();
                } else {
                    $('#editbookingDateLabel').text('Booking Action');
                    $('#saveEditBookingBtn').hide();
                    $('#saveApprovalBtn').hide();
                }

                // Get existing details
                const detailTitleText  = $('#detailTitle').text().trim();
                const roomTypeText     = $('#roomType').text().trim();
                const departmentText   = $('#detailDepartment').text().trim();
                const meetingTypeText  = $('#meetingType').text().trim();
                const roomText         = $('#room').text().trim();
                const bookingDateText  = $('#detailbookingDate').text().trim();
                const startTimeText    = $('#detailStartTime').text().trim();
                const endTimeText      = $('#detailEndTime').text().trim();

                // Set room type without triggering .change()
                $('#new_room_type option').filter(function() {
                    return $(this).text().trim() === roomTypeText;
                }).prop('selected', true);

                $('#new_department_id option').filter(function() {
                    return $(this).text().trim() === departmentText;
                }).prop('selected', true);

                // Load rooms for this type and preselect the correct room
                loadRoomsByType($('#new_room_type').val(), roomText);

                let formattedDate = '';
                if (bookingDateText) {
                    const parts = bookingDateText.replace(',', '').split(' ');
                    if (parts.length >= 4) {
                        const day = parts[1].padStart(2, '0');
                        const monthName = parts[2];
                        const year = parts[3];
                        const month = new Date(Date.parse(monthName + " 1, 2000")).getMonth();
                        const dateObj = new Date(year, month, day);
                        formattedDate = dateObj.toLocaleDateString('en-GB', {
                            weekday: 'long',
                            year: 'numeric',
                            month: 'long',
                            day: '2-digit'
                        });
                    }
                }

                const formatTime = (timeStr) => {
                    if (!timeStr || !timeStr.includes(':')) return '';
                    const date = new Date('1970-01-01 ' + timeStr);
                    let formatted = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true });
                    return formatted.replace(/(am|pm)/, (match) => match.toUpperCase());
                };
                
                $('#newEventTitle').val(detailTitleText);
                // $('#new_room_type').val(roomTypeText).change();
                // $('#new_sub_location_id').val(roomText);
                $('#new_meeting_type').val(meetingTypeText).change();
                $('#newbookingDate').val(formattedDate);
                let startVal = to24HourFormat(startTimeText);
                let endVal = to24HourFormat(endTimeText);

                $('#newStartTime').val(startVal).trigger('change');
                setTimeout(() => {
                    $('#newEndTime').val(endVal);
                }, 100);

                // Datepicker init
                if (!$('#newbookingDate').hasClass('picker__input')) {
                    $('#newbookingDate').pickadate({
                        format: 'dd mmm, yyyy',
                        formatSubmit: 'yyyy-mm-dd',
                        selectMonths: true,
                        selectYears: true,
                        min: new Date()
                    });
                }

                // Show/hide form sections
                $('#newEventTitle').closest('.form-group').toggle(showDateTime);
                $('#new_room_type').closest('.form-group').toggle(showDateTime);
                $('#new_meeting_type').closest('.form-group').toggle(showDateTime);
                $('#new_department_id').closest('.form-group').toggle(showDateTime);
                $('#new_sub_location_id').closest('.form-group').toggle(showDateTime);
                $('#newbookingDate').closest('.form-group').toggle(showDateTime);
                $('#newStartTime').closest('.form-group').toggle(showDateTime);
                $('#newEndTime').closest('.form-group').toggle(showDateTime);
                $('#bookingStatus').closest('.form-group').toggle(showApproval);

                $('#eventModal').modal('hide');
                setTimeout(() => {
                    $('#editbookingDateModal').modal('show');
                }, 400);
            }

            // Edit Booking button click
            $('#openEditBookingBtn').on('click', function () {
                openEditBookingModal(true, false);
            });

            // Approve / Reject button click
            $('#openApproveRejectBtn').on('click', function () {
                openEditBookingModal(false, true);
            });

            function openConductedModal(showDateTime, showApproval) {
                // In case you want to prefill data in future:
                $('#conductedStartTime').val('');
                $('#conductedEndTime').val('');
                const bookingDateText = $('#detailbookingDate').text().trim();
                const startTimeText   = $('#detailStartTime').text().trim();
                const endTimeText     = $('#detailEndTime').text().trim();

                const formatTime = (timeStr) => {
                    if (!timeStr || !timeStr.includes(':')) return '';
                    const time = new Date('1970-01-01 ' + timeStr);
                    return time.toTimeString().slice(0, 5);
                };

                $('#conductedStartTime').val(formatTime(startTimeText));
                $('#conductedEndTime').val(formatTime(endTimeText));

                $('#eventModal').modal('hide');
                setTimeout(() => {
                    $('#conductedModal').modal('show');
                }, 400);
            }
            $(document).ready(function() {
                $('#new_room_type').on('change', function() {
                    let type = $(this).val();
                    loadRoomsByType(type);
                });
            });

            // Button click
            $('#openConductedBtn').on('click', function () {
                openConductedModal(true, false);
            });

            // Submit Conducted
            $('#saveConductedBtn').on('click', function () {
                const startTime = $('#conductedStartTime').val();
                const endTime = $('#conductedEndTime').val();
                const eventId = $('#selectedEventId').val();
                const no_of_pax_attended = $('#no_of_pax_attended').val();
                const conducted_remarks = $('#conducted_remarks').val();

                if (!startTime || !endTime) {
                    alert('Please select both start and end times.');
                    return;
                }

                // Example AJAX (replace URL and data as needed)
                $.ajax({
                    url: "{{ trans_url('admin/facility_booking/booking_request/update_conducted') }}",
                    type: 'POST',
                    data: {
                        id: eventId,
                        start_time: startTime,
                        end_time: endTime,
                        no_of_pax_attended: no_of_pax_attended,
                        conducted_remarks: conducted_remarks,

                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        if (response.status === 'success') {
                            toastr.success(response.message);
                        } else {
                            toastr.error('Unexpected response from server.');
                        }
                        $('#conductedModal').modal('hide');
                        calendar.refetchEvents();
                    },
                    error: function (xhr) {
                        if (xhr.status === 422 && xhr.responseJSON.errors) {
                            // Grab the first validation error only
                            let firstError = Object.values(xhr.responseJSON.errors)[0][0];
                            toastr.error(firstError);
                        } else {
                            toastr.error('Something went wrong.'); 
                        }
                    }
                });
            });

            // Save updated date via AJAX
            $('#saveEditBookingBtn').on('click', function () {
                const eventId = $('#selectedEventId').val();
                const updatedDate = $('#newbookingDate').val();
                const updatedStart = $('#newStartTime').val();
                const updatedEnd = $('#newEndTime').val();
                const updatedTitle = $('#newEventTitle').val();
                const updatedRoomType = $('#new_room_type').val();
                const updatedMeetingType = $('#new_meeting_type').val();
                const updatedRoom = $('#new_sub_location_id').val();
                const updatedDepartment = $('#new_department_id').val();

                if (!updatedDate || !updatedStart || !updatedEnd || !updatedTitle || !updatedRoomType || !updatedMeetingType || !updatedRoom) {
                    alert('Please fill all fields.');
                    return;
                }

                $.ajax({
                    url: "{{ trans_url('admin/facility_booking/booking_request/edit_Request') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        event_id: eventId,
                        booking_date: updatedDate,
                        start_time: updatedStart,
                        end_time: updatedEnd,
                        title: updatedTitle,
                        room_type: updatedRoomType,
                        meeting_type: updatedMeetingType,
                        sub_location_id: updatedRoom,
                        department_id: updatedDepartment,
                    },
                    global: false,
                    success: function () {
                        $('#editbookingDateModal').modal('hide');
                        calendar.refetchEvents();

                        // setTimeout(() => {
                        //     $('#eventModal').modal('show');
                        // }, 400);
                    },
                    error: function (xhr) {
                        if (xhr.status === 422 && xhr.responseJSON.errors) {
                            // Grab the first validation error only
                            let firstError = Object.values(xhr.responseJSON.errors)[0][0];
                            toastr.error(firstError);
                        } else {
                            toastr.error('Something went wrong.'); 
                        }
                    }
                });
            });

            $('#eventModal').on('hidden.bs.modal', function () {
                $('#bookingStatus').val('');
                $('#rejectRemarks').val('');
                $('#rejectRemarksGroup').hide();
            });

            $('#saveApprovalBtn').on('click', function (e) {
                const eventId = $('#selectedEventId').val();
                const rejectRemarks = $('#rejectRemarks').val();
                const bookingStatus = $('#bookingStatus').val();
                const val = ($bookingStatus.val() || '').toString().toLowerCase();
                const txt = ($bookingStatus.find('option:selected').text() || '').toLowerCase();

                // if reject selected -> remarks required
                if (val === 'rejected') {
                    if ($.trim($reject.val()) === '') {
                        e.preventDefault();
                        toastr.options = {
                            "closeButton": true,
                            "progressBar": true,
                            "positionClass": "toast-bottom-left",
                            "timeOut": "5000"
                        };
                        toastr.error('Please enter remarks before rejecting the booking.', 'Remarks required');
                        $reject.focus();
                        return false;
                    }
                }

                $.ajax({
                    url: "{{ trans_url('admin/facility_booking/booking_request/approve_or_reject') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        event_id: eventId,
                        remarks: rejectRemarks,
                        status: bookingStatus,
                    },
                    global: false,
                    success: function () {
                        $('#editbookingDateModal').modal('hide');
                        calendar.refetchEvents();
                    },
                    error: function (xhr) {
                        if (xhr.status === 422 && xhr.responseJSON.errors) {
                            // Grab the first validation error only
                            let firstError = Object.values(xhr.responseJSON.errors)[0][0];
                            toastr.error(firstError);
                        } else {
                            toastr.error('Something went wrong.'); 
                        }
                    }
                });
            });

            $('#help').click(function () {
                $.ajax({
                    url: "{{ url('admin/facility_booking/booking_request/help_note') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        if (response.code === 200) {
                            $('#helpModal .modal-body').html(response.content);
                            $('#helpModal').modal('show');
                        } else {
                            swal("Error", response.message || "Something went wrong.", "error");
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error(error);
                        swal("Error", "Failed to load help content. Please try again.", "error");
                    }
                });
            });

            $('#facilityDetails').click(function () {
                var selectedRoom = $('#roomFilter').val();

                if (!selectedRoom) {
                    toastr.warning("Please select a room to display facility details.");
                    return; // Stop execution if no room is selected
                }

                $.ajax({
                    url: "{{ url('admin/facility_booking/booking_request/facility_details') }}",
                    type: 'GET',
                    data: { room_id: selectedRoom }, // Pass roomFilter value
                    dataType: 'json',
                    success: function (response) {
                        if (response.code === 200) {
                            $('#facilityDetailsModal .modal-body').html(response.content);
                            $('#facilityDetailsModal').modal('show');
                        } else {
                            swal("Error", response.message || "Something went wrong.", "error");
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error(error);
                        swal("Error", "Failed to load Facility details. Please try again.", "error");
                    }
                });
            });

            $('.bookingDate').pickadate({
                format: 'dd mmm, yyyy',
                formatSubmit: 'yyyy-mm-dd',
                selectMonths: true,
                selectYears: true,
                min: true, // This restricts to today and future dates
            });

            $('#newbookingDate').pickadate({
                format: 'dd mmm, yyyy',
                formatSubmit: 'yyyy-mm-dd',
                selectMonths: true,
                selectYears: true,
                min: true,
            });

            $(function(){
                // generate slots: array of "HH:MM"
                function generateSlots(stepMin){
                    var out = [];
                    for(var m=0; m < 24*60; m += stepMin){
                    var hh = String(Math.floor(m/60)).padStart(2,'0');
                    var mm = String(m%60).padStart(2,'0');
                    out.push(hh + ':' + mm);
                    }
                    return out;
                }
                function pretty(t){ // "HH:MM" -> "h:mm AM/PM"
                    var p = t.split(':').map(Number);
                    var h = p[0], m = p[1];
                    var ampm = h >= 12 ? 'PM' : 'AM';
                    var hh = h % 12 || 12;
                    return hh + ':' + String(m).padStart(2,'0') + ' ' + ampm;
                }

                var step = 30;
                var slots = generateSlots(step);

                // populate all start selects with all slots
                function populateStart($sel){
                    $sel.empty().append('<option value="">Select start</option>');
                    slots.forEach(function(s){ $sel.append('<option value="'+s+'">'+pretty(s)+'</option>'); });
                }

                // populate end select with slots after startIndex (startIndex + 1 -> next slot)
                function populateEnd($end, startIndex){
                    $end.empty();
                    var startIdx = startIndex + 1; // next slot after start; change +0 if you want to allow equal
                    if(startIdx >= slots.length){
                    $end.append('<option value="">No available end times</option>').prop('disabled', true);
                    return;
                    }
                    $end.append('<option value="">Select end</option>');
                    for(var i = startIdx; i < slots.length; i++){
                    $end.append('<option value="'+slots[i]+'">'+pretty(slots[i])+'</option>');
                    }
                    $end.prop('disabled', false);
                }

                // init any existing pairs on page
                $('.time-pair').each(function(){
                    var $p = $(this);
                    var $s = $p.find('.startSelect');
                    var $e = $p.find('.endSelect');
                    populateStart($s);
                    // default end = empty
                    $e.append('<option value="">Select end</option>').prop('disabled', true);
                });

                // handle change
                $(document).on('change', '.startSelect', function(){
                    var $p = $(this).closest('.time-pair');
                    var $e = $p.find('.endSelect');
                    var val = $(this).val();
                    if(!val){
                    $e.empty().append('<option value="">Select end</option>').prop('disabled', true);
                    return;
                    }
                    var idx = slots.indexOf(val);
                    populateEnd($e, idx);
                });

                // form validation
                $(document).on('submit', 'form', function(e){
                    var ok = true;
                    $(this).find('.time-pair').each(function(){
                    var s = $(this).find('.startSelect').val();
                    var t = $(this).find('.endSelect').val();
                    if(!s || !t){ ok = false; return false; }
                    });
                    if(!ok){
                    e.preventDefault();
                    alert('Please choose both start and end times, and ensure end is after start.');
                    }
                });
            });

            $('.startTime').pickatime({
                format: 'h:i A',
                formatSubmit: 'HH:i:ss',
                interval: 30,
                
            });

            $('.endTime').pickatime({
                format: 'h:i A',
                formatSubmit: 'HH:i:ss',
                interval: 30,
            });

            $('#conductedStartTime').pickatime({
                format: 'h:i A',
                formatSubmit: 'HH:i:ss',
                interval: 30,
                
            });

            $('#conductedEndTime').pickatime({
                format: 'h:i A',
                formatSubmit: 'HH:i:ss',
                interval: 30,
            });

            var currentFilters = {
                roomType: null,
                room: null,
                status: null
                };

            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                height: 600,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                buttonText: {
                    today: 'Today',
                    month: 'Month',
                    week: 'Week',
                    day: 'Day',
                    list: 'List'
                },
                views: {
                    dayGridMonth: { buttonText: 'Month' },
                    timeGridWeek: { buttonText: 'Week' },
                    timeGridDay: { buttonText: 'Day' },
                    listWeek: { buttonText: 'List' }
                },
                eventDisplay: 'block',

                // Highlight Sundays
                dayCellDidMount: function (info) {
                    let day = info.date.getDay(); // 0 = Sunday
                    if (day === 0) {
                        info.el.style.backgroundColor = '#ffcccc'; // light red
                    }
                },
                dateClick: function(info) {
                    $('#eventDetails').hide();
                    $('#eventFormFields').show();
                    $('#addEventBtn').show();
                    $('#deleteEventBtn').hide();
                    $('#openEditBookingBtn').hide();
                    $('#openApproveRejectBtn').hide();
                    $('#eventModalLabel').text('Book Room');
                    $('#eventForm')[0].reset();
                    let clickedDate = new Date(info.dateStr);
                    let today = new Date();
                    
                    // Remove time part for accurate date comparison
                    today.setHours(0, 0, 0, 0);
                    clickedDate.setHours(0, 0, 0, 0);

                    // If clicked date is in the past, do nothing
                    if (clickedDate < today) {
                        toastr.warning("You cannot book a past date.");
                        return;
                    }

                    // Format as "DD Mon, YYYY" with a comma
                    let options = { day: '2-digit', month: 'short', year: 'numeric' };
                    let parts = clickedDate.toLocaleDateString('en-GB', options).split(' ');
                    let formattedDate = `${parts[0]} ${parts[1]}, ${parts[2]}`;

                    // Set date values
                    $('#bookingDate').val(formattedDate);
                    $('#bookingDateHidden').val(info.dateStr);

                    // $('#eventDetails').hide();
                    // $('#eventFormFields').show();
                    // $('#eventForm')[0].reset();
                    // $('#bookingDate').val(formattedDate);
                    // $('#bookingDateHidden').val(info.dateStr);

                    // Show modal
                    $('#eventModal').modal('show');
                },
                eventContent: function (arg) {
                    if (arg.event.display === 'background') {
                        return false; // Don't render text for background events
                    }
                    const start = arg.event.start;
                    const end = arg.event.end;

                    const startTime = start.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
                    const endTime = end ? end.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) : '';

                    const timeText = endTime ? `${startTime} - ${endTime}` : startTime;
                    const titleText = arg.event.title;

                    return {
                        html: `<b>${timeText}</b> ${titleText}`
                    };
                },

                events: function(fetchInfo, successCallback, failureCallback) {
                    $.ajax({
                        url: "{{ trans_url('admin/facility_booking/booking_request/booking_datas') }}",
                        type: 'GET',
                        dataType: 'json',
                        data: {
                            roomType: currentFilters.roomType,
                            room: currentFilters.room,
                            status: currentFilters.status,
                            start: fetchInfo.startStr,   // you can pass the date range if needed
                            end: fetchInfo.endStr
                        },
                        success: function(data) {
                            successCallback(data);
                        },
                        error: function() {
                            failureCallback();
                            alert('There was an error while fetching events!');
                        }
                    });
                },

                eventDidMount: function (info) {
                    let tooltipText = 'Meeting Title: ' + info.event.title;
                    if (info.event.extendedProps.description) {
                        tooltipText += '<br>Meeting Notes: ' + info.event.extendedProps.description;
                    }
                    $(info.el).tooltip({
                        title: tooltipText,
                        placement: 'top',
                        trigger: 'hover',
                        container: 'body',
                        html: true
                    });
                }
            });

            calendar.render();

            window.calendar = calendar;

            $(document).ready(function () {
                $('#eventModal').on('show.bs.modal', function () {
                    var filterRoomType = $('#roomTypeFilter').val();
                    var filterRoom = $('#roomFilter').val();

                    $('#room_type').val(filterRoomType).trigger('change');

                    // Wait until rooms are loaded
                    setTimeout(function () {
                        $('#sub_location_id').val(filterRoom).trigger('change');
                    }, 300);
                });

                // Common function to update filters and refresh the calendar
                function updateCalendarFilters() {
                    currentFilters.roomType = $('#roomTypeFilter').val() || null;
                    currentFilters.room = $('#roomFilter').val() || null;
                    currentFilters.status = $('#statusFilter').val() || null;

                    // If you had 'roomTypeFilter' variable before, ensure it's updated
                    currentFilter = $('#roomTypeFilter').val() || null;

                    calendar.refetchEvents();
                }

                // Attach change event to all filters
                $('#roomTypeFilter, #roomFilter, #statusFilter').on('change', function () {
                    updateCalendarFilters();
                });

                $('#resetButton').on('click', function (e) {
                    e.preventDefault();

                    // Reset filters to default
                    $('#roomTypeFilter').val('');
                    $('#roomFilter').val('');
                    $('#statusFilter').val('');

                    $('#roomFilter')
                    .empty()
                    .append('<option value="" disabled selected hidden>Select Room</option>');

                    // Clear filter variables
                    currentFilters.roomType = null;
                    currentFilters.room = null;
                    currentFilters.status = null;

                    // Reload events with no filters
                    calendar.refetchEvents();
                });
            });

            // Event click
            calendar.on('eventClick', function (info) {
                $('#eventDetails').show();
                $('#eventFormFields').hide();
                $('#addEventBtn').hide();
                $('#deleteEventBtn').show(); // Keep this for default

                const eventColor = info.event.backgroundColor || '';
                const eventStatus = info.event.extendedProps.status?.toLowerCase() || '';
                const isPastEvent = info.event.start < new Date();
                const loggedInUserId = "{{ user('admin.web')->id }}"; // Pass from Laravel
                const eventUserId = info.event.extendedProps.user_id;

                // 👇 Your condition for delete button visibility
                if (eventUserId == loggedInUserId && !isPastEvent && (eventStatus === 'approved' || eventStatus === 'requested'))
                {
                    $('#deleteEventBtn').show();
                } else {
                    $('#deleteEventBtn').hide();
                }

                if (eventStatus === 'requested' && !isPastEvent) {
                    $('#openEditBookingBtn').show();
                    $('#openApproveRejectBtn').show();
                } else {
                    $('#openEditBookingBtn').hide();
                    $('#openApproveRejectBtn').hide();
                }

                // if (eventStatus === 'requested' && !isPastEvent || eventStatus === 'approved' && !isPastEvent) {
                //     $('#deleteEventBtn').show();
                // } else {
                    
                //     $('#deleteEventBtn').hide();
                // }

                // Hide all first
                $('#rowApprovedBy').hide();
                $('#rowRejectedBy').hide();
                $('#rowCancelledBy').hide();
                $('#rowConductedTime').hide();
                $('#rowNoOfPAXAttended').hide();
                $('#rowRemarks').hide();

                // Show based on status
                if (eventStatus === 'approved') {
                    $('#rowApprovedBy').show();
                } else if (eventStatus === 'rejected') {
                    $('#rowRejectedBy').show();
                } else if (eventStatus === 'cancelled') {
                    $('#rowCancelledBy').show();
                }
                if (eventStatus === 'conducted') {
                    $('#rowConductedTime').show();
                    $('#rowNoOfPAXAttended').show();
                    $('#rowRemarks').show();
                } 
                
                const now = new Date();
                const sevenDaysAgo = new Date();
                sevenDaysAgo.setDate(now.getDate() - 7);

                const eventDate = new Date(info.event.start);

                // Check if event is approved AND occurred within the last 7 days (but still in the past)
                if (
                    eventStatus === 'approved' &&
                    eventDate < now &&
                    eventDate >= sevenDaysAgo && eventUserId == loggedInUserId
                ) {
                    $('#openConductedBtn').show();
                } else {
                    $('#openConductedBtn').hide();
                }

                $('#eventModalLabel').text('Room Booking Details');
                $('#detailTitle').text(info.event.title || '-');
                $('#detailRequestedBy').text(info.event.extendedProps.requested_by || '-');
                $('#detailApprovedBy').text(info.event.extendedProps.approved_by || '-');
                $('#detailRejectedBy').text(info.event.extendedProps.rejected_by || '-');
                $('#detailCancelledBy').text(info.event.extendedProps.cancelled_by || '-');
                $('#detailConductedTime').text(info.event.extendedProps.conducted_time || '-');
                $('#detailNoOfPAX').text(info.event.extendedProps.no_of_pax_attended || '-');
                $('#detailRemarks').text(info.event.extendedProps.conducted_remarks || '-');

                $('#roomType').text(info.event.extendedProps.room_type || '-');
                $('#room').text(info.event.extendedProps.room || '-');
                const bookingDateObj = info.event.start ? new Date(info.event.start) : null;
                const endDateObj = info.event.end ? new Date(info.event.end) : null;

                const bookingDateFormatted = bookingDateObj
                    ? bookingDateObj.toLocaleDateString('en-GB', {
                        weekday: 'long',
                        day: '2-digit',
                        month: 'long',
                        year: 'numeric',
                    })
                    : '-';

                const startTimeFormatted = bookingDateObj
                    ? bookingDateObj.toLocaleTimeString('en-US', {
                        hour: '2-digit',
                        minute: '2-digit',
                        hour12: true,
                    })
                    : '-';

                const endTimeFormatted = endDateObj
                    ? endDateObj.toLocaleTimeString('en-US', {
                        hour: '2-digit',
                        minute: '2-digit',
                        hour12: true,
                    })
                    : '-';
                $('#guestDetails').text(info.event.extendedProps.guest_details || '-');

                $('#noOfPAX').text(info.event.extendedProps.no_of_pax || '-');
                $('#vipOrCelebrities').text(info.event.extendedProps.vip_or_celebrities || '-');
                $('#coordinatorName').text(info.event.extendedProps.coordinators_name || '-');
                $('#coordinatorEmail').text(info.event.extendedProps.coordinators_email || '-');
                $('#coordinatorMobile').text(info.event.extendedProps.coordinators_mobile || '-');
                $('#attendeesEmails').text(info.event.extendedProps.attendees_emails || '-');
                $('#meetingType').text(info.event.extendedProps.meeting_type || '-');
                $('#detailbookingDate').text(bookingDateFormatted);
                $('#detailStartTime').text(startTimeFormatted);
                $('#detailEndTime').text(endTimeFormatted);
                // Get additional requirements array from extendedProps
                const additionalRequirementsArray = info.event.extendedProps.additional_requirements;

                // Convert to comma-separated string
                const additionalRequirementsText = Array.isArray(additionalRequirementsArray) && additionalRequirementsArray.length > 0
                    ? additionalRequirementsArray.join(', ')
                    : '-';

                // Set the text in the modal
                $('#additionalRequirements').text(additionalRequirementsText);

                $('#detailDescription').text(info.event.extendedProps.description || '-');
                $('#detailDepartment').text(info.event.extendedProps.department_id || '-');
                $('#selectedEventId').val(info.event.id);

                const status = info.event.extendedProps.status || '-';
                    let statusClass = 'status-default';

                    switch (status.toLowerCase()) {
                        case 'approved':
                            statusClass = 'status-approved';
                            break;
                        case 'requested':
                            statusClass = 'status-requested';
                            break;
                        case 'cancelled':
                        case 'hold':
                            statusClass = 'status-cancelled';
                            break;
                        case 'rejected':
                            statusClass = 'status-rejected';
                            break;
                        case 'conducted':
                            statusClass = 'status-conducted';
                            break;
                    }

                    $('#detailStatus')
                        .removeClass()
                        .addClass('enhanced-status-badge ' + statusClass)
                        .html(status.toUpperCase());

                $('#eventModal').modal('show');
            });



            $('button[data-target="#eventModal"]').on('click', function () {
                $('#eventDetails').hide();
                $('#eventFormFields').show();
                $('#addEventBtn').show();
                $('#deleteEventBtn').hide();
                $('#openEditBookingBtn').hide();
                $('#openApproveRejectBtn').hide();
                $('#eventModalLabel').text('Book Room');
                $('#eventForm')[0].reset();
            });

            $('#eventForm').on('submit', function (e) {
                e.preventDefault();
                var $btn = $('#addEventBtn').prop('disabled', true);

                // Re-enable automatically after 5 seconds
                setTimeout(function () {
                    $btn.prop('disabled', false);
                }, 3000);

                var title = $('#eventTitle').val();
                var booking_date = $('#bookingDate').val();
                var room_type = $('#room_type').val();
                var sub_location_id = $('#sub_location_id').val();
                var start_time = $('#startTime').val();
                var end_time = $('#endTime').val();
                var description = $('#Description').val();
                var coordinator_name = $('#coordinator_name').val();
                var coordinator_email = $('#coordinator_email').val();
                var coordinator_mobile = $('#coordinator_mobile').val();
                var department_id = $('#department_id').val();
                var no_of_pax = $('#no_of_pax').val();
                var vip_or_celebrities = $('#vip_or_celebrities').val();
                var coordinators_details = $('#coordinators_details').val();
                var guest_details = $('#guest_details').val();
                var attendees_emails = $('#attendees_emails').val();
                var meeting_type = $('#meeting_type').val();
                var additional_requirements = $('input[name="additional_requirements[]"]:checked')
                                    .map(function() { return this.value; })
                                    .get();

                // Check required fields
                if (!booking_date) {
                    toastr.error('Booking date is required.');
                    return;
                }
                if (!start_time) {
                    toastr.error('Start time is required.');
                    return;
                }
                if (!end_time) {
                    toastr.error('End time is required.');
                    return;
                }
                var user = $('#user_id').val();

                if (title && booking_date) {
                    $.ajax({
                        url: "{{ trans_url('admin/facility_booking/booking_request/booking_datas/store') }}",
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            title: title,
                            booking_date: booking_date,
                            start_time: start_time,
                            end_time: end_time,
                            description: description,
                            coordinator_name: coordinator_name,
                            coordinator_email: coordinator_email,
                            coordinator_mobile: coordinator_mobile,
                            department_id: department_id,
                            room_type: room_type,
                            sub_location_id: sub_location_id,
                            guest_details: guest_details,
                            no_of_pax: no_of_pax,
                            vip_or_celebrities: vip_or_celebrities,
                            coordinators_details: coordinators_details,
                            attendees_emails: attendees_emails,
                            meeting_type: meeting_type,
                            user_id: user,
                            additional_requirements: additional_requirements
                        },
                        global: false,
                        success: function (response) {
                            toastr.success(response.message || 'Booking added!');
                            $('#eventModal').modal('hide');
                            $('#eventForm')[0].reset();
                            calendar.refetchEvents();
                        },
                        error: function (xhr) {
                            if (xhr.status === 422 && xhr.responseJSON.errors) {
                                // Grab the first validation error only
                                let firstError = Object.values(xhr.responseJSON.errors)[0][0];
                                toastr.error(firstError);
                            } else {
                                toastr.error('Something went wrong.'); 
                            }
                        }
                    });
                }
            });


            // ✅ Handle delete
            $('#deleteEventBtn').on('click', function () {
                var eventId = $('#selectedEventId').val();

                // Close Bootstrap modal to prevent focus issues
                $('#eventModal').modal('hide');

                setTimeout(function () {
                    Swal.fire({
                        title: 'Enter Remarks',
                        html: `
                            <label for="swal-remarks" style="display:block; text-align:left; margin-bottom: 6px; font-weight: 500; font-size: 14px;"></label>
                            <textarea id="swal-remarks" rows="5" 
                                style="width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; resize: vertical;"></textarea>
                        `,
                        showCancelButton: true,
                        confirmButtonText: 'Next',
                        cancelButtonText: 'Cancel',
                        focusConfirm: false,
                        customClass: {
                            popup: 'custom-swal-popup',
                            confirmButton: 'custom-swal-confirm',
                            cancelButton: 'custom-swal-cancel'
                        },
                        preConfirm: () => {
                            const remarks = document.getElementById('swal-remarks').value;
                            if (!remarks || remarks.trim() === '') {
                                Swal.showValidationMessage('Remarks cannot be empty!');
                                return false;
                            }
                            return remarks;
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            const remarks = result.value;

                            // Second confirmation step
                            Swal.fire({
                                title: "Are you sure?",
                                icon: "warning",
                                showCancelButton: true,
                                confirmButtonColor: "#DD6B55",
                                confirmButtonText: "Yes, Cancel it!",
                                cancelButtonText: "No, Keep it",
                                customClass: {
                                    popup: 'custom-swal-popup',
                                    confirmButton: 'custom-swal-confirm',
                                    cancelButton: 'custom-swal-cancel'
                                }
                            }).then((confirmResult) => {
                                if (confirmResult.isConfirmed) {
                                    $.ajax({
                                        url: "{{ trans_url('admin/facility_booking/booking_request/delete') }}",
                                        type: 'POST',
                                        data: { 
                                            id: eventId, 
                                            remarks: remarks, 
                                            _token: '{{ csrf_token() }}' 
                                        },
                                        success: function (response) {
                                            toastr.success(response.message || 'Booking deleted.');
                                            calendar.refetchEvents();
                                            // location.reload();
                                        },
                                        error: function (xhr) {
                                            Swal.fire("Delete failed!", xhr.responseJSON?.message || 'Error occurred', "error");
                                        }
                                    });
                                }
                            });
                        }
                    });
                }, 300); // small delay so modal fully closes
            });

            // SweetAlert2 custom styles
            const swalStyle = document.createElement('style');
            swalStyle.innerHTML = `
                .custom-swal-popup {
                    width: 450px !important;
                    min-height: 300px !important;
                    max-height: 90vh !important;
                    padding: 25px !important;
                }
                .custom-swal-confirm, .custom-swal-cancel {
                    padding: 12px 24px !important;
                    font-size: 16px !important;
                    border-radius: 6px !important;
                }
                #swal-remarks {
                    font-size: 16px !important;
                }
            `;
            document.head.appendChild(swalStyle);

        });

        $(document).ready(function() {
            $('#room_type').change(function() {
                loadRooms();
            });
            $('#roomTypeFilter').change(function() {
                loadRoomsFiltering();
            });
        });

        function loadRooms(selectedDoctorId = null) {
            var room_type = $('#room_type').val();

            if (room_type) {
                $.ajax({
                    url: "{{ url('admin/facility_booking/booking_request/rooms') }}",
                    type: 'GET',
                    data: {
                        room_type: room_type
                    },
                    dataType: 'json',
                    success: function(data) {
                        var doctorDropdown = $('#sub_location_id');
                        doctorDropdown.empty();
                        doctorDropdown.append('<option value="">Select Room</option>');

                        $.each(data, function(key, value) {
                            doctorDropdown.append('<option value="' + key + '">' + value + '</option>');
                        });

                        if (selectedDoctorId) {
                            doctorDropdown.val(selectedDoctorId).trigger('change');
                        }
                    },
                    error: function() {
                        alert('Failed to load room.');
                    }
                });
            } else {
                $('#sub_location_id').empty().append('<option value="">Select Room</option>');
            }
        }

        function loadRoomsFiltering(selectedDoctorId = null) {
            var roomTypeFilter = $('#roomTypeFilter').val();

            if (roomTypeFilter) {
                $.ajax({
                    url: "{{ url('admin/facility_booking/booking_request/rooms') }}",
                    type: 'GET',
                    data: {
                        room_type: roomTypeFilter
                    },
                    dataType: 'json',
                    success: function(data) {
                        var doctorDropdown = $('#roomFilter');
                        doctorDropdown.empty();
                        doctorDropdown.append('<option value="">Select Room</option>');

                        $.each(data, function(key, value) {
                            doctorDropdown.append('<option value="' + key + '">' + value + '</option>');
                        });

                        if (selectedDoctorId) {
                            doctorDropdown.val(selectedDoctorId).trigger('change');
                        }
                    },
                    error: function() {
                        alert('Failed to load room.');
                    }
                });
            } else {
                $('#roomFilter').empty().append('<option value="">Select Room</option>');
            }
        }

    </script>
@stop

@section('style')
    <link href="{{ asset('assets/fullcalendar/main.min.css') }}" rel="stylesheet" type="text/css">
    <style>
        .fc-bg-event {
            opacity: 1 !important;
        }
        .modal-backdrop.fade.show {
        background-color: rgba(0, 0, 0, 0.15) !important; /* adjust 0.15 -> 0.1 / 0.2 as needed */
        opacity: 1 !important; /* ensure background-color alpha is used instead of Bootstrap's opacity */
        transition: none !important;
        }

        /* SweetAlert v1 overlay (if you open a swal while modal open) */
        .sweet-overlay {
        background: rgba(0, 0, 0, 0.15) !important;
        transition: none !important;
        }
        #eventModalContent {
            transition: max-height 0.3s ease;
        }

        .enhanced-modal-content {
            border: none !important;
            border-radius: 20px !important;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
            overflow: hidden !important;
            background: #ffffff !important;
            height: 600px !important;
            display: flex;
            flex-direction: column;
        }
        .enhanced-modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background-color: #f9f9f9;
        }

        .enhanced-modal-header {
            background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%) !important;
            border: none !important;
            padding: 25px 30px !important;
            position: relative !important;
            overflow: hidden !important;
        }

        .enhanced-modal-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }

        .enhanced-modal-title {
            font-size: 1.5rem !important;
            font-weight: 600 !important;
            color: white !important;
            margin: 0 !important;
            position: relative !important;
            z-index: 1 !important;
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
        }

        .enhanced-modal-title i {
            font-size: 1.3rem !important;
            opacity: 0.9 !important;
        }

        .enhanced-btn-close {
            background: rgba(255, 255, 255, 0.2) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            border-radius: 50% !important;
            width: 35px !important;
            height: 35px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all 0.3s ease !important;
            position: relative !important;
            z-index: 1 !important;
            outline: none !important;
            opacity: 1 !important;
            color: white !important;
            font-size: 20px !important;
            font-weight: 300 !important;
        }

        .enhanced-btn-close:hover {
            background: rgba(255, 255, 255, 0.3) !important;
            transform: rotate(90deg) !important;
            color: white !important;
        }

        .enhanced-btn-close::before {
            content: '×' !important;
        }

        .enhanced-modal-body {
            padding: 35px 30px !important;
            background: #ffffff !important;
        }

        .detail-row {
            display: flex !important;
            align-items: flex-start !important;
            margin-bottom: 1px !important;
            padding: 15px !important;
            border-bottom: 1px solid #f0f4f8 !important;
            transition: all 0.2s ease !important;
            border-radius: 8px !important;
            margin-left: -15px !important;
            margin-right: -15px !important;
        }

        .detail-row:hover {
            background: #f8fafc !important;
            transform: translateX(5px) !important;
        }

        .detail-row:last-child {
            border-bottom: none !important;
            margin-bottom: 0 !important;
        }

        .hide-row {
            display: flex ;
            align-items: flex-start !important;
            margin-bottom: 1px !important;
            padding: 15px !important;
            border-bottom: 1px solid #f0f4f8 !important;
            transition: all 0.2s ease !important;
            border-radius: 8px !important;
            margin-left: -15px !important;
            margin-right: -15px !important;
        }

        .hide-row:hover {
            background: #f8fafc !important;
            transform: translateX(5px) !important;
        }

        .hide-row:last-child {
            border-bottom: none !important;
            margin-bottom: 0 !important;
        }

        .detail-label {
            font-weight: 600 !important;
            color: #2d3748 !important;
            min-width: 140px !important;
            font-size: 1.4rem !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }

        .detail-label i {
            width: 18px !important;
            color: #4A90E2 !important;
            font-size: 0.9rem !important;
        }

        .detail-value {
            color: #4a5568 !important;
            font-size: 1.4rem !important;
            line-height: 1.5 !important;
            flex: 1 !important;
            padding-left: 10px !important;
        }

        .enhanced-status-badge {
            display: inline-flex !important;
            align-items: center !important;
            padding: 6px 16px !important;
            border-radius: 25px !important;
            font-size: 1.2rem !important;
            font-weight: 600 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            gap: 6px !important;
        }

        .status-requested {
            background: linear-gradient(135deg, #4a5568 0%, #4a5568 100%) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3) !important;
        }

        .status-cancelled i {
            animation: spin 2s linear infinite !important;
        }

        .status-approved {
            background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3) !important;
        }

        .status-cancelled {
            background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(237, 137, 54, 0.3) !important;
        }

        .status-rejected {
            background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(245, 101, 101, 0.3) !important;
        }

        .status-conducted {
            background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3) !important;
        }

        .status-default {
            background: linear-gradient(135deg, #718096 0%, #4a5568 100%) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(113, 128, 150, 0.3) !important;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .enhanced-modal-footer {
            background: #f8fafc !important;
            border: none !important;
            padding: 20px 30px !important;
            display: flex !important;
            justify-content: flex-end;
        }

        .enhanced-btn-secondary {
            background: linear-gradient(135deg, #718096 0%, #4a5568 100%) !important;
            border: none !important;
            border-radius: 25px !important;
            padding: 8px 24px !important;
            font-weight: 600 !important;
            color: white !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 4px 12px rgba(113, 128, 150, 0.3) !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }
        .enhanced-btn-secondary:hover {
            background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 6px 20px rgba(113, 128, 150, 0.4) !important;
            color: white !important;
        }

        .asset-highlight {
            color: #4A90E2 !important;
            font-weight: 600 !important;
        }

        .work-order-highlight {
            color: #4A90E2 !important;
            font-weight: 600 !important;
        }

        .asset-highlight a,
        .work-order-highlight a {
            color: #4A90E2 !important;
            text-decoration: none !important;
            font-weight: 600 !important;
        }

        .asset-highlight a:hover,
        .work-order-highlight a:hover {
            color: #357ABD !important;
            text-decoration: underline !important;
        }

        /* Calendar Tooltip Styles */
        .fc-event {
            position: relative;
        }

        .fc-tooltip {
            visibility: hidden;
            opacity: 0;
            width: max-content;
            background-color: #333;
            color: #fff;
            text-align: left;
            padding: 6px 10px;
            border-radius: 5px;
            position: absolute;
            z-index: 1000;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            transition: opacity 0.3s ease;
            white-space: nowrap;
            font-size: 13px;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
        }

        .fc-event:hover .fc-tooltip {
            visibility: visible;
            opacity: 1;
        }

        /* FullCalendar Button Styling */
        .fc-toolbar {
            margin-bottom: 1rem !important;
            align-items: center !important;
        }

        .fc-toolbar-chunk {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .fc-button-primary {
            background-color: #87ceeb !important;
            border-color: #70c0e8 !important;
            color: #333 !important;
            font-weight: 500 !important;
            padding: 6px 12px !important;
            border-radius: 6px !important;
            font-size: 14px !important;
            line-height: 1.4 !important;
            transition: all 0.2s ease !important;
            box-shadow: 0 2px 4px rgba(135, 206, 235, 0.2) !important;
        }

        .fc-button-primary:hover {
            background-color: #70c0e8 !important;
            border-color: #5ab3e0 !important;
            color: #222 !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 8px rgba(135, 206, 235, 0.3) !important;
        }

        .fc-button-primary:active,
        .fc-button-primary.fc-button-active {
            background-color: #5ab3e0 !important;
            border-color: #4a9cd9 !important;
            color: #fff !important;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
        }

        .fc-button-primary:focus {
            box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.3) !important;
        }

        .fc-button-primary:disabled {
            background-color: #d1ecf1 !important;
            border-color: #bee5eb !important;
            color: #6c757d !important;
            opacity: 0.7 !important;
        }

        .fc-prev-button, 
        .fc-next-button {
            margin: 0 4px !important;
            vertical-align: middle !important;
            min-width: 40px !important;
            position: relative !important;
        }

        .fc-prev-button .fc-icon,
        .fc-next-button .fc-icon {
            display: none !important;
        }

        .fc-prev-button:before {
            content: "◀" !important;
            font-size: 14px !important;
            font-weight: bold !important;
            display: inline-block !important;
        }

        .fc-next-button:before {
            content: "▶" !important;
            font-size: 14px !important;
            font-weight: bold !important;
            display: inline-block !important;
        }

        .fc-today-button {
            margin: 0 8px !important;
            font-weight: 600 !important;
        }

        .fc-dayGridMonth-button,
        .fc-timeGridWeek-button,
        .fc-timeGridDay-button,
        .fc-listWeek-button {
            border-radius: 6px !important;
            margin: 0 2px !important;
            min-width: 60px !important;
        }

        .fc-toolbar-title {
            font-size: 1.5rem !important;
            font-weight: 600 !important;
            color: #2c3e50 !important;
            margin: 0 16px !important;
        }

        .btn-primary {
            margin-bottom: 20px !important;
            margin-top: 10px !important;
            background-color: #87ceeb !important;
            border-color: #70c0e8 !important;
            color: #333 !important;
            font-weight: 500 !important;
            padding: 8px 16px !important;
            border-radius: 6px !important;
            transition: all 0.2s ease !important;
            box-shadow: 0 2px 4px rgba(135, 206, 235, 0.2) !important;
        }

        .btn-primary:hover {
            background-color: #70c0e8 !important;
            border-color: #5ab3e0 !important;
            color: #222 !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 8px rgba(135, 206, 235, 0.3) !important;
        }

        .btn-primary:active,
        .btn-primary:focus {
            background-color: #5ab3e0 !important;
            border-color: #4a9cd9 !important;
            color: #fff !important;
            box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.3) !important;
        }

        .modal-footer .btn-danger {
            background-color: #f8d7da !important;
            border-color: #f5c6cb !important;
            color: #721c24 !important;
        }

        .modal-footer .btn-danger:hover {
            background-color: #f1b0b7 !important;
            border-color: #ea868f !important;
            color: #491217 !important;
        }

        #calendar {
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .fc .fc-toolbar-chunk:first-child {
            justify-content: flex-start;
        }

        .fc .fc-toolbar-chunk:last-child {
            justify-content: flex-end;
        }

        .fc .fc-toolbar-chunk:nth-child(2) {
            justify-content: center;
            flex-grow: 1;
        }

        @media (max-width: 768px) {
            .fc-toolbar {
                flex-direction: column !important;
                gap: 10px !important;
            }
            
            .fc-toolbar-chunk {
                justify-content: center !important;
            }
            
            .fc-button-primary {
                padding: 5px 10px !important;
                font-size: 13px !important;
                min-width: 50px !important;
            }
            
            .fc-toolbar-title {
                font-size: 1.3rem !important;
                margin: 0 8px !important;
            }

            .enhanced-modal-content {
                margin: 10px !important;
            }

            .enhanced-modal-body {
                padding: 25px 20px !important;
            }

            .detail-row {
                flex-direction: column !important;
                align-items: flex-start !important;
            }
            .hide-row {
                flex-direction: column !important;
                align-items: flex-start !important;
            }

            .detail-label {
                min-width: auto !important;
                margin-bottom: 5px !important;
            }

            .detail-value {
                padding-left: 26px !important;
            }
        }
    </style>
    <style>
        .modal-content { border-radius: 12px; }
        .modal-header { border-bottom: 1px solid #dee2e6; }
        .modal-footer { border-top: 1px solid #dee2e6; }
        .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }

        .d-flex {
            display: flex;
            gap: 8px;
        }

        .d-flex input {
            flex: 1;
        }

        /* FullCalendar Button Styling */
        .fc-toolbar {
            margin-bottom: 1rem !important;
            align-items: center !important;
        }

        .fc-toolbar-chunk {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* All FullCalendar buttons */
        .fc-button-primary {
            background-color: #87ceeb !important; /* Light blue */
            border-color: #70c0e8 !important;
            color: #333 !important;
            font-weight: 500 !important;
            padding: 6px 12px !important;
            border-radius: 6px !important;
            font-size: 14px !important;
            line-height: 1.4 !important;
            transition: all 0.2s ease !important;
            box-shadow: 0 2px 4px rgba(135, 206, 235, 0.2) !important;
        }

        .fc-button-primary:hover {
            background-color: #70c0e8 !important;
            border-color: #5ab3e0 !important;
            color: #222 !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 8px rgba(135, 206, 235, 0.3) !important;
        }

        .fc-button-primary:active,
        .fc-button-primary.fc-button-active {
            background-color: #5ab3e0 !important;
            border-color: #4a9cd9 !important;
            color: #fff !important;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
        }

        .fc-button-primary:focus {
            box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.3) !important;
        }

        .fc-button-primary:disabled {
            background-color: #d1ecf1 !important;
            border-color: #bee5eb !important;
            color: #6c757d !important;
            opacity: 0.7 !important;
        }

        /* Navigation buttons (prev/next) */
        .fc-prev-button, 
        .fc-next-button {
            margin: 0 4px !important;
            vertical-align: middle !important;
            min-width: 40px !important;
            position: relative !important;
        }

        /* Hide default text and add custom arrows */
        .fc-prev-button .fc-icon,
        .fc-next-button .fc-icon {
            display: none !important;
        }

        .fc-prev-button:before {
            content: "◀" !important;
            font-size: 14px !important;
            font-weight: bold !important;
            display: inline-block !important;
        }

        .fc-next-button:before {
            content: "▶" !important;
            font-size: 14px !important;
            font-weight: bold !important;
            display: inline-block !important;
        }

        /* Alternative with CSS arrows (uncomment if you prefer these) */
        /*
        .fc-prev-button:before {
            content: "" !important;
            display: inline-block !important;
            width: 0 !important;
            height: 0 !important;
            border-top: 6px solid transparent !important;
            border-bottom: 6px solid transparent !important;
            border-right: 8px solid currentColor !important;
            vertical-align: middle !important;
        }

        .fc-next-button:before {
            content: "" !important;
            display: inline-block !important;
            width: 0 !important;
            height: 0 !important;
            border-top: 6px solid transparent !important;
            border-bottom: 6px solid transparent !important;
            border-left: 8px solid currentColor !important;
            vertical-align: middle !important;
        }
        */

        /* Today button */
        .fc-today-button {
            margin: 0 8px !important;
            font-weight: 600 !important;
        }

        /* View buttons (Month, Week, Day, List) */
        .fc-dayGridMonth-button,
        .fc-timeGridWeek-button,
        .fc-timeGridDay-button,
        .fc-listWeek-button {
            border-radius: 6px !important;
            margin: 0 2px !important;
            min-width: 60px !important;
        }

        /* Calendar title */
        .fc-toolbar-title {
            font-size: 1.5rem !important;
            font-weight: 600 !important;
            color: #2c3e50 !important;
            margin: 0 16px !important;
        }

        /* Add Visit button (custom button) */
        .btn-primary {
            margin-bottom: 20px !important;
            margin-top: 10px !important;
            background-color: #87ceeb !important;
            border-color: #70c0e8 !important;
            color: #333 !important;
            font-weight: 500 !important;
            padding: 8px 16px !important;
            border-radius: 6px !important;
            transition: all 0.2s ease !important;
            box-shadow: 0 2px 4px rgba(135, 206, 235, 0.2) !important;
        }

        .btn-primary:hover {
            background-color: #70c0e8 !important;
            border-color: #5ab3e0 !important;
            color: #222 !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 8px rgba(135, 206, 235, 0.3) !important;
        }

        .btn-primary:active,
        .btn-primary:focus {
            background-color: #5ab3e0 !important;
            border-color: #4a9cd9 !important;
            color: #fff !important;
            box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.3) !important;
        }

        /* Modal buttons */
        .modal-footer .btn-primary {
            background-color: #87ceeb !important;
            border-color: #70c0e8 !important;
            color: #333 !important;
        }

        .modal-footer .btn-danger {
            background-color: #f8d7da !important;
            border-color: #f5c6cb !important;
            color: #721c24 !important;
        }

        .modal-footer .btn-danger:hover {
            background-color: #f1b0b7 !important;
            border-color: #ea868f !important;
            color: #491217 !important;
        }

        .modal-footer .btn-secondary {
            background-color: #e9ecef !important;
            border-color: #ced4da !important;
            color: #495057 !important;
        }

        .modal-footer .btn-secondary:hover {
            background-color: #dae0e5 !important;
            border-color: #b0b8c1 !important;
            color: #2d3436 !important;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .fc-toolbar {
                flex-direction: column !important;
                gap: 10px !important;
            }
            
            .fc-toolbar-chunk {
                justify-content: center !important;
            }
            
            .fc-button-primary {
                padding: 5px 10px !important;
                font-size: 13px !important;
                min-width: 50px !important;
            }
            
            .fc-toolbar-title {
                font-size: 1.3rem !important;
                margin: 0 8px !important;
            }
        }

        /* Better spacing for the entire calendar container */
        #calendar {
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        /* Ensure button groups are properly aligned */
        .fc .fc-toolbar-chunk:first-child {
            justify-content: flex-start;
        }

        .fc .fc-toolbar-chunk:last-child {
            justify-content: flex-end;
        }

        .fc .fc-toolbar-chunk:nth-child(2) {
            justify-content: center;
            flex-grow: 1;
        }
        #deleteEventBtn {
            background-color: #dc3545 !important;  /* Bootstrap red */
            border-color: #dc3545 !important;
            color: #fff !important;
        }

    </style>
@stop