Tailwind CSS Modals Collection

<!-- Trigger Button -->
<button id="openImageModalBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  View Image
</button>

<!-- Image Modal -->
<div id="imageModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden flex items-center justify-center"> <!-- Added flex centering -->
  <div class="relative mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white"> <!-- Removed top-1/4 -->
    <!-- Modal Header -->
    <div class="flex justify-between items-center pb-3">
      <p class="text-2xl font-bold">Image Viewer</p>
      <button id="closeImageModalBtn" class="text-gray-400 hover:text-gray-600 text-3xl font-light focus:outline-none">&times;</button>
    </div>

    <!-- Modal Body -->
    <div class="my-5">
      <img src="https://picsum.photos/400/300" alt="Modal Image" class="w-full h-auto rounded shadow">
    </div>

    <!-- Optional Footer for controls/caption -->
    <div class="flex justify-end pt-2">
        <button id="closeImageModalBtnFooter" class="px-4 bg-gray-200 p-3 rounded-lg text-gray-600 hover:bg-gray-300">Close</button>
    </div>

  </div>
</div>

<script>
  // Get modal element
  const imageModal = document.getElementById('imageModal');
  // Get open modal button
  const openImageModalBtn = document.getElementById('openImageModalBtn');
  // Get close modal button
  const closeImageModalBtn = document.getElementById('closeImageModalBtn');
  // Get close modal button in footer (optional)
  const closeImageModalBtnFooter = document.getElementById('closeImageModalBtnFooter');

  // Function to open modal
  const openImageModal = () => {
    imageModal.classList.remove('hidden');
    document.body.style.overflow = 'hidden'; // Prevent background scrolling
  }

  // Function to close modal
  const closeImageModal = () => {
    imageModal.classList.add('hidden');
    document.body.style.overflow = ''; // Restore background scrolling
  }

  // Event listeners
  openImageModalBtn.addEventListener('click', openImageModal);
  closeImageModalBtn.addEventListener('click', closeImageModal);
  if (closeImageModalBtnFooter) { // Check if footer button exists
      closeImageModalBtnFooter.addEventListener('click', closeImageModal);
  }


  // Close modal if background overlay is clicked
  imageModal.addEventListener('click', (event) => {
    // Check if the click is on the overlay itself (the flex container)
    if (event.target === imageModal) {
      closeImageModal();
    }
  });

  // Close modal with Escape key
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !imageModal.classList.contains('hidden')) {
      closeImageModal();
    }
  });
</script>

<!-- Trigger Button -->
<button id="openGalleryModalBtn" class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">
  Open Gallery
</button>

<!-- Gallery Modal -->
<div id="galleryModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden flex items-center justify-center"> <!-- Added flex centering -->
  <div class="relative mx-auto p-5 border w-11/12 md:w-3/4 lg:w-2/3 shadow-lg rounded-md bg-white"> <!-- Removed top-10 -->

    <!-- Modal Header -->
    <div class="flex justify-between items-center pb-3 border-b border-gray-200">
      <p class="text-2xl font-bold text-gray-700">Image Gallery</p>
      <button id="closeGalleryModalBtn" class="text-gray-400 hover:text-gray-600 text-3xl font-light focus:outline-none">&times;</button>
    </div>

    <!-- Modal Body -->
    <div class="my-5">
      <p class="text-gray-600 text-sm mb-4">
        This modal displays a simple grid of images. Implement additional JavaScript if you need features like clicking thumbnails to show a larger image.
      </p>
      <!-- Image Grid -->
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
        <!-- Replace with your actual image sources and alt text -->
        <div>
          <img src="https://picsum.photos/200/150?random=11" alt="Gallery Image 1" class="w-full h-auto rounded shadow transition-transform duration-200 hover:scale-105 cursor-pointer">
        </div>
        <div>
          <img src="https://picsum.photos/200/150?random=12" alt="Gallery Image 2" class="w-full h-auto rounded shadow transition-transform duration-200 hover:scale-105 cursor-pointer">
        </div>
        <div>
          <img src="https://picsum.photos/200/150?random=13" alt="Gallery Image 3" class="w-full h-auto rounded shadow transition-transform duration-200 hover:scale-105 cursor-pointer">
        </div>
        <div>
          <img src="https://picsum.photos/200/150?random=14" alt="Gallery Image 4" class="w-full h-auto rounded shadow transition-transform duration-200 hover:scale-105 cursor-pointer">
        </div>
         <div>
          <img src="https://picsum.photos/200/150?random=15" alt="Gallery Image 5" class="w-full h-auto rounded shadow transition-transform duration-200 hover:scale-105 cursor-pointer">
        </div>
         <div>
          <img src="https://picsum.photos/200/150?random=16" alt="Gallery Image 6" class="w-full h-auto rounded shadow transition-transform duration-200 hover:scale-105 cursor-pointer">
        </div>
         <div>
          <img src="https://picsum.photos/200/150?random=17" alt="Gallery Image 7" class="w-full h-auto rounded shadow transition-transform duration-200 hover:scale-105 cursor-pointer">
        </div>
         <div>
          <img src="https://picsum.photos/200/150?random=18" alt="Gallery Image 8" class="w-full h-auto rounded shadow transition-transform duration-200 hover:scale-105 cursor-pointer">
        </div>
      </div>
    </div>

     <!-- Modal Footer (Optional) -->
     <div class="flex justify-end pt-3 border-t border-gray-200">
        <button id="closeGalleryModalBtnFooter" class="px-4 bg-gray-200 p-3 rounded-lg text-gray-600 hover:bg-gray-300">Close</button>
     </div>

  </div>
