@php
  $currentPath = request()->path();
  // Fetch active forms for the current page
  $activeWidgetForms = \App\Models\WidgetForm::where('is_active', true)
      ->where(function($query) use ($currentPath) {
          $query->where('page_location', '*')
                ->orWhere('page_location', $currentPath)
                ->orWhere('page_location', '/' . $currentPath);
      })
      ->orderBy('id', 'asc')
      ->get();
@endphp

@foreach($activeWidgetForms as $index => $form)
<!-- Sticky Enquire Button for form {{ $form->id }} -->
<button class="sticky-enquire-btn" id="sticky-enquire-btn-{{ $form->id }}" onclick="openStickyPanel({{ $form->id }})" style="top: calc(40% + ({{ $index }} * 160px) + ({{ $form->position_offset ?? 0 }}px));">
  <i class="fa-solid fa-graduation-cap"></i> {{ $form->title }}
</button>

<!-- Sticky Panel Overlay & Drawer for form {{ $form->id }} -->
<div class="sticky-panel-overlay" id="stickyPanelOverlay-{{ $form->id }}" onclick="closeStickyPanel({{ $form->id }})"></div>
<div class="sticky-panel" id="stickyPanel-{{ $form->id }}">
  <div class="sticky-panel-header">
    <h3 style="color: #FFFFFF !important;">{{ $form->title }}</h3>
    <button class="sticky-panel-close" onclick="closeStickyPanel({{ $form->id }})">&times;</button>
  </div>
  <div class="sticky-panel-body">
    <form class="st-dynamic-enquiry-form" data-form-id="{{ $form->id }}" id="stEnquiryForm-{{ $form->id }}">
      @csrf
      <div class="st-field-group">
        <label for="stFullName-{{ $form->id }}">Name*</label>
        <input type="text" id="stFullName-{{ $form->id }}" placeholder="Enter your full name" required>
      </div>

      <div class="st-field-group">
        <label for="stEmail-{{ $form->id }}">Email Address*</label>
        <input type="email" id="stEmail-{{ $form->id }}" placeholder="Enter your email" required>
      </div>

      @if($form->show_wa)
      <div class="st-field-group">
        <label for="stWA-{{ $form->id }}">WhatsApp Number (WA)*</label>
        <input type="tel" id="stWA-{{ $form->id }}" placeholder="Enter WhatsApp number" required>
      </div>
      @endif

      @if($form->show_city)
      <div class="st-field-group">
        <label for="stCity-{{ $form->id }}">City*</label>
        <input type="text" id="stCity-{{ $form->id }}" placeholder="Enter city" required>
      </div>
      @endif

      @if($form->show_state)
      <div class="st-field-group">
        <label for="stState-{{ $form->id }}">State*</label>
        <input type="text" id="stState-{{ $form->id }}" placeholder="Enter state" required>
      </div>
      @endif

      @if($form->show_level_of_study)
      <div class="st-field-group">
        <label for="stLevelOfStudy-{{ $form->id }}">Level of Study*</label>
        <select id="stLevelOfStudy-{{ $form->id }}" required onchange="toggleStickyGraduationFields(this.value, {{ $form->id }})">
          <option value="">Select Level of Study</option>
          <option value="Under-Graduate">Under-Graduate</option>
          <option value="Post Graduate">Post Graduate</option>
        </select>
      </div>

      <div class="st-field-group" id="stGradSpecializationGroup-{{ $form->id }}" style="display:none;">
        <label for="stGradSpecialization-{{ $form->id }}">Graduation Specialization*</label>
        <input type="text" id="stGradSpecialization-{{ $form->id }}" placeholder="e.g. Computer Science">
      </div>

      <div class="st-field-group" id="stGradMarksGroup-{{ $form->id }}" style="display:none;">
        <label for="stGradMarks-{{ $form->id }}">Graduation Marks*</label>
        <input type="text" id="stGradMarks-{{ $form->id }}" placeholder="e.g. 75%">
      </div>
      @endif

      @if($form->show_preferred_destination)
      <div class="st-field-group">
        <label for="stPreferredDestination-{{ $form->id }}">Preferred Destination*</label>
        <select id="stPreferredDestination-{{ $form->id }}" required>
          <option value="">Select Destination</option>
          <option value="UK">UK</option>
          <option value="Ireland">Ireland</option>
          <option value="Dubai">Dubai</option>
          <option value="Germany">Germany</option>
          <option value="France">France</option>
          <option value="Australia">Australia</option>
          <option value="Spain">Spain</option>
          <option value="New Zealand">New Zealand</option>
          <option value="USA">USA</option>
        </select>
      </div>
      @endif

      @if($form->show_preferred_course)
      <div class="st-field-group">
        <label for="stPreferredCourse-{{ $form->id }}">Preferred Course*</label>
        <select id="stPreferredCourse-{{ $form->id }}" required>
          <option value="">Select Course</option>
          <option value="Business & Management">Business & Management</option>
          <option value="Engineering">Engineering</option>
          <option value="Nursing & Healthcare">Nursing & Healthcare</option>
          <option value="Hospitality & Tourism">Hospitality & Tourism</option>
          <option value="IT">IT</option>
          <option value="AI">AI</option>
          <option value="Luxury & Fashion">Luxury & Fashion</option>
          <option value="Architecture & Design">Architecture & Design</option>
          <option value="Agriculture & Environmental Science">Agriculture & Environmental Science</option>
          <option value="Law">Law</option>
          <option value="Accounting & Finance">Accounting & Finance</option>
          <option value="International Relations & Political Science">International Relations & Political Science</option>
          <option value="Others">Others</option>
        </select>
      </div>
      @endif

      @if($form->show_education_qualification)
      <div class="st-field-group">
        <label for="stEduQual-{{ $form->id }}">Education Qualification*</label>
        <input type="text" id="stEduQual-{{ $form->id }}" placeholder="e.g. 12th, B.Sc" required>
      </div>
      @endif

      @if($form->show_ssc_marks)
      <div class="st-field-group">
        <label for="stSSCMarks-{{ $form->id }}">SSC Marks*</label>
        <input type="text" id="stSSCMarks-{{ $form->id }}" placeholder="SSC Marks (e.g. 85%)" required>
      </div>
      @endif

      @if($form->show_hsc_marks)
      <div class="st-field-group">
        <label for="stHSCMarks-{{ $form->id }}">HSC Marks*</label>
        <input type="text" id="stHSCMarks-{{ $form->id }}" placeholder="HSC Marks (e.g. 80%)" required>
      </div>
      @endif

      @if($form->show_funding_source)
      <div class="st-field-group">
        <label for="stFundingSource-{{ $form->id }}">How Would You Fund Your Education?*</label>
        <select id="stFundingSource-{{ $form->id }}" required>
          <option value="">Select Funding Option</option>
          <option value="Self Funded">Self Funded</option>
          <option value="Parents">Parents</option>
          <option value="Seeking Scholarship">Seeking Scholarship</option>
          <option value="Bank Loan">Bank Loan</option>
          <option value="Others">Others</option>
        </select>
      </div>
      @endif

      @if($form->custom_fields && is_array($form->custom_fields))
        @foreach($form->custom_fields as $cf)
          <div class="st-field-group">
            <label for="stCustom-{{ $form->id }}-{{ $cf['name'] }}">{{ $cf['label'] }}{{ $cf['required'] ? '*' : '' }}</label>
            @if($cf['type'] == 'select')
              <select id="stCustom-{{ $form->id }}-{{ $cf['name'] }}" class="st-custom-field-input" data-field-name="{{ $cf['name'] }}" {{ $cf['required'] ? 'required' : '' }}>
                <option value="">Select Option</option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
              </select>
            @elseif($cf['type'] == 'select_custom')
              <select id="stCustom-{{ $form->id }}-{{ $cf['name'] }}" class="st-custom-field-input" data-field-name="{{ $cf['name'] }}" {{ $cf['required'] ? 'required' : '' }}>
                <option value="">Select Option</option>
                @php
                  $opts = explode(',', $cf['options'] ?? '');
                @endphp
                @foreach($opts as $opt)
                  @php $trimOpt = trim($opt); @endphp
                  @if(!empty($trimOpt))
                    <option value="{{ $trimOpt }}">{{ $trimOpt }}</option>
                  @endif
                @endforeach
              </select>
            @elseif($cf['type'] == 'textarea')
              <textarea id="stCustom-{{ $form->id }}-{{ $cf['name'] }}" class="st-custom-field-input" data-field-name="{{ $cf['name'] }}" placeholder="Enter {{ strtolower($cf['label']) }}" {{ $cf['required'] ? 'required' : '' }} style="width: 100%; padding: 10px; border: 1px solid #CBD5E1; border-radius: 6px; font-size: 13.5px; outline: none; resize: vertical; min-height: 80px;"></textarea>
            @else
              <input type="{{ $cf['type'] }}" id="stCustom-{{ $form->id }}-{{ $cf['name'] }}" class="st-custom-field-input" data-field-name="{{ $cf['name'] }}" placeholder="Enter {{ strtolower($cf['label']) }}" {{ $cf['required'] ? 'required' : '' }}>
            @endif
          </div>
        @endforeach
      @endif

      <div class="st-checkbox-row">
        <input type="checkbox" id="stTerms-{{ $form->id }}" required>
        <label for="stTerms-{{ $form->id }}">I agree to terms &amp; privacy policy</label>
      </div>

      <button type="submit" class="st-btn-submit">Submit Enquiry</button>
    </form>
  </div>
