@extends('layouts.app')

@section('title', 'Abstractor')
@section('content')
<div class="container-fluid mt-1">
    @include('settings.common_tabs')
        <div class="col-lg-12">
            <div class="card ">
            	
	                <div class="card-body">
	                	 <div class="row col-lg-12 pl-4">

                            <h5 class="modal-title" id="exampleModalLabel">
                                <a href="{{ route('abstractor_master_view') }}" style="text-decoration:none;" data-toggle="tooltip" data-placement="top" title="Go Back">
                                        <img class="mensuicon" src="{{asset('app-assets/assets/images/backs.png')}}" style="width:1.3rem;height:1.3rem;margin-right: 10px;">
                                </a>Add Abstractors </h5>
                        </div>
                        <div class="card p-2 card_top_orenge " >
	                    <div class="p-0">
	                    	
	                        	<form method="post" name="addAbstractorForm" id="addAbstractorForm" role="form" enctype="multipart/form-data" autocomplete="off" data-parsley-validate>
	           					 @csrf
			                        <div class="card-body">
					                    <div class="row">
					                        <div class="col-lg-4">
					                            <label for="name-input" class="col-form-label">Abstractor Name<span class="text-danger"> * <span></label>
					                            <input required name="abstractor_name" value="" id="abstractor_name" type="text" class="form-control" placeholder="Enter Abstractor Name" required data-parsley-trigger="keyup"  />
					                        </div>
					                        <div class="col-lg-4">
					                            <label for="address-input" class="col-form-label">Address</label>
					                            <input name="address" value="" id="address" type="text" class="form-control" placeholder="Enter Customer Address" />
					                        </div>
					                        <div class="col-lg-4">
					                            <label for="city-input" class="col-form-label">City</label>
					                            <input name="city" value="" id="city" type="text" class="form-control" placeholder="Enter City" data-parsley-trigger="keyup"  />
					                        </div>
					                    </div>
					                    <div class="row mt-1">
					                        <div class="col-lg-4">
					                            <label for="state_select" class="col-form-label"> State</label>
					                            <select class="form-control" name="state" id="state">
					                                <option value="">Select State</option>
					                                @foreach($states as $state)
					                                    <option value="{{ $state->id }}">{{ $state->short_code }}</option>
					                                @endforeach
					                            </select>
					                        </div>
					                        <div class="col-lg-4">
					                            <label for="zip-input" class="col-form-label">Zip</label>
					                            <input name="zip" value="" id="zip" type="text" class="form-control" placeholder="Enter Zip"  data-parsley-trigger="keyup" data-parsley-type-message ="This value should be a valid number" />
					                        </div>
					                        <div class="col-lg-4">
					                            <label for="phone-no-input" class="col-form-label"> Contact Number </label>
					                            <input name="contact_no" id="contact_no" type="text" value="" class="form-control" placeholder="Enter Contact Number" data-parsley-type="number" data-parsley-minlength="10" data-parsley-maxlength="15" data-parsley-trigger="change" data-parsley-minlength-message="This value should have minimum 10 characters" data-parsley-maxlength-message="This value should have maximum 15 characters" />
					                        </div>
					                    </div>
					                    <div class="row mt-1">
					                        <div class="col-lg-4">
					                            <label for="email-input" class="col-form-label"> Email Id </label>
					                            <input name="email_id" id="email_id" type="text" class="form-control" placeholder="Enter Email Id" data-parsley-type="email" data-parsley-trigger="keyup" />
					                        </div>
					                        <div class="col-lg-4">
					                            <label for="email-input" class="col-form-label"> Status <span class="text-danger"> * <span> </label>
					                            <select required class="form-control" name="status" id="status">
					                                <option value="" selected disabled>Select Status</option>
					                                <option value="1" >Onboarded</option>
					                                <option value="2" >In Progress</option>
					                                <option value="3" >On Hold</option>
					                                <option value="4" >Rejected</option>
					                            </select>
					                        </div>
					                        <div class="col-lg-4">
					                            <label for="active-input" class="col-form-label">Is Active ?</label><br>
					                            <input type="checkbox" id="is_active" name="is_active" value="1" checked>
					                        </div>
					                    </div>
					                </div>
					                <div class="card-footer text-right">
					                    <button type="button" class="btn btn-danger" onclick="get_back()">Close</button>
					                    <input type="button" value="Submit" name="submit" id="submit" class="btn btn-primary" onclick="saveAbstractorMaster();">
					                </div>
					            </form>
	                    	</div>
	                    </div>
		                    <div class="card">
		                    	<div class="card-header">Contact Detail</div>
		                    	<form id="contactForm" name="contactForm" method="post" role="form" enctype="multipart/form-data">
    							@csrf  
		                        <div class="card-body">
		                        	
                                     <div class="row news" id="1"> 
			                            <div class="col-lg-2">
		                                    <label for="name-input" class="col-form-label">First Name<span class="text-danger"> * </span></label>
		                                  
			                            </div>
			                            <div class="col-lg-2">
		                                    <label for="name-input" class="col-form-label">Last Name<span class="text-danger">  </span></label>
		                                    
			                            </div>  
			                            <div class="col-lg-2">
		                                    <label for="name-input" class="col-form-label">Contact Number<span class="text-danger"> * </span></label>
		                                    
			                            </div>
			                            <div class="col-lg-2">
			                               <label for="name-input" class="col-form-label">Email<span class="text-danger"> * </span></label>
			                              
			                            </div> 
			                            <div class="col-lg-3">
					                       <label for="name-input" class="col-form-label">Description<span class="text-danger">  </span></label>
										  
						                </div>
						                <div class="col-lg-1">

					                		
						                </div>	                            
			                        </div>
			                        <div class="row"> 
			                            <div class="col-lg-2">
		                                   
		                                    <input id="firstname" name="firstname[1][]" type="text" class="form-control" autocomplete="off" placeholder="Enter First Name"  required data-parsley-trigger="focusout" data-parsley-trigger="keyup" >
			                            </div>
			                            <div class="col-lg-2">
		                                   
		                                    <input id="lastname" name="lastname[1][]" type="text" class="form-control" autocomplete="off" placeholder="Enter Last Name"  data-parsley-trigger="focusout" data-parsley-trigger="keyup" >
			                            </div>  
			                            <div class="col-lg-2">
		                                  
		                                    <input required data-parsley-type="number" data-parsley-trigger="change" data-parsley-minlength="10" data-parsley-maxlength="15" data-parsley-minlength-message="This value should have minimum 10 characters" data-parsley-maxlength-message="This value should have maximum 15 characters" 
			                                        id="contact_no" name="contact_no[1][]" type="text" class="form-control" autocomplete="off" placeholder="Enter Contact Number" >
			                            </div>
			                            <div class="col-lg-2">
			                              
			                                <input id="email" name="email[1][]" type="email" class="form-control" autocomplete="off" placeholder="Enter Email" required data-parsley-type="email" data-parsley-trigger="focusout" data-parsley-checkemail>
			                            </div> 
			                            <div class="col-lg-3">
					                      
										   <textarea type="text" name="description[1][]" id="description" class="form-control" placeholder="Enter Description" rows="1"></textarea>
						                </div>
						                <div class="col-lg-1">

					                		 <span onclick="newDivAdd()"   style="cursor:pointer;padding: 0.01rem 0.5rem;color: #21b321;"><strong><i class="fa-solid fa-square-plus fa-2x"></i></strong></span>
						                </div>	                            
			                        </div>
			                        <div class="">
                                        
                                        <div class="newdivrows">
                                        </div>
                                    </div>
			                    </div>
			                    <div class="card-footer text-right">
								    <button type="button" class="btn btn-danger" data-dismiss="modal" disabled="">Close</button>
							        <button type="button" class="btn btn-primary" name="submit" id="submit" onclick="contactVal();" disabled="">Submit</button>
							    </div>
							</form>
		                    </div>
		                    <div class="card">
		                    	<div class="card-header">Abstractor Document</div>
		                        <div class="card-body">
			                        <div class="row mt-1">
			                            <div class="col-lg-3">
			                            	<label for="name-input" class="col-form-label">Document Type</label>
			                            </div>
			                            <div class="col-lg-3">
			                            	<label for="name-input" class="col-form-label">Document</label>
			                            </div><div class="col-lg-3">
			                            	<label for="name-input" class="col-form-label">Effective Date</label>
			                            </div><div class="col-lg-3">
			                            	<label for="name-input" class="col-form-label">Validity<span class="text-danger"> * </span></label>
			                            </div>
			                            <div id="checkbox-errors" class="h4 text-center" style=""></div>
			                        </div>
			                        @forelse($doc_list as $d_list)
			                        <div class="row mt-1">
			                            <div class="col-lg-3">
			                           		<label for="name-input" class="col-form-label">{{ $d_list->document_name }}</label>
			                            </div>
			                            <div class="col-lg-3">

			                                 <input id="document_{{ $d_list->id }}" name="document[{{ $d_list->id }}][]" type="file" class="form-control infld" accept=".pdf," data-parsley-trigger="keyup"     >
			                            </div>
			                            <div class="col-lg-3">

			                                <input id="effective_date" name="effective_date_{{ $d_list->id }}" type="date" class="form-control" value="">
			                            </div>
			                            <div class="col-lg-3">

			                                <input id="valid_date" name="valid_date_{{ $d_list->id }}" type="date" class="form-control" value="">
			                            </div>
			                        </div>
			                        @empty
			                        @endforelse
			                        <div class="row mt-1">
				                        <div class="col-lg-4">
				                            <label for="active-input" class="col-form-label">Is Active ?</label>&nbsp;
				                            <input type="checkbox" id="is_active" name="is_active" value="1" checked>
				                        </div>
				                    </div>
			                	</div>
			                    <div class="card-footer text-right">
								    <button type="button" class="btn btn-danger" data-dismiss="modal" disabled="">Close</button>
							        <button type="button" class="btn btn-primary" name="submit" id="submit" onclick="contactVal();" disabled="">Submit</button>
							    </div>
	                    	</div>
	                    </div>

	                	</div>
	            	</div>
	            	
	            
        	</div>
        </div>
