

<style>

/* Media query for smaller screens (e.g., mobile devices) */
@media (max-width: 767px) {
    .signature-canvas {
        width: 300; /* Adjusted width for smaller screens */
    }
}

</style>
@include('merchant_new.merchant_header')


			<div class="box-body wizard-content">
				<form method="post" class="tab-wizard wizard-circle">
           @csrf
                <input type="hidden" name="old_signature" value="{{$lead['signature_image']}}" />
					<!-- Step 1 -->
				
						<div class="row">
                        @if(!empty($labels))
                        
                        @foreach($labels as $label)
                        @if($label->heading_type != 'second_owner')
                                                @if($label->status == 1)
                                                 @if($label->column_name != 'unique_url')
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label
                                                                class="form-label">@if($label->data_type == 'select_option')
                                                                    Select
                                                                @endif {{$label->title}} @if($label->data_type == 'date') (mm/dd/yyyy) @endif @if($label->merchant_required == 1)
                                                                    <span style="color: red;">*</span>
                                                                @endif</label>

                                                                <div class="input-group mb-3">
                                                                
                    <span class="input-group-text @error('last_name') text-danger border-danger @enderror"><i class="{{$label->icons}}"></i></span>

                                                            @if($label->label_title_url == 'country')
                                                                <select class="form-select" name="country" id="country"
                                                                        data-country="{{$lead['country']}}">
                                                                    <option value="US">United States</option>
                                                                    <!-- <option value="IN">India</option> -->
                                                                </select>

                                                            @elseif($label->label_title_url == 'state' || $label->data_type=='select_state')
                                                                <select class="form-select" @if($label->label_title_url == 'state') name="state" @endif @if($label->data_type == 'select_state') name="{{$label->column_name}}" @endif  id="state"
                                                                        data-country="{{$lead['state']}}">

                                                                        <option value="">Select State</option>


                                                                         @if(!empty($state_list))
                                                                        @foreach($state_list as $state)
                                                                         <option @if($lead[$label->column_name] == $state->state_name) selected @endif value="{{$state->state_name}}">{{$state->state_name}}</option>
                                                                        @endforeach
                                                                        @endif
                                                                  
    
                                                                </select>
                                                            
                                                            @elseif($label->data_type == 'select_option')
                                                                @php
                                                                    $values = $label->values;
                                                                    $arr = json_decode($values);
                                                                @endphp
                                                                @if(!empty($arr))
                                                                    <select class="form-select"
                                                                            name="{{$label->column_name}}">

                                                                             <option value="">Select Option</option>
                                                                            
                                                                        @php
                                                                            foreach($arr as $val)
                                                                            {
                                                                        @endphp
                                                                        <option @if($lead[$label->column_name] == $val) selected @endif
                                                                            value="{{$val}}">{{ucwords($val)}}</option>
                                                                        @php
                                                                            }
                                                                        @endphp
                                                                    </select>
                                                                @endif

                                                        @elseif($label->data_type == 'date')
                                                        @php
                                                            // Ensure $lead[$label->column_name] is correctly handled and doesn't retain unexpected values
                                                            $value = isset($lead[$label->column_name]) ? $lead[$label->column_name] : null;

                                                            // Check if the data type is 'date' and the value is not empty or '0000-00-00'
                                                            if ($label->data_type == 'date' && !empty($value) && $value !== '0000-00-00') {
                                                                // Convert the date from Y-m-d to m/d/Y
                                                                try {
                                                                    $formattedDate = \Carbon\Carbon::createFromFormat('Y-m-d', $value)->format('m/d/Y');
                                                                } catch (\Exception $e) {
                                                                    // Handle any exception that may occur during date formatting
                                                                    $formattedDate = '';
                                                                }
                                                            } else {
                                                                // If the date is empty or '0000-00-00', use an empty string
                                                                $formattedDate = '';
                                                            }
                                                            @endphp

                                                 <input type="text" name="{{ $label->column_name }}"
       class="form-control" value="{{ $formattedDate }}"
       @if($label->merchant_required == 1) required @endif
       placeholder="Enter {{ $label->title }}" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask />
                                                                @elseif($label->data_type == 'datetime-local')
                                                                <input type="datetime-local" name="{{$label->column_name}}"
                                                                       
                                                                       class="form-control" value="{{$lead[$label->column_name]}}"
                                                                       
                                                                       @if($label->merchant_required == 1) required
                                                                       @endif placeholder="Enter {{$label->title}}"/>

                                                                @elseif($label->data_type == 'email')
                                                                <input type="email" name="{{$label->column_name}}"
                                                                       
                                                                       class="form-control" value="{{$lead[$label->column_name]}}"
                                                                       
                                                                       @if($label->merchant_required == 1) required
                                                                       @endif placeholder="Enter {{$label->title}}"/>


                                                                @else
                                                                <input style="text-transform: capitalize;" maxlength="{{$label->number_length}}" type="text" name="{{$label->column_name}}"
                                                                       @if($label->data_type == 'number' || $label->data_type == 'currency') oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" @endif
                                                                       value="@if(!empty($lead[$label->column_name])) {{$lead[$label->column_name]}} @elseif($label->data_type == 'text')   @endif"
                                                                       class="form-control @if($label->data_type == 'date') datepicker @endif @if($label->data_type == 'phone_number') phone_number @endif "
                                                                       @if($label->data_type == 'phone_number') onkeypress="return isNumberKey($(this));"
                                                                       @endif @if($label->merchant_required == 1) required
                                                                       @endif placeholder="Enter {{$label->title}}"/>

                                                            @endif

                                                        </div>
                                                        </div>

                                                    </div>
                                                @endif

                                                @endif
                                                @endif
                                            @endforeach
                                        @endif
						</div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                <input type="checkbox" id="basic_checkbox_1" />
                                <label for="basic_checkbox_1">Add Second Owner</label>
                                </div>
                            </div>
                            <br>
                            <div id="show_second_owner">
                            <h4 class="box-title text-info mb-0"><i class="ti-user me-15"></i> Second Owner Information</h4>
                            <hr>
                            <div class="row">
                      

                            @if(!empty($labels))
                        
                        @foreach($labels as $label)
                        @if($label->heading_type == 'second_owner')
                                                @if($label->status == 1)
                                                 @if($label->column_name != 'unique_url')
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label
                                                                class="form-label">@if($label->data_type == 'select_option')
                                                                    Select
                                                                @endif {{$label->title}} @if($label->data_type == 'date') (mm/dd/yyyy) @endif @if($label->merchant_required == 1)
                                                                    <span style="color: red;">*</span>
                                                                @endif</label>

                                                                <div class="input-group mb-3">
                                                                
                    <span class="input-group-text @error('last_name') text-danger border-danger @enderror"><i class="{{$label->icons}}"></i></span>

                                                            @if($label->label_title_url == 'country')
                                                                <select class="form-select second-owner-field" name="country" id="country"
                                                                        data-country="{{$lead['country']}}">
                                                                    <option value="US">United States</option>
                                                                    <!-- <option value="IN">India</option> -->
                                                                </select>

                                                            @elseif($label->label_title_url == 'state' || $label->data_type=='select_state')
                                                                <select class="form-select second-owner-field" @if($label->label_title_url == 'state') name="state" @endif @if($label->data_type == 'select_state') name="{{$label->column_name}}" @endif  id="state"
                                                                        data-country="{{$lead['state']}}">

                                                                        <option value="">Select State</option>


                                                                         @if(!empty($state_list))
                                                                        @foreach($state_list as $state)
                                                                         <option @if($lead[$label->column_name] == $state->state_name) selected @endif value="{{$state->state_name}}">{{$state->state_name}}</option>
                                                                        @endforeach
                                                                        @endif
                                                                  
    
                                                                </select>
                                                            
                                                            @elseif($label->data_type == 'select_option')
                                                                @php
                                                                    $values = $label->values;
                                                                    $arr = json_decode($values);
                                                                @endphp
                                                                @if(!empty($arr))
                                                                    <select class="form-select second-owner-field"
                                                                            name="{{$label->column_name}}">

                                                                             <option value="">Select Option</option>
                                                                            
                                                                        @php
                                                                            foreach($arr as $val)
                                                                            {
                                                                        @endphp
                                                                        <option @if($lead[$label->column_name] == $val) selected @endif
                                                                            value="{{$val}}">{{ucwords($val)}}</option>
                                                                        @php
                                                                            }
                                                                        @endphp
                                                                    </select>
                                                                @endif

                                                        @elseif($label->data_type == 'date')
                                                        @php
                                                            // Ensure $lead[$label->column_name] is correctly handled and doesn't retain unexpected values
                                                            $value = isset($lead[$label->column_name]) ? $lead[$label->column_name] : null;

                                                            // Check if the data type is 'date' and the value is not empty or '0000-00-00'
                                                            if ($label->data_type == 'date' && !empty($value) && $value !== '0000-00-00') {
                                                                // Convert the date from Y-m-d to m/d/Y
                                                                try {
                                                                    $formattedDate = \Carbon\Carbon::createFromFormat('Y-m-d', $value)->format('m/d/Y');
                                                                } catch (\Exception $e) {
                                                                    // Handle any exception that may occur during date formatting
                                                                    $formattedDate = '';
                                                                }
                                                            } else {
                                                                // If the date is empty or '0000-00-00', use an empty string
                                                                $formattedDate = '';
                                                            }
                                                            @endphp

                                                 <input type="text" name="{{ $label->column_name }}"
       class="form-control second-owner-field" value="{{ $formattedDate }}"
       @if($label->merchant_required == 1) required @endif
       placeholder="Enter {{ $label->title }}" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask />
                                                                @elseif($label->data_type == 'datetime-local')
                                                                <input type="datetime-local" name="{{$label->column_name}}"
                                                                       
                                                                       class="form-control second-owner-field" value="{{$lead[$label->column_name]}}"
                                                                       
                                                                       @if($label->merchant_required == 1) required
                                                                       @endif placeholder="Enter {{$label->title}}"/>

                                                                @elseif($label->data_type == 'email')
                                                                <input type="email" name="{{$label->column_name}}"
                                                                       
                                                                       class="form-control second-owner-field" value="{{$lead[$label->column_name]}}"
                                                                       
                                                                       @if($label->merchant_required == 1) required
                                                                       @endif placeholder="Enter {{$label->title}}"/>


                                                                @else
                                                                <input style="text-transform: capitalize;" maxlength="{{$label->number_length}}" type="text" name="{{$label->column_name}}"
                                                                       @if($label->data_type == 'number' || $label->data_type == 'currency') oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" @endif
                                                                       value="@if(!empty($lead[$label->column_name])) {{$lead[$label->column_name]}} @elseif($label->data_type == 'text') -  @endif"
                                                                       class="form-control second-owner-field @if($label->data_type == 'date') datepicker @endif @if($label->data_type == 'phone_number') phone_number @endif "
                                                                       @if($label->data_type == 'phone_number') onkeypress="return isNumberKey($(this));"
                                                                       @endif @if($label->merchant_required == 1) required
                                                                       @endif placeholder="Enter {{$label->title}}"/>

                                                            @endif

                                                        </div>
                                                        </div>

                                                    </div>
                                                @endif

                                                @endif
                                                @endif
                                            @endforeach
                                        @endif

                        </div>
                                
                            </div>
                        </div>
                        <div class="col-md-12">
                                        <div class="row">
                                            
                                         <div class="col-md-6">
                                                        <div class="form-group">
                                                            @if(!empty($lead['signature_image']))
                                                            <label class="form-label" for="">First Owner's Signature View</label>
                                                            <br/>
                                                            <div><img src="{{ asset('/uploads/signature/')}}/{{$lead['signature_image']}}" /></div>
                                                            <br/>
                                                            @endif

                                                        </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label" for="">First Owner's Signature</label>
                                                <br/>
                                                <!-- <div id="sig"></div> -->
                                                <canvas id="sig1Canvas" class="signature-canvas"width="550"style="border: 1px solid #ccc;"></canvas>
                                                <br/><br>
                                                <button id="clear" style="float:right;" class="btn btn-danger btn-sm">Clear Signature</button>
                                                <textarea id="signature64" name="signed" style="display: none;"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                                        <div class="form-group">
                                                            @if(!empty($lead['owner_2_signature_image']))
                                                            <label class="form-label" for="">Second Owner's Signature View</label>
                                                            <br/>
                                                            <div><img src="{{ asset('/uploads/signature/')}}/{{$lead['owner_2_signature_image']}}" /></div>
                                                            <br/>
                                                            @endif

                                                        </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="form-label" for="">Second Owner's Signature</label>
                                                <br/>
                                                <!-- <div id="sig2"></div> -->
                                                <canvas id="sig2Canvas"  class="signature-canvas"width="550"style="border: 1px solid #ccc;"></canvas>
                                                <br/><br>
                                                <button id="clear2" style="float:right;" class="btn btn-danger btn-sm">Clear Signature</button>
                                                <textarea id="signature2" name="signed2" style="display: none;"></textarea>
                                            </div>
                                        </div>
                                    
                          <div class="modal-footer">
                                    

                                    <a onclick="window.location.reload();" type="button"
                                       style="float: right;" class="btn btn btn-warning waves-effect waves-light" data-dismiss="modal"><i
                                            class="fa fa-refresh" aria-hidden="true"></i> Reset</a>
                                    <button type="submit" name="submit" value="personal_information"
                                            style="float: right;" class="btn btn btn-primary waves-effect waves-light"><i
                                            class="fa fa-edit edit"></i> Update
                                    </button>
                                </div>
                    
                               
                            </div>
                                                                       
					</section>
					<!-- Step 2 -->
					
			
			
			</div>
			<!-- /.box-body -->
		  </div>
		  <!-- /.box -->

		

	
		<!-- /.content -->
	  </div>
  </div>
  <!-- /.content-wrapper -->
  

  <!-- Control Sidebar -->
 
  <!-- /.control-sidebar -->
  
  <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
	
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>

  <!-- /.content-wrapper -->
