@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 href="{{ url('/products') }}">
        <span class="text-decoration-underline prev"><i class="fa-solid fa-arrow-left"></i><span class="text-font"> Back to Previous Page</span></span>
      </a> --}}
      <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 mt-5 mb-5 p-3">
      <div class="step-form active" id="step1">
        <h3 class="text-font fw-bold" id="question">1.) What type of belongings? </h3>
        <img src="{{ asset('img/bar-line.png') }}" class="img-fluid" alt="">
          <div class="form-check mt-3">
            <input class="form-check-input single-checkbox" type="checkbox" value="General Valuables AND Documents" id="flexCheckDefault">
            <label class="form-check-label fw-normal" for="flexCheckDefault">
                General Valuables AND Documents (All Purpose Safe)
            </label>
          </div>
          <br>
          <div class="form-check">
            <input class="form-check-input single-checkbox" type="checkbox" value="Documents Only" id="flexCheckChecked">
            <label class="form-check-label fw-normal" for="flexCheckChecked">
                Documents Only (Filing Cabinets)
            </label>
          </div>
          <br>
          <div class="form-check">
            <input class="form-check-input single-checkbox" type="checkbox" value="Small Items" id="flexCheckChecked">
            <label class="form-check-label fw-normal" for="flexCheckChecked">
                Small Items (Safes for Cash, Checks, Keys, Passports, etc.)
            </label>
          </div>
          <br>
          <div class="form-check">
            <input class="form-check-input single-checkbox" type="checkbox" value="Cash Deposits" id="flexCheckChecked">
            <label class="form-check-label fw-normal" for="flexCheckChecked">
                Cash Deposits (Depository Safes)
            </label>
          </div>
          <br>
          <div class="form-check">
            <input class="form-check-input single-checkbox" type="checkbox" value="Guns" id="flexCheckChecked">
            <label class="form-check-label fw-normal" for="flexCheckChecked">
                Guns
            </label>
          </div>
          <br>
          <div class="form-check">
            <input class="form-check-input single-checkbox" type="checkbox" value="Media" id="flexCheckChecked">
            <label class="form-check-label fw-normal" for="flexCheckChecked">
                Media
            </label>
          </div>
          <br>
        </div>
    </div>

   
    
    </form>

    <br>


    <script>
      var currentStep = 1;
      var form = document.getElementById('multi-step-form');
      var checkboxes = document.querySelectorAll('.single-checkbox');
      var checkboxesd = document.querySelectorAll('input[type="checkbox"]');

      checkboxes.forEach(function(checkbox) {
      checkbox.addEventListener('click', function() {
        if (this.checked) {
          checkboxes.forEach(function(otherCheckbox) {
            if (otherCheckbox !== checkbox) {
              otherCheckbox.checked = false;
            }
          });
        }
      });
    });

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

      
      showStep(currentStep);
    </script>

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

      // Check if the screen width is below the breakpoint
      if (screenWidth < breakpoint) {
        // Hide the '1.)' prefix
        questionElement.innerText = questionElement.innerText.replace('1.)', '');
      } else {
        // Restore the original text
        questionElement.innerText = '1.) What type of belongings?';
      }
    }

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

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

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

  .step-form {
    display: none;
  }
  
  .step-form.active {
    display: block;
  }
  
  .step-buttons {
    margin-top: 10px;
  }
  .form-check-input.single-checkbox[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
  }

 

</style>