@extends('layouts.app')

@section('title', 'Abstractor')
@section('content')
<div class="container-fluid mt-1">
    @include('settings.common_tabs')
    <style type="text/css">
    	.right_btns{
    		width: 4% !important;
            text-align: right !important;
    	}
    </style>
        <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_product_mapping_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 Abstractor Mapping </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-3">
				                            <label for="abstractor_select" class="col-form-label"> Abstractor <span class="text-danger"> * </span></label>
				                             <select required class="form-control" name="abstractor_master_id" id="abstractor_master_id">
				                                <option value="">Select Abstractor</option>
				                                @foreach($abstractor_masters as $ab_master)
				                                    <option value="{{ $ab_master->id }}">{{ $ab_master->abstractor_name }}</option>
				                                @endforeach
				                            </select>
				                        </div>
				                        <div class="col-lg-3">
				                            <label for="product_select" class="col-form-label">Product Name<span class="text-danger"> * </span></label>
				                           	 <select required class="form-control" name="product_id" id="product_id">
				                                <option value="">Select Product</option>
				                                @foreach($products as $product)
				                                    <option value="{{ $product->id }}">{{ $product->product_name }}</option>
				                                @endforeach
				                            </select>
				                        </div>
				                   </div>
				                   <div class="d-flex">
					                   	<div class="row flex-grow-1">
					                       <div class="col-lg-2">
					                            <label for="state_select" class="col-form-label"> State <span class="text-danger"> * </span></label>
					                           
					                        </div>
					                        <div class="col-lg-3">
					                            <label for="county_select" class="col-form-label"> County <span class="text-danger"> * </span></label>
					                               
					                        </div>
					                        <div class="col-lg-1 ">
					                            <label for="eta-input" class="col-form-label"> Eta </label>
					                        </div>
					                        <div class="col-lg-2">
					                            <label for="abstract-cost-input" class="col-form-label"> Abstract Cost </label>
					                        </div>
						                   
					                        <div class="col-lg-2 ">
					                            <label for="copy-cost-input" class="col-form-label"> Copy Cost </label>
					                        </div>
						                    <div class="col-lg-1 text-center">
					                            <label for="active-input" class="col-form-label">Is Approved ?</label><br>
					                        </div> 
					                        <div class="col-lg-1 text-center">
					                            <label for="active-input" class="col-form-label">Is Active ?</label><br>
					                        </div>
					                        
					                    </div>
					                    <div class="ms-auto right_btns"> </div>
				                	</div>

				                    <div class="d-flex news newRow1" id='1' >
					                    <div class="flex-grow-1  ">
                                            <div class="row">
					                       <div class="col-lg-2">
					                            <select required class="form-control select2 get_county" data-id="1" name="state[1]" id="state1" >
					                                <option value="">Select State</option>
					                                @foreach($states as $state)
					                                    <option value="{{ $state->id }}">{{ $state->short_code }}</option>
					                                @endforeach
					                            </select>
					                        </div>
					                        <div class="col-lg-3">
					                            <select required class="form-control select2 cunty" name="county[1][]" id="county1" multiple="" row='1'>
					                                <option value="">Select County</option>
					                               
					                            </select>
					                        </div>
					                        <div class="col-lg-1">
					                            <input autocomplete="off"  name="eta[1]" id="eta" type="text" class="form-control" placeholder="Enter Eta" data-parsley-type="number" data-parsley-trigger="change" />
					                        </div>
					                        <div class="col-lg-2">
					                                <input name="abstract_cost[1]" id="abstract_cost" type="text" value="" class="form-control" placeholder="Enter Abstract Cost" data-parsley-type="number" data-parsley-trigger="change"/>
					                        </div>
						                   
					                        <div class="col-lg-2">
					                                <input name="copy_cost[1]" id="copy_cost" type="text" value="" class="form-control" placeholder="Enter Copy Cost" data-parsley-type="number" data-parsley-trigger="change" />
					                        </div>
						                    <div class="col-lg-1 text-center">
					                            <input type="checkbox" id="is_approved" name="is_approved[1]" value="1" checked>
					                        </div> 
					                        <div class="col-lg-1 text-center">
					                            <input type="checkbox" id="is_active" name="is_active[1]" value="1" checked>
					                        </div>
					                       </div>
					                    </div>
					                    <div class="ms-auto right_btns"> 
					                    	<span onclick="newDivAdd()"   style="cursor:pointer;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" onclick="get_back()">Close</button>
				                    <input type="button" value="Submit" name="submit" id="submit" class="btn btn-primary" onclick="saveAbsMapping();">
				                </div>
				            </form>
                    	</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("#tab11").addClass('btn-outline-secondary');
	$("#tab11").addClass('btn-secondary');



});