<script>
// Initialize Signature Pad for the first signature
var canvas1 = document.getElementById('sig1Canvas');
var signaturePad1 = new SignaturePad(canvas1, {
    backgroundColor: 'rgb(255, 255, 255)', // Background color of the canvas
    penColor: 'rgb(0, 0, 0)' // Pen color
});

// Sync signature data with textarea for the first signature
signaturePad1.onEnd = function() {
    var signatureData = signaturePad1.toDataURL();
    $('#signature64').val(signatureData);
};

// Initialize Signature Pad for the second signature
var canvas2 = document.getElementById('sig2Canvas');
var signaturePad2 = new SignaturePad(canvas2, {
    backgroundColor: 'rgb(255, 255, 255)', // Background color of the canvas
    penColor: 'rgb(0, 0, 0)' // Pen color
});

// Sync signature data with textarea for the second signature
signaturePad2.onEnd = function() {
    var signatureData = signaturePad2.toDataURL();
    $('#signature2').val(signatureData);
};

// Clear signatures
$('#clear').click(function(e) {
    e.preventDefault();
    signaturePad1.clear();
    $('#signature64').val(''); // Clear signature data in textarea
});

$('#clear2').click(function(e) {
    e.preventDefault();
    signaturePad2.clear();
    $('#signature2').val(''); // Clear signature data in textarea
});

