@extends('layouts.app1')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
@section('content')
<div class="right_col" role="main">
	@include('flashmessage')
    <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>Create Agent</h3>
              </div>
			</div>
            <div class="clearfix"></div>
			<div class="panel-body"></div>
			<form action="agent_store" method="POST" enctype="multipart/form-data">
				@csrf
							<div class="col-md-6 col-sm-6 col-xs-12 text-left mt-2">
					<label for="psaname">PSA Name</label> <i class="fa fa-star" aria-hidden="true"></i>
					<input type="text" class="form-control" name="psaname" required>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12 text-left mt-2">
					<label for="location">PSA Location</label> <i class="fa fa-star" aria-hidden="true"></i>
					<input type="text" class="form-control" name="location"  required>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12 text-left mt-2">
					<label for="pincode">PSA Pincode</label> <i class="fa fa-star" aria-hidden="true"></i>
					<input type="text" class="form-control" name="pincode" required>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12 text-left mt-2">
					<label for="state">STATE</label> <i class="fa fa-star" aria-hidden="true"></i> 
						<select name="statename" id="statename" class="form-control" required>
						<option value="">Select State</option>
												
					</select>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12 text-left mt-2">
					<label for="phone1">PSA Phone1 </label> <i class="fa fa-star" aria-hidden="true"></i>
					<input type="number" class="form-control" name="phone1" required>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12 text-left mt-2">
					<label for="phone2">PSA Phone2 </label> <i class="fa fa-star" aria-hidden="true"></i>
					<input type="number" class="form-control" name="phone2"  required>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12 text-left mt-2">
					<label for="emailid">PSA Email Id</label> <i class="fa fa-star" aria-hidden="true"></i>
					<input type="email" class="form-control" name="emailid" required>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12 text-left mt-2">
					<label for="panNumber">PSA Pan</label> <i class="fa fa-star" aria-hidden="true"></i>
					<input type="text" class="form-control" name="panNumber" required>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12 text-left mt-2">
					<label for="pandob">PSA Dob</label> <i class="fa fa-star" aria-hidden="true"></i>
					<input type="date" class="form-control" name="pandob" required>
				</div>
				
				<div class="col-md-6 col-sm-6 col-xs-12 text-left mt-2">
					<label for="aadhar">PSA Adhaar</label> <i class="fa fa-star" aria-hidden="true"></i>
					<input type="text" class="form-control" name="aadhar" required>
				</div>
				
				<div class="col-md-6 col-sm-6 col-xs-12 text-left mt-2">
					<label for="city">District</label> <i class="fa fa-star" aria-hidden="true"></i>
					<select name="city" id="city" class="form-control"  required>
						
					</select>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12 text-left mt-2">
					<label for="name">Name</label> <i class="fa fa-star" aria-hidden="true"></i>
					<input type="text" class="form-control" name="name" required>
				</div>
				<div class="clearfix"></div>
				<div class="col-md-2 col-sm-2 col-xs-12 text-left mt-2">        
						<button class="btn btn-success btn-block" type="submit">Submit</button>
				</div>
		
					</form>
	
	</div>
</div>
<style>
.text-left{
    text-align: left;
}
.fa-star{
    color: red;
}
.mt-2{
    margin-top: 20px;
}
.page-header-fixed:not(.page-sidebar-fixed):not(.page-horizontal-bar) .page-inner{
    padding: 60px 0 70px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
</style>
<script type="text/javascript">
		jQuery(document).ready(function ()
		{
				jQuery('select[name="statename"]').on('change',function(){
				var stateId = jQuery(this).val();				
				// console.log(stateId);
				if(stateId)
				{
					jQuery.ajax({
						url : '/getSelectCity/' +stateId,
						type : "GET",
						dataType : "json",
						success:function(data)
						{
							// console.log(data);
							jQuery('select[name="city"]').empty();
							jQuery.each(data, function(key,value){
                                // console.log(value);
							    $('select[name="city"]').append('<option value="'+ value +'">'+ value +'</option>');
							});
						}
					});
				}
				else
				{
					$('select[name="city_id"]').empty();
				}
				});
		});
    </script>
@endsection