</div>

<script>
  const galleryModal = document.getElementById('galleryModal');
  const openGalleryModalBtn = document.getElementById('openGalleryModalBtn');
  const closeGalleryModalBtn = document.getElementById('closeGalleryModalBtn');
  const closeGalleryModalBtnFooter = document.getElementById('closeGalleryModalBtnFooter');

  const openGalleryModal = () => {
    galleryModal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
  }

  const closeGalleryModal = () => {
    galleryModal.classList.add('hidden');
    document.body.style.overflow = '';
  }

  openGalleryModalBtn.addEventListener('click', openGalleryModal);
  closeGalleryModalBtn.addEventListener('click', closeGalleryModal);
  if (closeGalleryModalBtnFooter) {
    closeGalleryModalBtnFooter.addEventListener('click', closeGalleryModal);
  }

  galleryModal.addEventListener('click', (event) => {
    // Check if the click is on the overlay itself (the flex container)
    if (event.target === galleryModal) {
      closeGalleryModal();
    }
  });

  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !galleryModal.classList.contains('hidden')) {
      closeGalleryModal();
    }
  });

  // Note: Add JS here to handle clicking images if needed (e.g., open a larger view)
</script>

<!-- Trigger Button -->
<button id="openSearchModalBtn" class="p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
  <!-- Search Icon -->
  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
  </svg>
  <span class="sr-only">Open Search</span>
</button>

<!-- Search Modal -->
<div id="searchModal" class="fixed inset-0 bg-gray-600 bg-opacity-75 backdrop-blur-sm overflow-y-auto h-full w-full z-50 hidden flex items-center justify-center"> <!-- Added flex centering -->
  <div class="relative mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white"> <!-- Removed top-1/4 -->

     <!-- Close Button (Top Right) -->
     <button id="closeSearchModalBtn" class="absolute top-0 right-0 mt-2 mr-3 text-gray-400 hover:text-gray-600 text-3xl font-light focus:outline-none z-10">&times;</button>

    <!-- Search Form -->
    <form action="/search" method="GET" class="mt-3"> <!-- Adjust action URL -->
      <label for="modalSearchInput" class="block text-sm font-medium text-gray-700 mb-2">Search the site:</label>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
          </svg>
        </div>
        <input
          type="search"
          name="query" <!-- Use a relevant name attribute -->
          id="modalSearchInput"
          class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
          placeholder="Enter search term..."
          required
          autofocus <!-- Automatically focus the input when modal opens -->
        >
      </div>
      <div class="mt-4 text-right">
        <button type="submit" class="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          Search
        </button>
         <button type="button" id="closeSearchModalBtnFooter" class="ml-2 inline-flex justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-md shadow-sm hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            Cancel
        </button>
      </div>
    </form>

  </div>
</div>

<script>
  const searchModal = document.getElementById('searchModal');
  const openSearchModalBtn = document.getElementById('openSearchModalBtn');
  const closeSearchModalBtn = document.getElementById('closeSearchModalBtn');
  const closeSearchModalBtnFooter = document.getElementById('closeSearchModalBtnFooter'); // Footer cancel button
  const searchInput = document.getElementById('modalSearchInput'); // Search input field

  const openSearchModal = () => {
    searchModal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    // Set focus to the search input shortly after the modal is displayed
    setTimeout(() => searchInput.focus(), 50);
  }

  const closeSearchModal = () => {
    searchModal.classList.add('hidden');
    document.body.style.overflow = '';
    // Optional: Clear search input on close
    // searchInput.value = '';
  }

  openSearchModalBtn.addEventListener('click', openSearchModal);
  closeSearchModalBtn.addEventListener('click', closeSearchModal);
  if(closeSearchModalBtnFooter) {
    closeSearchModalBtnFooter.addEventListener('click', closeSearchModal);
  }


  searchModal.addEventListener('click', (event) => {
    // Check if the click is on the overlay itself (the flex container)
    if (event.target === searchModal) {
      closeSearchModal();
    }
  });

  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !searchModal.classList.contains('hidden')) {
      closeSearchModal();
    }
  });
</script>

<!-- Trigger Button -->
<button id="openFilterModalBtn" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
    <!-- Filter Icon -->
    <svg class="-ml-1 mr-2 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L13 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 019 17v-5.586L4.293 6.707A1 1 0 014 6V3z" clip-rule="evenodd" />
    </svg>
    Filters
</button>

