@extends('layouts.frontend')

@section('title', '| Pour-Over Will Form')

@section('content')
<div class="wrap-sec">
    <div class="container form-holder">
       <div class="breadcrumb-holder">
          <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('userhomePage')}}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{route('willsEstate')}}">Will & Estate</a></li>
                <li class="breadcrumb-item active" aria-current="page">Pour-Over Will</li>
             </ol>
          </nav>
       </div>
       <section id="form-sec-head">
          <div class="sec-title">FREE POUR-OVER WILL</div>
          <div class="form-stepIndicator-top">
             <div id="signUpForm">
                <div class="form-header mb-4">
                  <span class="stepIndicator">Get Started</span>
                  <span class="stepIndicator">Children</span>
                  <span class="stepIndicator">Gifts</span>
                  <span class="stepIndicator">Trust Details</span>
                  <span class="stepIndicator emtyindicator"></span>
                  <span class="stepIndicator emtyindicator"></span>
                  <span class="stepIndicator">Executor</span>
                  <span class="stepIndicator emtyindicator"></span>
                  <span class="stepIndicator">Final Details</span>
                  <span class="stepIndicator">Signing</span>
                  <span class="stepIndicator">Preview</span>
                </div>
             </div>
          </div>
       </section>
    </div>
 </div>
 <!-- start -->