function saveAbsMapping() 
{
    if ($("#addAbstractorForm").parsley()) {
        if ($("#addAbstractorForm").parsley().validate()) {
            event.preventDefault();
            if ($("#addAbstractorForm").parsley().isValid()) {
                $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ route('abstractor_product_mapping_add') }}",
                    data: new FormData($("#addAbstractorForm")[0]),
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if(response.msg=="Abstractor Already Exists!"){
                        new PNotify({
                            title: 'Error',
                            text:  response.msg,
                            type: 'error',
                            delay: 1000
                        });
                        return false;
                        } else {
                            new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                            });
                            // setTimeout(function(){  location.reload(); }, 800);
                            get_back();
                        }
                    },
                    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;
	// $("#row_count").val(len);
    if(len != 0)
    {
    	var len = $('.news:last').attr("id");
    }
    var newcnt = ++len;
	
	var conten =' <div class="d-flex  newRow'+newcnt+' news " id="'+newcnt+'"><div class="flex-grow-1  "  > <div class="row mt-1">\
               <div class="col-lg-2">\
                   <select required class="form-control select2 get_county " name="state['+newcnt+']" id="state" data-id="'+newcnt+'" >\
                                <option value="">Select State</option>\
                                @foreach($states as $state)\
                                    <option value="{{ $state->id }}">{{ $state->short_code }}</option>\
                                @endforeach\
                            </select>\
                        </div>\
                        <div class="col-lg-3">\
                            <select required class="form-control select2 cunty" name="county['+newcnt+'][]" id="county'+newcnt+'" multiple="" row="1">\
                                <option value="">Select County</option>\
                            </select>\
                        </div>\
                        <div class="col-lg-1">\
                            <input autocomplete="off"  name="eta['+newcnt+']" id="eta" type="text" class="form-control" placeholder="Enter Eta" data-parsley-type="number" data-parsley-trigger="change" />\
                        </div>\
                        <div class="col-lg-2">\
                                <input name="abstract_cost['+newcnt+']" id="abstract_cost" type="text" value="" class="form-control" placeholder="Enter Abstract Cost" data-parsley-type="number" data-parsley-trigger="change"/>\
                        </div>\
                        <div class="col-lg-2">\
                                <input name="copy_cost['+newcnt+']" id="copy_cost" type="text" value="" class="form-control" placeholder="Enter Copy Cost" data-parsley-type="number" data-parsley-trigger="change" />\
                        </div>\
                        <div class="col-lg-1 text-center">\
                            <input type="checkbox" id="is_approved" name="is_approved['+newcnt+']" value="1" checked>\
                        </div>\
                        <div class="col-lg-1 text-center">\
                            <input type="checkbox" id="is_active" name="is_active['+newcnt+']" value="1" checked>\
                        </div>\
                    </div></div>\
                    <div class="ms-auto right_btns"><span onclick="newDivAdd()"   style="cursor:pointer;color: #21b321;"><strong><i class="fa-solid fa-square-plus fa-2x"></i></strong></span>\
                        	  <span onclick="newDivRemove('+newcnt+')"  style="cursor:pointer;  color:#d42d2d;" ><strong><i class="fa-solid fa-square-minus fa-2x"></i></strong></span>\</div>';
    $('.newdivrows').append(conten);
	$( '.select2' ).select2( );
 //     var cnt = $('.news').length;
	// $("#row_count").val(cnt);        
}
function newDivRemove(cnt)
{
	$(".newRow"+cnt).remove();
	
}


$(document).on('change', '.get_county', function() 
{
  
  		var stateid = $(this).val();
  		var rowid = $(this).data('id');
	    var url = '{{ route("getcounty") }}';
	    $.ajax({
	        type: "post",
	        url: url,
	        data: { stateid:stateid , _token: '{{csrf_token()}}'},
	        success: function(html)
	        {
	            if (html)
	            {
	            	// console.log("#county"+rowid);
	                $("#county"+rowid).html("");
	                $("#county"+rowid).html(html);
	               
	            }
	        }
	    });

});
$(document).on('select2:select', '.cunty', function(e) 
{
    // $('.cunty').on("select2:select", function (e) {
   var data = e.params.data.text;  
   var drop_nm = $(this).attr("id");
   console.log(drop_nm);
   if(data=='All')
   {
        $("#" + drop_nm + " > option").prop("selected",false);
        // $("#" + drop_nm + " > option").prop("selected","selected");
        $("#" + drop_nm +" option[value='all']").prop('selected', true);
        $("#" + drop_nm).trigger("change");
   }
   else
   {
        $("#" + drop_nm +' option[value="all"]').prop('selected', false);
        $("#" + drop_nm).trigger("change");
     
   }

});

function get_back()
{
    window.location.href = '/settings/abstractorproductmapping';
}
</script>
@endsection