<?= message_box('success'); ?>
<?= message_box('error');
$created = can_action('94', 'created');
$edited = can_action('94', 'edited');
$deleted = can_action('94', 'deleted');
if (!empty($created) || !empty($edited)) {
?>
	<div class="space-y-4">
		<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
			<div>
				<h2 class="text-2xl font-semibold text-foreground"><?= lang('new_template') ?></h2>
				<p class="text-sm text-muted-foreground"><?= lang('manage') . ' ' . lang('salary_template_list') ?></p>
			</div>
		</div>
		<div class="flex items-center gap-2 rounded-xl border border-border bg-muted p-1 text-xs font-semibold">
			<a href="<?= base_url('admin/payroll/salary_template') ?>" class="rounded-lg px-3 py-2 <?= $active == 1 ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground' ?>">
				<?= lang('salary_template_list') ?>
			</a>
			<a href="<?= base_url('admin/payroll/create_salarytemplate') ?>" class="rounded-lg px-3 py-2 <?= $active == 2 ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground' ?>">
				<?= lang('new_template') ?>
			</a>
		</div>

		<div class="rounded-2xl border border-border bg-card shadow-sm">
			<div class="border-b border-border px-5 py-4">
				<div class="flex items-center gap-2 text-sm font-semibold text-foreground">
					<i data-lucide="file-text" class="h-5 w-5"></i>
					<span><?= lang('salary_template_details') ?></span>
				</div>
			</div>
			<div class="p-5">
				<form data-parsley-validate="" novalidate="" role="form" enctype="multipart/form-data"
					action="<?php echo base_url() ?>admin/payroll/set_salary_details/<?php
																						if (!empty($salary_template_info->salary_template_id)) {
																							echo $salary_template_info->salary_template_id;
																						}
																						?>" method="post"
					class="form-horizontal form-groups-bordered">
					<div class="row">

						<div class="grid grid-cols-1 gap-4 md:grid-cols-3 mb-5">
							<?= form_input_group('salary_grade', lang('salary_grade'), !empty($salary_template_info) ? $salary_template_info->salary_grade : '', 'text', true, ['placeholder' => lang('salary_grade')]); ?>

							<?= form_input_group('basic_salary', lang('basic_salary'), !empty($salary_template_info) ? $salary_template_info->basic_salary : '', 'text', true, ['placeholder' => lang('basic_salary')]); ?>

							<?= form_input_group('overtime_salary', lang('overtime_rate'), !empty($salary_template_info) ? $salary_template_info->overtime_salary : '', 'text', false, ['placeholder' => lang('overtime_rate')]); ?>
						</div>




						<div class="col-sm-6">
							<div class="panel panel-custom rounded-xl border border-border bg-card shadow-sm">
								<div class="panel-heading border-b border-border px-4 py-3">
									<div class="panel-title">
										<strong><?= lang('allowances') ?>
										</strong>
										<small
											style="display: block;
                                            font-size: 12px;
                                            font-weight: 400;
                                            line-height: 1.42857143;
                                            color: #999;"><?= lang('the_percentage_value_will_be_calculated_based_on_basic_salary') ?></small>
									</div>
								</div>
								<div class="panel-body p-4">
									<div id="add_new">

										<?php
										$total_salary = 0;
										if (!empty($salary_allowance_info)) : foreach ($salary_allowance_info as $v_allowance_info) : ?>

												<div class="row">
													<div class="col-sm-12">
														<input type="text" style="margin:5px 0px;height: 28px;width: 56%;"
															class="form-control pull-left" name="allowance_label[]"
															value="<?php echo $v_allowance_info->allowance_label; ?>">
													</div>
													<div class="col-sm-9">
														<div class="input-group">
															<input type="text" data-parsley-type="number"
																name="allowance_percent[]"
																value="<?php echo $v_allowance_info->allowance_percent; ?>"
																class="salary form-control">

															<input type="hidden" data-parsley-type="number"
																name="allowance_value[]"
																value="<?php echo $v_allowance_info->allowance_value; ?>"
																class="allowance_amount form-control">


															<input type="hidden" name="salary_allowance_id[]"
																value="<?php echo $v_allowance_info->salary_allowance_id; ?>"
																class="form-control">

															<div class="input-group-addon p0 b0">
																<select name="allowance_type[]"
																	class="allowance_type p-sm b"
																	data-width="100%">
																	<option value="percent"
																		<?= ($v_allowance_info->allowance_type == 'percent') ? 'selected' : ''; ?>><?= lang('percent') ?></option>
																	<option value="fixed"
																		<?= ($v_allowance_info->allowance_type == 'fixed') ? 'selected' : ''; ?>><?= lang('fixed') ?></option>
																</select>
															</div>
															<div class="input-group-addon calculated_amount">
																<?php echo $v_allowance_info->allowance_value; ?>
															</div>
														</div>
													</div>
													<div class="col-sm-3"><strong><a href="javascript:void(0);" class="remCF"><i
																	class="fa fa-times"></i>&nbsp;Remove</a></strong>
													</div>
												</div>
												<?php $total_salary += $v_allowance_info->allowance_value; ?>
											<?php endforeach; ?>
										<?php else : ?>
											<div class="">
												<label class="control-label"><?= lang('house_rent_allowance') ?> </label>
												<div class="input-group">
													<input type="text" data-parsley-type="number"
														name="house_rent_allowance"
														value="" class="salary form-control">

													<input type="text" data-parsley-type="number"
														name="house_rent_allowance_amount"
														value="0"
														class="allowance_amount form-control">

													<div class="input-group-addon p0 b0">
														<select name="house_rent_allowance_type"
															class="p-sm b allowance_type"
															data-width="100%">
															<option value="percent"><?= lang('percent') ?></option>
															<option value="fixed"><?= lang('fixed') ?></option>
														</select>
													</div>
													<div class="input-group-addon calculated_amount">
														0
													</div>
												</div>
											</div>
											<div class="">
												<label class="control-label"><?= lang('medical_allowance') ?> </label>
												<div class="input-group">
													<input type="text" data-parsley-type="number"
														name="medical_allowance"
														value="" class="salary form-control">

													<input type="hidden" data-parsley-type="number"
														name="medical_allowance_amount"
														value="0"
														class="allowance_amount form-control">

													<div class="input-group-addon p0 b0">
														<select name="medical_allowance_type"
															class="p-sm b allowance_type"
															data-width="100%">
															<option value="percent"><?= lang('percent') ?></option>
															<option value="fixed"><?= lang('fixed') ?></option>
														</select>
													</div>
													<div class="input-group-addon calculated_amount">
														0
													</div>
												</div>
											</div>
										<?php endif; ?>

									</div>
									<div class="margin">
										<strong><a href="javascript:void(0);" id="add_more" class="addCF "><i
													class="fa fa-plus"></i>&nbsp;<?= lang('add_more') ?>
											</a></strong>
									</div>
								</div>
								<div class="panel-footer border-t border-border px-4 py-3">
									<div class="row">
										<div class="col-sm-12">
											<?= lang('total_allowance') ?> :
											<span id="total_allowance">
												<?php
												if (!empty($total_salary)) {
													echo $total_salary;
												}
												?>
											</span>
										</div>
									</div>
								</div>
							</div>
						</div><!-- ********************Allowance End ******************-->

						<!-- ************** Deduction Panel Column  **************-->
						<div class="col-sm-6">
							<div class="panel panel-custom rounded-xl border border-border bg-card shadow-sm">
								<div class="panel-heading border-b border-border px-4 py-3">
									<div class="panel-title">
										<strong><?= lang('deductions') ?></strong>
										<small
											style="display: block;
                                            font-size: 12px;
                                            font-weight: 400;
                                            line-height: 1.42857143;
                                            color: #999;"><?= lang('the_percentage_value_will_be_calculated_based_on_basic_salary') ?></small>
									</div>
								</div>
								<div class="panel-body p-4">
									<div id="add_new_deduc">
										<?php
										$total_deduction = 0;
										if (!empty($salary_deduction_info)) : foreach ($salary_deduction_info as $v_deduction_info) :
										?>
												<div class="row">
													<div class="col-sm-12">
														<input type="text" style="margin:5px 0px;height: 28px;width: 56%;"
															class="form-control" name="deduction_label[]"
															value="<?php echo $v_deduction_info->deduction_label; ?>"
															class="">
													</div>
													<div class="col-sm-9">
														<div class="input-group">
															<input type="text" data-parsley-type="number"
																name="deduction_percent[]"
																value="<?php echo $v_deduction_info->deduction_percent; ?>"
																class="deduction form-control">

															<input type="hidden" data-parsley-type="number"
																name="deduction_value[]"
																value="<?php echo $v_deduction_info->deduction_value; ?>"
																class="deduction_amount form-control">

															<input type="hidden" name="salary_deduction_id[]"
																value="<?php echo $v_deduction_info->salary_deduction_id; ?>"
																class="form-control">

															<div class="input-group-addon p0 b0">
																<select name="deduction_type[]"
																	class="deduction_type p-sm b"
																	data-width="100%">
																	<option value="percent"
																		<?= ($v_deduction_info->deduction_type == 'percent') ? 'selected' : ''; ?>><?= lang('percent') ?></option>
																	<option value="fixed"
																		<?= ($v_deduction_info->deduction_type == 'fixed') ? 'selected' : ''; ?>><?= lang('fixed') ?></option>
																</select>
															</div>
															<div class="input-group-addon calculated_amount">
																<?php echo $v_deduction_info->deduction_value; ?>
															</div>
														</div>
													</div>
													<div class="col-sm-3"><strong><a href="javascript:void(0);"
																class="remCF_deduc"><i
																	class="fa fa-times"></i>&nbsp;Remove</a></strong>
													</div>
												</div>
												<?php $total_deduction += $v_deduction_info->deduction_value ?>
											<?php endforeach; ?>
										<?php else : ?>
											<div class="">
												<label class="control-label"><?= lang('provident_fund') ?> </label>
												<div class="input-group">
													<input type="text" data-parsley-type="number" name="provident_fund"
														value=""
														class="deduction form-control">
													<input type="hidden" data-parsley-type="number"
														name="provident_fund_amount"
														value="0"
														class="deduction_amount form-control">

													<div class="input-group-addon p0 b0">
														<select name="provident_fund_type"
															class="p-sm b deduction_type"
															data-width="100%">
															<option value="percent"><?= lang('percent') ?></option>
															<option value="fixed"><?= lang('fixed') ?></option>
														</select>
													</div>
													<div class="input-group-addon calculated_amount">
														0
													</div>
												</div>
											</div>
											<div class="">
												<label class="control-label"><?= lang('tax_deduction') ?> </label>
												<div class="input-group">
													<input type="text" data-parsley-type="number" name="tax_deduction"
														value=""
														class="deduction form-control">
													<input type="hidden" data-parsley-type="number"
														name="tax_deduction_amount"
														value="0"
														class="deduction_amount form-control">

													<div class="input-group-addon p0 b0">
														<select name="tax_deduction_type"
															class="p-sm b tax_deduction_type"
															data-width="100%">
															<option value="percent"><?= lang('percent') ?></option>
															<option value="fixed"><?= lang('fixed') ?></option>
														</select>
													</div>
													<div class="input-group-addon calculated_amount">
														0
													</div>
												</div>
											</div>
										<?php endif; ?>
									</div>

									<div class="margin">
										<strong><a href="javascript:void(0);" id="add_more_deduc" class="addCF "><i
													class="fa fa-plus"></i>&nbsp;<?= lang('add_more') ?>
											</a></strong>
									</div>
								</div>
								<div class="panel-footer border-t border-border px-4 py-3">
									<div class="row">
										<div class="col-sm-12">
											<?= lang('total_deductions') ?> :
											<span id="total_deductions">
												<?php
												if (!empty($total_deduction)) {
													echo $total_deduction;
												}
												?>
											</span>
										</div>
									</div>
								</div>
							</div>
						</div><!-- ****************** Deduction End  *******************-->
						<!-- ************** Total Salary Details Start  **************-->
					</div>
					<div class="row">
						<div class="col-md-8 pull-right">
							<div class="panel panel-custom rounded-xl border border-border bg-card shadow-sm">
								<div class="panel-heading border-b border-border px-4 py-3">
									<div class="panel-title">
										<strong><?= lang('total_salary_details') ?></strong>
									</div>
								</div>
								<div class="panel-body p-4">
									<table class="table table-bordered custom-table">
										<tr>
											<!-- Sub total -->
											<th class="col-sm-8 vertical-td"><strong><?= lang('gross_salary') ?>
													:</strong>
											</th>
											<td class="">
												<input type="text" name="" disabled value="<?php
																							if (!empty($total_salary) || !empty($salary_template_info->basic_salary)) {
																								echo $total = $total_salary + $salary_template_info->basic_salary;
																							}
																							?>" id="total"
													class="form-control">
											</td>
										</tr> <!-- / Sub total -->
										<tr>
											<!-- Total tax -->
											<th class="col-sm-8 vertical-td"><strong><?= lang('total_deduction') ?>
													:</strong></th>
											<td class="">
												<input type="text" name="" disabled value="<?php
																							if (!empty($total_deduction)) {
																								echo $total_deduction;
																							}
																							?>" id="deduc"
													class="form-control">
											</td>
										</tr><!-- / Total tax -->
										<tr>
											<!-- Grand Total -->
											<th class="col-sm-8 vertical-td"><strong><?= lang('net_salary') ?>
													:</strong>
											</th>
											<td class="">
												<input type="text" name="" disabled required value="<?php
																									if (!empty($total) || !empty($total_deduction)) {
																										echo $total - $total_deduction;
																									}
																									?>" id="net_salary"
													class="form-control">
											</td>
										</tr><!-- Grand Total -->
									</table><!-- Order Total table list start -->

								</div>
							</div>
						</div><!-- ****************** Total Salary Details End  *******************-->
					</div>
					<div class="flex items-center justify-end gap-2 pt-4">
						<?php if (!empty($salary_template_info)) { ?>
							<button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-3 py-2 text-xs font-semibold text-white shadow-sm hover:bg-indigo-500">
								<i data-lucide="save" class="h-4 w-4"></i>
								<?= lang('updates') ?>
							</button>
							<button type="button" onclick="goBack()"
								class="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-xs font-semibold text-foreground hover:bg-muted">
								<i data-lucide="x" class="h-4 w-4"></i>
								<?= lang('cancel') ?>
							</button>
						<?php } else { ?>
							<button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-3 py-2 text-xs font-semibold text-white shadow-sm hover:bg-indigo-500">
								<i data-lucide="save" class="h-4 w-4"></i>
								<?= lang('save') ?>
							</button>
						<?php } ?>
					</div>

				</form>
			</div>
		</div>
	</div>
<?php } ?>
<script type="text/javascript">
	$(document).ready(function() {
		var maxAppend = 0;
		$("#add_more").on("click", function() {
			if (maxAppend >= 100) {
				alert(<?= json_encode(lang('max_100_file_allowed')) ?>);
			} else {
				var add_new = $(
					'<div class="row">\n\
        <div class="col-sm-12"><input type="text" name="allowance_label[]" style="margin:5px 0px;height: 28px;width: 56%;" class="form-control"  placeholder="<?= lang('enter') . ' ' . lang('allowances') . ' ' . lang('label') ?>" required ></div>\n\
<div class="col-sm-9"><div class="input-group">\n\<input  type="text" data-parsley-type="number" name="allowance_percent[]" placeholder="<?= lang('enter') . ' ' . lang('allowances') . ' ' . lang('value') ?>" required  value=""  class="salary form-control"><input type="hidden" data-parsley-type="number" name="allowance_value[]" value="0" class="allowance_amount form-control"><div class="input-group-addon p0 b0"><select name="allowance_type[]" class="allowance_type p-sm b" data-width="100%"><option value="percent"><?= lang('percent') ?></option><option value="fixed"><?= lang('fixed') ?></option></select></div><div class="input-group-addon calculated_amount">0</div></div></div><div class="col-sm-3"><strong><a href="javascript:void(0);" class="remCF"><i class="fa fa-times"></i>&nbsp;Remove</a></strong></div></div>'
				);
				maxAppend++;
				$("#add_new").append(add_new);
			}
		});

		$("#add_new").on('click', '.remCF', function() {
			$(this).parent().parent().parent().remove();
			calculate_payroll();
		});
	});