<div class="container">
   
   <form id="signUpForm" class="pour_over" onsubmit="handleFormSubmit(event)">
      @csrf
      <input type="hidden" id="stepInput" name="step" value="1">
      <div class="card">
         <div class="card-body">
                        
            <!-- step 3 -->
            <div class="step">
               <div class="row">
                  <div class="col-md-8">
                     <div class="card-title">Gifts</div>
                     <div class="card-sub-title">Do you want to leave any specific gifts in your Pour-Over Will?</div>
                     <div class="custom-button-yn mb-5">
                        <input id="gifts-y" name="gift" type="radio" value="yes">
                        <label for="gifts-y">Yes</label>
                        <input id="gifts-n" name="gift" type="radio" value="no">
                        <label for="gifts-n">No</label>
                     </div>
                     <div id="add-gifts-container-card">
                        <div id="gifts-container">
                           <div class="card mb-3" id="gifts">
                              <div class="card-header d-flex justify-content-between">
                                 <div class="card-title m-0">Gift</div>
                                 <a class="r-button" onclick="removeGifts(this)"><span class="fas fa-times"></span><span class="remove">Remove</span></a>
                              </div>
                              {{-- gift Recipient start --}}
                              <div class="card-body">
                                 <div class="long-btn-card">
                                    <div class="custom-button-yn">
                                       <input type="radio" id="individual_lb" name="gift_type[]" value="Individual" checked>
                                       <label for="individual_lb">Individual</label>
                                       <input type="radio" id="charity_lb" name="gift_type[]" value="Specific Date">
                                       <label for="charity_lb">Charity or Organization</label>
                                    </div>
                                 </div>
                                 <div class="card-sub-title">Recipient</div>
                                 {{-- gift individual start --}}
                                 <div id="individual_form">
                                    <div class="form-group mb-3">
                                       <label for="name">Name</label>
                                       <input type="text" class="form-control" name="gift_recipient_name[]" id="gift_recipient_name" aria-describedby="nameHelp" >
                                       <small id="nameHelp" class="form-text text-muted">e.g. William Timothy Smith</small>
                                    </div>
                                    <div class="form-group mb-3">
                                       <label for="city">City/Town</label>
                                       <input type="text" class="form-control" name="gift_recipient_city[]" id="gift_recipient_city"  aria-describedby="cityHelp" placeholder="Any City">
                                       <small id="cityHelp" class="form-text text-muted d-none">city</small>
                                    </div>
                                    <div class="form-group mb-3">
                                       <label for="state">State</label>
                                       <input type="text" class="form-control" name="gift_recipient_state[]" id="gift_recipient_state" placeholder="State">
                                    </div>
                                    <div class="form-group mb-3">
                                       <label for="state">Describe the gift</label>
                                       <input type="text" class="form-control" name="gift_recipient_describe[]" id="gift_recipient_describe" placeholder="Describe">
                                       <small id="nameHelp" class="form-text text-muted">e.g. Set of golf clubs and antique dining table with six matching chairs</small>
                                    </div>
                                 </div>
                                 {{-- gift individual end --}}
                                 {{-- gift charity start --}}
                                 <div id="charity_form">
                                    <div class="form-group mb-3">
                                       <label for="name">Charity or Organization Name</label>
                                       <input type="text" class="form-control" name="gift_charity_name[]" id="gift_recipient_name" aria-describedby="nameHelp" >
                                       <small id="nameHelp" class="form-text text-muted">e.g. United Way Worldwide, Feeding America</small>
                                    </div>
                                    <div class="form-group mb-3">
                                       <label for="city">Charity Registration</label>
                                       <input type="text" class="form-control" name="gift_charity_registration[]" id="gift_charity_registration"  aria-describedby="cityHelp" placeholder="Any City">
                                       <small id="cityHelp" class="form-text text-muted d-none">e.g. 200583415</small>
                                    </div>
                                    <div class="form-group mb-3">
                                       <label for="state">State</label>
                                       <input type="text" class="form-control" name="gift_charity_state[]" id="gift_charity_state" placeholder="State">
                                    </div>
                                    <div class="form-group mb-3">
                                       <label for="state">Describe the gift</label>
                                       <input type="text" class="form-control" name="gift_charity_describe[]" id="gift_charity_describe" placeholder="Describe">
                                       <small id="nameHelp" class="form-text text-muted">e.g. Set of golf clubs and antique dining table with six matching chairs</small>
                                    </div>
                                 </div>
                                 {{--  gift charity end --}}
                                 <div class="form-check my-5">
                                    <input class="form-check-input" name="alternate_gift" type="checkbox" value="yes" id="alternate_gift">
                                    <label class="form-check-label" for="flexCheckDefault">Name an alternate gift recipient</label>
                                 </div>
                                 {{-- alternate gift holder --}}
                                 <div id="alternate_gift_holder">
                                    <div class="form-group mb-3">
                                       <label for="name">Name</label>
                                       <input type="text" class="form-control" name="alternate_gift_name[]" id="alternate_gift_name" aria-describedby="nameHelp" >
                                       <small id="nameHelp" class="form-text text-muted">e.g. William Timothy Smith</small>
                                    </div>
                                    <div class="form-group mb-3">
                                       <label for="city">City/Town</label>
                                       <input type="text" class="form-control" name="alternate_gift_city[]" id="alternate_gift_city"  aria-describedby="cityHelp" placeholder="Any City">
                                       <small id="cityHelp" class="form-text text-muted d-none">city</small>
                                    </div>
                                    <div class="form-group mb-3">
                                       <label for="state">State</label>
                                       <input type="text" class="form-control" name="alternate_gift_state[]" id="alternate_gift_state" placeholder="State">
                                    </div>
                                 </div>
                                 {{-- alternate gift holder end--}}
                              </div>
                              {{-- gift Recipient end --}}
                           </div>
                        </div>
                        <div class="add-child">
                           <a  onclick="addgifts()"><span class="fas fa-plus"></span>Add Another Gift</a>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="faq-box">
                        <div class="title">FAQ’s</div>
                        <p>Is there anything i cannot give away?</p>
                     </div>
                  </div>
               </div>
            </div>
                        <!-- Start final step -->
            <div class="step" id="finalStep">
               <div class="row">
                  <div class="col-md-12">
                     <div class="card-title">Final Step</div>
                     <div class="card-sub-title">Thank you for submitting the form.</div>
                     <div id="previewData"></div>
                  </div>
               </div>
            </div>
            <!-- End final step -->
            <!-- start previous / next buttons -->
            <div id="buttonsection">
               <div class="form-footer d-flex">
                  <button type="button" class="btn btn-light btn-lg back-btn" id="prevBtn" onclick="nextPrev(-1)">Back</button>
                  <button type="submit" class="btn btn-light btn-lg" id="nextBtn">Save and Continue</button>
                  <button type="button" class="btn btn-light btn-lg skip-btn" id="skipBtn" onclick="skipStep()">Skip Step</button>
               </div>
            </div>
            <!-- end previous / next buttons -->
         </div>
      </div>
   </form>