<!-- Filter Modal -->
<div id="filterModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden flex items-center justify-center"> <!-- Added flex centering -->
  <div class="relative mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white"> <!-- Removed top-10 -->

    <!-- Modal Header -->
    <div class="flex justify-between items-center pb-3 border-b">
      <p class="text-xl font-semibold text-gray-800">Filter Options</p>
      <button id="closeFilterModalBtn" class="text-gray-400 hover:text-gray-600 text-3xl font-light focus:outline-none">&times;</button>
    </div>

    <!-- Modal Body - Filter Form -->
    <div class="my-5">
      <form id="filterForm" action="/products" method="GET"> <!-- Adjust action/method as needed -->

        <!-- Filter Section: Category -->
        <div class="mb-6">
          <label for="filterCategory" class="block text-sm font-medium text-gray-700 mb-2">Category</label>
          <select id="filterCategory" name="category" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
            <option value="">All Categories</option>
            <option value="electronics">Electronics</option>
            <option value="clothing">Clothing</option>
            <option value="books">Books</option>
            <!-- Add more options -->
          </select>
        </div>

        <!-- Filter Section: Price Range (Example using Radios) -->
        <div class="mb-6">
          <span class="block text-sm font-medium text-gray-700 mb-2">Price Range</span>
          <div class="space-y-2">
            <div class="flex items-center">
              <input id="price_any" name="price_range" type="radio" value="" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" checked>
              <label for="price_any" class="ml-3 block text-sm text-gray-700">Any Price</label>
            </div>
            <div class="flex items-center">
              <input id="price_low" name="price_range" type="radio" value="0-50" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
              <label for="price_low" class="ml-3 block text-sm text-gray-700">$0 - $50</label>
            </div>
            <div class="flex items-center">
              <input id="price_mid" name="price_range" type="radio" value="51-200" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
              <label for="price_mid" class="ml-3 block text-sm text-gray-700">$51 - $200</label>
            </div>
             <div class="flex items-center">
              <input id="price_high" name="price_range" type="radio" value="201+" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
              <label for="price_high" class="ml-3 block text-sm text-gray-700">$201+</label>
            </div>
          </div>
        </div>

        <!-- Filter Section: Features (Example using Checkboxes) -->
        <div class="mb-6">
            <span class="block text-sm font-medium text-gray-700 mb-2">Features</span>
             <div class="space-y-2">
                <div class="relative flex items-start">
                    <div class="flex items-center h-5">
                    <input id="feature_instock" name="features[]" type="checkbox" value="in_stock" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
                    </div>
                    <div class="ml-3 text-sm">
                    <label for="feature_instock" class="font-medium text-gray-700">In Stock</label>
                    </div>
                </div>
                <div class="relative flex items-start">
                    <div class="flex items-center h-5">
                    <input id="feature_sale" name="features[]" type="checkbox" value="on_sale" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
                    </div>
                    <div class="ml-3 text-sm">
                    <label for="feature_sale" class="font-medium text-gray-700">On Sale</label>
                    </div>
                </div>
             </div>
        </div>

        <!-- Modal Footer - Actions -->
        <div class="flex justify-end pt-4 border-t">
          <button type="button" id="resetFilterBtn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 mr-2 focus:outline-none focus:ring-2 focus:ring-gray-400">
            Reset
          </button>
          <button type="submit" id="applyFilterBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
            Apply Filters
          </button>
        </div>

      </form>
    </div>

  </div>
</div>

<script>
  const filterModal = document.getElementById('filterModal');
  const openFilterModalBtn = document.getElementById('openFilterModalBtn');
  const closeFilterModalBtn = document.getElementById('closeFilterModalBtn');
  const filterForm = document.getElementById('filterForm'); // Form element
  const resetFilterBtn = document.getElementById('resetFilterBtn'); // Reset button
  const applyFilterBtn = document.getElementById('applyFilterBtn'); // Apply button

  const openFilterModal = () => {
    filterModal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
  }

  const closeFilterModal = () => {
    filterModal.classList.add('hidden');
    document.body.style.overflow = '';
  }

  // Event listeners for modal open/close
  openFilterModalBtn.addEventListener('click', openFilterModal);
  closeFilterModalBtn.addEventListener('click', closeFilterModal);

  // Optional: Reset form fields when Reset button is clicked
  if (resetFilterBtn && filterForm) {
    resetFilterBtn.addEventListener('click', () => {
      filterForm.reset();
      // You might need to manually reset custom components if any
    });
  }

  // Optional: Close modal when Apply Filters is clicked (after form submission or AJAX call)
  // If submitting traditionally, the page reload will close it.
  // If using AJAX:
  /*
  if (applyFilterBtn && filterForm) {
      applyFilterBtn.addEventListener('click', (event) => {
          event.preventDefault(); // Prevent default form submission if using AJAX
          // --- Add your AJAX logic here ---
          // On success or completion:
          closeFilterModal();
      });
  }
  */

  // Close modal if background overlay is clicked
  filterModal.addEventListener('click', (event) => {
    // Check if the click is on the overlay itself (the flex container)
    if (event.target === filterModal) {
      closeFilterModal();
    }
  });

  // Close modal with Escape key
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !filterModal.classList.contains('hidden')) {
      closeFilterModal();
    }
  });

  // Make sure your form inputs have correct 'name' attributes for submission.
  // If you're using this with a framework (React, Vue, Alpine),
  // you'll likely handle state and submission differently.
</script>
<!-- For Tailwind Forms plugin styling -->
<!-- If using @tailwindcss/forms plugin, ensure it's installed and configured: -->
<!-- 1. npm install -D @tailwindcss/forms -->
<!-- 2. Add to tailwind.config.js: plugins: [require('@tailwindcss/forms')], -->

<!-- Trigger Button (Example: Gear Icon) -->
<button id="openSettingsModalBtn" class="p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
  </svg>
  <span class="sr-only">Open Settings</span>
</button>