</script>
<script type="text/javascript">
	$(document).ready(function() {
		var maxAppend = 0;
		$("#add_more_deduc").on("click", function() {
			if (maxAppend >= 100) {
				alert(<?= json_encode(lang('max_100_file_allowed')) ?>);
			} else {
				var add_new = $(
					'<div class="row">\n\
        <div class="col-sm-12"><input type="text" name="deduction_label[]" style="margin:5px 0px;height: 28px;width: 56%;" class="form-control" placeholder="<?= lang('enter') . ' ' . lang('deductions') . ' ' . lang('label') ?>" required></div>\n\
<div class="col-sm-9"><div class="input-group">\n\<input  type="text" data-parsley-type="number" name="deduction_percent[]" placeholder="<?= lang('enter') . ' ' . lang('deductions') . ' ' . lang('value') ?>" required  value="" class="deduction form-control"><input type="hidden" data-parsley-type="number" name="deduction_value[]" value="0" class="deduction_amount form-control"><div class="input-group-addon p0 b0"><select name="deduction_type[]" class="deduction_type p-sm b" data-width="100%"><option value="percent"><?= lang('percent') ?></option><option value="fixed"><?= lang('fixed') ?></option></select></div><div class="input-group-addon calculated_amount">0</div></div></div>\n\
<div class="col-sm-3"><strong><a href="javascript:void(0);" class="remCF_deduc"><i class="fa fa-times"></i>&nbsp;Remove</a></strong></div></div>'
				);
				maxAppend++;
				$("#add_new_deduc").append(add_new);
			}
		});

		$("#add_new_deduc").on('click', '.remCF_deduc', function() {
			$(this).parent().parent().parent().remove();
			calculate_payroll();
		});
	});