</script>

  <!-- <script type="text/javascript">
    // First Signature Section
    var sig1 = $('#sig').signature({syncField: '#signature64', syncFormat: 'PNG'});
    $('#clear').click(function(e) {
        e.preventDefault();
        sig1.signature('clear');
        $("#signature64").val('');
    });

    // Second Signature Section
    var sig2 = $('#sig2').signature({syncField: '#signature2', syncFormat: 'PNG'});
    $('#clear2').click(function(e) {
        e.preventDefault();
        sig2.signature('clear');
        $("#signature2").val('');
    });
  
</script>	 -->
  
	 <!-- Vendor JS -->
     <script src="{{asset('assets/js/vendors.min.js')}}"></script>
	<script src="{{asset('assets/js/pages/chat-popup.js')}}"></script>
    <script src="{{asset('assets/icons/feather-icons/feather.min.js')}}"></script>	
	<script src="{{asset('assets/vendor_components/select2/dist/js/select2.full.js')}}"></script>
	<script src="{{asset('assets/vendor_plugins/input-mask/jquery.inputmask.js')}}"></script>
	<script src="{{asset('assets/vendor_plugins/input-mask/jquery.inputmask.date.extensions.js')}}"></script>
	<script src="{{asset('assets/vendor_plugins/input-mask/jquery.inputmask.extensions.js')}}"></script>
	<!-- Joblly App -->
	<script src="{{asset('assets/js/template.js')}}"></script>
	<script src="{{asset('assets/js/pages/advanced-form-element.js')}}"></script>
  
    <script>

     

     

        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : event.keyCode
            if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
                return false;

            return true;
        }

    </script>

    <script>
        (function () {
            //country code for selected option
            let user_country_code = $("#country").data('country');
            let user_state_code = $("#state-code").data('state');
            let country_list = country_and_states['country'];
            let states_list = country_and_states['states'];

            // country name drop down
            let option = '';
            option += '<option value="">Select Country</option>';
            for (let country_code in country_list) {
                // set selected option user country
                let selected = (country_code == user_country_code) ? ' selected' : '';
                option += '<option value="' + country_code + '"' + selected + '>' + country_list[country_code] + '</option>';
            }
            document.getElementById('country').innerHTML = option;

            // state name drop down
            let text_box = '<input type="text" class="form-control" class="input-text" id="state">';
            let state_code_append_id = document.getElementById("state-code");

            function create_states_dropdown() {
                let country_code = document.getElementById("country").value;
                let states = states_list[country_code];
                // invalid country code or no states add textbox
                if (!states) {
                    state_code_append_id.innerHTML = text_box;
                    return;
                }
                let option = '';
                if (states.length > 0) {
                    option = '<select class="form-control" name="state" id="state" style="width:100%">\n';
                    for (let i = 0; i < states.length; i++) {
                        let selected_state = (states[i].name == user_state_code) ? ' selected' : '';
                        option += '<option value="' + states[i].name + '"' + selected_state + '>' + states[i].name + '</option>';
                    }
                    option += '</select>';
                } else {
                    // create input textbox if no states
                    option = text_box
                }
                state_code_append_id.innerHTML = option;
            }

            // country change event
            const country_select = document.getElementById("country");
            country_select.addEventListener('change', create_states_dropdown);

            create_states_dropdown();
        })();
    </script>