<!-- Settings Modal -->
<div id="settingsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden flex items-center justify-center"> <!-- Added flex centering -->
  <div class="relative mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white"> <!-- Removed top-1/4 -->

    <!-- Modal Header -->
    <div class="flex justify-between items-center pb-3 border-b">
      <p class="text-xl font-semibold text-gray-800">Preferences</p>
      <button id="closeSettingsModalBtn" class="text-gray-400 hover:text-gray-600 text-3xl font-light focus:outline-none">&times;</button>
    </div>

    <!-- Modal Body - Settings Form -->
    <div class="my-5">
      <form id="settingsForm"> <!-- Add action/method if submitting traditionally -->
        <div class="space-y-6">

          <!-- Setting 1: Toggle Switch -->
          <div class="flex items-center justify-between">
            <span class="flex-grow flex flex-col">
              <span class="text-sm font-medium text-gray-900" id="setting1-label">Email Notifications</span>
              <span class="text-sm text-gray-500" id="setting1-description">Receive updates via email.</span>
            </span>
            <!-- Tailwind UI Toggle Switch -->
            <button
                type="button"
                id="toggleNotifications"
                data-state="off" <!-- Use data-state for JS control -->
                class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                role="switch" aria-checked="false" aria-labelledby="setting1-label" aria-describedby="setting1-description">
              <span class="sr-only">Enable email notifications</span>
              <span
                aria-hidden="true"
                class="translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
            </button>
            <input type="hidden" name="notifications_enabled" id="notificationsEnabledInput" value="0"> <!-- Hidden input to store value -->
          </div>

          <!-- Setting 2: Another Toggle Switch -->
          <div class="flex items-center justify-between">
             <span class="flex-grow flex flex-col">
              <span class="text-sm font-medium text-gray-900" id="setting2-label">Auto-Save Drafts</span>
            </span>
            <button
                type="button"
                id="toggleAutoSave"
                data-state="on" <!-- Example: Default on -->
                class="bg-blue-600 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                role="switch" aria-checked="true" aria-labelledby="setting2-label">
              <span class="sr-only">Enable auto-save</span>
              <span
                aria-hidden="true"
                class="translate-x-5 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"></span>
            </button>
             <input type="hidden" name="autosave_enabled" id="autosaveEnabledInput" value="1">
          </div>

          <!-- Setting 3: Select Dropdown -->
          <div>
            <label for="settingsTheme" class="block text-sm font-medium text-gray-700">Interface Theme</label>
            <select id="settingsTheme" name="theme" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
              <option value="system">System Default</option>
              <option value="light">Light Mode</option>
              <option value="dark">Dark Mode</option>
            </select>
          </div>

        </div>

        <!-- Modal Footer - Actions -->
        <div class="flex justify-end pt-6 border-t mt-6">
          <button type="button" id="cancelSettingsBtn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 mr-2 focus:outline-none focus:ring-2 focus:ring-gray-400">
            Cancel
          </button>
          <button type="submit" id="saveSettingsBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
            Save Changes
          </button>
        </div>
      </form>
    </div>

  </div>
</div>

<script>
  const settingsModal = document.getElementById('settingsModal');
  const openSettingsModalBtn = document.getElementById('openSettingsModalBtn');
  const closeSettingsModalBtn = document.getElementById('closeSettingsModalBtn');
  const cancelSettingsBtn = document.getElementById('cancelSettingsBtn'); // Cancel button in footer
  const saveSettingsBtn = document.getElementById('saveSettingsBtn'); // Save button
  const settingsForm = document.getElementById('settingsForm'); // The form itself

  // --- Toggle Switch Logic ---
  const toggleButtons = settingsModal.querySelectorAll('button[role="switch"]');

  toggleButtons.forEach(button => {
    const hiddenInputId = button.id.replace('toggle', '') + 'EnabledInput'; // e.g., 'notificationsEnabledInput'
    const hiddenInput = document.getElementById(hiddenInputId);

    button.addEventListener('click', () => {
      const currentState = button.getAttribute('data-state');
      const newState = currentState === 'on' ? 'off' : 'on';
      const isChecked = newState === 'on';

      // Update button state and appearance
      button.setAttribute('data-state', newState);
      button.setAttribute('aria-checked', isChecked.toString());
      button.classList.toggle('bg-blue-600', isChecked);
      button.classList.toggle('bg-gray-200', !isChecked);
      button.querySelector('span[aria-hidden="true"]').classList.toggle('translate-x-5', isChecked);
      button.querySelector('span[aria-hidden="true"]').classList.toggle('translate-x-0', !isChecked);

      // Update hidden input value
      if (hiddenInput) {
          hiddenInput.value = isChecked ? '1' : '0';
          console.log(`${hiddenInput.name} set to: ${hiddenInput.value}`); // For debugging
      }
    });
  });
  // --- End Toggle Switch Logic ---


  const openSettingsModal = () => {
    settingsModal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    // Add logic here to load current settings into the form fields if needed
  }

  const closeSettingsModal = () => {
    settingsModal.classList.add('hidden');
    document.body.style.overflow = '';
    // Optional: Reset form to original state or last saved state on cancel?
  }

  // Event listeners for modal open/close
  openSettingsModalBtn.addEventListener('click', openSettingsModal);
  closeSettingsModalBtn.addEventListener('click', closeSettingsModal);
  if (cancelSettingsBtn) {
    cancelSettingsBtn.addEventListener('click', closeSettingsModal);
  }

  // Handle form submission (example: just close modal)
  if (settingsForm && saveSettingsBtn) {
    settingsForm.addEventListener('submit', (event) => {
      event.preventDefault(); // Prevent default if using AJAX or just demonstrating
      console.log('Settings form submitted (or Save clicked)');
      // --- Add your save logic here (e.g., AJAX request) ---
      // Get form data: const formData = new FormData(settingsForm);
      // for (let [key, value] of formData.entries()) { console.log(key, value); }

      // On success:
      closeSettingsModal();
    });
  }


  // Close modal if background overlay is clicked
  settingsModal.addEventListener('click', (event) => {
    // Check if the click is on the overlay itself (the flex container)
    if (event.target === settingsModal) {
      closeSettingsModal();
    }
  });

  // Close modal with Escape key
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !settingsModal.classList.contains('hidden')) {
      closeSettingsModal();
    }
  });
</script>
<!-- Requires Tailwind UI plugin or custom toggle styles if not using default HTML checkbox -->

<!-- Trigger Button -->
<button id="openProfileModalBtn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
  Edit Profile