</div>
<script type="text/javascript">
$(function() {
    @if(Session::has('success'))
    new PNotify({
    title: 'Success',
    delay: 500,
    text:  "{{Session::get('success')}}",
    type: 'success'
    });
            
    @endif
    @if ($errors->any())
    var err = "";
    @foreach ($errors->all() as $error)
    
        new PNotify({
        title: 'Error',
        text: "{{$error}}",
        delay: 800,
        type: 'error'
        });
        @endforeach
    @endif
});
$(document).ready(function() {
	$(".odtabs").not("#tab5").addClass('btn-outline-secondary');
	$("#tab5").addClass('btn-secondary');

    $('.modal').on('hidden.bs.modal', function() {
        $(this).find('form')[0].reset();
        $(this).find('form').parsley().reset();
    });

    window.ParsleyValidator
        .addValidator('fileextension', function (value, requirement) {
            var tagslistarr = requirement.split(',');
            var fileExtension = value.split('.').pop();
            var arr=[];
            $.each(tagslistarr,function(i,val){
            arr.push(val);
            });
            if(jQuery.inArray(fileExtension, arr)!='-1') {
                return true;
            } else {
                return false;
            }
        }, 32)
        .addMessage('en', 'fileextension', 'The extension doesn\'t match the required');
		$("form").parsley();

   
   
});
function saveAbstractorMaster() 
{
    if ($("#addAbstractorForm").parsley()) {
        if ($("#addAbstractorForm").parsley().validate()) {
            event.preventDefault();
            if ($("#addAbstractorForm").parsley().isValid()) {
                $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ route('abstractor_master_add') }}",
                    data: new FormData($("#addAbstractorForm")[0]),
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        new PNotify({
                            title: 'Success',
                            text:  response.msg,
                            type: 'success'
                        });
                        console.log( response.id);

                        // setTimeout(function(){  location.reload(); }, 800);
                        window.location.href = '/update_abstractor/' + response.id;
                    },
                    error:function(response) {
                        var err = "";
                        $.each(response.responseJSON.errors,function(field_name,error){
                            err = err +'<br>' + error;
                        });
                        new PNotify({
                            title: 'Error',
                            text:err,
                            type: 'error',
                            delay: 2000
                        });
                    }
                });
            }
        }
    }
}