</div>
@endforeach

<style>
  /* Sticky Button Style */
  .sticky-enquire-btn {
    position: fixed;
    right: 0;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right bottom;
    z-index: 9999;
    background: #0D47D8;
    color: #FFFFFF;
    padding: 12px 24px;
    border-radius: 8px 8px 0 0;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: -4px 4px 12px rgba(13, 71, 216, 0.3);
    transition: all 0.3s;
    border: none;
    outline: none;
    margin-right: -1px;
  }
  .sticky-enquire-btn:hover {
    background: #0A39A6;
  }

  /* Sticky Drawer Panel Style */
  .sticky-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .sticky-panel {
    position: fixed;
    top: 0;
    right: -480px;
    width: 420px;
    max-width: 90%;
    height: 100%;
    background: #FFFFFF;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    z-index: 10001;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: inherit;
  }
  .sticky-panel-header {
    background: #0A1233;
    padding: 20px 24px;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .sticky-panel-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF !important;
  }
  .sticky-panel-close {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
  }
  .sticky-panel-close:hover {
    opacity: 1;
  }
  .sticky-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
  }

  /* Form Fields Styling inside Panel */
  .st-field-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
  }
  .st-field-group label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    text-align: left;
  }
  .st-field-group input, .st-field-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 13.5px;
    outline: none;
    background: #F8FAFC;
    box-sizing: border-box;
    font-family: inherit;
  }
  .st-field-group input:focus, .st-field-group select:focus {
    border-color: #0D47D8;
    background: #FFFFFF;
  }
  .st-checkbox-row {
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748B;
    text-align: left;
  }
  .st-checkbox-row input {
    width: auto;
    cursor: pointer;
  }
  .st-btn-submit {
    width: 100%;
    background: #0D47D8;
    color: #FFFFFF;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .st-btn-submit:hover {
    background: #0A39A6;
  }
