<?php 

include ('../ro_head.php'); ?>

<!-- BEGIN PAGE LEVEL STYLES -->

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../assets/global/plugins/select2/select2.css"/>



<link rel="stylesheet" type="text/css" href="../assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css"/>
<link rel="stylesheet" type="text/css" href="../assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"/>
<!-- <link href="../assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" type="text/css"/> -->

<!-- END PAGE LEVEL STYLES -->

<!-- BEGIN THEME STYLES -->

<link href="../assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="../assets/global/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="../assets/admin/layout/css/layout.css" rel="stylesheet" type="text/css"/>
<link id="style_color" href="../assets/admin/layout/css/themes/darkblue.css" rel="stylesheet" type="text/css"/>
<link href="../assets/admin/layout/css/custom.css" rel="stylesheet" type="text/css"/>


<script>

$(function () {

    var counter=0;

    $("#btndependent").bind("click", function () {

    counter++;

    $.ajax({
	   url:'dependant.php?cn='+counter,
	   type:'GET',
	   success: function(data){
	      
	           var div = $("<tr />");
	          div.html(data);
	         //alert(data);
	          $("#dependentBoxContainer").append(div);
	   
	   		}
		});
   
	});


	$("body").on("click", ".dependantremove", function () {
        $(this).closest("tr").remove();
        counter--;

    });


    $('body').on('change','#qty,.dobb', function () {    	
    	
		var names = [];
		var qtyvalues = [];
		var age = [];

		//$("#qty").each(function() {
		$('input[id="qty"]').each(function() {
			//var val = $(this).val();
		    

		    if($(this).val()!=0){

		    	qtyvalues.push($(this).val());

				//$('input[id="qty"]').each(function() {
				    names.push($(this).attr("name"));
				//});		    	
		    }
		});

		$("select[id='visatype']").each(function() {
			//$('input.dobb').each(function() {
			//var val = $(this).val();
			
			
		    if($(this).val()!=''){

		    	age.push($(this).val());

				//$('input[id="qty"]').each(function() {
				    //names.push($(this).attr("name"));
				//});		    	
		    }
		});
    	//alert(myval);
	    $.ajax({
		   url:'val.php',
		    //data: ({name:myval}),
		   data: { name: names, qty: qtyvalues, ages: age},
		//   data: { qty: qtyvalues},
		   type:'POST',
		   success: function(data){
		      //alert(data);
		          //  var div = $("<tr />");
		           //div.html(data);
		           $("#box").html(data);
		   
		   }
		});
    });
    
});

$(function() {

	$('body').on('click', '#agstatus', function() {

       
       var i= $("input[name=agstatus]:checked").val();

        if(i==2) // equal to a selection option
         {
             $('#agentshow').show();
              $('#companyshow').hide();
         }
         if(i==3) // equal to a selection option
         {
             $('#agentshow').hide();
             $('#companyshow').show();
         }
         if(i==1 || i=="") // equal to a selection option
         {
             $('#agentshow').hide();
             $('#companyshow').hide();
         }
    });
});
$('body').on('change','#mainvisatype', function () {  

 	
 	var ask=$(this).val();
 	var $elem = $(this).closest('div').nextAll('div').first().find('select');
 	//$elem.css( "background-color", "red" );
 	//$elem.append('<option value="">- Select -</option>');
 	$.ajax({
	   url:'visatypelist.php',
	   data: ({vid:ask}),	   	
	    dataType: 'Json',
	   success: function(data){
	    
	          // $("div.visalistbox").html(data);
	           $elem.empty();
	          $elem.append('<option value="">- Select -</option>');
                $.each(data, function(key, value) {
                   $elem.append('<option value="'+ key +'">'+ value +'</option>');
                });
	   
	   }
	});
});
function checkForm(form)
  {
    //
    // validate form fields
    //

    form.myButton.disabled = true;
    return true;
  }
</script>