function newDivAdd()
{
	var len = $('.news').length;
	
    if(len != 0)
    {
    	var len = $('.news:last').attr("id");
    }
    var newcnt = ++len;
	
	var conten =' <div class="row news mt-2 newRow'+newcnt+'"   id="'+newcnt+'"> \
                    <div class="col-lg-2">\
  						<input id="firstname" name="firstname['+newcnt+'][]" type="text" class="form-control" autocomplete="off" placeholder="Enter First Name"  required data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">\
                    </div>\
                    <div class="col-lg-2">\
                        <input id="lastname" name="lastname['+newcnt+'][]" type="text" class="form-control" autocomplete="off" placeholder="Enter Last Name"  data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">\
                    </div>  \
                    <div class="col-lg-2">\
                        <input required data-parsley-type="number" data-parsley-trigger="change" data-parsley-minlength="10" data-parsley-maxlength="15" data-parsley-minlength-message="This value should have minimum 10 characters" data-parsley-maxlength-message="This value should have maximum 15 characters" id="contact_no" name="contact_no['+newcnt+'][]" type="text" class="form-control" autocomplete="off" placeholder="Enter Contact Number" >\
                    </div>\
                    <div class="col-lg-2">\
                        <input id="email" name="email['+newcnt+'][]" type="email" class="form-control" autocomplete="off" placeholder="Enter Email" required data-parsley-type="email" data-parsley-trigger="focusout" data-parsley-checkemail>\
                    </div>\
                    <div class="col-lg-3">\
					   <textarea type="text" name="description['+newcnt+'][]" id="description" class="form-control" placeholder="Enter Description" rows="1"></textarea>\
	                </div>\
	                <div class="col-lg-1">\
	                <span onclick="newDivAdd()"   style="cursor:pointer;padding: 0.01rem 0.5rem;color: #21b321;"><strong><i class="fa-solid fa-square-plus fa-2x"></i></strong></span>\
	                <span onclick="newDivRemove('+newcnt+')"  style="cursor:pointer; padding: 0.01rem 0.5rem; color:#d42d2d;" ><strong><i class="fa-solid fa-square-minus fa-2x"></i></strong></span>\
	                </div> \
                </div>';
    $('.newdivrows').append(conten);
             
}
function newDivRemove(cnt)
{
	$(".newRow"+cnt).remove();
}
function contactVal()
{
    if ($("#contactForm").parsley()) 
    {
        if ($("#contactForm").parsley().validate()) {
            event.preventDefault();
            if ($(contactForm).parsley().isValid()) {
                $.ajax({	
                type: "POST",
                cache:false,
                async: false,
                url: "{{ url('/contactInsert') }}",
                data: new FormData($("#contactForm")[0]),
                processData: false,
                contentType: false,
                success: function(response) {
					if(response.msg=="Abstractor Contacts Added Successfully!"){
                        new PNotify({
                        title: 'Success',
                        text:  response.msg,
                        type: 'success'
                        });
                        setTimeout(function(){  location.reload(); }, 1000);
                    } else {
						new PNotify({
                        title: 'Error',
                        text:  response.msg,
                        type: 'error'
                        });
						return false;
					}
                },
                error:function(response) {
                    var err = "";
                    $.each(response.responseJSON.errors,function(field_name,error){
                        err = err+error;
                    });
                    new PNotify({
                        title: 'Error',
                        text:err,
                        type: 'error',
                        delay: 1000
                    });
                }
                });
            }
        }
    }
}
function get_back()
{
	 window.location.href = '/settings/abstractormaster';
}
</script>
@endsection