@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 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 mb-3" id="step1">
      <h3 class="text-font fw-bold" id="question1">1.) What size? </h3>
      <img src="{{ asset('img/bar-line.png') }}" class="img-fluid" alt="">
      <div class="row">
        <div class="col-md-3">
          <img src="{{asset('img/size/Small.jpg')}}" alt="" class="img-fluid">
          <div class="form-check">
            <input class="form-check-input group1" type="checkbox" value="Small" id="flexCheckDefault">
            <label class="form-check-label fw-normal" for="flexCheckDefault1">
              SMALL (capacity &lt; 0.6 cu.ft.)
            </label>
          </div>
        </div>
        <div class="col-md-3">
          <img src="{{asset('img/size/Medium.jpg')}}" alt="" class="img-fluid">
          <div class="form-check">
            <input class="form-check-input group1" type="checkbox" value="Medium" id="flexCheckChecked">
            <label class="form-check-label fw-normal" for="flexCheckChecked">
              MEDIUM (capacity 0.6-0.9 cu.ft.)
            </label>
          </div>
        </div>
        <div class="col-md-3">
          <img src="{{asset('img/size/Large.jpg')}}" alt="" class="img-fluid">
          <div class="form-check">
            <input class="form-check-input group1" type="checkbox" value="Large" id="flexCheckChecked">
            <label class="form-check-label fw-normal" for="flexCheckChecked">
              LARGE (capacity 1.0-1.9 cu.ft.)
            </label>
          </div>
        </div>
        <div class="col-md-3">
          <img src="{{asset('img/size/Extra-Extra-Large.jpg')}}" alt="" class="img-fluid">
          <div class="form-check">
            <input class="form-check-input group1" type="checkbox" value="2XL" id="flexCheckChecked">
            <label class="form-check-label fw-normal" for="flexCheckChecked">
              2XL (capacity 3.0-5.6 cu.ft)
            </label>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="form-check">
            <input class="form-check-input group1" type="checkbox" value="skip" id="flexCheckChecked">
            <label class="form-check-label fw-normal" for="flexCheckChecked">
              Skip
            </label>
          </div>
        </div>
      </div>

    </div>

    <div class="step-form active" id="step2">
      <div class="row">
        <div class="col-12 col-md-6">
          <h3 class="text-font fw-bold" id="question2">2.) What type of lock? </h3>
        </div>
        <div class="col-12 col-md-6 d-flex justify-content-end" id="editPreviousAnswer">
          <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">Edit Previous Answer</span>
        </div>
      </div>
      <img src="{{ asset('img/bar-line.png') }}" class="img-fluid" alt="">
      <div class="form-check  mt-3">
        <input class="form-check-input group2" type="checkbox" value="Key" id="flexCheckDefault">
        <label class="form-check-label fw-normal" for="flexCheckDefault">
          Key
        </label>
      </div>
      <br>
      <div class="form-check ">
        <input class="form-check-input group2" type="checkbox" value="Electronic" id="flexCheckChecked">
        <label class="form-check-label fw-normal" for="flexCheckChecked">
          Electronic
        </label>
      </div>
      <br>
      <div class="form-check ">
        <input class="form-check-input group2" type="checkbox" value="Dial Combination + Key" id="flexCheckChecked">
        <label class="form-check-label fw-normal" for="flexCheckChecked">
          Dial Combination + Key
        </label>
      </div>
      <br>
      <div class="form-check ">
        <input class="form-check-input group2" type="checkbox" value="skip" id="flexCheckChecked">
        <label class="form-check-label fw-normal" for="flexCheckChecked">
          Skip
        </label>
      </div>
      <br>
    </div>





  </div>



  <div class="container">
    <div class="mt-5 d-flex justify-content-between">
      <button type="button" class="btn btn-prev d-none" onclick="previousStep(-1)">Previous</button>
      <button type="button" class="btn btn-next d-none" onclick="nextStep(+1)">Next</button>
      <button type="submit" class="button-s btns" style="display: none;">Submit <i class="fa-solid fa-arrow-right"></i></button>
    </div>
  </div>
  {{-- <div class="container">
          <button type="submit" class="button-s btns">NEXT QUESTION <i class="fa-solid fa-arrow-right"></i></button>
      </div> --}}
</form>

<br>

<script>
  // Function to create a radio-like behavior for checkboxes within a group
  function createCheckboxGroup(groupClass) {
    var checkboxes = document.querySelectorAll('.' + groupClass);

    checkboxes.forEach(function(checkbox) {
      checkbox.addEventListener('change', function() {
        if (this.checked) {
          // Uncheck other checkboxes in the same group
          checkboxes.forEach(function(otherCheckbox) {
            if (otherCheckbox !== checkbox) {
              otherCheckbox.checked = false;
            }
          });
        }
      });
    });
  }

  // Create checkbox groups by specifying the group class
  createCheckboxGroup('group1');
  createCheckboxGroup('group2');
