@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>Media</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="2xl" id="flexCheckDefault" >
                            <label class="form-check-label" for="flexCheckDefault">
                                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 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.) What type of lock? </h3>
                        <div class="form-check ms-5 mt-3">
                            <input class="form-check-input" type="checkbox" value="dialCombination" id="flexCheckDefault" >
                            <label class="form-check-label" for="flexCheckDefault">
                                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="" 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="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) {
              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('/mediaQuestion')}}",
                    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