<!-- Main content -->
<section class="content">
	<div class="container-fluid">
		<div class="row pt-3">
			<div class="col-md-5">
				<div class="card card-success shadow-lg">
					<div class="card-body">
						<div class="row">
							<div class="col-md-9">
								<label for="customer_id">Select Customer &nbsp;&nbsp;</label>
								<select name="customer_id" id="customer_id" class="form-control select2">
									<?php foreach ( $customers as $customer ): ?>
										<option value="<?php echo $customer['id']; ?>"><?php echo $customer['name']; ?></option>
									<?php endforeach;?>
								</select>
							</div>
							<div class="col-md-3">
								<label for="add-customer-button">&nbsp;&nbsp;</label>
								<br>
								<button type="button" id="add-customer-button" class="btn bg-gradient-primary btn-block" data-toggle="modal" data-target="#modal-customer"><strong>Add New</strong></button>
							</div>
						</div>

						<div class="row mt-3">
							<div class="col-md-12 barcode-search-container">
								<div class="input-group">
									<input type="search" id="barcode-search" class="form-control form-control-lg" placeholder="Scan Barcode or Enter Product Name" autocomplete="off" autofocus>
									<div class="input-group-append">
										<button type="submit" class="btn btn-lg btn-default">
											<i class="fa fa-search"></i>
										</button>
									</div>
								</div>
								<div class="barcode-search-result" id="barcode-search-result">
									<ul>
										<li data-id="1" data-name="Test Item 1" data-price="123">Test Item 1</li>
										<li data-id="2" data-name="Test Item 2" data-price="123">Test Item 2</li>
										<li data-id="3" data-name="Test Item 3" data-price="123">Test Item 3</li>
									</ul>
								</div>
							</div>
						</div>

						<div class="row mt-4">
							<div class="col-md-12 table-responsive p-0" style="height: 392px;">
								<table class="table table-bordered table-head-fixed text-wrap" id="cart-table">
									<thead>
										<tr>
											<th class="col-md-4">Product</th>
											<th class="col-md-2 text-center">Price</th>
											<th class="col-md-3 text-center">Qty</th>
											<th class="col-md-2 text-center">Subtotal</th>
											<th class="col-md-1 text-center">Action</th>
										</tr>
									</thead>
									<tbody>

									</tbody>
								</table>
							</div>
						</div>

						<div class="row mt-4">
							<div class="col-md-8 text-right">
								<label for="total-qty">Item Quantity</label>
							</div>
							<div class="col-md-4 text-right">
								<input type="text" class="form-control text-right form-control-sm" name="total-qty" id="total-qty" placeholder="0" disabled>
							</div>
						</div>

						<div class="row mt-2">
							<div class="col-md-8 text-right">
								<label for="discount">Discount</label>
							</div>
							<div class="col-md-4 text-right">
								<input type="text" class="form-control text-right form-control-sm" name="discount" id="discount" placeholder="0">
							</div>
						</div>

						<div class="row mt-2">
							<div class="col-md-8 text-right">
								<label for="total-amount">Total Amount</label>
							</div>
							<div class="col-md-4 text-right input-group">
								<input type="text" class="form-control text-right form-control-sm" name="total-amount" id="total-amount" placeholder="0" disabled>
							</div>
						</div>

						<div class="row mt-2">
							<div class="col-md-8 text-right">
								<label for="total-amount">Tax Amount</label>
							</div>
							<div class="col-md-4 text-right input-group">
								<input type="text" class="form-control text-right form-control-sm" name="tax-amount" id="tax-amount" placeholder="0" disabled>
								<input type="hidden" name="taxRate" id="taxRate" value="<?php echo $tax_rate; ?>" />
							</div>
						</div>

						<div class="row mt-2">
							<div class="col-md-8 text-right">
								<label>Grand Total</label>
							</div>
							<div class="col-md-4 float-right text-right">
								<h3 id="grand-total">$ 45321.11</h3>
							</div>
						</div>

						<div class="row mt-3">
							<div class="col-md-6">
								<button type="button" id="reset" class="btn bg-gradient-danger btn-block"><strong>Reset</strong></button>
							</div>
							<div class="col-md-6">
								<button type="button" id="pay-now" class="btn bg-gradient-primary btn-block" data-toggle="modal" data-target="#modal-pay-now" disabled><strong>Pay Now</strong></button>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-md-7">
				<div class="card card-success shadow-lg">
					<div class="card-body">
						<div class="row mt-3 overflow-auto" id="product-list" style="height: 813px;">
							<?php foreach ( $items as $key => $value ) {?>
								<div class="col-md-2">
									<div class="card card-widget widget-product shadow-lg product-item">
										<div class="widget-product-header text-white product-picture" style="background: url('<?php if ( $value['picture'] != "" ) {echo './uploads/items/' . $value['picture'];} else {echo 'assets/images/default-product-image.png';}?>') center center no-repeat;">
											&nbsp;
										</div>

										<div class="card-footer">
											<ul class="nav flex-column product-details">
												<li class="product-nav-item">
													<?php echo $value['code']; ?>
												</li>
												<li class="product-nav-item">
													<?php echo $value['name']; ?>
												</li>
												<li class="product-nav-item" data-id="<?php echo $value['id']; ?>" data-name="<?php echo $value['name']; ?>" data-price="<?php echo $value['min_sale_price']; ?>">
													<a href="#" class="stretched-link">
														<span class="badge bg-primary">
															<?php if ( $this->session->currency_symbol_position == 'Before' ) {echo $this->session->currency_symbol . ' ';}?><?php echo number_format( $value['min_sale_price'], 2 ); ?><?php if ( $this->session->currency_symbol_position == 'After' ) {echo ' ' . $this->session->currency_symbol;}?>
														</span>
													</a>
												</li>
											</ul>
										</div>
									</div>
								</div>
							<?php }?>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<div role="dialog" class="modal fade" tabindex="-1" id="modal-customer" aria-hidden="true">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Customer Entry Form</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

			<div class="modal-body">
				<div class="form-group">
					<label for="code">Customer Code</label>
					<input type="text" name="code" id="code" value="<?php echo $code; ?>" class="form-control" placeholder="Customer Code"> Digit Only
				</div>
				<div class="form-group">
					<label for="name">Customer Name</label>
					<input type="text" name="name" id="name" class="form-control" placeholder="Customer Name">
				</div>
				<div class="form-group">
					<label for="address">Address</label>
					<textarea name="address" id="address" class="form-control" placeholder="Customer Address"></textarea>
				</div>
				<div class="form-group">
					<label for="mobile">Mobile</label>
					<input type="text" name="mobile" id="mobile" class="form-control" placeholder="Customer Mobile Number">
				</div>
				<div class="form-group">
					<label for="country">Country</label>
					<input type="text" name="country" id="country" class="form-control" placeholder="Customer Country">
				</div>
				<div class="form-group">
					<label for="email">Email</label>
					<input type="text" name="email" id="email" class="form-control" placeholder="Customer Email Address">
				</div>
				<div class="form-group">
					<label for="notes">Notes</label>
					<textarea name="notes" id="notes" class="form-control" placeholder="Customer Notes"></textarea>
				</div>
			</div>

			<div class="modal-footer justify-content-between">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
				<button type="button" id="add_customer" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>