<!-- 
     <script src="http://localhost:8090/assets/js/jquery.min.js?ver=0.0.1"></script>

<script src="{{url('asset/js/sweetalert.min.js')}}"></script>
<script src="{{ asset('asset/plugins/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('asset/plugins/input-mask/jquery.inputmask.js') }}"></script>
    <script src="{{asset('assets/vendor_plugins/input-mask/jquery.inputmask.date.extensions.js')}}"></script> -->

<script>
  $(document).ready(function ()
  {
    setTimeout(function() {
        $('.alert').fadeOut('fast');
    }, 3000);
    
    $('.phone_number').inputmask("(999) 999-9999");
    //$('#datatable').DataTable();
  });
</script>

 <script>
    j=1;
      
         function myFunction(val)
         {
            var clientId = <?php echo $clientId;?>;
             $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              });
               jQuery.ajax({
                  url: "{{ url('/types/post') }}",
                  method: 'post',
                  data: {
                     type: jQuery('#type_'+val).val(),clientId:clientId
                  },
                  success: function(result){
                    var length = result.values.length;

                    var option='';

                    for(i=0;i<length;i++)
                    {
                        option +="<option value='"+result.values[i]+"'>"+result.values[i]+"</option>";
                    }


                    $("#select_option_show_"+val).show();
                    $("#select_option_"+val).html(option);
                    $('#div_'+val).removeClass("col-4");

                    $('#div_'+val).addClass("col-2");

                  
                  }});
         }
 // }//);
    