</button>

<!-- Profile Edit Modal -->
<div id="profileModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden flex items-center justify-center"> <!-- Added flex centering -->
  <div class="relative mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white"> <!-- Removed top-10 -->

    <!-- Modal Header -->
    <div class="flex justify-between items-center pb-3 border-b">
      <p class="text-xl font-semibold text-gray-800">Update Your Profile</p>
      <button id="closeProfileModalBtn" class="text-gray-400 hover:text-gray-600 text-3xl font-light focus:outline-none">&times;</button>
    </div>

    <!-- Modal Body - Profile Form -->
    <div class="my-5">
      <form id="profileForm" method="POST" action="/profile/update" enctype="multipart/form-data"> <!-- Adjust action/method/enctype -->
        <input type="hidden" name="_token" value="YOUR_CSRF_TOKEN"> <!-- Example for CSRF token -->
        <div class="space-y-6">

          <!-- Profile Picture Section -->
          <div>
            <label class="block text-sm font-medium text-gray-700"> Profile Photo </label>
            <div class="mt-1 flex items-center space-x-5">
              <span class="inline-block h-16 w-16 rounded-full overflow-hidden bg-gray-100">
                <!-- Current Image Placeholder or Actual Image -->
                <img id="profileImagePreview" class="h-full w-full text-gray-300" src="https://picsum.photos/100/100?random=25" alt="Current Profile Photo">
                <!-- Or use an SVG placeholder -->
                <!--
                <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
                -->
              </span>
              <div>
                 <label for="profile_photo" class="cursor-pointer bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Change
                 </label>
                 <input id="profile_photo" name="profile_photo" type="file" class="sr-only" accept="image/*">
                 <p class="text-xs text-gray-500 mt-1">PNG, JPG, GIF up to 2MB</p>
              </div>
            </div>
          </div>

          <!-- Name Field -->
          <div>
            <label for="profile_name" class="block text-sm font-medium text-gray-700">Full Name</label>
            <input type="text" name="name" id="profile_name" autocomplete="name" required
                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                   value="Current User Name"> <!-- Pre-fill with current data -->
          </div>

          <!-- Email Field -->
          <div>
            <label for="profile_email" class="block text-sm font-medium text-gray-700">Email Address</label>
            <input type="email" name="email" id="profile_email" autocomplete="email" required
                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                   value="current.user@example.com"> <!-- Pre-fill with current data -->
          </div>

          <!-- Bio Field -->
          <div>
            <label for="profile_bio" class="block text-sm font-medium text-gray-700">About You</label>
            <textarea id="profile_bio" name="bio" rows="3"
                      class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                      placeholder="Tell us a little about yourself">Current Bio Text</textarea> <!-- Pre-fill -->
          </div>

        </div>

        <!-- Modal Footer - Actions -->
        <div class="flex justify-end pt-6 border-t mt-6">
          <button type="button" id="cancelProfileBtn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 mr-2 focus:outline-none focus:ring-2 focus:ring-gray-400">
            Cancel
          </button>
          <button type="submit" id="saveProfileBtn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
            Save Changes
          </button>
        </div>
      </form>
    </div>

  </div>
</div>

<script>
  const profileModal = document.getElementById('profileModal');
  const openProfileModalBtn = document.getElementById('openProfileModalBtn');
  const closeProfileModalBtn = document.getElementById('closeProfileModalBtn');
  const cancelProfileBtn = document.getElementById('cancelProfileBtn'); // Footer cancel button
  const saveProfileBtn = document.getElementById('saveProfileBtn'); // Save button
  const profileForm = document.getElementById('profileForm'); // The form
  const profilePhotoInput = document.getElementById('profile_photo'); // File input
  const profileImagePreview = document.getElementById('profileImagePreview'); // Image preview element

  const openProfileModal = () => {
    profileModal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    // Add logic here to fetch and pre-fill form fields with current user data
  }

  const closeProfileModal = () => {
    profileModal.classList.add('hidden');
    document.body.style.overflow = '';
    // Optional: Reset form fields or image preview on cancel?
    // profileForm.reset();
    // profileImagePreview.src = 'default-placeholder.png';
  }

  // Event listeners for modal open/close
  openProfileModalBtn.addEventListener('click', openProfileModal);
  closeProfileModalBtn.addEventListener('click', closeProfileModal);
  if (cancelProfileBtn) {
    cancelProfileBtn.addEventListener('click', closeProfileModal);
  }

  // Handle form submission (example: prevent default and log)
  if (profileForm) {
    profileForm.addEventListener('submit', (event) => {
      event.preventDefault(); // Remove if submitting traditionally
      console.log('Profile form submitted');
      // --- Add your update logic here (e.g., AJAX with FormData) ---
      // const formData = new FormData(profileForm);
      // fetch('/profile/update', { method: 'POST', body: formData }) ...

      // On success:
      closeProfileModal();
    });
  }

  // Optional: Image preview for file input
  if (profilePhotoInput && profileImagePreview) {
      profilePhotoInput.addEventListener('change', function(event) {
          const file = event.target.files[0];
          if (file && file.type.startsWith('image/')) {
              const reader = new FileReader();
              reader.onload = function(e) {
                  profileImagePreview.src = e.target.result;
              }
              reader.readAsDataURL(file);
          } else {
              // Optionally reset preview if file is not an image or is cleared
              // profileImagePreview.src = 'default-placeholder.png';
          }
      });
  }

  // Close modal if background overlay is clicked
  profileModal.addEventListener('click', (event) => {
    // Check if the click is on the overlay itself (the flex container)
    if (event.target === profileModal) {
      closeProfileModal();
    }
  });

  // Close modal with Escape key
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !profileModal.classList.contains('hidden')) {
      closeProfileModal();
    }
  });
