@extends('admin.layout.master')

@section('content')

<div class="app-content  my-3 my-md-5">
		<div class="side-app">
			<div class="page-header">
				<h4 class="page-title">Add New Client</h4>
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{route('admin.clientList')}}">Client</a></li>
					<li class="breadcrumb-item active" aria-current="page">Add New Client</li>
				</ol>

			</div>
			<div class="row ">
				
				<div class="col-lg-12">
					<form class="card" method="post" action="{{ route('admin.addClient')}}" onsubmit="return clientAdd()">
						@csrf
						<div class="card-header">
							<h3 class="card-title">Add New Client</h3>
						</div>
						<div class="card-body">
							<div class="row">


								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Company Name*</label>
										<span><p id="cnamecheck" style="color: red; display: none;">  </p></span>

										<select class="form-control" name="cname" id="cname">
											<option value="">--Select--</option>
											@foreach($com as $val)
											<option value="{{$val->id}}">{{$val->company_name}}</option>
											@endforeach
										</select>
									</div>
								</div>

								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">First Name*</label>
										<span><p id="fnamecheck" style="color: red; display: none;">  </p></span>
										<input type="text" class="form-control" name="fname" id="fname">
									</div>
								</div>
								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Last Name*</label>
										<span><p id="lnamecheck" style="color: red; display: none;">  </p></span>
										<input type="text" class="form-control" name="lname" id="lname">
									</div>
								</div>

								

								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Contact Number*</label>
										<span><p id="contactcheck" style="color: red; display: none;">  </p></span>
										<input type="text" class="form-control" name="contact" id="contactnumber">
									</div>
								</div>
								
								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Email Address*</label>
										<span><p id="emailcheck" style="color: red; display: none;">  </p></span>
										<input type="email" class="form-control" name="email" id="emailid">
									</div>
								</div>
								
								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Password*</label>
										<span><p id="pwordcheck" style="color: red; display: none;">  </p></span>
										<input type="password" class="form-control" name="pword" id="pword">
									</div>
								</div>
								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Confirm Password*</label><span><p id="cpwordcheck" style="color: red; display: none;">  </p></span>
										<input type="password" class="form-control" name="cpword" id="cpword">
									</div>
								</div>
								<div class="col-md-12">
									<div class="form-group">
										<label class="form-label">Address*</label><span><p id="addrcheck" style="color: red; display: none;">  </p></span>
										<input type="text" class="form-control" name="addr" id="addr">
									</div>
								</div>
								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">City*</label>
										<span><p id="citycheck" style="color: red; display: none;">  </p></span>
										<input type="text" class="form-control" name="city" id="city">
									</div>
								</div>


								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">State</label>
										<span><p id="statecheck" style="color: red; display: none;">  </p></span>
										<input type="text" class="form-control" name="state" id="state">
									</div>
								</div>

								
								
								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">Country*</label>
										<span><p id="countrycheck" style="color: red; display: none;">  </p></span>
										<select class="form-control" name="country1" id="country">
											
											@foreach($country as $val)
											<option value="{{$val->id}}">{{$val->country_name}}</option>
											@endforeach
										</select>
									</div>
								</div>

								<div class="col-sm-6 col-md-3">
									<div class="form-group">
										<label class="form-label">Postal Code</label>
										<span><p id="zipcodecheck" style="color: red; display: none;">  </p></span>
										<input type="text" class="form-control" name="zipcode" id="zipcode">
									</div>
								</div>
								
							</div>
						</div>
						<div class="card-footer text-center">
							<button type="submit" class="btn btn-primary btn-lg custom-btn mr-2">Save</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('scripts')
<script type="text/javascript">
	
	function clientAdd() {
		
		var fname   = $('#fname').val();
		var lname   = $('#lname').val();
		var cname   = $('#cname').val();
		var contact = $('#contactnumber').val();
		var email   = $('#emailid').val();
		var pword   = $('#pword').val();
		var cword   = $('#cpword').val();
		var addr    = $('#addr').val();
		var city    = $('#city').val();
		var country = $('#country').val();

		
		if(cname == '')
		{
			$('#cnamecheck').show();
			$('#cnamecheck').html('** Please Fill This Field');
			setTimeout(function(){
				  $('#cnamecheck').hide();
				}, 2000);

			return false;
		}

		else if(fname == '')
		{
			$('#fnamecheck').show();
			$('#fnamecheck').html('** Please Fill This Field');
			setTimeout(function(){
				  $('#fnamecheck').hide();
				}, 2000);

			return false;
		}
		
		else if(lname == '')
		{
			$('#lnamecheck').show();
			$('#lnamecheck').html('** Please Fill This Field');
			setTimeout(function(){
				  $('#lnamecheck').hide();
				}, 2000);

			return false;
		}
		
		else if(contact == '')
		{
			$('#contactcheck').show();
			$('#contactcheck').html('** Please Fill This Field');
			setTimeout(function(){
				  $('#contactcheck').hide();
				}, 2000);

			return false;
		}

		else if(isNaN(contact))
		{
			$('#contactcheck').show();
			$('#contactcheck').html('** Please Enter Digits Only');
			setTimeout(function(){
				  $('#contactcheck').hide();
				}, 2000);

			return false;
		}

		else if(email == '')
		{
			$('#emailcheck').show();
			$('#emailcheck').html('** Please Fill This Field');
			setTimeout(function(){
				  $('#emailcheck').hide();
				}, 2000);

			return false;
		}

		else if(email.indexOf('@') <= 0)
		{
			$('#emailcheck').show();
			$('#emailcheck').html('** Please Enter Email Address Correctly');
			setTimeout(function(){
				  $('#emailcheck').hide();
				}, 2000);

			return false;
		}

		else if((email.charAt(email.length-4) != '.') && (email.charAt(email.length-3) != '.'))
		{
			$('#emailcheck').show();
			$('#emailcheck').html('** Please Insert Valid Email Address');
			setTimeout(function(){
				  $('#emailcheck').hide();
				}, 2000);

			return false;
		}

		else if(pword == '')
		{
			$('#pwordcheck').show();
			$('#pwordcheck').html('** Please Fill This Field');
			setTimeout(function(){
				  $('#pwordcheck').hide();
				}, 2000);

			return false;
		}

		else if(cword == '')
		{
			$('#cpwordcheck').show();
			$('#cpwordcheck').html('** Please Fill This Field');
			setTimeout(function(){
				  $('#cpwordcheck').hide();
				}, 2000);

			return false;
		}

		else if(cword != pword)
		{
			$('#cpwordcheck').show();
			$('#cpwordcheck').html('** Passwords Do Not Match');
			setTimeout(function(){
				  $('#cpwordcheck').hide();
				}, 2000);

			return false;
		}

		else if(addr == '')
		{
			$('#addrcheck').show();
			$('#addrcheck').html('** Please Fill This Field');
			setTimeout(function(){
				  $('#addrcheck').hide();
				}, 2000);

			return false;
		}

		else if(city == '')
		{
			$('#citycheck').show();
			$('#citycheck').html('** Please Fill This Field');
			setTimeout(function(){
				  $('#citycheck').hide();
				}, 2000);

			return false;
		}
		
		else if(country == '')
		{
			$('#fnameccountrycheckheck').show();
			$('#countrycheck').html('** Please Select Country From List');
			setTimeout(function(){
				  $('#countrycheck').hide();
				}, 2000);

			return false;
		}

		else
		{
			return true;
		}


	}

</script>
@endsection