</script>
<script>
    // Example JavaScript to toggle active state
    document.getElementById('onlineAppBtn').addEventListener('click', function() {
        this.classList.toggle('btn-primary');
        this.classList.toggle('btn-secondary');
    });

    document.getElementById('submittedBtn').addEventListener('click', function() {
        this.classList.toggle('btn-primary');
        this.classList.toggle('btn-secondary');
    });

    document.getElementById('underReviewBtn').addEventListener('click', function() {
        this.classList.toggle('btn-primary');
        this.classList.toggle('btn-secondary');
    });
</script>
<script>
  $(document).ready(function ()
  {
    setTimeout(function() {
        $('.box-comment').fadeOut('fast');
    }, 3000);
    
    $('.phone_number').inputmask("(999) 999-9999");
    //$('#datatable').DataTable();
  });
</script>
<script>
        document.addEventListener('DOMContentLoaded', function() {
            const checkbox = document.getElementById('basic_checkbox_1');
            const secondOwnerDiv = document.getElementById('show_second_owner');
            const secondOwnerFields = document.querySelectorAll('.second-owner-field');

            // Function to toggle required attribute
            function toggleRequired(isRequired) {
                secondOwnerFields.forEach(function(field) {
                    if (isRequired) {
                        field.setAttribute('required', 'required');
                    } else {
                        field.removeAttribute('required');
                    }
                });
            }

            // Initially hide the second owner div and remove required attribute if the checkbox is not checked
            if (!checkbox.checked) {
                secondOwnerDiv.style.display = 'none';
                toggleRequired(false);
            }

            // Add event listener to toggle visibility and required attribute
            checkbox.addEventListener('change', function() {
                if (checkbox.checked) {
                    secondOwnerDiv.style.display = 'block';
                    toggleRequired(true);
                } else {
                    secondOwnerDiv.style.display = 'none';
                    toggleRequired(false);
                }
            });
        });
    </script>
</body>

<!-- Mirrored from joblly-admin-template-dashboard.multipurposethemes.com/bs5/main/forms_wizard.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 20 Jul 2023 04:59:29 GMT -->
</html>