</div>
<script>
   //localStorage.clear();
   var user_id = {{auth()->user()->id}};
   var currentTab = 0;
   var x = document.getElementsByClassName("step"); // Declare x as a global variable
   
   // Load previously stored form data on page load
   window.addEventListener("load", function() {
     var storedData = localStorage.getItem("pourOver" + user_id);
     if (storedData) {
       var data = JSON.parse(storedData);
   
       // Populate the form fields with the stored data
       for (var i = 0; i < x.length; i++) {
         var stepFields = x[i].querySelectorAll('input, select, textarea');
         for (var j = 0; j < stepFields.length; j++) {
           var fieldName = stepFields[j].name;
           if (fieldName in data) {
             stepFields[j].value = data[fieldName];
           }
         }
       }
   
       // Determine the current step based on the stored data
       var currentStep = data["step"];
       if (currentStep) {
         currentTab = parseInt(currentStep) - 1;
       }
     }
   
     showTab(currentTab);
   });
   
   // Rest of the code...
   
   
   showTab(currentTab);



   
   function showTab(n) {
     // Hide all steps
     for (var i = 0; i < x.length; i++) {
       x[i].style.display = "none";
     }
   
     // Show the current step
     x[n].style.display = "block";
   
     // Update the navigation buttons
     if (n == 0) {
       document.getElementById("skipBtn").style.display = "none";
       document.getElementById("prevBtn").style.display = "none";
     } else {
       document.getElementById("prevBtn").style.display = "inline";
     }
   
     if (n == (x.length - 2)) {
       document.getElementById("nextBtn").innerHTML = "Submit";
       document.getElementById("nextBtn").setAttribute("onclick", "handleFormSubmit(event)");
     } else {
       document.getElementById("nextBtn").innerHTML = "Save and Continue";
       document.getElementById("nextBtn").setAttribute("onclick", "submitForm()");
     }
   
     // Update the value of the hidden input field for "step" parameter
     var hiddenInput = document.getElementById("stepInput");
     hiddenInput.value = n + 1;
   
     fixStepIndicator(n);
   }
   
   function nextPrev(n) {
     x[currentTab].style.display = "none";
     var hiddenInput = document.getElementById("stepInput");
     hiddenInput.value = currentTab;
     currentTab = currentTab + n;
   
     if (currentTab >= x.length) {
       return false;
     }

     
     showTab(currentTab);
   }
   
   function fixStepIndicator(n) {
     var stepIndicators = document.getElementsByClassName("stepIndicator");
   
     for (var i = 0; i < stepIndicators.length; i++) {
       stepIndicators[i].className = stepIndicators[i].className.replace(" active", "");
       stepIndicators[i].className = stepIndicators[i].className.replace(" completed", "");
     }
   
     for (var i = 0; i < n; i++) {
       stepIndicators[i].className += " completed";
     }
   
     stepIndicators[n].className += " active";
   }
   
   function skipStep() {
     x[currentTab].style.display = "none";
     currentTab = currentTab + 1;
   
     if (currentTab >= x.length) {
       return false;
     }
   
     showTab(currentTab);
   }
   
   function skipStep2() {
     x[currentTab].style.display = "none";
     currentTab = currentTab + 2;
   
     if (currentTab >= x.length) {
       return false;
     }
   
     showTab(currentTab);
   }
   
   function submitForm() {
     handleFormSubmit(event); // Call the form submission handler directly
   }
   
   function handleFormSubmit(event) {
     event.preventDefault(); // Prevent default form submission behavior
   
     var form = document.querySelector(".pour_over");
     var formData = new FormData(form);
   
     // Extract the current step from the form data
     var step = formData.get('step');
   
     // Add the CSRF token to the request headers
     var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
     var headers = new Headers({
       'X-CSRF-TOKEN': csrfToken
     });
   
     // Update the step value in the form data
     formData.set('step', step);
    // Get all the 'cdependent' checkbox elements
    // Get all the 'cdependent' checkbox elements
    // Get all the 'cdependent' checkbox elements
    // Get all the 'cdependent' checkbox elements
    var cdependentCheckboxes = document.querySelectorAll('input[name="cdependent[]"]');

    // Prepare the 'cdependent' data as an array with null values for unchecked checkboxes
    var cdependentArray = Array.from(cdependentCheckboxes, checkbox => checkbox.checked ? checkbox.value : null);

    // Set the 'cdependent' array in the form data
    formData.set('cdependent[]', cdependentArray);

   
   //   if (currentTab < x.length - 1) {  //remove this for store skip step
   //     nextPrev(1);
   //   }
   
     // Perform the form submission using AJAX
     fetch("{{ route('pourOverWillFormStore') }}", {
         method: "POST",
         body: formData,
         headers: headers
       })
       .then(function(response) {
         // Handle success
         if (response.ok) {
            toastMixin.fire();
            return response.json();
         } else {
           throw new Error("Error submitting form");
         }
       })
       .then(function(data) {
         // Process the resolved JSON data
         console.log(data); // Log the response data to the console
         submittedData = data; // Store the submitted data
   
         if (currentTab < x.length - 1) {
           nextPrev(1);
         }
       })
       .catch(function(error) {
         console.log(error);
       });
   
     // Remove empty fields from the form data
     for (var pair of formData.entries()) {
       if (pair[1] === '') {
         formData.delete(pair[0]);
       }
     }
   
     // Create a query string from the form data
     var queryString = new URLSearchParams(formData).toString();
   
     // Update the URL without reloading the page
     history.replaceState({}, '', window.location.pathname + '?' + queryString);
   
     // Save the form data to localStorage
     var dataToStore = {};
     formData.forEach(function(value, key) {
       dataToStore[key] = value;
     });
     localStorage.setItem("pourOver" + user_id, JSON.stringify(dataToStore));
   }
</script>





@endsection
@section('page-js')
<script src="{{ url('frontend/assets/js/forms/pour-over-will-multi-stepform.js?v=10.4') }}"></script>
<script src="{{ url('frontend/assets/js/forms/custom.js?v=10.3') }}"></script>

@endsection