@extends('layouts.frontend')

@section('title', '| Pour-Over Will Form')
@section('css')
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
@endsection
@section('content')
@include('frontend.forms.Pour-Over-Will.stepIndicator')
 <!-- start -->
<div class="container">
    <form action="{{route('pourOverWillFormcreate')}}" method="POST" id="signUpForm">
      @csrf
      <input type="hidden" id="stepInput" name="step" value="6">
      <div class="card">
         <div class="card-body">
            @php
            /**
               * Decode the signing details from JSON format.
               *
               * This function decodes the signing details from JSON format retrieved from the pour-over will form data.
               *
               * @param array $pourOverWillForm An array containing the pour-over will form data.
               * @return array|null Returns an array containing the decoded signing details or null if decoding fails.
               * 
               * @author Theshan Thanushka
               * @date 2024-04-11
            */
               $signingDetails = json_decode($pourOverWillForm['signing_details'], true);
            @endphp
            <div class="step" style="display: block">
                <div class="row">
                   <div class="col-md-10 col-lg-8 order-1 order-md-1 order-lg-1">
                      <div class="card-title">Signing Details</div>
                      <div class="card-sub-title">When will you sign your Pour-Over Will?</div>
                      <div class="long-btn-card">
                         <div class="custom-button-yn">
                           {{-- Checks if signingDetails is set and its type is 'Unsure'; if true, outputs 'checked', otherwise defaults to 'checked' --}}
                            <input type="radio" id="signingd-unsure" name="signingDetails" value="Unsure" {{ isset($signingDetails) && ($signingDetails['type'] ?? '') == 'Unsure' ? 'checked' : 'checked' }}>
                            <label for="signingd-unsure">Unsure</label>
                           {{-- Checks if signingDetails is set and its type is 'Specific Date'; if true, outputs 'checked', otherwise outputs an empty string --}}
                            <input type="radio" id="specificD" name="signingDetails" value="SpecificDate" {{ isset($signingDetails) && ($signingDetails['type'] ?? '') == 'Specific Date' ? 'checked' : '' }}>
                            <label for="specificD">Specific Date</label>
                         </div>
                      </div>
                      <div id="add-signingd-container-card">
                         <div id="signingd-container">
                            <div class="card mb-3" id="signingd">

                               <div id="signingd-unsure-sec" class="card-body">
                                    <div class="form-group mb-3">
                                        <label for="city">Specific Signing Date</label>
                                        {{-- Sets the value of the input field to the specific date from signingDetails, if available, otherwise defaults to the current date --}}
                                        <input type="text" class="form-control modified-input" name="specific_date" id="specific_date"  placeholder="mm-dd-yy"  value="{{$signingDetails['specific_date'] ?? date('Y-m-d')}}">
                                        <small id="cityHelp" class="form-text text-muted d-none">city</small>
                                    </div>
                               </div>
                               <div class="card-header d-flex justify-content-between">
                                    <div class="card-title m-0">Where will you sign your Pour-Over Will?</div>
                               </div>
                               <div id="specificD-sec" class="card-body">
   
                                  <div class="form-group mb-3">
                                     <label for="city">City/Town</label>
                                     {{-- Sets the value of the input field to the unsure city from signingDetails, if available, otherwise defaults to an empty string --}}
                                     <input type="text" class="form-control modified-input" name="unsure_city" id="unsure_city"  aria-describedby="cityHelp" placeholder="Any City" value="{{$signingDetails['unsure_city'] ?? ''}}">
                                     <small id="cityHelp" class="form-text text-muted d-none">city</small>
                                  </div>
                                 
                               </div>
                            </div>
                         </div>
                      </div>
                   </div>
                  <div class="col-md-8 col-lg-4 order-3 order-md-3 order-lg-2">
                     <!-- <div class="faq-box">
                        <div class="title">FAQ’s</div>
                        <p>What is a wipeout beneficiary?</p>
                     </div> -->
                  </div>
                  <!-- starts previous / next buttons -->
                  <div class="col-md-12 order-2 order-md-2 order-lg-3">
                     <div id="buttonsection">
                        <div class="form-footer d-flex justify-content-between">
                           <div>
                           <button onclick="window.location.href = '{{ route('pourOverWillForm.create.step.five') }}'" type="button" class="btn btn-light btn-lg back-btn">Back</button>
                           <button type="submit" class="btn btn-light btn-lg">Save and Continue</button>
                           </div>
                           <button type="submit" class="btn btn-light btn-lg" name="preview_submit" value="preview">{{env('PREVIEW_BUTTON_TEXT')}}</button>
                           <button type="button" class="btn btn-light btn-lg skip-btn d-none">Skip Step</button>
                        </div>
                     </div>
                  </div>
                  <!-- end previous / next buttons -->
                </div>
             </div>
         </div>
      </div>
   </form>

</div>

@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>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
    $(function() {
       $( "#specific_date" ).datepicker({
          changeMonth: true, // Allow changing of month
          changeYear: true, // Allow changing of year
          dateFormat: 'mm-dd-yy', // Set the desired date format
          yearRange: "-200:+0", // Set range of selectable years
          maxDate: new Date() // Prevent selecting future dates
       });
    });
 </script>
@endsection