<turbo-stream action="append" target="modals"><template><div class="modal fade" id="bookingModal_1117" tabindex="-1" aria-labelledby="bookingModalLabel" aria-hidden="true"
     data-controller="motion"
     data-motion-modal-value="true">
  <div class="modal-dialog modal-xl modal-fullscreen-xl-down">
    <div class="modal-content border-0 shadow animate-scale-in">
      <div class="modal-header">
        <h5 class="modal-title" id="bookingModalLabel">
          Book This Pontoon Boat - South Bay 22′ Pontoon Black and Gray (FISH)
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="calendar-container" class="position-relative">
            <div class=" position-relative" 
      data-controller="availability"
      data-availability-unit-id-value="1117"
      data-availability-selected-date-value=""
      data-availability-end-date-value=""
      data-availability-quantity-value="1"
      data-availability-max-quantity-value="1"
      data-availability-cutoff-hours-value="0"
      data-availability-range-mode-value="false"
      data-availability-first-valid-month-value="2026-05-01"
      data-availability-has-predefined-dates-value="false"
      >
  
  
  <div class="row" data-availability-target="mainContent" >
    <div class="col-md-4">
      <div class="sticky-md-top rex-calendar-picker">
      <div class="card mb-4"
           data-controller="motion"
           data-motion-reveal-value="fade-up"
           data-motion-delay-value="100"
           data-motion-hover-value="glow">
        <div class="sc-calendar-header card-header bg-white py-3">
          <div class="d-flex justify-content-between align-items-center w-100">
            <button class="btn btn-outline-secondary rounded-circle p-0 position-relative prev-month-btn" 
                    style="width: 40px; height: 40px;"
                    data-action="availability#prevMonth"
                    data-availability-target="prevMonthBtn">
              <span class="position-absolute top-50 start-50 translate-middle">
                <i class="bi bi-chevron-left fs-5" data-availability-target="prevMonthIcon"></i>
                <span class="spinner-border spinner-border-sm d-none" data-availability-target="prevMonthSpinner" role="status">
                  <span class="visually-hidden">Loading...</span>
                </span>
              </span>
            </button>
            <div class="date-selector dropdown-center">
              <button class="btn btn-link text-dark border-0 rounded-0 px-2 py-1 border-bottom-dashed" 
                      type="button" 
                      data-bs-toggle="dropdown" 
                      aria-expanded="false"
                      data-availability-target="monthYear">
                <i class="bi bi-chevron-down ms-1 small"></i>
              </button>
              <div class="dropdown-menu p-3">
                <form data-action="submit->availability#monthYearSelected">
                  <div class="mb-1">
                    <label class="form-label small text-muted mb-1">Month</label>
                    <select name="month" class="form-select form-select-sm" data-availability-target="monthSelect">
                        <option value="1">January</option>
                        <option value="2">February</option>
                        <option value="3">March</option>
                        <option value="4">April</option>
                        <option value="5">May</option>
                        <option value="6">June</option>
                        <option value="7">July</option>
                        <option value="8">August</option>
                        <option value="9">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                    </select>
                  </div>
                  <div class="mb-3">
                    <label class="form-label small text-muted mb-1">Year</label>
                    <select name="year" class="form-select form-select-sm" data-availability-target="yearSelect">
                        <option value="2026">2026</option>
                        <option value="2027">2027</option>
                        <option value="2028">2028</option>
                    </select>
                  </div>
                  <button type="submit" class="btn btn-primary btn-sm w-100">Go</button>
                </form>
              </div>
            </div>
            <button class="btn btn-outline-secondary rounded-circle p-0 position-relative next-month-btn"
                    style="width: 40px; height: 40px;"
                    data-action="availability#nextMonth"
                    data-availability-target="nextMonthBtn">
              <span class="position-absolute top-50 start-50 translate-middle">
                <i class="bi bi-chevron-right fs-5" data-availability-target="nextMonthIcon"></i>
                <span class="spinner-border spinner-border-sm d-none" data-availability-target="nextMonthSpinner" role="status">
                  <span class="visually-hidden">Loading...</span>
                </span>
              </span>
            </button>
          </div>
        </div>
        <div class="card-body p-2 p-md-3 position-relative">
          <div class="calendar-loading-overlay position-absolute w-100 h-100 top-0 start-0 bg-white bg-opacity-75 d-flex justify-content-center align-items-center d-none" 
               style="z-index: 10;"
               data-availability-target="calendarSpinner">
            <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">Loading calendar...</span>
            </div>
          </div>
          
          <div class="sc-calendar position-relative" data-availability-target="calendarDays">
          </div>
        </div>
      </div>
      <div class="d-none" data-availability-target="dateAlert"></div>
      
      <div class="preferred-dates-indicator mb-2" role="status" aria-live="polite">
        <span class="indicator-text">
          <i class="bi bi-clock-history"></i>
          Dates remembered from previous search
        </span>
        <button type="button" 
                class="clear-preferred-dates-btn d-none" 
                data-action="click->availability#clearPreferredDates"
                data-availability-target="clearPreferredBtn"
                title="Clear remembered dates"
                aria-label="Clear remembered dates">
          <i class="bi bi-x-circle"></i>
          Clear
        </button>
      </div>
      
      <div class="row mb-4 align-items-center mt-3"
           data-controller="motion"
           data-motion-reveal-value="fade-up"
           data-motion-delay-value="200">
        <div class="col-6 mb-3">
          <div class="d-flex flex-column">
            <small class="text-muted text-uppercase mb-1">When?</small>
            <button type="button" 
                    class="date-select-btn p-2 rounded d-block text-center" 
                    data-availability-target="startDateDisplay"
                    data-action="click->availability#resetStartDate"
                    data-controller="motion"
                    data-motion-hover-value="scale"
                    data-motion-press-value="shrink">
              Add start date
            </button>
          </div>
        </div>
          <div class="col-6 mb-3">
            <div class="d-flex flex-column">
              <small class="text-muted text-uppercase mb-1">Multi-day?</small>
              <button type="button" 
                      class="date-select-btn p-2 rounded d-block text-center" 
                      data-availability-target="endDateToggle"
                      data-action="click->availability#toggleEndDate">
                Add return date
              </button>
              <button type="button" 
                      class="date-select-btn p-2 rounded d-block text-center d-none" 
                      data-availability-target="endDateDisplay"
                      data-action="click->availability#resetEndDate">
              </button>
            </div>
          </div>
      </div>

      <div class="mb-4"
           data-controller="motion"
           data-motion-reveal-value="fade-up"
           data-motion-delay-value="250">
        <label class="form-label text-muted text-uppercase small mb-1 text-center w-100">HOW MANY UNITS?</label>
        <div class="quantity-selector d-flex align-items-center justify-content-center border rounded p-2"
             data-controller="motion"
             data-motion-hover-value="glow">
          <button class="btn btn-link text-dark quantity-btn" 
                  data-action="click->availability#decreaseQuantity"
                  data-availability-target="minusBtn"
                  disabled>
            <i class="bi bi-dash-lg"></i>
          </button>
          <span class="quantity-display fw-bold mx-3 fs-4" data-availability-target="quantityDisplay">
            1
          </span>
          <button class="btn btn-link text-dark quantity-btn" 
                  data-action="click->availability#increaseQuantity">
            <i class="bi bi-plus-lg"></i>
          </button>
        </div>
      </div>
      
      <div id="booking_details"></div>
      </div>
    </div>

    <div class="col-md-8">
      <div class="position-relative">
        <div class="timeslots-loading-overlay position-absolute w-100 top-0 start-0" 
             style="z-index: 10; background: white;"
             id="timeslots-skeleton-loader"
             data-availability-target="timeslotsSpinner">
          <div class="card shadow-sm rounded-3 mb-4 border">
            <div class="card-header bg-white py-3 px-4 border-bottom">
              <div class="d-flex align-items-center">
                <div class="placeholder-glow me-3">
                  <span class="placeholder bg-secondary rounded" style="width: 60px; height: 60px;"></span>
                </div>
                <div class="placeholder-glow flex-grow-1">
                  <span class="placeholder col-6 bg-secondary"></span>
                </div>
              </div>
            </div>
            <div class="card-body p-0">
              <div class="p-4 bg-light border-bottom">
                <div class="placeholder-glow">
                  <span class="placeholder col-8 bg-secondary"></span>
                </div>
              </div>
              <div class="px-4 py-3">
                  <div class="timeslot-skeleton mb-3 border rounded p-4  ">
                    <div class="d-flex justify-content-between align-items-start">
                      <div class="placeholder-glow flex-grow-1">
                        <span class="placeholder col-4 bg-secondary mb-2 d-block"></span>
                        <span class="placeholder col-6 bg-secondary mb-2 d-block"></span>
                        <span class="placeholder col-3 bg-secondary d-block"></span>
                      </div>
                      <div class="text-end">
                        <div class="placeholder-glow">
                          <span class="placeholder col-12 bg-secondary mb-2 d-block" style="width: 80px;"></span>
                          <span class="placeholder col-12 bg-primary rounded-pill d-block" style="width: 120px; height: 38px;"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="timeslot-skeleton mb-3 border rounded p-4 opacity-75 ">
                    <div class="d-flex justify-content-between align-items-start">
                      <div class="placeholder-glow flex-grow-1">
                        <span class="placeholder col-4 bg-secondary mb-2 d-block"></span>
                        <span class="placeholder col-6 bg-secondary mb-2 d-block"></span>
                        <span class="placeholder col-3 bg-secondary d-block"></span>
                      </div>
                      <div class="text-end">
                        <div class="placeholder-glow">
                          <span class="placeholder col-12 bg-secondary mb-2 d-block" style="width: 80px;"></span>
                          <span class="placeholder col-12 bg-primary rounded-pill d-block" style="width: 120px; height: 38px;"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="timeslot-skeleton mb-3 border rounded p-4  opacity-50">
                    <div class="d-flex justify-content-between align-items-start">
                      <div class="placeholder-glow flex-grow-1">
                        <span class="placeholder col-4 bg-secondary mb-2 d-block"></span>
                        <span class="placeholder col-6 bg-secondary mb-2 d-block"></span>
                        <span class="placeholder col-3 bg-secondary d-block"></span>
                      </div>
                      <div class="text-end">
                        <div class="placeholder-glow">
                          <span class="placeholder col-12 bg-secondary mb-2 d-block" style="width: 80px;"></span>
                          <span class="placeholder col-12 bg-primary rounded-pill d-block" style="width: 120px; height: 38px;"></span>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <div class="text-center text-muted small mt-2">
            <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
            <span id="skeleton-loading-message">Finding available times...</span>
          </div>
        </div>
        
        <div data-availability-target="timeslotsContainer" class="position-relative">
        
          <div class="unit-info-container blank-state-container"
               data-availability-target="blankStateContainer"
               data-controller="motion"
               data-motion-reveal-value="fade-up"
               data-motion-delay-value="150">
            <div class="card rounded bg-primary text-white mb-3 mb-md-3">
              <div class="card-body d-flex justify-content-center align-items-center text-center">
                <div>
                  <h1 class="h4 balance-text mb-0">
                    South Bay 22′ Pontoon Black and Gray (FISH)
                  </h1>
                </div>
              </div>
            </div>            
            <div class="row">
              <div class="col-md-5 mb-3 mb-md-0">
                  <img width="600" height="450" class="img-fluid rounded" style="aspect-ratio: 4/3; object-fit: cover;" src="https://res.cloudinary.com/recsystems/image/upload/c_fill,g_auto,h_450,q_auto,w_600/v1/content_library/evsqse1dd1hvy3ze4rss.jpg" />
              </div>
              <div class="col-md-7">
                <div class="card rounded border-secondary bg-secondary text-white mb-3 mb-md-3">
                  <div class="card-body d-flex justify-content-center align-items-center">
                    <p class="lead text-center mb-0">
                      Fits 10 People
                    </p>
                  </div>
                </div>
                <div class="card rounded border-light bg-light mb-3 mb-md-3">
                  <div class="card-body d-flex justify-content-center align-items-center">
                    <p class="lead text-center mb-0">
                      1 Units For Rent
                    </p>
                  </div>
                </div>                
              </div>
            </div>      
            <div class="alert alert-primary mb-3 small">
              <div class="d-flex gap-2">
                <i class="bi bi-info-circle"></i>
                <div>
                  <strong>Select a date</strong> from the calendar to view available timeslots for this unit.
                </div>
              </div>
            </div>
            
            <div class="card border-0 shadow-sm quick-date-buttons"
                 data-controller="motion"
                 data-motion-reveal-value="fade-up"
                 data-motion-delay-value="200">
              <div class="card-body p-3">
                <label class="form-label small text-muted text-uppercase mb-2 d-block text-center">
                  <i class="bi bi-lightning-charge me-1"></i>Quick Select
                </label>
                <div class="d-flex flex-wrap gap-2 justify-content-center">
                  <button type="button" 
                          class="btn btn-outline-primary btn-sm quick-date-btn" 
                          data-date="2026-04-15"
                          data-action="click->availability#selectQuickDate"
                          data-controller="motion"
                          data-motion-hover-value="scale"
                          data-motion-press-value="shrink">
                    <i class="bi bi-calendar-day me-1"></i>Today
                  </button>
                  <button type="button" 
                          class="btn btn-outline-primary btn-sm quick-date-btn" 
                          data-date="2026-04-16"
                          data-action="click->availability#selectQuickDate"
                          data-controller="motion"
                          data-motion-hover-value="scale"
                          data-motion-press-value="shrink">
                    <i class="bi bi-calendar-check me-1"></i>Tomorrow
                  </button>
                  <button type="button" 
                          class="btn btn-outline-primary btn-sm quick-date-btn" 
                          data-date="2026-04-18"
                          data-action="click->availability#selectQuickDate"
                          data-controller="motion"
                          data-motion-hover-value="scale"
                          data-motion-press-value="shrink">
                    <i class="bi bi-calendar-week me-1"></i>Sat 18
                  </button>
                  <button type="button" 
                          class="btn btn-outline-primary btn-sm quick-date-btn" 
                          data-date="2026-04-25"
                          data-action="click->availability#selectQuickDate"
                          data-controller="motion"
                          data-motion-hover-value="scale"
                          data-motion-press-value="shrink">
                    <i class="bi bi-calendar2-week me-1"></i>Sat 25
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

        </div>
      </div>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" id="cancel-button-1117">Cancel</button>
      </div>
    </div>
  </div>
