@extends('layouts.app')
@section('title', 'Client Product Cost')
@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="col-lg-12">
			<div class="card ">
				<div class="row col-lg-12 pl-4">

                    <h5 class="modal-title" id="exampleModalLabel">
                        <a href="{{ route('client_product_cost') }}" 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 Client Product Cost
                    </h5>
                </div>
                <div class="card p-2 card_top_orenge " >
                	<div class="card-body">
	                    <form method="post" id="addcostfrm" name="addcostfrm"  data-parsley-validate data-parsley-trigger="keyup">
							@csrf
			                <div class="row">
								<div class="col-lg-4">
									<label for="client_select" class="col-form-label"> Client <span class="text-danger"> * </span></label>
									<select required class="form-control" name="client_id" id="client_id">
										<option value="">Select Client</option>
										@forelse($getClients as $client_list)
											<option value="{{$client_list->id}}"> {{$client_list->client_name}}</option>
										@empty
										@endforelse
									</select>
								</div>
								<div class="col-lg-4">
									<label for="company_select" class="col-form-label"> Product <span class="text-danger"> * </span></label>
									<select required class="form-control" name="product_id" id="product_id">
										<option value="">Select Product</option>
										@forelse($getProducts as $product_list)
										<option value="{{$product_list->id}}"> {{$product_list->product_name}}</option>
										@empty
										@endforelse
									</select>
								</div>
								<div class="col-lg-4">
									<label for="name-input" class="col-form-label">Cost<span class="text-danger"> * <span></label>
									<input id="cost" name="cost" class="form-control" autocomplete="off" placeholder="Enter Cost" required data-parsley-trigger="focusout">
								</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 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($getStates 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 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="newdivrows"></div>
						
						</form>
					</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="costStore();">
                	</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("#tab19").addClass('btn-outline-secondary');
    $("#tab19").addClass('btn-secondary');      
});



$(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('change','#product_id',function()
// {
// 	var product_id = $(this).val();
// 	var client_id = $("#client_id").val();
// 	 $.ajax({
//             type:'post',
//            	url:"{{ route('get_client_product_cost_list')}}",
//            	data :{'product_id':product_id ,'client_id':client_id ,_token: '{{csrf_token()}}'},

//            success:function(data)
//            {
//                 $('#dataa').html(data);
//             }
//         });


// });

function costStore() { 
	if ($("#addcostfrm").parsley()) {
        if ($("#addcostfrm").parsley().validate()) {
            event.preventDefault();
            var formData = new FormData($("#addcostfrm")[0]);
            if ($(addcostfrm).parsley().isValid()) {
				$.ajax({	
					type: "POST",
					cache:false,
					async: false,
					url: "{{ url('/client_product_costInsert') }}",
					data: formData,
					processData: false,
					contentType: false,
					success: function(response) {
                        if(response.msg=="Cost 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 news newRow'+newcnt+'" 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" data-id="'+newcnt+'" name="state['+newcnt+']" id="state'+newcnt+'" >\
	                    <option value="">Select State</option>\
	                    @foreach($getStates 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 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>\
		</div>';
	$('.newdivrows').append(conten);
	$( '.select2' ).select2( );
}
$(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");
   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/client_product_cost';
}
function newDivRemove(cnt)
{
	$(".newRow"+cnt).remove();
}
</script>
@endsection