<style>
	form label.error,
	#secNameerr {
		color: red;
	}

	.form-control {
		width: 40%;
	}
</style>
<main class="wraper responsive-width" id="main">
	<!----admin template Exam---->
	<div class="admin_tempblock">
		<div class="admin_tempsec">
			<div class="admin_sec">
				<?php if ($this->session->flashdata('success')) { ?>

					<div class="alert alert-success alert-dismissible fade show" role="alert">
						<p><?php echo $this->session->flashdata('success') ?></p>
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>

				<?php } ?>
				<?php if ($this->session->flashdata('failed')) { ?>

					<div class="alert alert-danger alert-dismissible fade show" role="alert">
						<p><?php echo $this->session->flashdata('failed') ?></p>
						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>

				<?php } ?>

				<div class="container">
					<div class="row">
						<h4><?php echo $title ?></h4>
					</div>
					<div class="row mt-4">
						<div class="col-sm-12">

							<?php

							$e_title = $e_quantity = $e_amount = $e_totalAmount = $e_paidDate = $e_filePath = $e_description = '';

							// print_r($expenses_types);

							// echo ($checker);
							if (isset($expenses_data) && !empty($expenses_data)) {

								$e_title 		= $expenses_data['title'];
								$e_quantity 	= $expenses_data['quantity'];
								$e_amount 		= $expenses_data['amount'];
								$e_totalAmount 	= $expenses_data['total_amount'];
								$e_paidDate 	= $expenses_data['paid_date'];
								$e_filePath 	= $expenses_data['file_path'];
								$e_description	= $expenses_data['description'];
								$e_expense_type	= $expenses_data['expense_type'];
							} ?>
							<form id="expenses_form" action="<?php echo base_url('admin/addExpeses/' . $checker) ?>" method="post" enctype="multipart/form-data" onkeydown="return event.key != 'Enter';">
								<input type="hidden" name="expenses_id" value="<?php echo $checker; ?>">

								<div class="my-3 form-group">
									<label for="formExpenseType" class="form-label">Expense Type <strong style="color:red">*</strong></label>

									<select name="expense_type" id="expense_type" class="form-control">
										<option value="">-- Select Option --</option>
										<?php foreach ($expenses_types as $expenses_type) {

											// $selected = ($e_expense_type == $expenses_type['expenseId']) ? "selected" : "";
										?>
											<option value="<?= $expenses_type['expenseId'] ?>"><?= $expenses_type['expenseTitle'] ?></option>
										<?php } ?>
									</select>

									<select name="expense_sub_type_computer" id="expense_sub_type_computer" class="form-control mt-4 expense_sub_type_computer">
										<option value="">-- Repair / Buy --</option>
										<option value="buy"><?= 'Buy' ?></option>
										<option value="repair"><?= 'Repair' ?></option>
									</select>

									<select name="expense_sub_type_vehicle" id="expense_sub_type_vehicle" class="form-control mt-4 expense_sub_type_vehicle">
										<option value="">-- Select Vehicle Type --</option>
										<option value="van">Van</option>
										<option value="bus">Bus</option>
										<!-- <option value="bus">Bus</option> -->
									</select>

								</div>

								<div class="my-3 form-group">
									<label for="formTitle" class="form-label">Title <strong style="color:red">*</strong></label>
									<input type="text" class="form-control" id="formTitle" name="formTitle" value="<?php echo (!empty($e_title)) ? $e_title : ''   ?>">
								</div>

								<div class="mb-3 form-group">
									<label for="formQuantity" class="form-label">Quantity <strong style="color:red">*</strong></label>
									<input type="text" class="form-control" id="formQuantity" name="formQuantity" value="<?php echo (!empty($e_quantity)) ? $e_quantity : 1;  ?>">
								</div>

								<div class="mb-3 form-group">
									<label for="formAmount" class="form-label">Amount <strong style="color:red">*</strong></label>
									<input type="text" class="form-control" id="formAmount" name="formAmount" value="<?php echo (!empty($e_amount)) ? $e_amount : '';  ?>" required>
								</div>

								<div class="mb-3 form-group">
									<label for="formTotalAmount" class="form-label">Total Amount </label>
									<input type="text" name="totalAmount" class="form-control" id="formTotalAmount" value="<?php echo (!empty($e_totalAmount)) ? $e_totalAmount : '';  ?>" disabled>
									<input type="hidden" name="totalAmountPaid" class="form-control" id="formTotalAmountPaid" value="<?php echo (!empty($e_totalAmount)) ? $e_totalAmount : '';  ?>">
								</div>

								<div class="mb-3 form-group">
									<label for="formPaidDate" class="form-label">Paid Date <strong style="color:red">*</strong></label>
									<input type="text" class="form-control" id="formPaidDate" name="formPaidDate" value="<?php echo (!empty($e_paidDate)) ? $e_paidDate : '';  ?>">
								</div>

								<div class="mb-3 form-group">
									<label for="formFile" class="form-label">File Upload <label class="text-danger"> ( Accepts only png, jpeg, jpg, pdf and Max size 2 MB)</label> </label>
									<input class="form-control" type="file" id="formFile" name="file_expenses" value="<?php echo (!empty($e_filePath)) ? $e_filePath : '';  ?>">
									<?php if (!empty($e_filePath)) { ?>
										<img src="<?php echo base_url($e_filePath) ?>" width="60" height="60">
									<?php } ?>
								</div>

								<div class="mb-3 form-group">
									<label for="formDescription" class="form-label">Description</label>
									<textarea class="form-control" placeholder="Leave a comment here" id="formDescription" name="description" value=""><?php echo (!empty($e_description)) ? $e_description : '';  ?></textarea>

								</div>


								<button class="subject_addbtn " type="submit"><?php echo str_replace('Expenses', '', $title); ?></button>
								<a href="<?php echo base_url('admin/listExpeses') ?>">
									<button type="button" class="subject_addbtn bg-dark">Back</button>
								</a>

							</form>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!----admin template Exam end---->
