@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 onclick="history.back()" style="cursor: default">
    <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 my-5 p-3">
    <div class="step-form active" id="step1">
      <h3 class="text-font fw-bold" id="question">1.) What type of smoke alarm? </h3>
      <img src="{{ asset('img/bar-line.png') }}" class="img-fluid" alt="">
      <div class="form-check mt-3">
        <input class="form-check-input group1" type="checkbox" value="Standalone" id="flexCheckDefault">
        <label class="form-check-label fw-normal" for="flexCheckDefault">
          Standalone
        </label>
      </div>
      <br>
      <div class="form-check">
        <input class="form-check-input group1" type="checkbox" value="Interconnected" id="flexCheckChecked">
        <label class="form-check-label fw-normal" for="flexCheckChecked">
          Interconnected
        </label>
      </div>
      <br>
      <div class="form-check">
        <input class="form-check-input group1" type="checkbox" value="Smart Wifi" id="flexCheckChecked">
        <label class="form-check-label fw-normal" for="flexCheckChecked">
          Smart Wifi
        </label>
      </div>
      <br>
      <div class="form-check">
        <input class="form-check-input 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 d-flex justify-content-between">
      {{-- <button type="button" class="btn btn-prev" onclick="previousStep(-1)">Previous</button> --}}
      {{-- <button type="button" class="btn btn-next" onclick="nextStep(+1)">Next</button> --}}
      {{-- <button type="submit" class="button-s btns" style="display: none;">Submit <i class="fa-solid fa-arrow-right"></i></button> --}}
    </div>
  </div>
  {{-- <div class="container">
          <button type="submit" class="button-s btns">NEXT QUESTION <i class="fa-solid fa-arrow-right"></i></button>
      </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');
    var totalSteps = document.getElementsByClassName('step-form').length;
    var nextButton = document.querySelector('button.btn-next');
    var submitButton = document.querySelector('button.button-s');

    if (step === totalSteps) {
      nextButton.style.display = 'none';
      submitButton.style.display = 'block';
    } else {
      nextButton.style.display = 'block';
      submitButton.style.display = 'none';
    }

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



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

    // Enable all checkboxes in the current step
    var checkboxes = document.querySelectorAll('#step' + step + ' input[type="checkbox"]');
    checkboxes.forEach(function(checkbox) {
      checkbox.disabled = false;
    });

    // Disable checkboxes in all other steps
    var allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
    allCheckboxes.forEach(function(checkbox) {
      if (!checkbox.closest('.step-form').classList.contains('active')) {
        checkbox.disabled = true;
      }
    });
  }

  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('/guidedAlarm1')}}",
      data: {
        _token: "{{ csrf_token() }}",
        selectedValues: selectedValues,
      }
    }).done(function(msg) {
      // Redirect the user to the new page based on the response
      // alert(msg);
      window.location.href = msg;
    });
  }


  // form.addEventListener('submit', function(e) {
  //   e.preventDefault();
  //   // alert('Form submitted!');
  //   // console.log('test');

  //   var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
  //   var selectedValues = [];

  //   checkboxes.forEach(function(checkbox) {
  //     selectedValues.push(checkbox.value);
  //   });
  //   $.ajax({
  //       method: "POST",
  //       url: "{{url('/guidedAlarm1')}}",
  //       data: {
  //           _token: "{{ csrf_token() }}",
  //           selectedValues: selectedValues,
  //           }
  //       })
  //       .done(function( msg ) {
  //           // alert( "Data Saved: " + msg );
  //           // console.log('Selected values:', msg);
  //           window.location.href=msg;
  //       });
  //   });
  // console.log('Selected values:', selectedValues);


  showStep(currentStep);
</script>

<script>
  function hidePrefixOnSmallScreens() {
    const questionElements = [
      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

    // Iterate through each question element
    questionElements.forEach((questionElement) => {
      const text = questionElement.textContent;

      // Check if the screen width is below the breakpoint
      if (screenWidth < breakpoint) {
        // Find the index of the first closing parenthesis
        const closingParenthesisIndex = text.indexOf(')') + 1;
        if (closingParenthesisIndex > 0) {
          // Hide the prefix and update the text
          questionElement.textContent = text.substring(closingParenthesisIndex).trim();
        }
      } else {
        // Restore the original text
        questionElement.textContent = text;
      }
    });
  }

    // 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>

<style>
  .form-check {
    margin-left: 3rem;
  }

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

  .disabled {
    pointer-events: none;
    opacity: 0.6;
  }

  .btn-next {
    --color: #c61b1f;
    /* padding: 0.8em 1.7em; */
    background-color: transparent;
    /* border-radius: .3em; */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: .5s;
    font-weight: 400;
    font-size: 13px;
    border: 1px solid;
    font-family: inherit;
    text-transform: uppercase;
    color: var(--color);
    z-index: 1;
    font-size: 18px;
  }

  .btn-prev {
    --color: #c61b1f;
    /* padding: 0.8em 1.7em; */
    background-color: transparent;
    /* border-radius: .3em; */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: .5s;
    font-weight: 400;
    font-size: 13px;
    border: 1px solid;
    font-family: inherit;
    text-transform: uppercase;
    color: var(--color);
    z-index: 1;
    font-size: 18px;
  }

  .btn-next::before,
  .btn-next::after,
  .btn-prev::before,
  .btn-prev::after {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    background-color: var(--color);
    transition: 1s ease;
  }

  .btn-next::before,
  .btn-prev::before {
    top: -1em;
    left: -1em;
  }

  .btn-next::after,
  .btn-prev::after {
    left: calc(100% + 1em);
    top: calc(100% + 1em);
  }

  .btn-next:hover::before,
  .btn-next:hover::after,
  .btn-prev:hover::before,
  .btn-prev:hover::after {
    height: 410px;
    width: 410px;
  }

  .btn-next:hover,
  .btn-next:hover {
    color: rgb(247, 247, 247) !important;
  }

  .btn-prev:hover,
  .btn-prev:hover {
    color: rgb(247, 247, 247) !important;
  }

  .btn-next:active,
  .btn-prev:active {
    filter: brightness(.8);
  }
</style>




@endsection