@extends('layouts.v2.frontend-user-backend')

@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.v2.Pour-Over-Will.stepIndicator')

    <form action="{{route('pourOverWillFormcreate')}}" method="POST" id="signUpForm">
      @csrf
      <input type="hidden" id="stepInput" name="step" value="6">
      <div class="multiple-form dashboard-radio">
         <h4>Signing details</h4>
         <p>When will you sign your Pour Over Will?</p>
         @php
            $signingDetails = json_decode($pourOverWillForm['signing_details'], true);
         @endphp
         <div class="form">
            <div class="row">
               <div class="col-md-12">
                  <div class="dashboard-radio-form">
                     <div class="form-check">
                        <input type="radio" id="signingd-unsure" class="form-check-input"  name="signingDetails" value="Unsure" {{ isset($signingDetails) && ($signingDetails['type'] ?? '') == 'Unsure' ? 'checked' : '' }}>
                        <label for="signingd-unsure">
                          <p> Unsure</p>
                        </label>
                     </div>
                     <div class="form-check">
                        <input type="radio" id="specificD" class="form-check-input"  name="signingDetails" value="SpecificDate" {{ isset($signingDetails) && ($signingDetails['type'] ?? '') == 'Specific Date' ? 'checked' : '' }}>
                        <label for="specificD">
                           <p>Specific date</p>
                        </label>
                     </div>
                   </div>
               </div>
               <div class="col-md-12">
                     <div class="mt-5">
                        <div id="signingd-unsure-sec">
                           <div class="form-group mb-3">
                              <label for="city">Specific signing date</label>
                              <input type="text"  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>
                        <p class="my-3">Where will you sign your Pour Over Will?</p>
                        <div id="specificD-sec" >
                           <div class="form-group mb-3">
                              <label for="city">City/Town</label>
                              <input type="text"  name="unsure_city" id="unsure_city"  aria-describedby="cityHelp" value="{{$signingDetails['unsure_city'] ?? ''}}" >
                              <small id="cityHelp" class="form-text text-muted d-none">city</small>
                           </div>
                        </div>
                     </div>
               </div>
            </div>
         </div>
         <!-- starts previous / next buttons -->
         <div id="buttonsection" class="submit-button-multiple">
               <button onclick="window.location.href = '{{ route('pourOverWillForm.create.step.five') }}'" type="button">Back</button>
               <button type="submit" class="submit-btn">Save and Continue</button>
               <button type="submit" class="d-none" name="preview_submit" value="preview">{{env('PREVIEW_BUTTON_TEXT')}}</button>
               <button type="button" class="skip-btn d-none">Skip Step</button>
         </div>
         <!-- end previous / next buttons -->
      </div>
    </form>
@endsection
@section('page-js')
<script src="{{ url('frontend/assets/js/forms/pour-over-will-multi-stepform.js') }}?v={{ time() }}"></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, 
         changeYear: true,
         dateFormat: 'mm-dd-yy',
         yearRange: "0:+100", // Allows selecting only future years
         minDate: new Date()   // Prevent selecting past dates, including today
      });
    });
 </script>
 <script src="{{ url('v2/js/form-validation.js') }}?v={{ time() }}"></script>
@endsection