<div class="col-lg-12">
	
	<form action="" name="filter" id="filter" class="row g-3">
	<!-- filters -->
	 <div class="card">
		<div class="card-body">
			<div class="form-check form-switch">
				<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" checked>
				<label class="form-check-label" for="flexSwitchCheckDefault">Manual Invoice</label>
		</div>
		</div>
	 </div>
	<div class="card">
		<div class="card-body">`
			<div class="card-title">Customer Selection</div>
            <div class="form-group row mb-0">
				<label for="customername" class="col-sm-2 col-form-label">Select Customer</label>
				<div class="col">
					<select name="customername" id="customername" class="form-select">
						<option value="1">Abdullah Contracting</option>
						<option value="2">IMCC</option>
						<option value="3">CMCI</option>
						<option value="4">Aramco</option>
						<option value="5">Sabic</option>
						<option value="6">CMCC</option>
						<option value="7">IGMI</option>
						<option value="8">GAFCO</option>
					</select>
				</div>
			</div>
			<div class="form-group row justify-content-between">
				<div class="col-sm-3">
					<label for="invoicenumber" class="form-label">Invoice Number</label>
					<input type="Text" readonly name="invoicenumber" id="invoicenumber" class="form-control p-1" value="<?php echo "INV-".date("ymd-hm",time());?>">
					<label for="invoicedate" class="form-label mt-3">Invoice Date:</label>
					<input type="date" name="invoicedate" id="invoicedate" class="form-control p-1" value="<?php echo date("Y-m-d",time());?>">
					<label for="duedate" class="form-label mt-3">Due Date :</label>
					<input type="date" name="duedate" id="duedate" class="form-control p-1" value="<?php echo date("Y-m-d",strtotime('+30 days'));?>">
				</div>
                <div class="col-sm-3">
                    <label for="quotationnumber" class="form-label">Quotation Number :</label>
                    <!-- <input type="text" name="quotationnumber" id="quotationnumber" class="form-control p-1"> -->
                    <select name="quotationnumber" id="quotationnumber" class="form-select p-1">
                        <option value="-">&nbsp;</option>
                        <option value="QN-001-260521">QN-001-260521</option>
                        <option value="QN-001-260401">QN-001-260401</option>
                        <option value="QN-001-260315">QN-001-260315</option>
                        <option value="QN-001-260205">QN-001-260205</option>
                        <option value="QN-001-260131">QN-001-260131</option>
                        
                    </select>
                    <label for="referencenumber" class="form-label my-3">Reference Number :</label>
                    <input type="text" name="referencenumber" id="referencenumber" class="form-control p-1">
                    
					<label for="invstatus" class="form-label my-3">Invoice Status</label>
                    <select name="invstatus" id="invstatus" class="form-select p-1">
						<option value="draft">Draft</option>
						<option value="sent">Sent</option>
						<option value="approved">Approved</option>
						<option value="partial">Partial</option>
						<option value="paid">Paid</option>
						<option value="overdue">Overdue</option>
					</select>
                </div>
				<div class="col-sm-3">
					<label for="purchaseorder" class="form-label">P.O Number :</label>
					<input type="text" name="purchaseorder" id="purchaseorder" class="form-control p-1">
					
					<label for="purchaseorderdate" class="form-label mt-3">P.O Date :</label>
					<input type="date" name="purchaseorderdate" id="purchaseorderdate" class="form-control p-1" value="<?php echo date("Y-m-d",time());?>">
				</div>
				
			</div>
			
		</div>
	</div>
	<!-- product / service  -->
	<div class="card mt-2">
		<div class="card-body">
			<div class="card-title">Item Selection</div>
			<div class="form-group row justify-content-between align-items-md-center">
				<div class="col-sm-3">
					<label for="product" class="form-label">Product / Services</label>
					<select name="product" id="product" class="form-select p-1" >
						<option value="10345" data="White Chinees Helmet">White Helmet China</option>
						<option value="10346">Red Helmet China</option>
						<option value="10347">Green Helmet China</option>
						<option value="10348">Yellow Helmet China</option>
					</select>
				</div>    
				<div class="col-sm-2">
					<label for="description" class="form-label">Discription</label>
					<input type="text" name="description" id="description" class="form-control p-2" >
				</div>
				<div class="col">
					<label for="units" class="form-label">Unit</label>
					<select name="units" id="units" class="form-select p-1" >
						<option value="Pcs">Pcs</option>
						<option value="Box">Box</option>
						<option value="m">Meter</option>
						<option value="M2">m<sup>2</sup></option>
						<option value="M3">m<sup>3</sup></option>
						<option value="kg">Kg</option>
						<option value="mg">mg</option>
						<option value="L">Liters</option>
						<option value="Ton">Tons</option>
						
					</select>
				</div>
				<div class="col">
					<label for="qty" class="form-label">Qty</label>
					<input type="text" name="qty" id="qty" class="form-control p-2" >
				</div>
				<div class="col">
					<label for="unitprice" class="form-label">Unit Price</label>
					<input type="text" name="unitprice" id="unitprice" class="form-control p-2" >
				</div>
				<div class="col">
					<label for="vat" class="form-label">VAT</label>
					<select name="vat" id="vat" class="form-select p-1" readonly>
						<option value="15" selected>15%</option>
					</select>
				</div>
				<div class="col">
					<input type="button" value="Add" name="addproduct" id="addproduct" class="btn btn-success">
				</div>
			</div>
		</div>
	</div>
	<!-- list of items -->
	<table class="table table-striped" id="list">
		<thead>
			<tr>
				<th>S.No</th>
				<th>Product / Services</th>
				<th>Description </th>
				<th>Units</th>
				<th>Qty</th>
				<th>Unit Price</th>
				<th>Amount</th>
				<th>Tax </th>
				<th>Action</th>
			</tr>
		</thead>
		<tbody class="border-secondary">
			<tr>
				<td>1</td>
				<td>White Helmet China</br> Two stickers 
					<ol>
						<li>Front Logo white with border</li>
						<li>back Text with Logo</li>
						<li>Inspection Report Attached </li>
					</ol>
				</td>
				<td>Size M, ISO-9021</td>
				<td>Pcs</td>
				<td>100</td>
				<td>18.5</td>
				<td>1850</td>
				<td>241.30</td>
				<td><i class="mdi text-success mdi-pen mdi-18px "></i><i class="mdi text-danger mdi-trash-can mdi-18px"></i></td>
			</tr>
			<tr>
				<td>2</td>
				<td>White Helmet Chine</td>
				<td>Size M, ISO-9021</td>
				<td>Pcs</td>
				<td>100</td>
				<td>18.5</td>
				<td>1850</td>
				<td>241.30</td>
				<td><i class="mdi text-success mdi-pen mdi-18px "></i><i class="mdi text-danger mdi-trash-can mdi-18px"></i></td>
			</tr>
			<tr>
				<td>3</td>
				<td>White Helmet Chine</td>
				<td>Size M, ISO-9021</td>
				<td>Pcs</td>
				<td>100</td>
				<td>18.5</td>
				<td>1850</td>
				<td>241.30</td>
				<td><i class="mdi text-success mdi-pen mdi-18px "></i><i class="mdi text-danger mdi-trash-can mdi-18px"></i></td>
			</tr>
		</tbody>
		
	</table>
	<div class="card">
		<div class="card-body p-2">
			<div class="form-goup row justify-content-end align-items-sm-baseline">
				<label for="subtotal" class="col-sm-3 col-form-label text-end p-2">Sub-total</label>
				<div class="col-sm-3">
					<input type="text" name="subtotal" id="subtotal" class="form-control p-1 text-end" value="5550">
				</div>
			</div>
			<div class="form-goup row justify-content-end align-items-sm-baseline">
				<label for="discount" class="col-sm-3 col-form-label text-end p-2">Discount</label>
				<div class="col-sm-3">
					<input type="text" name="discount" id="discount" class="form-control p-1 text-end" value="50">
				</div>
			</div>
			<div class="form-goup row justify-content-end align-items-sm-baseline">
				<label for="afterdiscount" class="col-sm-3 col-form-label text-end p-2">Amount After Discount</label>
				<div class="col-sm-3">
					<input type="text" name="afterdiscount" id="afterdiscount" class="form-control p-1 text-end" value="5500">
				</div>
			</div>
			<div class="form-goup row justify-content-end align-items-sm-baseline">
				<label for="displayvat" class="col-sm-3 col-form-label text-end p-2">VAT</label>
				<div class="col-sm-3">
					<input type="text" name="displayvat" id="displayvat" class="form-control p-1 text-end" value="832.5" readonly >
				</div>
			</div>
			<div class="form-goup row justify-content-end align-items-sm-baseline">
				<label for="netamount" class="col-sm-3 col-form-label text-end p-2">Net Amount</label>
				<div class="col-sm-3">
					<input type="text" name="netamount" id="netamount" class="form-control p-1 text-end" value="6332.5">
				</div>
			</div>
		</div>
	</div>
	<div class="card mt-2">
		<div class="card-body">
			<h5>Terms & Condition </h5>
			<div class="form-goup row">
				<div class="form-check form-check-flat form-check-primary col-sm-2">

					<label for="cbpayment" class="form-check-label">
						<input type="checkbox" name="cbpayment" id="cbpayment" class="form-check-input" checked>
						Payment Terms:
					</label>
				</div>
				<div class="col-sm-10">
					<select class="form-select col-sm-6" name="selectpaymentterms" id="selectpaymentterms">
								<option value="-">--</option>
								<option value="100">100% advance payment shall be deposit along purchase order.</option>
								<option value="50% advance payment shall be deposit along purchase order.">50% advance payment shall be deposit along purchase order.</option>
								<option value="50% advance payment shall be deposit along purchase order. Progressive invoice biweekly">50% advance payment shall be deposit along purchase order. Progressive invoice biweekly</option>
								<option value="30% advance payment shall be deposit along purchase order.">30% advance payment shall be deposit along purchase order.</option>
								<option selected value="30% advance payment shall be deposit along purchase order.Progressive invoice biweekly">30% advance payment shall be deposit along purchase order. Progressive invoice biweekly</option>
							</select>
				</div>
			</div>
			<div class="form-goup row">
				<div class="form-check form-check-flat form-check-primary col-sm-2">

					<label for="cbdeliveryterms" class="form-check-label">
						<input type="checkbox" name="cbdeliveryterms" id="cbdeliveryterms" class="form-check-input" checked>
						Delivery Terms:
					</label>
				</div>
				<div class="col-sm-10">
					<input type="text" name="contendeliveryterms" id="contendeliveryterms" value="Delivery time is 3-5 working days" class="form-control">
				</div>
			</div>

			<div class="form-group mt-3 text-end">
				<button type="button" class="btn btn-primary"><i class="mdi mdi-18px mdi-plus"></i>Save & Print</button>
				<button type="button" class="btn btn-info"><i class="mdi mdi-18px mdi-printer"></i>Print</button>
				
				<button type="button" class="btn btn-success"><i class="mdi mdi-18px mdi-database"></i>Save</button>
				<input type="reset" value="Reset" class="btn btn-light">
			</div>
			
		</div>
	</div>
</form>



</div>

<script>
	document.addEventListener('DOMContentLoaded', () => {
		const invType = document.getElementById('flexSwitchCheckDefault');
		invType.addEventListener('change',function(event){
			console.log(this.checked);

		})
	})
</script>

<!-- <input type="text" name="customername" id="customername" class="form-control"> -->