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

@section('title')
Guided Selection
@endsection

@section('seo')

@endsection

@section('content')


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


<div class="container">
    <form id="multi-step-form" onsubmit="return validateForm()">
        <div class="step-form active" id="step1">
            <h2>Guns</h2>
            <div class="mb-3">
            
              {{-- <input type="text" class="form-control" placeholder="Enter your name"> --}}
              <div class="container mt-5 mb-5 p-3">
                <h3 class="text-font fw-bold">1.) What type of guns?</h3>
                <div class="form-check ms-5 mt-3">
                    <input class="form-check-input" type="checkbox" value="Long Gun" id="flexCheckDefault" >
                    <label class="form-check-label" for="flexCheckDefault">
                        Long Gun
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5">
                    <input class="form-check-input" type="checkbox" value="Pistol" id="flexCheckChecked" >
                    <label class="form-check-label" for="flexCheckChecked">
                        Pistol
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5">
                    <input class="form-check-input" type="checkbox" value="" 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>
            </div>
          </div>
      
      <div class="step-form" id="step2">
        <div class="mb-3">
            <div class="container mt-5 mb-5 p-3">
                <h3 class="text-font fw-bold">2.) How many guns? </h3>
                <div class="form-check ms-5 mt-3">
                    <input class="form-check-input" type="checkbox" value="1 Pistol" id="flexCheckDefault" >
                    <label class="form-check-label" for="flexCheckDefault">
                        1 Pistol
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5">
                    <input class="form-check-input" type="checkbox" value="2 Pistol" id="flexCheckChecked" >
                    <label class="form-check-label" for="flexCheckChecked">
                        2 Pistols
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5">
                    <input class="form-check-input" type="checkbox" value="3+ Pistol" id="flexCheckChecked" > 
                    <label class="form-check-label" for="flexCheckChecked">
                        3+ Pistols
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5 ">
                    <input class="form-check-input" type="checkbox" value="5 Long Guns" id="flexCheckChecked" >
                    <label class="form-check-label" for="flexCheckChecked">
                        5 Long Guns
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5 ">
                    <input class="form-check-input" type="checkbox" value="10 Long Guns" id="flexCheckChecked" >
                    <label class="form-check-label" for="flexCheckChecked">
                        10 Long Guns
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5 ">
                    <input class="form-check-input" type="checkbox" value="14 Long Guns" id="flexCheckChecked">
                    <label class="form-check-label" for="flexCheckChecked">
                        14 Long Guns
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5 ">
                    <input class="form-check-input" type="checkbox" value="24 Long Guns" id="flexCheckChecked" >
                    <label class="form-check-label" for="flexCheckChecked">
                        24 Long Guns
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5 ">
                    <input class="form-check-input" type="checkbox" value="36 Long Guns" id="flexCheckChecked" >
                    <label class="form-check-label" for="flexCheckChecked">
                        36 Long Guns
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5 ">
                    <input class="form-check-input" type="checkbox" value="" 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-secondary" onclick="previousStep(2)">Previous</button>
          <button type="button" class="btn btn-primary" onclick="nextStep(2)">Next</button>
        </div>
      </div>
      <div class="step-form" id="step3">
        <div class="mb-3">
            <div class="container mt-5 mb-5 p-3">
                <h3 class="text-font fw-bold">3.) What type of protection? </h3>
                <div class="form-check ms-5 mt-3"> 
                    <input class="form-check-input" type="checkbox" value="Security" id="flexCheckDefault" >
                    <label class="form-check-label" for="flexCheckDefault">
                        Security
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5">
                    <input class="form-check-input" type="checkbox" value="Fire + Security" id="flexCheckChecked" >
                    <label class="form-check-label" for="flexCheckChecked">
                        Fire + Security
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5">
                    <input class="form-check-input" type="checkbox" value="" 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-secondary" onclick="previousStep(3)">Previous</button>
          <button type="button" class="btn btn-primary" onclick="nextStep(3)">Next</button>
        </div>
      </div>
      <div class="step-form" id="step4">
        <div class="mb-3">
            <div class="container mt-5 mb-5 p-3">
                <h3 class="text-font fw-bold">4.) What type of lock? </h3>
                <div class="form-check ms-5 mt-3">
                    <input class="form-check-input" type="checkbox" value="Key" id="flexCheckDefault" >
                    <label class="form-check-label" for="flexCheckDefault">
                        Key
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5">
                    <input class="form-check-input" type="checkbox" value="Electronic" id="flexCheckChecked" >
                    <label class="form-check-label" for="flexCheckChecked">
                        Electronic
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5">
                    <input class="form-check-input" type="checkbox" value="Bio Mentric" id="flexCheckChecked" >
                    <label class="form-check-label" for="flexCheckChecked">
                        Biometric
                    </label>
                  </div>
                  <br>
                  <div class="form-check ms-5">
                    <input class="form-check-input" type="checkbox" value="" 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-secondary" onclick="previousStep(4)">Previous</button>
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </form>
  </div>


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

    function validateStep(step) {
              if (step === 1) {
                  // Validate step 1: Check if at least one size checkbox is selected
                  var checkboxes = document.querySelectorAll('#step1 input[type="checkbox"]:checked');
                  if (checkboxes.length === 0) {
                      alert('Please select at least one size.');
                      return false;
                  }
              } else if (step === 2) {
                  // Validate step 2: Check if at least one lock type checkbox is selected
                  var checkboxes = document.querySelectorAll('#step2 input[type="checkbox"]:checked');
                  if (checkboxes.length === 0) {
                      alert('Please select at least one  type protection.');
                      return false;
                  }
              } else if (step === 3) {
                  // Validate step 2: Check if at least one lock type checkbox is selected
                  var checkboxes = document.querySelectorAll('#step3 input[type="checkbox"]:checked');
                  if (checkboxes.length === 0) {
                      alert('Please select at least one lock.');
                      return false;
                  }
              } else if (step === 4) {
                  // Validate step 2: Check if at least one lock type checkbox is selected
                  var checkboxes = document.querySelectorAll('#step4 input[type="checkbox"]:checked');
                  if (checkboxes.length === 0) {
                      alert('Please select at least one lock.');
                      return false;
                  }
              }


              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('/guidedGun1')}}",
            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 validateForm() {
    // Perform your custom validation for each step here
    switch (currentStep) {
      case 1:
        return validateStep1();
      case 2:
        return validateStep2();
     case 3:
        return validateStep3();
      // Add cases for other steps if needed
      // case 3:
      //   return validateStep3();
      // ...

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


@endsection

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

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

.step-buttons {
  margin-top: 10px;
}
</style>