 <script>

 $(document).ready(function(){
 
        $("#PurchaseOrderNo").select2();
		$("#PurchaseOrderNoview").select2();
        $("#InvoiceDate").datepicker({
            //minDate : d,
            maxDate : 'now',
            dateFormat: 'mm/dd/yy',changeMonth: true, changeYear: true,yearRange: '-100:+0'
        });
   });
	// For table 
	(function(l,q){var e=function(b,c){b.extend(!0,c.defaults,{dom:"<'row'<'col-sm-9'l><'col-sm-3'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-8'i><'col-sm-4'p>>",renderer:"bootstrap"});b.extend(c.ext.classes,{sWrapper:"dataTables_wrapper form-inline dt-bootstrap",sFilterInput:"form-control input-sm",sLengthSelect:"form-control input-sm"});c.ext.renderer.pageButton.bootstrap=function(g,e,r,s,i,m){var t=new c.Api(g),u=g.oClasses,j=g.oLanguage.oPaginate,d,f,n=0,p=function(c,e){var k,h,o,a,l=function(a){a.preventDefault();
b(a.currentTarget).hasClass("disabled")||t.page(a.data.action).draw(!1)};k=0;for(h=e.length;k<h;k++)if(a=e[k],b.isArray(a))p(c,a);else{f=d="";switch(a){case "ellipsis":d="&hellip;";f="disabled";break;case "first":d=j.sFirst;f=a+(0<i?"":" disabled");break;case "previous":d=j.sPrevious;f=a+(0<i?"":" disabled");break;case "next":d=j.sNext;f=a+(i<m-1?"":" disabled");break;case "last":d=j.sLast;f=a+(i<m-1?"":" disabled");break;default:d=a+1,f=i===a?"active":""}d&&(o=b("<li>",{"class":u.sPageButton+" "+
f,id:0===r&&"string"===typeof a?g.sTableId+"_"+a:null}).append(b("<a>",{href:"#","aria-controls":g.sTableId,"data-dt-idx":n,tabindex:g.iTabIndex}).html(d)).appendTo(c),g.oApi._fnBindAction(o,{action:a},l),n++)}},h;try{h=b(q.activeElement).data("dt-idx")}catch(l){}p(b(e).empty().html('<ul class="pagination"/>').children("ul"),s);h&&b(e).find("[data-dt-idx="+h+"]").focus()};c.TableTools&&(b.extend(!0,c.TableTools.classes,{container:"DTTT btn-group",buttons:{normal:"btn btn-default",disabled:"disabled"},
collection:{container:"DTTT_dropdown dropdown-menu",buttons:{normal:"",disabled:"disabled"}},print:{info:"DTTT_print_info"},select:{row:"active"}}),b.extend(!0,c.TableTools.DEFAULTS.oTags,{collection:{container:"ul",button:"li",liner:"a"}}))};"function"===typeof define&&define.amd?define(["jquery","datatables"],e):"object"===typeof exports?e(require("jquery"),require("datatables")):jQuery&&e(jQuery,jQuery.fn.dataTable)})(window,document);
 </script>
 
 <style>
    .modal
	{
		padding-right:25% ! important;
	}
	.select2
	{
		width: 100% ! important;
	}
 </style>
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        <center>Siddharth Industries - Inward Gate Register </center>        
      </h1>	  	  	 
    </section>    
    <section class="content"><br/>  
	<div class="row" style="padding-bottom:5%">
		<div class="col-md-12">
			  <div class="col-md-3">								 
						<label>Enter Purchase Order NO </label>	
						<div>								 									 
							 <?php
									$options = array("0"=>'Purchase Order No');     
															
						
									echo form_dropdown('PurchaseOrderNoview', $options,set_value('PurchaseOrderNoview'),'id="PurchaseOrderNoview"' ,'class="form-control select2"' , 'required="true"' );

									?>	
						</div> 
					</div>
					<div class="col-md-3">	<br/>
						<a class="btn btn-primary" type="submit" data-toggle="modal" data-target="#Poshow"  data-dismiss="modal" >PO Details</a>
					</div> 
		</div>
	</div>		
        <div class="row"> 
		<div class="col-md-12">
            								
				<table id="Inwardgateregistertable"  class="table table-bordered table-hover" style="background-color:#fff;font-size:12px;">
					<thead style="background-color:#ddf">
						<tr>
						<th>S.NO</th>
						  <th>IGR No</th>
						  <th>PO NO</th>					  
						  <th>Supplier name</th>
						  <th>Invoice No</th>					  
						  <th>Date of Invoice</th>	
						  <th>Item Code</th>
						  <th>Material</th>
						  <th>Ordered Quantity</th>
						  <th>Received Quantity</th>
						  <th>Vechicle No</th>
						  <th>Date</th> 
						</tr>
					</thead>
					<tbody>
					<tr>
					<td>1</td>
						<td><a data-toggle="modal" data-target="#Igrshow"  data-dismiss="modal" >IGR0001</a></td>
						<td>PO0034</td>
						<td>DR Enterprises</td>
						<td>Inv123232</td>
						<td>8/6/2017</td>
						<td>Sand12</td>
						<td>wast sand</td>
						<td>1000kgs</td>
						<td>1000kgs</td>
						<td>TN 34 G 5434</td>
						<td>2/6/2017</td>
					</tr>
					<tr>
					<td>2</td>
						<td><a data-toggle="modal" data-target="#Igrshow"  data-dismiss="modal" >IGR0002</a></td>
						<td>PO0035</td>
						<td>DR Enterprises</td>
						<td>Inv123255</td>
						<td>15/6/2017</td>
						<td>Sand12</td>
						<td>wast sand</td>
						<td>1000kgs</td>
						<td>1000kgs</td>
						<td>TN 34 G 5434</td>
						<td>6/6/2017</td> 
					</tr>
					</tbody>					
				</table>
			</div> 
		</div>
        </div>  
			 
			<div class="modal fade" id="Poshow" role="dialog">
				<div class="modal-dialog">
					<!-- Modal content-->
					<form>
						<div class="modal-content" style="width:900px;">
							<div class="modal-header" style="background-color: #3c8dbc;color:#fff;">
								<button type="button" class="close" data-dismiss="modal">&times;</button>
								<center><h4>Purchase Order Details</h4></center> 
							</div>
							<div class="col-md-12"> 
								<div class="col-md-3">
							 	<label>Purchase Order Number :</label>
								</div>	
								<div class="col-md-3">
									PO0034
								</div>
								<div class="col-md-3">
								<label>	Delivery Date :</label>
								</div>
								<div class="col-md-3">
									9/6/2017
								</div>
							</div> 
							<div class="col-md-12">								
								<div class="col-md-3">
								<label>Supplier and Address :</label> 
								</div>
								<div class="col-md-3">
									D.R Enterprises ,153/233,Uthukottai Taluk, Tiruvallur Dist,Chennai,Tamilnadu,Pin code : 602026.
								</div>
								<div class="col-md-3">
								<label>Comments Of Special Instructions :</label>
								</div>
								<div class="col-md-3">
									raw Sand , resin ordered 
								</div>
							</div>
								<div class="col-md-12" style="padding:2%;"> 
								<div class="col-md-4">
								Invoice NO
								<?php
									 $data = array('name' => 'InvoiceNo','value' => set_value('InvoiceNo'),'id'=>'InvoiceNo',  'class' => 'form-control', 'required'=>'true' );
									echo form_input($data);
									?> 
								</div>
								<div class="col-md-4">
								Invoice Date
								<?php
									 $data = array('name' => 'InvoiceDate','value' => set_value('InvoiceDate'),'id'=>'InvoiceDate',  'class' => 'form-control', 'required'=>'true' );
									echo form_input($data);
									?> 
								</div>
								<div class="col-md-4">
								Vechicle NO / Courier NO
								<?php
									 $data = array('name' => 'vechorCourNo','value' => set_value('vechorCourNo'),'id'=>'vechorCourNo',  'class' => 'form-control', 'required'=>'true' );
									echo form_input($data);
									?>
								</div>								
							</div>
							 
							<div>
							<!-- Table to show the line item of po -->
							<table class="table table-bordered">
								<thead>
									<tr>								 
										<th>SNo</th>
										<th>Item Code</th>
										<th>Item Description</th>
										<th>UOM</th>
										<th>Ordred Quantity</th>
										<th>Received Quantity</th>	<!-- It should be editable for gate keeper -->									
									</tr>
								</thead>								
								<tbody id="tbleAppend">
									<tr>
										<td>1</td>
										<td>RM002</td>
										<td>Raw sand</td>
										<td>Kgs</td>
										<td>10000</td>
										<td>10000</td><!-- This value will be  given by gate keeper once item received-->	
									</tr>	
									<tr>
										<td>2</td>
										<td>RM003</td>
										<td>Resin</td>
										<td>Ltr</td>
										<td>100</td>
										<td></td><!-- This value will be  given by gate keeper once item received-->	
									</tr>	
								</tbody> 
								</table>
								<div class="col-md-2 col-md-offset-10">
								<a class="btn btn-info" type="submit" align="right">submit</a>
								</div>
							</div> 
							<div class="modal-footer">
								 
							</div>
						</div>
					</form>
				</div>
			</div>	
			<div class="modal fade" id="Igrshow" role="dialog">
				<div class="modal-dialog">
					<!-- Modal content-->
					<form>
						<div class="modal-content" style="width:900px;">
							<div class="modal-header" style="background-color: #3c8dbc;color:#fff;">
								<button type="button" class="close" data-dismiss="modal">&times;</button>
								<center><h4>Inward Gate Register Details</h4></center> 
							</div>
							<div class="col-md-12"> 
								<div class="col-md-3">
							 	<label>IGR Number :</label>
								</div>	
								<div class="col-md-3">
									IGR0001
								</div>
								<div class="col-md-3">
								<label>	Purchase Order Number:</label>
								</div>
								<div class="col-md-3">
									PO0034
								</div>
							</div> 
							<div class="col-md-12"> 
								<div class="col-md-3">
							 	<label>Invoice Number :</label>
								</div>	
								<div class="col-md-3">
									Inv12353
								</div>
								<div class="col-md-3">
								<label>Invoice Date:</label>
								</div>
								<div class="col-md-3">
									6/9/2017
								</div>
							</div> 
							 
							<div class="col-md-12">								
								<div class="col-md-3">
								<label>Supplier and Address :</label> 
								</div>
								<div class="col-md-3">
									D.R Enterprises ,153/233,Uthukottai Taluk, Tiruvallur Dist,Chennai,Tamilnadu,Pin code : 602026.
								</div>
								<div class="col-md-3">
								<label>Comments Of Special Instructions :</label>
								</div>
								<div class="col-md-3">
									raw Sand , resin ordered 
								</div>
							</div>
							<!-- Table to show the line item of po -->
							<table class="table table-bordered">
								<thead>
									<tr>								 
										<th>SNo</th>
										<th>Item Code</th>
										<th>Item Description</th>
										<th>UOM</th>
										<th>Ordred Quantity</th>
										<th>Received Quantity</th>	<!-- It should be editable for gate keeper -->									
									</tr>
								</thead>								
								<tbody id="tbleAppend">
									<tr>
										<td>1</td>
										<td>RM002</td>
										<td>Raw sand</td>
										<td>Kgs</td>
										<td>10000</td>
										<td>10000</td><!-- This value will be  given by gate keeper once item received-->	
									</tr>										
								</tbody>
  							</table>
							 
							<div class="modal-footer">
								<a class="btn btn-info" data-dismiss="modal"  value="Cancel">Cancel</a>
							</div>
						</div>
					</form>
				</div>
			</div>
		</section>
	</div>
 <script>
<!-- script for table , It works under the datatable plugin-->
 $(function () { 
    $('#Inwardgateregistertable').DataTable({
      "paging": true,
      "lengthChange": true,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": true
	   
    }); 
  });
  </script>                          