</div>

<script>
  // BookingSite: Modal initialization script
  // Only auto-show when injected via Turbo Stream (user clicked "Check Availability")
  // Do NOT auto-show on page load/restore events
  (function() {
    const unitId = '1117';
    const modalId = `bookingModal_${unitId}`;
    
    // Check if this is a fresh Turbo Stream injection vs a cached page restore
    // Fresh injection: script runs immediately after Turbo Stream append
    // Cached restore: script runs during turbo:load/DOMContentLoaded
    const isFreshInjection = !document.querySelector(`#${modalId}.modal-was-shown`);
    
    if (isFreshInjection) {
      initializeAndShowModal(unitId);
    }
    
    function initializeAndShowModal(unitId) {
      const modal = document.getElementById(modalId);
      
      if (!modal) {
        console.log(`Modal ${modalId} not found in DOM`);
        return;
      }
      
      if (typeof bootstrap === 'undefined' || typeof bootstrap.Modal === 'undefined') {
        console.error('Bootstrap Modal not available');
        setTimeout(() => initializeAndShowModal(unitId), 100);
        return;
      }
      
      // Skip if already initialized and shown - prevents double-show
      if (modal.classList.contains('modal-initialized')) {
        return;
      }
      
      try {
        const bsModal = new bootstrap.Modal(modal);
        modal.classList.add('modal-initialized');
        modal.classList.add('modal-was-shown'); // Mark so cached restores don't auto-show
        
        const closeBtn = modal.querySelector('.btn-close');
        if (closeBtn) {
          closeBtn.addEventListener('click', function(e) {
            bsModal.hide();
          });
        }
        
        const cancelBtn = document.getElementById(`cancel-button-${unitId}`);
        if (cancelBtn) {
          cancelBtn.addEventListener('click', function(e) {
            bsModal.hide();
          });
        }
        
        if (!window.originalUrl) {
          window.originalUrl = window.location.href;
        }
        
        const modalState = {
          isInModal: true,
          modalId: modalId,
          originalUrl: window.originalUrl,
          timestamp: Date.now()
        };
        
        window.history.pushState(modalState, '', window.originalUrl);
        
        // When modal is hidden, remove it from DOM to prevent caching issues
        modal.addEventListener('hidden.bs.modal', function() {
          if (window.originalUrl) {
            history.replaceState(null, '', window.originalUrl);
            window.originalUrl = null;
          }
          // Remove modal from DOM after it's hidden to prevent it from being cached
          // and unexpectedly showing on page restore
          setTimeout(() => {
            modal.remove();
          }, 300); // Wait for animation to complete
        });
        
        const needsLazyLoad = document.getElementById('calendar-loading');
        if (needsLazyLoad) {
          modal.addEventListener('shown.bs.modal', function() {
            loadCalendarData(unitId);
          });
        }
        
        modal.addEventListener('shown.bs.modal', function() {
          initializeCalendar(unitId);
        });
        
        const popstateHandler = function(e) {
          if ((e.state === null) || 
              (e.state && !e.state.isInModal) || 
              (e.state && e.state.isInModal && e.state.modalId !== modalId)) {
            
            if (modal.classList.contains('show')) {
              const bsModal = bootstrap.Modal.getInstance(modal);
              if (bsModal) bsModal.hide();
            }
          }
        };
        
        window.removeEventListener('popstate', popstateHandler);
        window.addEventListener('popstate', popstateHandler);
        
        bsModal.show();
      } catch (e) {
        console.error(`Error initializing modal ${modalId}:`, e);
        setTimeout(function() {
          try {
            if (typeof bootstrap !== 'undefined') {
              const fallbackModal = new bootstrap.Modal(modal);
              modal.classList.add('modal-was-shown');
              fallbackModal.show();
            }
          } catch (err) {
            console.error(`Fallback modal initialization failed: ${err.message}`);
          }
        }, 200);
      }
    }
    
    if (typeof bootstrap === 'undefined') {
      const checkBootstrap = setInterval(function() {
        if (typeof bootstrap !== 'undefined') {
          clearInterval(checkBootstrap);
          if (isFreshInjection) {
            initializeAndShowModal(unitId);
          }
        }
      }, 100);
    }
  })();
  
  function loadCalendarData(unitId) {
    const params = new URLSearchParams(window.location.search);
    params.set('unit_id', unitId);
    
    
    
      params.set('quantity', '1');
    
    
    // BookingSite: Use engine's calendar endpoint
    fetch(`/bookings/calendar_data?${params.toString()}`, {
      headers: {
        'Accept': 'text/html',
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
    .then(response => response.text())
    .then(html => {
      const lazyCalendarContainer = document.getElementById('lazy-calendar-container');
      if (lazyCalendarContainer) {
        lazyCalendarContainer.innerHTML = html;
        document.getElementById('calendar-loading').style.display = 'none';
      }
    })
    .catch(error => {
      console.error('Error loading calendar data:', error);
      const loadingElement = document.getElementById('calendar-loading');
      if (loadingElement) {
        loadingElement.innerHTML = '<div class="alert alert-danger">Error loading calendar. Please try again.</div>';
      }
    });
  }
  
  function initializeCalendar(unitId) {
    const calendarContainer = document.getElementById('booking-calendar-container');
    if (!calendarContainer) return;
    
    calendarContainer.innerHTML = `
      <div data-controller="calendar" 
           data-calendar-unit-id-value="${unitId}"
           data-calendar-quantity-value="1"
           data-calendar-in-dashboard-value="false"
           data-calendar-range-mode-value="false"
           class="calendar-wrapper">
      </div>
    `;
    
    setTimeout(() => {
      const event = new CustomEvent('calendar:loaded', {
        bubbles: true,
        detail: { unitId: unitId }
      });
      calendarContainer.dispatchEvent(event);
      
      const loadingIndicator = document.querySelector('[data-booking-accordion-target="calendarLoading"]');
      if (loadingIndicator) {
        loadingIndicator.classList.add('d-none');
      }
    }, 500);
  }
  
  document.addEventListener('turbo:before-stream-render', function(event) {
    if (event.target.action === 'remove') {
      const modalId = 'bookingModal_1117';
      const modal = document.getElementById(modalId);
      if (modal && modal.classList.contains('show')) {
        const bsModal = bootstrap.Modal.getInstance(modal);
        if (bsModal) bsModal.hide();
      }
    }
  });
</script>
</template></turbo-stream>