</script>
<script type="text/javascript">
	$(document).on("change blur", function() {
		calculate_payroll();
	});

	function calculate_payroll() {
		var sum = 0;
		var deduc = 0;
		let total_allowance = 0;
		let basic_salary = $("#basic_salary").val();
		$(".salary").each(function() {
			const allowance_type = $(this).parent().find('.allowance_type').val();
			let amount = 0;
			if (allowance_type === 'fixed') {
				amount = $(this).val();
			} else {
				amount = $(this).val() * basic_salary / 100;
			}
			// if amount is not a number then set it to 0
			if (isNaN(amount)) {
				amount = 0;
			}
			// show the amount into allowance_amount input
			$(this).parent().find('.allowance_amount').val(Math.round(amount));
			$(this).parent().find('.calculated_amount').html(allowance_type === 'fixed' ? '= ' + (amount) : '% ' + Math.round(amount));
			// total allowance
			total_allowance += +amount;
			sum += +amount;
		});
		$('#total_allowance').html(Math.round(total_allowance));

		$(".deduction").each(function() {
			const deduction_type = $(this).parent().find('.deduction_type').val();
			let amount = 0;
			if (deduction_type === 'fixed') {
				amount = $(this).val();
			} else {
				amount = $(this).val() * basic_salary / 100;
			}
			// if amount is not a number then set it to 0
			if (isNaN(amount)) {
				amount = 0;
			}
			// show the amount into deduction_amount input
			$(this).parent().find('.deduction_amount').val(Math.round(amount));
			$(this).parent().find('.calculated_amount').html(
				deduction_type === 'fixed' ? '= ' + (amount) : '% ' + Math.round(amount)
			);
			deduc += +amount;
		});
		$('#total_deductions').html(deduc);

		let total_gross = Math.round(sum) + Math.round(basic_salary);

		$("#total").val(total_gross);
		$("#deduc").val(deduc);
		var net_salary = 0;
		net_salary = total_gross - deduc;
		$("#net_salary").val(net_salary);
	}
</script>