</main>
<!--End right-top side-->


<script>
	$('#expense_sub_type_computer').hide();
	$('#expense_sub_type_vehicle').hide();
	//multiple select js start
	// $('select').selectpicker();
	//multiple select js end

	// $('$expense_type').
	$('#expense_type').change(function() {
		// $('input[type=text].sitebg').val('000000');
		console.log($("#expense_type :selected").val());
		let selectedExpenseTypeId = $("#expense_type :selected").val();

		if (selectedExpenseTypeId == 2) {
			$('#expense_sub_type_computer').show();
			$('#expense_sub_type_vehicle').hide();
		} else if (selectedExpenseTypeId == 7) {
			$('#expense_sub_type_vehicle').show();
			$('#expense_sub_type_computer').hide();
		} else {
			$('#expense_sub_type_computer').hide();
			$('#expense_sub_type_vehicle').hide();
		}
		// $('#formTitle').attr('value', '#000000');
	});

	$(document).ready(function() {

		/* Select your element */
		let NDate = NepaliFunctions.GetCurrentBsDate();
		let todayDate = `${NDate.year}-${NDate.month}-${NDate.day}`;
		/* Initialize Datepicker with options */
		$('#formPaidDate').nepaliDatePicker({
			disableAfter: todayDate,
			language: 'english',

		});

		// nepali date end

		jQuery.validator.addMethod("amountValidation", function(value, element) {
			return this.optional(element) || /^\d{0,8}(\.\d{0,9})?$/.test(value);
		}, 'Please Enter Proper Amount ');

		$("#expenses_form").validate({


			ignore: ":hidden",
			rules: {
				formTitle: {
					required: true
				},
				formQuantity: {
					required: true,
					digits: true
				},
				formAmount: {
					required: true,
					amountValidation: true
				},
				formPaidDate: {
					required: true,
					date: true

				}
			},
			messages: {
				formTitle: {
					required: "Please Enter Title for expenses"
				},
				formQuantity: {
					required: "Please Enter Quantity",
					digits: "Accept only Positive Number"
				},
				// formAmount: {
				// 	required: "Please Enter Amount",
				// 	amountValidation: "Check Amount and Enter Properly"
				// },

				formPaidDate: 'Enter Purchase Date'

			},
			submitHandler: function(form) {
				form.submit();
			}
		});

	});

	$('#formFile').on('change', function() {

		let fileUpload = $('#formFile').val();
		var allowedFiles = [".png", ".jpeg", ".jpg", ".pdf"];

		var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
		if (!regex.test(fileUpload.toLowerCase())) {
			alert("Please upload files having extensions: " + allowedFiles.join(', ') + " only.");
			$(this).val('');
			return false;
		} else {
			if (this.files[0].size > 2097152) {
				alert("File size is greater than 2MB");
				$(this).val('');
				return false;
			}
		}

	});

	$('#formQuantity').on('change', function() {

		var id_val = $('#formQuantity').val();
		var amount = $('#formAmount').val();
		var validAmount = /^\d{0,4}(\.\d{0,2})?$/.test(amount);
		var validQuality = /^\d{0,4}(\.\d{0,2})?$/.test(id_val);

		if (!validAmount || !validQuality) {
			alert("Please check the Amount or Quantity");
			$('#formTotalAmount').val("");
			$('#formTotalAmountPaid').val("");
		} else {
			var calculation = parseFloat(id_val) * parseFloat(amount);
			if ($.isNumeric(calculation)) {
				$('#formTotalAmount').val(calculation);
				$('#formTotalAmountPaid').val(calculation);
			} else {
				$('#formTotalAmount').val("");
				$('#formTotalAmountPaid').val("");
			}

		}

	});

	$('#formAmount').on('change', function() {

		var id_val = $('#formQuantity').val();
		var amount = $('#formAmount').val();
		var validAmount = /^\d{0,9}(\.\d{0,7})?$/.test(amount);
		var validQuality = /^\d{0,7}(\.\d{0,7})?$/.test(id_val);

		if (!validAmount || !validQuality) {
			alert("Please check the Amount or Quantity");
			$('#formTotalAmount').val("");
			$('#formTotalAmountPaid').val("");
		} else {
			var calculation = parseFloat(id_val) * parseFloat(amount);
			if ($.isNumeric(calculation)) {
				$('#formTotalAmount').val(calculation);
				$('#formTotalAmountPaid').val(calculation);
			} else {
				$('#formTotalAmount').val("");
				$('#formTotalAmountPaid').val("");
			}

		}


	});
</script>