</script>

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


  function showStep(step) {
    var steps = document.getElementsByClassName('step-form');
    var totalSteps = document.getElementsByClassName('step-form').length;
    var nextButton = document.querySelector('button.btn-next');
    var submitButton = document.querySelector('button.button-s');

    if (step === totalSteps) {
      nextButton.style.display = 'none';
      submitButton.style.display = 'none';
    } else {
      nextButton.style.display = 'none';
      submitButton.style.display = 'none';
    }

    for (var i = 0; i < steps.length; i++) {
      steps[i].classList.remove('active');
    }



    document.getElementById('step' + step).classList.add('active');

    // Enable all checkboxes in the current step
    var checkboxes = document.querySelectorAll('#step' + step + ' input[type="checkbox"]');
    checkboxes.forEach(function(checkbox) {
      checkbox.disabled = false;
    });

    // // Disable checkboxes in all other steps
    // var allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
    // allCheckboxes.forEach(function (checkbox) {
    // if (!checkbox.closest('.step-form').classList.contains('active')) {
    //     checkbox.disabled = true;
    // }
    // });

    // Get the currently active step
    var activeStep = document.querySelector('.step-form.active');

    // If there's no active step, exit
    if (!activeStep) {
      return;
    }

    // Disable checkboxes in all other steps
    var allCheckboxes = document.querySelectorAll('.step-form:not(.active) input[type="checkbox"]');
    allCheckboxes.forEach(function(checkbox) {
      checkbox.disabled = true;
    });

    // Adjust the opacity of h3 and img elements in all other steps
    var inactiveSteps = document.querySelectorAll('.step-form:not(.active)');
    inactiveSteps.forEach(function(step) {
      var h3 = step.querySelector('h3');
      var img = step.querySelector('img');
      h3.style.opacity = 0.5; // Adjust this value to your desired opacity level
      img.style.opacity = 0.5; // Adjust this value to your desired opacity level
    });

    if (activeStep) {
      var activeSteps = document.querySelectorAll('.step-form.active');
      activeSteps.forEach(function(step) {
        var h3 = step.querySelector('h3');
        var img = step.querySelector('img');
        h3.style.opacity = 1; // Adjust this value to your desired opacity level
        img.style.opacity = 1; // Adjust this value to your desired opacity level
      });
    }
  }

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

  checkboxes.forEach(function(checkbox) {
    checkbox.addEventListener('click', function() {
      if (this.checked) {
        // Trigger form submission when a checkbox is checked
        if (currentStep === totalSteps) {
          submitForm();
          // Call submitForm on the last step
        } else {
          nextStep(+1); // Move to the next step if not the last one
        }
      }
    });
  });

  document.getElementById('editPreviousAnswer').addEventListener('click', function () {
      previousStep(-1);
    });

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

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

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

  .disabled {
    pointer-events: none;
    opacity: 0.6;
  }

  .btn-next {
    --color: #c61b1f;
    /* padding: 0.8em 1.7em; */
    background-color: transparent;
    /* border-radius: .3em; */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: .5s;
    font-weight: 400;
    font-size: 13px;
    border: 1px solid;
    font-family: inherit;
    text-transform: uppercase;
    color: var(--color);
    z-index: 1;
    font-size: 18px;
  }

  .btn-prev {
    --color: #c61b1f;
    /* padding: 0.8em 1.7em; */
    background-color: transparent;
    /* border-radius: .3em; */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: .5s;
    font-weight: 400;
    font-size: 13px;
    border: 1px solid;
    font-family: inherit;
    text-transform: uppercase;
    color: var(--color);
    z-index: 1;
    font-size: 18px;
  }

  .btn-next::before,
  .btn-next::after,
  .btn-prev::before,
  .btn-prev::after {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    background-color: var(--color);
    transition: 1s ease;
  }

  .btn-next::before,
  .btn-prev::before {
    top: -1em;
    left: -1em;
  }

  .btn-next::after,
  .btn-prev::after {
    left: calc(100% + 1em);
    top: calc(100% + 1em);
  }

  .btn-next:hover::before,
  .btn-next:hover::after,
  .btn-prev:hover::before,
  .btn-prev:hover::after {
    height: 410px;
    width: 410px;
  }

  .btn-next:hover,
  .btn-next:hover {
    color: rgb(247, 247, 247) !important;
  }

  .btn-prev:hover,
  .btn-prev:hover {
    color: rgb(247, 247, 247) !important;
  }

  .btn-next:active,
  .btn-prev:active {
    filter: brightness(.8);
  }
</style>

<script>
  function hidePrefixOnSmallScreens() {
    const questionElements = [
      document.getElementById('question1'),
      document.getElementById('question2')
    ];

    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

    // Iterate through each question element
    questionElements.forEach((questionElement) => {
      const text = questionElement.textContent;

      // Check if the screen width is below the breakpoint
      if (screenWidth < breakpoint) {
        // Find the index of the first closing parenthesis
        const closingParenthesisIndex = text.indexOf(')') + 1;
        if (closingParenthesisIndex > 0) {
          // Hide the prefix and update the text
          questionElement.textContent = text.substring(closingParenthesisIndex).trim();
        }
      } else {
        // Restore the original text
        questionElement.textContent = text;
      }
    });
  }

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