<div role="dialog" class="modal fade" tabindex="-1" id="modal-pay-now" aria-hidden="true">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Make Payment</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

			<div class="modal-body">
				<div class="row">
					<div class="col-lg-8 col-12">
						<div class="row">
							<div class="mb-3 col-6">
								<label class="form-label" for="received_amount">Received Amount:</label>
								<input name="received_amount" id="received_amount" type="number" min="0" autocomplete="off" class="form-control">
							</div>
							<div class="mb-3 col-6">
								<label class="form-label" for="paying_amount">Paying Amount:</label>
								<input name="paying_amount" id="paying_amount" type="number" autocomplete="off" readonly="" class="form-control">
							</div>
							<div class="mb-3 col-6">
								<label class="form-label">Change Return:</label>
								<input name="change_return" id="change_return" type="number" autocomplete="off" readonly="" class="form-control">
							</div>
							<div class="mb-3 col-6">
								<label class="form-label" for="payment_type">Payment Type:</label>
								<select name="payment_type" id="payment_type" class="form-control select2">
									<option value="cash">Cash</option>
									<option value="cheque">Cheque</option>
									<option value="bank_transfer">Bank Transfer</option>
									<option value="other">Other</option>
								</select>
							</div>
							<div class="mb-3 col-12">
								<label class="form-label" for="payment_notes">Notes:</label>
								<textarea name="payment_notes" id="payment_notes" rows="3" placeholder="Enter Notes" class="form-control"></textarea>
								<span class="text-danger"></span>
							</div>
							<div class="mb-3 col-12">
								<div class="form-group w-100">
									<label class="form-label" for="payment_status">Payment Status:</label>
									<span class="required"></span>
									<select name="payment_status" id="payment_status" class="form-control select2">
										<option value="Unpaid">Unpaid</option>
										<option value="Paid">Paid</option>
									</select>
								</div>
							</div>
						</div>
					</div>

					<div class="col-lg-4 col-12">
						<div class="card custom-cash-card">
							<div class="card-body p-6">
								<table class="text-nowrap table table-striped table-bordered table-hover">
									<tbody>
										<tr>
											<td scope="row" class="ps-3 align-middle h4">Total Products</td>
											<td class="px-3">
												<span class="btn btn-primary cursor-default rounded-circle total-qty d-flex align-items-center justify-content-center p-2" id="tableTotalQty"></span>
											</td>
										</tr>
										<tr>
											<td scope="row" class="ps-3">Total Amount</td>
											<td class="px-3" id="tableTotalAmount"></td>
										</tr>
										<tr>
											<td scope="row" class="ps-3">Tax Amount</td>
											<td class="px-3" id="tableTaxAmount"></td>
										</tr>
										<tr>
											<td scope="row" class="ps-3">Discount</td>
											<td class="px-3" id="tableDiscount"></td>
										</tr>
										<tr>
											<td scope="row" class="ps-3 h4">Grand Total</td>
											<td class="px-3 h4" id="tableGrandTotal"></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="modal-footer justify-content-between">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary" id="submit-pay-now">Submit</button>
			</div>
		</div>
	</div>
</div>