</script>
<!-- Ensure you handle CSRF tokens and validation server-side -->
<!-- Uses @tailwindcss/forms plugin styling for inputs/textarea/select -->

<!-- Trigger Element (e.g., an icon button) -->
<button id="openTooltipModalBtn" class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-gray-200 text-gray-600 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
  <span class="sr-only">Show information</span>
  <!-- Info Icon -->
  <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
</button>

<!-- Tooltip-Like Modal -->
<div id="tooltipModal" class="fixed inset-0 bg-gray-600 bg-opacity-25 overflow-y-auto h-full w-full z-50 hidden flex items-center justify-center p-4"> <!-- Added flex centering, slight overlay, padding -->
  <!-- Modal Content -->
  <!-- Removed absolute positioning, using flex centering instead -->
  <div id="tooltipModalContent" class="relative p-4 border w-auto max-w-xs shadow-lg rounded-md bg-white">

    <!-- Optional Close Button -->
    <button id="closeTooltipModalBtn" class="absolute top-0 right-0 mt-1 mr-1 text-gray-300 hover:text-gray-500 text-xl font-light focus:outline-none z-10">&times;</button>

    <!-- Modal Header (Optional) -->
    <h4 class="text-md font-medium text-gray-800 mb-2">Information</h4>

    <!-- Modal Body -->
    <p class="text-sm text-gray-600">
      This provides a brief explanation or help text related to the element that triggered it. Keep it concise.
    </p>

    <!-- Optional Footer/Action -->
    <div class="text-right mt-3">
        <button id="dismissTooltipModalBtn" class="text-xs bg-blue-100 hover:bg-blue-200 text-blue-700 px-2 py-1 rounded">Got it</button>
    </div>

  </div>
</div>

<script>
  const tooltipModal = document.getElementById('tooltipModal');
  const openTooltipModalBtn = document.getElementById('openTooltipModalBtn');
  const closeTooltipModalBtn = document.getElementById('closeTooltipModalBtn');
  const dismissTooltipModalBtn = document.getElementById('dismissTooltipModalBtn');
  const tooltipModalContent = document.getElementById('tooltipModalContent'); // Content div

  const openTooltipModal = () => {
    tooltipModal.classList.remove('hidden');
    // No complex positioning needed now, flex handles centering.
  }

  const closeTooltipModal = () => {
    tooltipModal.classList.add('hidden');
  }

  // Event listeners
  openTooltipModalBtn.addEventListener('click', openTooltipModal);
  closeTooltipModalBtn.addEventListener('click', closeTooltipModal);
  if (dismissTooltipModalBtn) {
    dismissTooltipModalBtn.addEventListener('click', closeTooltipModal);
  }

  // Close modal if clicked on the overlay (outside the content area)
  tooltipModal.addEventListener('click', (event) => {
    // Check if the click target is the overlay itself
    if (event.target === tooltipModal) {
      closeTooltipModal();
    }
  });

  // Close modal with Escape key
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !tooltipModal.classList.contains('hidden')) {
      closeTooltipModal();
    }
  });
</script>

<!-- Trigger Button -->
<button id="openWizardModalBtn" class="bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">
  Start Setup
</button>

<!-- Multi-Step/Wizard Modal -->
<div id="wizardModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden flex items-center justify-center p-4"> <!-- Added flex centering & padding -->
  <div class="relative mx-auto p-5 border w-11/12 md:w-2/3 lg:w-1/2 shadow-lg rounded-md bg-white"> <!-- Removed top-10 -->

    <!-- Modal Header -->
    <div class="flex justify-between items-center pb-3 border-b">
      <p class="text-xl font-semibold text-gray-800">Configuration Wizard - Step <span id="wizardStepIndicator">1</span></p>
      <button id="closeWizardModalBtn" class="text-gray-400 hover:text-gray-600 text-3xl font-light focus:outline-none">&times;</button>
    </div>

    <!-- Modal Body - Steps Container -->
    <div class="my-5">
        <form id="wizardForm"> <!-- Wrap steps in a form if collecting data -->
            <!-- Step 1 -->
            <div id="wizardStep-1" class="wizard-step active-step space-y-4">
                <h4 class="text-lg font-medium text-gray-900">Account Details</h4>
                <p class="text-sm text-gray-600">Please provide your basic account information.</p>
                <div>
                    <label for="wizard_email" class="block text-sm font-medium text-gray-700">Email Address</label>
                    <input type="email" name="email" id="wizard_email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                </div>
                 <div>
                    <label for="wizard_password" class="block text-sm font-medium text-gray-700">Password</label>
                    <input type="password" name="password" id="wizard_password" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                </div>
            </div>

            <!-- Step 2 -->
            <div id="wizardStep-2" class="wizard-step hidden space-y-4">
                 <h4 class="text-lg font-medium text-gray-900">Preferences</h4>
                 <p class="text-sm text-gray-600">Choose your preferred settings.</p>
                 <div>
                    <label for="wizard_theme" class="block text-sm font-medium text-gray-700">Theme</label>
                    <select name="theme" id="wizard_theme" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                        <option>Light</option>
                        <option>Dark</option>
                        <option>System</option>
                    </select>
                 </div>
                 <div class="relative flex items-start">
                    <div class="flex items-center h-5">
                      <input id="wizard_notifications" name="notifications" type="checkbox" value="true" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
                    </div>
                    <div class="ml-3 text-sm">
                      <label for="wizard_notifications" class="font-medium text-gray-700">Enable Notifications</label>
                    </div>
                 </div>
            </div>

            <!-- Step 3 -->
            <div id="wizardStep-3" class="wizard-step hidden space-y-4">
                <h4 class="text-lg font-medium text-gray-900">Confirmation</h4>
                <p class="text-sm text-gray-600">You're all set! Please review your information and click Finish.</p>
                <!-- Optionally display a summary of choices here -->
                <div class="bg-gray-50 p-4 rounded-md border">
                    <p class="text-sm"><strong>Email:</strong> <span id="summary_email">[Email from Step 1]</span></p>
                     <p class="text-sm"><strong>Theme:</strong> <span id="summary_theme">[Theme from Step 2]</span></p>
                </div>
            </div>
         </form>
    </div>

    <!-- Modal Footer - Navigation -->
    <div class="flex justify-between items-center pt-4 border-t mt-6">
      <button id="wizardPrevBtn" type="button" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-400" disabled>
        Previous
      </button>
      <div>
        <button id="wizardNextBtn" type="button" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
          Next
        </button>
        <button id="wizardFinishBtn" type="submit" form="wizardForm" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 hidden"> <!-- Initially hidden -->
          Finish
        </button>
      </div>
    </div>

  </div>
