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

@section('title')
Guided Selection
@endsection

@section('seo')

@endsection

@section('content')

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


    <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>General Valuables AND Documents (All Purpose Safe)</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 size?</h3>
                    <div class="form-check ms-5 mt-3">
                        <input class="form-check-input" type="checkbox" value="Small" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            SMALL (capacity < 0.6 cu.ft.)
                        </label>
                      </div>
                      <br>
                      <div class="form-check ms-5">
                        <input class="form-check-input" type="checkbox" value="medium" id="flexCheckChecked">
                        <label class="form-check-label" for="flexCheckChecked">
                            MEDIUM (capacity 0.6-0.9 cu.ft.)
                        </label>
                      </div>
                      <br>
                      <div class="form-check ms-5">
                        <input class="form-check-input" type="checkbox" value="large" id="flexCheckChecked">
                        <label class="form-check-label" for="flexCheckChecked">
                            LARGE (capacity 1.0-1.9 cu.ft.)
                        </label>
                      </div>
                      <br>
                      <div class="form-check ms-5 ">
                        <input class="form-check-input" type="checkbox" value="xl" id="flexCheckChecked">
                        <label class="form-check-label" for="flexCheckChecked">
                            XL (capacity 2.0-2.9 cu.ft.)
                        </label>
                      </div>
                      <br>
                      <div class="form-check ms-5 ">
                        <input class="form-check-input" type="checkbox" value="2xl" id="flexCheckChecked">
                        <label class="form-check-label" for="flexCheckChecked">
                            2XL (capacity 3.0-5.6 cu.ft)
                        </label>
                      </div>
                      <br>
                      <div class="form-check ms-5 ">
                        <input class="form-check-input" type="checkbox" value="3XL+" id="flexCheckChecked">
                        <label class="form-check-label" for="flexCheckChecked">
                            3XL+ (capacity 5.7+ cu.ft.)
                        </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" id="question2">2.) 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="fireSecurity" 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="Fire + Water + Security" id="flexCheckChecked">
                        <label class="form-check-label" for="flexCheckChecked">
                            Fire + Water + Security
                        </label>
                      </div>
                      <br>
                      <div class="form-check ms-5 ">
                        <input class="form-check-input" type="checkbox" value="Certified Security + Fire" id="flexCheckChecked">
                        <label class="form-check-label" for="flexCheckChecked">
                            Certified Security + Fire
                        </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" id="question3">3.) 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="biometric" 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="dialCombinationKey" id="flexCheckChecked">
                        <label class="form-check-label" for="flexCheckChecked">
                            Dial Combination + Key
                        </label>
                      </div>
                      <br>
                      <div class="form-check ms-5 ">
                        <input class="form-check-input" type="checkbox" value="electronicKey" id="flexCheckChecked">
                        <label class="form-check-label" for="flexCheckChecked">
                            Electronic + Key
                        </label>
                      </div>
                      <br>
                      <div class="form-check ms-5 ">
                        <input class="form-check-input" type="checkbox" value="biometricKey" id="flexCheckChecked">
                        <label class="form-check-label" for="flexCheckChecked">
                            Biometric + Key
                        </label>
                      </div>
                      <br>
                      <div class="form-check ms-5 ">
                        <input class="form-check-input" type="checkbox" value="Bio Metric + Electronic" id="flexCheckChecked">
                        <label class="form-check-label" for="flexCheckChecked">
                            Biometric + Electronic
                        </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="submit" class="btn btn-primary btn-submit">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 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 one 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;
                  }
              } 



              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('/guidedSafeGenDoc1')}}",
                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();
      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;
    }
  }

  function validateStep1() {
    // Get the selected checkboxes for step 1
    var checkboxes = document.querySelectorAll('#step1 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 size option.');
      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;
  }

  function validateStep2() {
    // Get the selected checkboxes for step 2
    var checkboxes = document.querySelectorAll('#step2 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 type of protection.');
      return false; // Return false to prevent form submission
    }
    // Custom validation for step 2, if needed
    // ...

    // If validation passes, return true to proceed to the next step
    return true;
  }
  function validateStep3() {
    // Get the selected checkboxes for step 2
    var checkboxes = document.querySelectorAll('#step3 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 type of protection.');
      return false; // Return false to prevent form submission
    }
    // Custom validation for step 2, 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