@extends('frontend.layouts.products-app')

@section('title')
Guided Selection
@endsection

@section('seo')

@endsection

@section('content')


<style>
  .dropdown-toggle {
    margin-top: 10px;
  }
</style>

<div class="container mt-5">
  <a href="{{ url('/products') }}" class="text-danger text-decoration-none">
    <i class="fa-solid fa-arrow-turn-up fa-rotate-270 text-danger"></i>&emsp;<span class="prev text-danger text-decoration-underline text-font">Back to Previous Page</span>
  </a>
</div>

<form id="multi-step-form">
  <div class="container mt-5 mb-5 p-3">
    <div class="step-form active" id="step1">
      <h3 class="text-font fw-bold" id="question"> Bolt Down Kit </h3>
      <img src="{{ asset('img/bar-line.png') }}" class="img-fluid" alt="">
      <div class="form-check mt-3">
        <input class="form-check-input cheks group1" type="checkbox" value="Home Office" id="flexCheckDefault">
        <label class="form-check-label fw-normal" for="flexCheckDefault">
            Home & Office Fire Safe
            <br>
            &nbsp;&nbsp;Models:<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SFW082DTB<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SFW082GTC <br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SFW123DTB<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SFW123GTC<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SFW123BSC<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SFW205DPB<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SFW205GPC<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SFW205UPC<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SFW205BXC<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STW123GDC<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STW205GYC

        </label>
      </div>
      <br>
      <div class="form-check">
        <input class="form-check-input cheks group1" type="checkbox" value="Chest Bolt Down Kit" id="flexCheckChecked">
        <label class="form-check-label fw-normal" for="flexCheckChecked">
            Chests <br>
             &nbsp;&nbsp;Models:<br>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1200<br>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CHW2021<br>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CHW30200

        </label>
      </div>
      <br>
      <div class="form-check">
        <input class="form-check-input cheks group1" type="checkbox" value="skip" id="flexCheckChecked">
        <label class="form-check-label fw-normal" for="flexCheckChecked">
            Skip
        </label>
      </div>
      <br>
    </div>
  </div>


  {{-- <div class="container">
      <div class="mt-5">
        <button type="submit" class="button-s btns">NEXT QUESTION <i class="fa-solid fa-arrow-right"></i></button>
       
      </div>
    </div> --}}
</form>

<br>

<script>
  // Function to create a radio-like behavior for checkboxes within a group
  function createCheckboxGroup(groupClass) {
    var checkboxes = document.querySelectorAll('.' + groupClass);

    checkboxes.forEach(function(checkbox) {
      checkbox.addEventListener('change', function() {
        if (this.checked) {
          // Uncheck other checkboxes in the same group
          checkboxes.forEach(function(otherCheckbox) {
            if (otherCheckbox !== checkbox) {
              otherCheckbox.checked = false;
            }
          });
        }
      });
    });
  }

  // Create checkbox groups by specifying the group class
  createCheckboxGroup('group1');
</script>

<script>
  var currentStep = 1;
  var form = document.getElementById('multi-step-form');
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');

  function showStep(step) {
    var steps = document.getElementsByClassName('step-form');

    for (var i = 0; i < steps.length; i++) {
      steps[i].classList.remove('active');
    }

    document.getElementById('step' + step).classList.add('active');
  }

  function nextStep(step) {
    if (validateStep(step)) {
      currentStep++;
      showStep(currentStep);
    }
  }

  function previousStep(step) {
    currentStep--;
    showStep(currentStep);
  }

  function validateStep(step) {
    // Add your custom validation logic here
    return true;
  }

  checkboxes.forEach(function(checkbox) {
    checkbox.addEventListener('click', function() {
      if (this.checked) {
        // Trigger form submission when a checkbox is checked
        submitForm();
      }
    });
  });

  function submitForm() {
    var selectedValues = [];

    checkboxes.forEach(function(checkbox) {
      if (checkbox.checked) {
        selectedValues.push(checkbox.value);
      }
    });

    // Send an AJAX request to the server
    $.ajax({
      method: "POST",
      url: "{{url('/bolts')}}",
      data: {
        _token: "{{ csrf_token() }}",
        selectedValues: selectedValues,
      }
    }).done(function(msg) {
      // Redirect the user to the new page based on the response
      window.location.href = msg;
    });
  }

  showStep(currentStep);
</script>

<!-- <script>
  function hidePrefixOnSmallScreens() {
    const questionElement = document.getElementById('question');

    function checkScreenWidth() {
      // Get the current screen width
      const screenWidth = window.innerWidth;

      // Define the breakpoint below which you want to hide the prefix
      const breakpoint = 768; // Adjust this value as needed

      // Check if the screen width is below the breakpoint
      if (screenWidth < breakpoint) {
        // Hide the '1.)' prefix
        questionElement.innerText = questionElement.innerText.replace('1.)', '');
      } else {
        // Restore the original text
        questionElement.innerText = '1.) What do you want to protect?';
      }
    }

    // Initial check on page load
    checkScreenWidth();

    // Listen for window resize events and recheck screen width
    window.addEventListener('resize', checkScreenWidth);
  }

  // Call the function to initialize it
  hidePrefixOnSmallScreens();
</script> -->

@endsection

<style>
  .step-form {
    display: none;
  }

  .step-form.active {
    display: block;
  }

  .step-buttons {
    margin-top: 10px;
  }

  .form-check {
    margin-left: 3rem;
  }
  .site-footer{
      margin-top:104px;
  }

  @media only screen and (max-width: 600px) {
    .form-check {
      margin-left: 0;
    }
  }
</style>