</div>

<style>
/* Basic style to hide/show steps - included here for simplicity */
.wizard-step { display: none; }
.wizard-step.active-step { display: block; }
</style>

<script>
  const wizardModal = document.getElementById('wizardModal');
  const openWizardModalBtn = document.getElementById('openWizardModalBtn');
  const closeWizardModalBtn = document.getElementById('closeWizardModalBtn');
  const wizardPrevBtn = document.getElementById('wizardPrevBtn');
  const wizardNextBtn = document.getElementById('wizardNextBtn');
  const wizardFinishBtn = document.getElementById('wizardFinishBtn');
  const wizardSteps = wizardModal.querySelectorAll('.wizard-step');
  const stepIndicator = document.getElementById('wizardStepIndicator');
  const wizardForm = document.getElementById('wizardForm'); // The form

  let currentStep = 0; // 0-indexed
  const totalSteps = wizardSteps.length;

  const showStep = (stepIndex) => {
    wizardSteps.forEach((step, index) => {
      step.classList.toggle('active-step', index === stepIndex);
      step.classList.toggle('hidden', index !== stepIndex); // Ensure non-active are hidden
    });
    if (stepIndicator) stepIndicator.textContent = stepIndex + 1;

    // Update button states
    wizardPrevBtn.disabled = stepIndex === 0;
    wizardNextBtn.classList.toggle('hidden', stepIndex === totalSteps - 1);
    wizardFinishBtn.classList.toggle('hidden', stepIndex !== totalSteps - 1);

    // Optional: Update summary on last step
    if (stepIndex === totalSteps - 1) {
        updateConfirmationSummary();
    }
  };

  const openWizardModal = () => {
    currentStep = 0; // Reset to first step on open
    showStep(currentStep);
    wizardModal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    // Optional: Reset form fields
    // if (wizardForm) wizardForm.reset();
  }

  const closeWizardModal = () => {
    wizardModal.classList.add('hidden');
    document.body.style.overflow = '';
  }

  // Basic validation example for 'Next' click
  const validateStep = (stepIndex) => {
      const currentStepElement = wizardSteps[stepIndex];
      const inputs = currentStepElement.querySelectorAll('input[required], select[required]');
      let isValid = true;
      inputs.forEach(input => {
          // Remove previous error states
          input.classList.remove('border-red-500');
          if (!input.value.trim()) { // Use trim() to check for empty spaces
              // Basic feedback: add a red border
              input.classList.add('border-red-500');
              isValid = false;
          }
      });
      if (!isValid) {
          // Find the first invalid input and focus it (optional)
          const firstInvalid = currentStepElement.querySelector('.border-red-500');
          if(firstInvalid) firstInvalid.focus();
          // alert('Please fill in all required fields for this step.'); // Consider less intrusive feedback
      }
      return isValid;
  };

   // Optional: Function to update summary on the last step
  const updateConfirmationSummary = () => {
    const emailInput = document.getElementById('wizard_email');
    const themeSelect = document.getElementById('wizard_theme');
    const emailSummary = document.getElementById('summary_email');
    const themeSummary = document.getElementById('summary_theme');

    if (emailInput && emailSummary) emailSummary.textContent = emailInput.value || '[Not provided]';
    if (themeSelect && themeSummary) themeSummary.textContent = themeSelect.options[themeSelect.selectedIndex].text || '[Not selected]';
  };


  // Button Event Listeners
  openWizardModalBtn.addEventListener('click', openWizardModal);
  closeWizardModalBtn.addEventListener('click', closeWizardModal);

  wizardPrevBtn.addEventListener('click', () => {
    if (currentStep > 0) {
      currentStep--;
      showStep(currentStep);
    }
  });

  wizardNextBtn.addEventListener('click', () => {
    // Add validation before proceeding
    if (!validateStep(currentStep)) {
        return; // Stop if validation fails
    }

    if (currentStep < totalSteps - 1) {
      currentStep++;
      showStep(currentStep);
    }
  });

  // Handle Finish button (likely form submission)
  if (wizardForm && wizardFinishBtn) {
      wizardForm.addEventListener('submit', (event) => {
          event.preventDefault(); // Prevent default if using AJAX or just logging
          console.log('Wizard form submitted!');
          // --- Add your final submission logic here ---
          // const formData = new FormData(wizardForm);
          // fetch('/submit-wizard', { method: 'POST', body: formData })...

          // On success:
          alert('Setup Complete!');
          closeWizardModal();
      });
  }


  // Close modal with Escape key or overlay click
  wizardModal.addEventListener('click', (event) => {
    // Check if the click is on the overlay itself (the flex container)
    if (event.target === wizardModal) closeWizardModal();
  });
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !wizardModal.classList.contains('hidden')) closeWizardModal();
  });

  // Initial setup
  showStep(currentStep); // Show the first step initially