<style type="text/css">
	h4{
		font-size: 15px;
    font-weight: 500;
    border: 1px solid rgb(198, 222, 239);
    padding: 7px 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    background-color: aliceblue;
    }
    #pricebox{
		/*border: 1px solid #C6DEEF;*/
		background-color: #C6DEEF;
		padding: 15px 30px;
    	border-radius: 5px !important;
	}

	.theme-panel{
		display: none;
	}
	.page-title {
 
    font-size: 18px;
 
    font-weight: 500;
    padding: 10px 20px;
}

h3{
	background-color: #c6deef;
	padding: 10px 0px 10px 20px;
	font-size: 18px;
}

</style>


<!-- END THEME STYLES -->

<link rel="shortcut icon" href="favicon.ico"/>

</head>

<!-- END HEAD -->

<!-- BEGIN CONTAINER -->

<div class="page-container">

<?php include_once("../ro_sidebar.php"); ?>

	<!-- BEGIN CONTENT -->

	<div class="page-content-wrapper">

		<div class="page-content">


			<!-- BEGIN PAGE HEADER-->

			<h3 class="page-title">

			New Application

			</h3>
			<!-- END PAGE HEADER-->

			<!-- BEGIN PAGE CONTENT-->

			<div class="row">

				<div class="col-md-12">	


				<form name="addapplication" class="form-horizontal form-row-seperated" action="application_crud.php" method="post">	

							<!-- <div class="form-group">

                                <label class="col-md-2 control-label">
                                    Select Type: <span class="required">* </span>
                                </label>

                                <div class="col-md-3">
                                    <select name="biostatus" id="biostatus" class="form-control" required>
									  	<option value=""> - Select -</option>
									  	<option value="1"> Yes </option>
									  	<option value="0"> No </option>
									  </select>	 
									   <label class="radio-inline">
									      <input type="radio" name="agstatus" id="agstatus" value="1" checked="yes">General 
									    </label>
									    <label class="radio-inline">
									      <input type="radio" name="agstatus" id="agstatus" value="2">Agent
									    </label>
									    <label class="radio-inline">
									      <input type="radio" name="agstatus" id="agstatus" value="3">Company
									    </label>
                                </div>
                                <div id="agentshow" style="display:none;">
	                                <label class="col-md-2 control-label">
	                                    Agent Name: 
	                                </label>

	                                <div class="col-md-3">
	                                     <input type="text" class="form-control" name="agentname" placeholder="Agent name">
	                                </div>
                            	</div>
                            	<div id="companyshow" style="display:none;">
	                                <label class="col-md-2 control-label">
	                                    Company Name: 
	                                </label>

	                                <div class="col-md-3">
	                                     <input type="text" class="form-control" name="companyname" placeholder="Company name">
	                                </div>
                            	</div>

                            </div> -->

                            <div class="form-group">
							  	
								<label class="col-md-2 control-label">
									Service Category: <span class="required">* </span>
								</label>

								<div class="col-md-3">
									<select name="mainvisatype" id="mainvisatype" class="form-control" required>
									  	<option value=""> - Select -</option>
								
								<?php    
		                            $delrs = mysqli_query($con,"select * from main_visatype_table where mvisatype_status=1 order by mvisatype_name ASC");
                            		while($delrow=mysqli_fetch_array($delrs)){ 
                                
                                 	  	echo "<option value=".$delrow["mvisatype_id"]."> ".$delrow["mvisatype_name"]." </option>";
									  	
									} 
								?>	
									</select>	
                                
								</div>

								<label class="col-md-2 control-label">
									Service Type: <span class="required">* </span>
								</label>

								<div class="col-md-3">
									<select name="visatype" id="visatype" class="form-control dobb" required>
										<option value=""> - Select -</option>
									</select>															
                                
								</div>
							</div>	


       <!--                     <div class="form-group">-->
							  	
							<!--	<label class="col-md-2 control-label">-->
							<!--		Visa Category: <span class="required">* </span>-->
							<!--	</label>-->

							<!--	<div class="col-md-3">-->
							<!--		<select name="visatype" id="visatype" class="form-control dobb" required>-->
							<!--		  	<option value=""> - Select -</option>-->
								
							<?php    
		                       //     $delrs = mysqli_query($con,"select * from visatype_table where visatype_status=1 order by visatype_name ASC");
                            //		while($delrow=mysqli_fetch_array($delrs)){ 
                                
                               //  	  	echo "<option value=".$delrow["visatype_id"]."> ".$delrow["visatype_name"]." </option>";
									  	
							//		} 
							?>	
							<!--		</select>	-->
                                
							<!--	</div>-->
							<!--</div>	-->

                            <h4>Personal Details</h4>
                          <!--  <div class="form-group">

								<label class="col-md-2 control-label">
									Salutation:  <span class="required">* </span> 
								</label>

								<div class="col-md-3">
									<select name="salut" class="form-control" required>									  	
									  	<option value="MR."> Mr. </option>
									  	<option value="MRS."> Mrs. </option>
									  	<option value="MS."> Ms. </option>
									  	<option value="MSTR"> Mstr </option>
									  </select>
								</div>
								

							</div>	-->

							<div class="form-group">

								<label class="col-md-2 control-label">
									Surname: <span class="required">* </span>
								</label>

								<div class="col-md-3">
									<input type="text" class="form-control" name="surname" placeholder="" required>
								</div>

								<label class="col-md-2 control-label">
									Given Name: <span class="required">* </span>
								</label>

								<div class="col-md-3">
									<input type="text" class="form-control" name="gname" placeholder="" required>
								</div>

							</div> 

							<!-- <div class="form-group">


								<label class="col-md-2 control-label">
									Date of Birth: <span class="required"> </span>
								</label>

								<div class="col-md-3">
									<input type="text" class="form-control date" style="text-transform: lowercase;" name="dob" id="dob"  data-inputmask="'alias': 'date'" />
									<div class="input-group date date-picker" data-date-format="dd-mm-yyyy" data-date-end-date="0d">
										<input type="text" class="form-control" name="dob" placeholder="dd-mm-yyyy" required >
										<span class="input-group-btn">
										<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
										</span>
									</div>
								</div>

								<label class="col-md-2 control-label">
									Place of Birth: 
								</label>

								<div class="col-md-3">
									<input type="text" class="form-control" name="pob" placeholder="" >
								</div>

							</div> 

							<div class="form-group">


								<label class="col-md-2 control-label">
									Gender: <span class="required"> </span>
								</label>

								<div class="col-md-3">									
									  <select name="gender" class="form-control" >
									  	<option value=""> - Select -</option>
									  	<option value="Male"> Male </option>
									  	<option value="Female"> Female </option>
									  </select>	
								
								</div>	

								<label class="col-md-2 control-label">
									Nationality: <span class="required"> </span>
								</label>

								<div class="col-md-3">
									<input type="text" class="form-control" name="nation" placeholder="" >
								</div>

							</div>  -->	

							<div class="form-group">

								<!--<label class="col-md-2 control-label">
									Passport Type: <span class="required">* </span>
								</label>

								<div class="col-md-3">
									 <select name="passtype" class="form-control" required>
									  	<option value=""> - Select -</option>
									  	<option value="1"> Normal Passport </option>
									  	<option value="2"> Govt Passport </option>
									  </select>	
								</div>

								<label class="col-md-2 control-label">
									Passport No.: <span class="required">* </span>
								</label>

								<div class="col-md-3">
									<input type="text" class="form-control" name="passport" placeholder="" required >
								</div>-->

							</div>


							<!-- <div class="form-group">

								<label class="col-md-2 control-label">
									Passport Issue Date: 
								</label>

								<div class="col-md-3">
									<input type="text" class="form-control date" style="text-transform: lowercase;" name="pissue_date" id="pissue_date"  data-inputmask="'alias': 'date'" />
									<!-- <div class="input-group date date-picker" data-date-format="dd-mm-yyyy" data-date-end-date="0d">
										<input type="text" class="form-control" name="pissue_date" placeholder="dd-mm-yyyy" required >
										<span class="input-group-btn">
										<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
										</span>
									</div>											
									
								</div>

								<label class="col-md-2 control-label">
									Passport Expire Date: <span class="required">* </span>
								</label>

								<div class="col-md-3">
									<input type="text" class="form-control date" style="text-transform: lowercase;" name="pexp_date" id="pexp_date" required data-inputmask="'alias': 'date'" />
									<!-- <div class="input-group date date-picker" data-date-format="dd-mm-yyyy" data-date-start-date="+165d">
										<input type="text" class="form-control" name="pexp_date" placeholder="dd-mm-yyyy" required >
										<span class="input-group-btn">
										<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
										</span>
									</div>	 									
									
								</div>

							</div>  -->

							<div class="form-group">

															

							</div>

							<h4>Contact Information</h4>

							<div class="form-group">

								<label class="col-md-2 control-label">
									Email Id: <span class="required"></span>
								</label>

								<div class="col-md-3">
									<input type="email" class="form-control" name="email" placeholder="" >
								</div>

								<label class="col-md-2 control-label">
									Phone No.: <span class="required"> </span>
								</label>

								<div class="col-md-3">
									<input type="text" class="form-control" name="phone" placeholder="" >
								</div>

							</div>

						
							<div class="form-group">

								<!--<label class="col-md-2 control-label">
									Home Address: <!-- <span class="required">* </span> 
								</label>

								<div class="col-md-3">
									<textarea class="form-control" name="haddress" placeholder="" ></textarea>
								</div>-->

									<!--<label class="col-md-2 control-label">
									    Payment Mode: <span class="required">* </span>
								    </label>

								<div class="col-md-3">
									<select name="paymode" class="form-control" required>
									  	<option value=""> - Select -</option>
									  	<option value="1"> Cash </option>
									  	<option value="2"> Card </option>
									  </select>
								</div>-->
								<label class="col-md-2 control-label">
									Delivery Center: <span class="required">* </span>
								</label>

								<div class="col-md-3">
									<select name="delcenter" class="form-control" required>
									  	<option value=""> - Select -</option>
								
								<?php    
		                            $delrs = mysqli_query($con,"select * from deli_location_table where status=1 order by deliloc_name ASC");
                            		while($delrow=mysqli_fetch_array($delrs)){ 
                                
                                 	  	echo "<option value=".$delrow["deliloc_id"]."> ".$delrow["deliloc_name"]." </option>";
									  	
									} 
								?>	
									</select>

							</div>
							
							<!--<div class="form-group">

								<label class="col-md-2 control-label">
									Delivery Type: <span class="required">* </span>
								</label>

								<div class="col-md-3">
									<select name="deliverymode" class="form-control" required>
									  	<option value=""> - Select -</option>
								
								<?php    
		                            //$delrs = mysqli_query($con,"select * from deli_type_table where delitype_status=1 order by delitype_name ASC");
                            		//while($delrow=mysqli_fetch_array($delrs)){ 
                                
                                 	  //	echo "<option value=".$delrow["deli_typeid"]."> ".$delrow["delitype_name"]." </option>";
									  	
									//} 
								?>	
									</select>	
								</div>


							</div>-->


                           <!--  <h4>Value Added Service (VAS)</h4>
                            <?php    

                          //  $rs = mysqli_query($con,"select * from vas_table where status=1 order by vas_name ASC");

                          //  while($row=mysqli_fetch_array($rs)){ 

                                ?>
                            <div class="form-group">

								<label class="col-md-2 control-label">
									<?php //echo $row["vas_name"];?> :
								</label>								

                                <label class="col-md-1 control-label">
                                    Qty: 
                                </label>
                                <div class="col-md-1">
                                    <input type="number" class="form-control" name="<?php // echo $row["vas_id"]."_p";?>qty[]" id="qty" min="1">
                                </div>                            			
	
                            </div>

                            <?php // } ?> -->

							<!-- <h4>Travel Information</h4>

							<div class="form-group">

								<label class="col-md-2 control-label">
									Destination: <span class="required">* </span>
								</label>

								<div class="col-md-3">
									<input type="text" class="form-control" name="desti" placeholder="" required>
								</div>

								<label class="col-md-2 control-label">
									Duration of Stay: 
								</label>

								<div class="col-md-3">
									<input type="number" class="form-control" name="staydays" id="totaldays" readonly>
								</div>

							</div>

							<div class="form-group">

								<label class="col-md-2 control-label">
									Departure Date: <span class="required">* </span>
								</label>

								<div class="col-md-3">
									<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
										<input type="text" class="form-control" name="dept_date" id="datepicker_start" placeholder="dd-mm-yyyy" required>
										<span class="input-group-btn">
										<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
										</span>
									</div>											
									

								</div>

								<label class="col-md-2 control-label">
									Arrival Date: <span class="required">* </span>
								</label>

								<div class="col-md-3">
									<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
										<input type="text" class="form-control" name="arrv_date" id="datepicker_end" placeholder="dd-mm-yyyy" required>
										<span class="input-group-btn">
										<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
										</span>
									</div>								

								</div>

							</div>          


                            <div class="form-group">

                                <label class="col-md-2 control-label">
                                    Payment Mode: <span class="required">* </span>
                                </label>

                                <div class="col-md-3">                                   
									  <select name="paytype" class="form-control" required>
									  	<option value=""> - Select -</option>
									  	<option value="Cash"> Cash </option>
									  	<option value="Demand Draft"> Demand Draft </option>
									  </select>	
								
                                </div>

                            </div> -->
                            
                     	<table width="99%" style="margin-left: 10px; margin-top: 30px;">
								<thead>

								</thead>
								<tbody id="dependentBoxContainer">
								</tbody>
								<tfoot>
								  <tr>
								    <th colspan="5" style="padding-left: 0px;">
								    <button id="btndependent" type="button" class="btn" style="color: #26a69a; background-color: transparent; border: 1px solid #26a69a; border-radius: 3px !important;" data-toggle="tooltip" data-original-title="Add more controls"><i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp; Add Dependent &nbsp;</button></th>
								  </tr>
								</tfoot>
								</table>

		                <div class="form-group">

		                	<label class="col-sm-2 control-label" ></label>

		                	<input type='hidden' name='actionid' value='insert'>

			                <div class="col-sm-5" style="margin-top:20px;"><button name="myButton" class="btn green"><i class="fa fa-check"></i> Save</button></div>

			                <div class="col-sm-5">
			                  	<div id="box">	</div>
							</div>

		                </div>		      




											</div>



										</div>





									</div>



								</div>



							</div>



						</div>



					</form>



				</div>



			</div>



			<!-- END PAGE CONTENT-->



		</div>



	</div>

	<!-- END CONTENT -->
	</div>