</style>

<script>
  function openStickyPanel(id) {
    const overlay = document.getElementById('stickyPanelOverlay-' + id);
    const panel = document.getElementById('stickyPanel-' + id);
    if (overlay && panel) {
      overlay.style.display = 'block';
      setTimeout(() => {
        overlay.style.opacity = '1';
        panel.style.right = '0';
      }, 50);
    }
  }

  function closeStickyPanel(id) {
    const overlay = document.getElementById('stickyPanelOverlay-' + id);
    const panel = document.getElementById('stickyPanel-' + id);
    if (panel && overlay) {
      panel.style.right = '-480px';
      overlay.style.opacity = '0';
      setTimeout(() => {
        overlay.style.display = 'none';
      }, 300);
    }
  }

  function toggleStickyGraduationFields(level, id) {
    const specGroup = document.getElementById('stGradSpecializationGroup-' + id);
    const marksGroup = document.getElementById('stGradMarksGroup-' + id);
    const specInput = document.getElementById('stGradSpecialization-' + id);
    const marksInput = document.getElementById('stGradMarks-' + id);

    if (specGroup && marksGroup) {
      if (level === 'Post Graduate') {
        specGroup.style.display = 'block';
        marksGroup.style.display = 'block';
        if (specInput) specInput.required = true;
        if (marksInput) marksInput.required = true;
      } else {
        specGroup.style.display = 'none';
        marksGroup.style.display = 'none';
        if (specInput) { specInput.required = false; specInput.value = ''; }
        if (marksInput) { marksInput.required = false; marksInput.value = ''; }
      }
    }
  }

  // Bind Submit Handlers dynamically for all forms loaded on the page
  document.querySelectorAll('.st-dynamic-enquiry-form').forEach(form => {
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      const formId = this.getAttribute('data-form-id');
      const submitBtn = this.querySelector('.st-btn-submit');
      submitBtn.innerHTML = 'Submitting... <i class="fa-solid fa-spinner fa-spin"></i>';
      submitBtn.disabled = true;

      const tokenInput = this.querySelector('input[name="_token"]');
      
      const stFullName = document.getElementById('stFullName-' + formId);
      const stEmail = document.getElementById('stEmail-' + formId);
      const stWA = document.getElementById('stWA-' + formId);
      const stCity = document.getElementById('stCity-' + formId);
      const stState = document.getElementById('stState-' + formId);
      const stLevelOfStudy = document.getElementById('stLevelOfStudy-' + formId);
      const stPreferredDestination = document.getElementById('stPreferredDestination-' + formId);
      const stPreferredCourse = document.getElementById('stPreferredCourse-' + formId);
      const stEduQual = document.getElementById('stEduQual-' + formId);
      const stSSCMarks = document.getElementById('stSSCMarks-' + formId);
      const stHSCMarks = document.getElementById('stHSCMarks-' + formId);
      const stGradSpecialization = document.getElementById('stGradSpecialization-' + formId);
      const stGradMarks = document.getElementById('stGradMarks-' + formId);
      const stFundingSource = document.getElementById('stFundingSource-' + formId);

      const formData = {
        name: stFullName ? stFullName.value : '',
        email: stEmail ? stEmail.value : '',
        wa: stWA ? stWA.value : '',
        city: stCity ? stCity.value : '',
        state: stState ? stState.value : '',
        level_of_study: stLevelOfStudy ? stLevelOfStudy.value : 'Under-Graduate',
        preferred_destination: stPreferredDestination ? stPreferredDestination.value : 'UK',
        preferred_course: stPreferredCourse ? stPreferredCourse.value : 'Others',
        education_qualification: stEduQual ? stEduQual.value : '12th',
        ssc_marks: stSSCMarks ? stSSCMarks.value : 'N/A',
        hsc_marks: stHSCMarks ? stHSCMarks.value : 'N/A',
        graduation_specialization: stGradSpecialization ? stGradSpecialization.value : '',
        graduation_marks: stGradMarks ? stGradMarks.value : '',
        funding_source: stFundingSource ? stFundingSource.value : 'Self Funded',
        _token: tokenInput ? tokenInput.value : ''
      };

      // Gather all custom field inputs dynamically
      form.querySelectorAll('.st-custom-field-input').forEach(input => {
        const fieldName = input.getAttribute('data-field-name');
        if (fieldName) {
          formData[fieldName] = input.value;
        }
      });

      fetch('/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'X-CSRF-TOKEN': formData._token
        },
        body: JSON.stringify(formData)
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          showCustomToast(data.message, 'success');
          form.reset();
          closeStickyPanel(formId);
        } else {
          showCustomToast('Something went wrong. Please try again.', 'error');
        }
      })
      .catch(err => {
        console.error(err);
        showCustomToast('Failed to submit enquiry. Please try again.', 'error');
      })
      .finally(() => {
        submitBtn.innerHTML = 'Submit Enquiry';
        submitBtn.disabled = false;
      });
    });
  });

  function showCustomToast(message, type = 'success') {
      let container = document.getElementById('custom-toast-container');
      if (!container) {
          container = document.createElement('div');
          container.id = 'custom-toast-container';
          container.style.cssText = `
              position: fixed;
              top: 24px;
              right: 24px;
              z-index: 999999;
              display: flex;
              flex-direction: column;
              gap: 12px;
              pointer-events: none;
              font-family: 'Inter', sans-serif;
          `;
          document.body.appendChild(container);
      }

      const toast = document.createElement('div');
      toast.style.cssText = `
          min-width: 320px;
          max-width: 400px;
          background: #FFFFFF;
          color: #1E293B;
          border-radius: 12px;
          padding: 16px 20px;
          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
          display: flex;
          align-items: center;
          gap: 12px;
          transform: translateX(120%);
          transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
          opacity: 0;
          pointer-events: auto;
          border-left: 4px solid #0D47D8;
      `;

      if (type === 'error') {
          toast.style.borderLeftColor = '#EF4444';
      } else if (type === 'warning') {
          toast.style.borderLeftColor = '#F59E0B';
      } else {
          toast.style.borderLeftColor = '#10B981';
      }

      const iconHtml = type === 'error' 
          ? '<i class="fa-solid fa-circle-xmark" style="color: #EF4444; font-size: 20px;"></i>'
          : type === 'warning'
          ? '<i class="fa-solid fa-triangle-exclamation" style="color: #F59E0B; font-size: 20px;"></i>'
          : '<i class="fa-solid fa-circle-check" style="color: #10B981; font-size: 20px;"></i>';

      toast.innerHTML = `
          <div style="flex-shrink: 0; display: flex; align-items: center;">${iconHtml}</div>
          <div style="flex-grow: 1; font-size: 13.5px; font-weight: 600; line-height: 1.4;">${message}</div>
          <button style="background: none; border: none; color: #94A3B8; cursor: pointer; font-size: 18px; padding: 0 4px; line-height: 1; display: flex; align-items: center;" onclick="this.parentElement.remove()">&times;</button>
      `;

      container.appendChild(toast);

      setTimeout(() => {
          toast.style.transform = 'translateX(0)';
          toast.style.opacity = '1';
      }, 10);

      setTimeout(() => {
          toast.style.transform = 'translateX(120%)';
          toast.style.opacity = '0';
          setTimeout(() => {
              toast.remove();
          }, 400);
      }, 4000);
  }
</script>