</script>
<!-- Requires @tailwindcss/forms for consistent input styling -->

<!-- Trigger Button -->
<button id="openScrollableModalBtn" class="text-sm text-blue-600 hover:underline">
  View Terms of Service
</button>

<!-- Scrollable Content Modal -->
<div id="scrollableModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden flex items-center justify-center p-4"> <!-- Added flex centering & padding -->
  <!-- Modal Dialog: Use flex column and max-height -->
  <div class="relative mx-auto p-0 border w-11/12 md:w-2/3 lg:w-1/2 shadow-lg rounded-md bg-white flex flex-col max-h-[85vh]"> <!-- Adjust max-h-xx as needed, Removed top-10, padding handled internally -->

    <!-- Modal Header (Sticky or Fixed within Modal) -->
    <div class="flex justify-between items-center p-5 border-b flex-shrink-0 bg-white rounded-t-md"> <!-- Added padding & bg -->
      <p class="text-xl font-semibold text-gray-800">Agreement</p>
      <button id="closeScrollableModalBtn" class="text-gray-400 hover:text-gray-600 text-3xl font-light focus:outline-none">&times;</button>
    </div>

    <!-- Modal Body (Scrollable) -->
    <div class="p-5 overflow-y-auto flex-grow"> <!-- Added padding & overflow -->
      <h3 class="text-lg font-medium mb-2">Section 1: Introduction</h3>
      <p class="text-sm text-gray-600 mb-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
       <h3 class="text-lg font-medium mb-2">Section 2: User Responsibilities</h3>
       <ul class="list-disc list-inside text-sm text-gray-600 mb-4 space-y-1">
            <li>Maintain the confidentiality of your account information.</li>
            <li>Use the service in compliance with all applicable laws.</li>
            <li>Do not engage in any activity that disrupts or interferes with the service.</li>
            <li>Report any unauthorized use of your account immediately.</li>
       </ul>
       <h3 class="text-lg font-medium mb-2">Section 3: Content Ownership</h3>
       <p class="text-sm text-gray-600 mb-4">
         Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat.
       </p>
        <h3 class="text-lg font-medium mb-2">Section 4: Disclaimers and Limitation of Liability</h3>
       <p class="text-sm text-gray-600 mb-4">
         THE SERVICE IS PROVIDED "AS IS" AND "AS AVAILABLE" WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED. WE DISCLAIM ALL WARRANTIES, INCLUDING, BUT NOT LIMITED TO, IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT. IN NO EVENT SHALL THE COMPANY BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL OR PUNITIVE DAMAGES.
       </p>
        <!-- Add much more content here to demonstrate scrolling -->
       <p class="text-sm text-gray-600 mb-4">
          Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta.
       </p>
       <p class="text-sm text-gray-600 mb-4">
          Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
       </p>
        <p class="text-sm text-gray-600 mb-4">
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
       </p>
        <p class="text-sm text-gray-600 mb-4">
          Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
       </p>
    </div>

    <!-- Modal Footer (Sticky or Fixed within Modal) -->
    <div class="flex justify-end items-center p-5 border-t flex-shrink-0 bg-gray-50 rounded-b-md"> <!-- Added padding & bg -->
      <button id="declineScrollableBtn" type="button" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 mr-2 focus:outline-none focus:ring-2 focus:ring-gray-400">
        Decline
      </button>
      <button id="acceptScrollableBtn" type="button" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Accept
      </button>
    </div>

  </div>
</div>

<script>
  const scrollableModal = document.getElementById('scrollableModal');
  const openScrollableModalBtn = document.getElementById('openScrollableModalBtn');
  const closeScrollableModalBtn = document.getElementById('closeScrollableModalBtn'); // Header close
  const declineScrollableBtn = document.getElementById('declineScrollableBtn'); // Footer decline
  const acceptScrollableBtn = document.getElementById('acceptScrollableBtn'); // Footer accept

  const openScrollableModal = () => {
    scrollableModal.classList.remove('hidden');
    document.body.style.overflow = 'hidden'; // Prevent background scroll
  }

  const closeScrollableModal = () => {
    scrollableModal.classList.add('hidden');
    document.body.style.overflow = ''; // Restore background scroll
  }

  // Event listeners
  openScrollableModalBtn.addEventListener('click', openScrollableModal);
  closeScrollableModalBtn.addEventListener('click', closeScrollableModal);
  if (declineScrollableBtn) {
    declineScrollableBtn.addEventListener('click', closeScrollableModal);
  }
  if (acceptScrollableBtn) {
    acceptScrollableBtn.addEventListener('click', () => {
      console.log('Terms Accepted'); // Add acceptance logic here
      closeScrollableModal();
    });
  }

  // Close modal if background overlay is clicked
  scrollableModal.addEventListener('click', (event) => {
    // Check if the click is on the overlay itself (the flex container)
    if (event.target === scrollableModal) {
      closeScrollableModal();
    }
  });

  // Close modal with Escape key
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !scrollableModal.classList.contains('hidden')) {
      closeScrollableModal();
    }
  });
</script>
<!-- Key classes: max-h-[xxvh], flex, flex-col on modal dialog; flex-grow, overflow-y-auto on body; flex-shrink-0 on header/footer -->