<!-- END CONTAINER -->



<!-- BEGIN FOOTER -->


<?php include_once("../ro_footer.php"); ?>


<?php  include_once("../ro_js.php"); ?>

<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="../assets/admin/layout/scripts/components-picker.js"></script>

<script>

jQuery(document).ready(function() {    
Metronic.init(); // init metronic core components
Layout.init(); // init current layout
QuickSidebar.init(); // init quick sidebar
Demo.init(); // init demo features
ComponentsPickers.init();
});

// $(function() {

// 	$(function() {
//     $('.date-picker').datepicker("setDate",new Date());
// });
    
//     $('body').on('click','.date-picker', function() {
    
//         $(this).datepicker({Format: 'yyyy/mm/dd'}).focus();
//     });
// });

</script>
<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
<script>
//  $(".date").focus( function (){       
//      // $(".date").mask("99/99/9999");      
//     $(".date").inputmask();
     
//  }); 

  $(document).on("focus", ".date", function() { 
    //$(this).mask("99:99");
     $(".date").inputmask();
  });
</script>    
<script src="http://momentjs.com/downloads/moment.js"></script>
<script>
$(document).on('change',"#pexp_date", function() {

	var tt = $(this).val();
	//document.getElementById('pexp_date').value;
	var edd=moment(tt, 'DD-MM-YYYY');
	
	var myTime = moment();
	var newTime = moment(myTime).add('180', 'days');
	
	var ok=moment(edd).isSameOrAfter(newTime);
	
	if(ok){
		//alert('given date is ok ');
	}
	else{
		
		$(this).val('');
	   alert('Your passport Expire date must be greater than next 6 months.');
	 } 
 });	     
</script>  

<!-- END JAVASCRIPTS -->

</body>

<!-- END BODY -->

</html>