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

@section('title')
Guided Selection
@endsection

@section('seo')

@endsection

@section('content')


  <div class="container mt-5">
    <a href="{{ url('/guidedQuestions') }}">
      <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>

  <br>
  <div class="container">
    <form id="multi-step-form" onsubmit="return validateForm()">
      <div class="step-form active" id="step1">
        <h2>Protect Your Home: Smoke Alarms</h2>
        <div class="mb-2">
        
          {{-- <input type="text" class="form-control" placeholder="Enter your name"> --}}
          <div class="container mt-3 mb-3 p-3">
          <h3 class="text-font fw-bold">1.) What type of smoke alarm?</h3>
            <img src="{{ asset('img/bar-line.png') }}" class="img-fluid" alt="">
            <div class="form-check ms-5 mt-3">
                <input class="form-check-input" type="checkbox" value="Standalone" id="flexCheckDefault">
                <label class="form-check-label" for="flexCheckDefault">
                    Standalone
                </label>
              </div>
              <br>
              <div class="form-check ms-5">
                <input class="form-check-input" type="checkbox" value="Interconnected" id="flexCheckChecked" >
                <label class="form-check-label" for="flexCheckChecked">
                    Interconnected
                </label>
              </div>
              <br>
              <div class="form-check ms-5">
                <input class="form-check-input" type="checkbox" value="Smart Wifi" id="flexCheckChecked" >
                <label class="form-check-label" for="flexCheckChecked">
                    Smart Wifi
                </label>
              </div>
              <br>
              <div class="form-check ms-5 ">
                <input class="form-check-input" type="checkbox" value="skip" id="flexCheckChecked" >
                <label class="form-check-label" for="flexCheckChecked">
                    Skip
                </label>
              </div>
              <br>
        </div>
        </div>
        <div class="step-buttons">
          {{-- <button type="button" class="btn btn-primary" onclick="nextStep(1)">Next</button> --}}
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </form>
  </div>

  <style>
    .step-form {
      display: none;
    }
    
    .step-form.active {
      display: block;
    }
    
    .step-buttons {
      margin-top: 10px;
    }
  </style>
  
  <script>

    var currentStep = 1;
    var form = document.getElementById('multi-step-form');
    
    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;
    }
    
    form.addEventListener('submit', function(e) {
      e.preventDefault();
    //   alert('Form submitted!');
      
      // Retrieve selected checkboxes
      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>
  // ... Your existing JavaScript code ...

  function validateForm() {
    // Perform your custom validation for each step here
    switch (currentStep) {
      case 1:
        return validateStep1();
      // Add cases for other steps if needed
      // case 2:
      //   return validateStep2();
      // case 3:
      //   return validateStep3();
      // ...

      // If the current step is not handled, return true by default
      default:
        return true;
    }
  }

  function validateStep1() {
    // Get the selected checkboxes
    var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
    if (checkboxes.length === 0) {
      // If no checkbox is selected, show an error message or perform any desired action
      alert('Please select at least one smoke alarm type.');
      return false; // Return false to prevent form submission
    }
    // Custom validation for step 1, if needed
    // ...

    // If validation passes, return true to proceed to the next step
    return true;
  }

  // Add validation functions for other steps if necessary

  // ... Your existing JavaScript code ...
</script>

@endsection