@extends('admin.layouts.main')

@section('title')
@if($edit)
{{ @trans('finance.edit_purchase_order') }}
@else
{{ @trans('finance.add_purchase_order') }}
@endif

@endsection

@section('content')
<main>
	<div class="two-col">

		@include("admin.common.sidebar")

		<div class="right-sec">
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('finance.finance') }}</a></li>
					<li class="breadcrumb-item active"><a href="{{ route('admin.purchase-orders.index',['panel' => session('panel')]) }}">{{ @trans('finance.purchase_orders') }}</a>
					</li>
					<li class="breadcrumb-item active" aria-current="page">
						@if($edit){{ @trans('finance.edit_purchase_order') }}@else{{ @trans('finance.add_purchase_order') }}@endif
					</li>
				</ol>
			</nav>
			<div class="form-sec">
				<div class="container">
					<div class="row">
						<div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
							<div class="step-box">

								<form method="post" action="{{ route('admin.purchase-orders.store', ['panel' => Session::get('panel')]) }}" id="frmStorePo" enctype="multipart/form-data" autocomplete="off">

									@csrf
									<input type="hidden" name="form_type" value="purchase_order">
									<div class="form-body">

										@if($edit)
										<h2 class="form-sec-title">{{ @trans('finance.edit_purchase_order_details') }}
										</h2>
										<input type="hidden" name="id" value="{{$pvDetail->id}}">
										@else
										<h2 class="form-sec-title">{{ @trans('finance.add_purchase_order_details') }}
										</h2>
										@endif

										<div class="row">

											<div class="col-md-6">
												<div class="form-group">
													<label class="control-label">{{ @trans('finance.purchase_order_number') }}
														<span class="required">*</span></label>
													<input type="text" class="form-control disabled" placeholder="{{ @trans('finance.purchase_order_number') }}" name="serial_number" id="serial_number" value="@if($edit){{ $pvDetail->lpo_serial_number }} @else{{ $serialNo }}@endif">
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group date">
													<label class="control-label">{{ @trans('finance.payment_date') }}
														<span class="required">*</span></label>
													<div class="input-group date">
														<input type="text" class="form-control dateselect bg-white" placeholder="Select Payment Date" id="date" name="date" readonly value="@if($edit){{ $pvDetail->date_formatted_full }}@else{{ old('payment_date') }}@endif">
														<div class="input-group-addon">
															<span class="material-icons">date_range</span>
														</div>
													</div>
												</div>
											</div>

											<div class="col-md-6">
												<div class="form-group btm-arrow select">
													<label class="control-label" for="company_id">{{ @trans('finance.company') }} <span class="required">*</span> </label>
													<select class="form-control" id="company_id" name="company_id">
														<option value="">{{ @trans('finance.select') }}</option>
														@foreach($companyList as $company)
														<option value="{{ $company->id }}" @if($edit) @if($pvDetail->company_id == $company->id)selected @endif
															@else
															@if($company->id == old('company_id')) selected @endif
															@endif
															>{{ $company->name }}</option>
														@endforeach
													</select>
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group btm-arrow select">
													<label class="control-label" for="contact">{{ @trans('finance.contact') }} <span class="required">*</span></label>
													<select class="form-control" id="contact_id" name="contact_id">
														<option value="">{{ @trans('finance.select_contact') }}</option>
														@if($edit)
														@foreach($pvContactDetail as $contact)
														<option value="{{ $contact->id }}" @if($pvDetail->contact_id == $contact->id) selected @else
															@if($contact->id == old('contact_id')) selected @endif
															@endif
															>{{ $contact->first_name }} {{ $contact->last_name }}
														</option>
														@endforeach
														@endif
													</select>
												</div>
											</div>

											<div class="col-md-12 mb-3">
												<div class="row">
													<div class="col-md-6">
														<div class="form-group mb-0">
															<label class="control-label">{{ @trans('finance.currency') }}
																<span class="required">*</span></label>
															<div class="custom-control custom-radio">
																<input type="radio" class="custom-control-input" id="USD" name="currency" value="USD" @if($edit) @if($pvDetail->currency == "USD") checked @endif
																@endif
																@if(old('currency') == "USD") checked @endif>
																<label class="custom-control-label" for="USD">{{ @trans('finance.usd') }}</label>
															</div>
															<div class="custom-control custom-radio">
																<input type="radio" class="custom-control-input" id="{{ $franchiseCurrency }}" name="currency" value="{{ $franchiseCurrency }}" @if($edit) @if($pvDetail->currency == $franchiseCurrency) checked @endif
																@endif
																@if(old('currency') == "{{ $franchiseCurrency }}") checked @endif>
																<label class="custom-control-label" for="{{ $franchiseCurrency }}">{{ $franchiseCurrency }}</label>
															</div>
														</div>
													</div>
													@if($edit && $pvDetail->currency == 'USD')
													<div class="col-md-6 conversion_rate_div">
														<div class="form-group">
															<label class="control-label">{{ @trans('finance.coversion_rate') }}
																<span class="required">*</span></label>
															<input type="text" class="form-control" placeholder="Convserion Rate" name="conversion_rate" id="conversion_rate" value="@if($edit){{ $pvDetail->conversion_rate }}@endif">
														</div>
													</div>
													@else
													<div class="col-md-6 conversion_rate_div @if(old('currency') == 'USD') '' @else d-none @endif">
														<div class="form-group">
															<label class="control-label">{{ @trans('finance.coversion_rate') }}
																<span class="required">*</span></label>
															<input type="text" class="form-control" placeholder="Convserion Rate" name="conversion_rate" id="conversion_rate" value="{{ old('conversion_rate') }}">
														</div>
													</div>
													@endif
												</div>
											</div>

											<div class="col-md-12 mb-3">
												<div class="row">
													<div class="col-md-12">
														<div class="form-group mb-0">
															<label class="control-label">{{ @trans('finance.short_description') }}
																<span class="required">*</span></label>
															<div class="form-group">
																<textarea class="form-control" placeholder="{{ @trans('finance.short_description') }}" maxlength="100" name="short_description" id="short_description">@if($edit){{ $pvDetail->description }}@endif</textarea>
																<span></span>
															</div>
														</div>
													</div>
												</div>
											</div>
											@if($isExemptVat)
											<div class="col-md-12">
												<div class="form-group">
													<div class="form-group">
														<div class="custom-control custom-checkbox custom-control-inline">
															<input type="checkbox" class="custom-control-input" id="exempt_vat" name="exempt_vat" value="1" @if($edit && $pvDetail->exempt_vat) checked @endif>
															<label class="custom-control-label" for="exempt_vat">{{ @trans('finance.exempt_vat') }}</label>
														</div>
													</div>
												</div>
											</div>
											@endif

											<div class="col-md-12 items_div">
												<h2 class="form-sec-title">{{ @trans('finance.item_details') }}</h2>
												@if($edit)
													@if(count($pvDetail->items) > 0)
														@foreach($pvDetail->items as $item)
														<div class="appended_item_row">
															<div class="row">
																<div class="col-md-11">
																	<div class="form-group remove-wrapper">
																		<label class="control-label">Item </label>
																		<textarea class="tinymce_class itemName" id="items[{{$loop->index }}][name]" name="items[{{$loop->index }}][name]">{{ $item->description }}</textarea>
																	</div>
																</div>
																<div class="col-md-1">
																	<div class="form-group">
																		<label for="" class="control-label"></label>
																		@if($loop->index == 0)
																		<a href="javascript:void(0)" class="btn add-row add_item_row" title="add"><i class="material-icons">{{ @trans('finance.add') }}</i></a>
																		@else
																		<a href="javascript:void(0)" class="btn remove-row remove_item_row" title="remove"><i class="material-icons">close</i></a>
																		@endif
																	</div>
																</div>
															</div>
															<div class="row">
																<div class="col-md-6">
																	<div class="form-group">
																		<label class="control-label">Amount </label>
																		<input type="text" class="form-control itemAmount" placeholder="Amount" name="items[{{$loop->index}}][amount]" value="{{ $item->amount }}">
																	</div>
																</div>
																<div class="col-md-5">
																	<div class="form-group">
																		<label class="control-label">Project </label>
																		<select name="items[{{$loop->index }}][project]" id="items_project_{{$loop->index}}" class="form-control itemProject" @if($item->project_id) data-project-id="{{ $item->project_id }}" data-project-name="{{ $item->project->name }}" @endif>
																			<option value="">Select</option>
																		</select>
																	</div>
																</div>
															</div>
														</div>
														@endforeach
													@else
														<div class="appended_item_row">
															<div class="row">
																<div class="col-md-11">
																	<div class="form-group remove-wrapper">
																		<label class="control-label">Item </label>
																		<textarea class="tinymce_class itemName" id="items[0][name]" name="items[0][name]"></textarea>
																	</div>
																</div>
																<div class="col-md-1">
																	<div class="form-group">
																		<label for="" class="control-label"></label>
																		<a href="javascript:void(0)" class="btn add-row add_item_row" title="add"><i class="material-icons">{{ @trans('finance.add') }}</i></a>
																	</div>
																</div>
															</div>
															<div class="row">
																<div class="col-md-6">
																	<div class="form-group">
																		<label class="control-label">Amount </label>
																		<input type="text" class="form-control itemAmount hasClose" placeholder="Amount" name="items[0][amount]">
																	</div>
																</div>
																<div class="col-md-5">
																	<div class="form-group">
																		<label class="control-label">Project </label>
																		<select name="items[0][project]" class="form-control itemProject" id="items_project_{{$loop->index}}" @if($item->project_id) data-project-id="{{ $item->project_id }}" data-project-name="{{ $item->project->name }}" @endif>
																			<option value="">Select</option>
																		</select>
																	</div>
																</div>
															</div>
														</div>
													@endif
												@else
													<div class="appended_item_row">
														<div class="row">
															<div class="col-md-11">
																<div class="form-group remove-wrapper">
																	<label class="control-label">Item </label>
																	<textarea class="tinymce_class itemName" id="items[0][name]" name="items[0][name]"></textarea>
																</div>
															</div>
															<div class="col-md-1">
																<div class="form-group">
																	<label for="" class="control-label"></label>
																	<a href="javascript:void(0)" class="btn add-row add_item_row" title="add"><i class="material-icons">{{ @trans('finance.add') }}</i></a>
																</div>
															</div>
														</div>
														<div class="row">
															<div class="col-md-6">
																<div class="form-group">
																	<label class="control-label">Amount </label>
																	<input type="text" class="form-control itemAmount hasClose" placeholder="Amount" name="items[0][amount]">
																</div>
															</div>
															<div class="col-md-5">
																<div class="form-group">
																	<label class="control-label">Project</label>
																	<select name="items[0][project]" class="form-control itemProject">
																		<option value="">Select</option>
																	</select>
																</div>
															</div>
														</div>
													</div>
												@endif


											</div>

											<div class="col-md-12">
												<h2 class=" form-sec-title">{{ @trans('finance.taxation_details') }}
												</h2>
											</div>
											@if($edit)
											@foreach($countryList as $key => $country)
											<div class="col-md-6">
												<div class="form-group remove-wrapper">
													<label class="control-label" for="tax_number[{{ str_replace(' ','_',$country->tax_title)}}]">{{$country->tax_title}} (%)
													</label>
													@php
													$temp_tax_value = '';
													foreach($pvDetail->taxes as $tax) {
													if($tax->tax_title == $country->tax_title) {
													$temp_tax_value = $tax->tax_value;
													}
													}
													@endphp
													<input type="hidden" name="tax_excluded[{{ str_replace(' ','_',$country->tax_title) }}]" value="{{ $pvDetail->tax_excluded_values[$country->tax_title] }}">
													<input type="text" class="form-control taxInputs" name="tax_value[{{ str_replace(' ','_',$country->tax_title) }}]" id="tax_value[{{str_replace(' ','_',$country->tax_title)}}]" data-value="{{ $country->countryRegistration->registration_title ?? '' }}" data-tax="{{ $country->tax_title }}" value="{{$temp_tax_value}}" placeholder="{{$country->tax_title}}" />
												</div>

											</div>
											@endforeach
											@else
											@foreach($countryList as $key => $country)
											<div class="col-md-6 div_{{ $country->tax_title }}">
												<div class="form-group remove-wrapper">
													<label class="control-label" for="tax_number[{{ str_replace(' ','_',$country->tax_title)}}]">{{$country->tax_title}} (%)
													</label>
													<input type="hidden" name="tax_excluded[{{ str_replace(' ','_',$country->tax_title) }}]" value="{{ $country->is_excluded }}">
													<input type="text" class="form-control taxInputs" name="tax_value[{{ str_replace(' ','_',$country->tax_title) }}]" id="tax_value[{{str_replace(' ','_',$country->tax_title)}}]" value="@if($defaultTaxValues && isset($defaultTaxValues[$country->tax_title])){{$defaultTaxValues[$country->tax_title] }}@endif" data-value="{{ $country->countryRegistration->registration_title ?? '' }}" data-tax="{{ $country->tax_title }}" placeholder="{{$country->tax_title}}" />
												</div>

											</div>
											@endforeach
											@endif

											<div class="col-md-12">
												<div class="form-group">
													<div class="border-bottom custom-file-class">
														<label style="font-size: 16px; color: #414042; font-family: var(--semibold-font) !important;">
															{{ @trans('finance.upload_supporting_documentation') }}</label>
														<div class="custom-file float-right browse-btn" style="margin-top: -6px;">
															<input type="file" class="custom-file-input customDocumentUpload" id="paymentProofFile" name="paymentProofFile">
															<label class="custom-file-label" for="paymentProofFile"><img src="{{ asset('/img/file-upload.svg')}}" alt="upload">{{ @trans('finance.upload') }}</label>
														</div>
													</div>
													<div class="filename">
														<div class="col-md-12">
															<div class="form-group file-upload">
																@if($edit)
																<label class="control-label">{{ $pvDetail->payment_proof_orig_file_name }}</label>
																@if($pvDetail->payment_proof_orig_file_name)
																<a href="{{ $pvDetail->payment_proof_formatted }}" title="Download" target="_blank" class="text-right">
																	<i class="material-icons">get_app</i>
																</a>
																@endif
																@else
																<label class="control-label"></label>
																@endif
															</div>
														</div>
													</div>
												</div>
											</div>

											<div class="col-md-12 department_div">
												<h2 class=" form-sec-title">{{ @trans('finance.department_details') }}
												</h2>
												@if($edit)
												@if(count($pvDetail->splits) > 0)
												@foreach($pvDetail->splits as $split)
												<div class="row @if($edit) @if(!$loop->first) appended_department_row @endif @endif">
													<div class="col-md-4">
														<div class="form-group btm-arrow select">
															<label class="control-label department_id" for="split[{{$loop->index}}][department_id]">{{ @trans('finance.department') }}
															</label>
															<select class="form-control" name="split[{{$loop->index}}][department_id]" data-id="1">
																<option value="" hidden="">{{ @trans('finance.select') }}</option>
																@foreach($departmentList as $department)
																<option value="dept_{{ $department->id }}" class="optionGroup" @if($split->department_id == $department->id && $split->type == 'dept')
																	selected @endif>{{ $department->name }}</option>
																@foreach($department->subdepts as $subdept)
																<option value="subdept_{{ $subdept->id }}" @if($split->department_id == $subdept->id && $split->type == 'sub_dept')
																	selected @endif>&emsp;&emsp;{{ $subdept->name }}</option>
																@endforeach
																@endforeach
															</select>
														</div>
													</div>
													<div class="col-md-4">
														<div class="form-group btm-arrow select">
															<label class="control-label" for="split[{{$loop->index}}][user_id]">{{ @trans('finance.account') }}</label>
															<select class="form-control user_id" name="split[{{$loop->index}}][user_id]">
																<option value="" hidden="">{{ @trans('finance.select') }}</option>
																<option value="cost_of_goods_sold" @if($split->account == 'cost_of_goods_sold') selected @endif>Cost of Goods Sold</option>
																<option value="human_capital" @if($split->account == 'human_capital') selected @endif>Human Capital</option>
																<option value="operational_expense" @if($split->account == 'operational_expense') selected @endif>Operational Expense</option>
																<option value="investment" @if($split->account == 'investment') selected @endif>Investment</option>
																<option value="tax" @if($split->account == 'tax') selected @endif>Tax</option>
															</select>
														</div>
													</div>
													<div class="col-md-4">
														<div class="form-group remove-wrapper">
															<label class="control-label">{{ @trans('finance.amount') }}</label>
															<input type="text" class="form-control amount deptAmount hasClose" placeholder="Amount" name="split[{{$loop->index}}][amount]" value="{{ $split->amount }}">
															@if($loop->index == 0)
															<a href="javascript:void(0)" class="btn add-row add_department_row" title="add"><i class="material-icons">add</i></a>
															@else
															<a href="javascript:void(0)" class="btn remove-row remove_department_row" title="remove"><i class="material-icons">close</i></a>
															@endif
														</div>
													</div>
												</div>
												@endforeach
												@else
												<div class="row appended_department_row">
													<div class="col-md-4">
														<div class="form-group btm-arrow select">
															<label class="control-label" for="split[0][department_id]">Department </label>
															<select class="form-control department_id" id="split[0][department_id]" name="split[0][department_id]">
																<option value="" hidden="">Select</option>
																@foreach($departmentList as $department)
																<option value="dept_{{ $department->id }}" class="optionGroup">{{ $department->name }}</option>
																@foreach($department->subdepts as $subdept)
																<option value="subdept_{{ $subdept->id }}">&emsp;&emsp;{{ $subdept->name }}</option>
																@endforeach
																@endforeach
															</select>
														</div>
													</div>
													<div class="col-md-4">
														<div class="form-group btm-arrow select">
															<label class="control-label" for="split[0][user_id]">Account </label>
															<select class="form-control user_id" id="split[0][user_id]" name="split[0][user_id]">
																<option value="" hidden="">Select</option>
																<option value="cost_of_goods_sold">Cost of Goods Sold</option>
																<option value="human_capital">Human Capital</option>
																<option value="operational_expense">Operational Expense</option>
																<option value="investment">Investment</option>
																<option value="tax">Tax</option>
															</select>
														</div>
													</div>
													<div class="col-md-4">
														<div class="form-group remove-wrapper">
															<label class="control-label" for="split[0][amount]">Amount </label>
															<input type="text" class="form-control amount deptAmount hasClose" placeholder="Amount" name="split[0][amount]">
															<a href="javascript:void(0)" class="btn add-row add_department_row" title="add"><i class="material-icons">add</i></a>
														</div>
													</div>
												</div>
												@endif
												@else
												<div class="row appended_department_row">
													<div class="col-md-4">
														<div class="form-group btm-arrow select">
															<label class="control-label" for="split[0][department_id]">Department </label>
															<select class="form-control department_id" id="split[0][department_id]" name="split[0][department_id]">
																<option value="" hidden="">Select</option>
																@foreach($departmentList as $department)
																<option value="dept_{{ $department->id }}" class="optionGroup">{{ $department->name }}</option>
																@foreach($department->subdepts as $subdept)
																<option value="subdept_{{ $subdept->id }}">&emsp;&emsp;{{ $subdept->name }}</option>
																@endforeach
																@endforeach
															</select>
														</div>
													</div>
													<div class="col-md-4">
														<div class="form-group btm-arrow select">
															<label class="control-label" for="split[0][user_id]">Account </label>
															<select class="form-control user_id" id="split[0][user_id]" name="split[0][user_id]">
																<option value="" hidden="">Select</option>
																<option value="cost_of_goods_sold">Cost of Goods Sold</option>
																<option value="human_capital">Human Capital</option>
																<option value="operational_expense">Operational Expense</option>
																<option value="investment">Investment</option>
																<option value="tax">Tax</option>
															</select>
														</div>
													</div>
													<div class="col-md-4">
														<div class="form-group remove-wrapper">
															<label class="control-label" for="split[0][amount]">Amount </label>
															<input type="text" class="form-control amount deptAmount hasClose" placeholder="Amount" name="split[0][amount]">
															<a href="javascript:void(0)" class="btn add-row add_department_row" title="add"><i class="material-icons">add</i></a>
														</div>
													</div>
												</div>
												@endif
											</div>
											<div class="col-md-12">
												<h2 class=" form-sec-title">{{ @trans('finance.terms') }}</h2>
												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<textarea class="tinymce_class" name="terms" id="terms">@if($edit) @if($pvDetail->terms) {{ $pvDetail->terms }} @endif @endif</textarea>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="form-action text-right">
										<input type="button" class="btn step-btn submitBtn" value="@if($edit){{ @trans('finance.edit_purchase_order') }}@else{{ @trans('finance.add_purchase_order') }}@endif">
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>
@endsection


@push('pageJs')

<script type="text/javascript" src="{{ asset('js/vendor/jquery.validate.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.alphanum/1.0.24/jquery.alphanum.min.js"></script>
<script>
	var checkCompanyHaveTaxRegNo = "{{ route('admin.finance.companyHaveRegNo', ['panel' => Session::get('panel')]) }}";
	$(document).ready(function() {

		initTinyMce();

		validateNumericField();

		jQuery.validator.addMethod('checkSum', function(value, element) {

			if ($('[name^="split"]').length) {
				var total = 0;
				$('[name^="split"]').each(function() {
					if ($(this).hasClass('amount'))
						total += parseInt($(this).val());
				});
				return total == value;
			} else {
				return true;
			}
		}, "Total amount must be equal to splits");

		$.validator.addMethod('filesize', function(value, element, param) {
			var files = $('#' + element.id)[0].files;
			if (files[0]) {
				var fname = files[0].size;
				if (fname >= param) {
					return false;
				}
			}
			return true;
		}, 'Maximum size should be less than 8MB.');

		$.validator.addMethod("validate_file_type", function(val, elem) {
			var files = $('#' + elem.id)[0].files;
			if (files[0]) {
				var fname = files[0].name.toLowerCase();
				var re = /(\.pdf|\.jpeg|\.jpg|\.png)$/i;
				if (!re.exec(fname)) {
					return false;
				}
			}
			return true;
		}, "Valid file formats are PDF, Images (png/jpg).");

		var validator = $('#frmStorePo').validate({
			errorElement: 'span',
			errorClass: 'invalid-feedback',
			rules: {
				serial_number: 'required',
				date: 'required',
				currency: 'required',
				short_description: 'required',
				total_amount: {
					required: true,
					checkSum: true
				},
				paymentProofFile: {
					validate_file_type: true,
					filesize: 8000000,
				},
				company_id: 'required',
				contact_id: 'required',
				conversion_rate: {
					required: function(element) {
						return $("#frmStorePo [name='currency']:checked").val() == 'USD';
					},
					number: true,
					min: 0
				},
			},
			messages: {
				serial_number: {
					required: 'Serial number is required'
				},
				date: {
					required: 'Date is required'
				},
				short_description: {
					required: 'Short Description is required'
				},
				paymentProofFile: {
					extension: 'Valid files are PDF, Images (png/jpg)',
				},

				currency: 'Currency is required',
				total_amount: {
					required: 'Total amount is required',
					checkSum: 'Total amount must be equal to splits'
				},
				company_id: {
					required: 'Company is required'
				},
				contact_id: {
					required: 'Contact is required'
				},
				conversion_rate: {
					required: 'Conversion rate is required',
					number: 'Conversion rate must be a number',
					min: 'Conversion rate must be a number',
				},
			},
			errorPlacement: function(error, element) {
				if (element.is("textarea")) {
					error.insertAfter(element.next());
				} else if (element.hasClass('dateselect')) {
					error.insertAfter(element.parent('.date'))
				} else if (element.hasClass('amount')) {
					error.insertAfter(element.next())
				} else if (element.hasClass('custom-file-input')) {
					error.insertAfter(element.parents('.custom-file-class').nextAll('.filename:first'));
				} else if (element.prop('type') === 'radio') {
					error.insertAfter(element.parents('.form-group'));
				} else {
					error.insertAfter(element);
				}
			},
			invalidHandler: function(event, validator) {
				if (!validator.numberOfInvalids())
					return;

				if (validator.errorList[0].element.attributes.class.value == 'tinymce_class itemName') {
					$('html, body').animate({
						scrollTop: $(validator.errorList[0].element).parents('.form-group').children('label.control-label').offset().top - 80
					}, '100');
				} else {
					$('html, body').animate({
						scrollTop: $(validator.errorList[0].element).offset().top - 80
					}, '100');
				}
			}
		});

		$(document).on('click', '.submitBtn', function() {
			tinymce.triggerSave();
			$('input[name^="tax_value"]').each(function() {
				if ($(this).data('tax') == 'VAT') {
					$(this).rules("add", {
						// required: function(element) {
						// 	return !$('#exempt_vat').is(':checked');
						// },
						number: true,
						min: 0,
						messages: {
							required: "Tax is required",
							number: 'Tax must be a number',
							min: 'Tax must be a number',
						}
					});
				} else {
					$(this).rules("add", {
						// required: true,
						number: true,
						min: 0,
						messages: {
							required: "Tax is required",
							number: 'Tax must be a number',
							min: 'Tax must be a number',
						}
					});
				}
			});
			$('[name^="split"]').each(function() {

				var message = '';
				if ($(this).hasClass('user_id'))
					message = 'Account is required';
				else if ($(this).hasClass('department_id'))
					message = 'Department is required';
				else if ($(this).hasClass('amount'))
					message = 'Amount is required';

				if ($(this).hasClass('amount')) {
					$(this).rules("add", {
						required: true,
						number: true,
						min: 0,
						messages: {
							required: message,
							number: 'Amount must be a number',
							min: 'Amount must be a number',
						}
					});
				} else {
					$(this).rules("add", {
						required: true,
						messages: {
							required: message,
						}
					});
				}

			});
			$('[name^="item"]').each(function() {

				var message = '';
				if ($(this).hasClass('itemName'))
					message = 'Item name is required';
				else if ($(this).hasClass('itemAmount'))
					message = 'Item amount is required'

				if (!$(this).hasClass('itemProject')) {
					if ($(this).hasClass('itemAmount')) {
						$(this).rules("add", {
							required: true,
							number: true,
							min: 0,
							messages: {
								required: message,
								number: 'Item Amount must be a number',
								min: 'Item Amount must be a number',
							}
						});
					} else {
						$(this).rules("add", {
							required: true,
							messages: {
								required: message,
							}
						});
					}
				}
			});

			if ($('#frmStorePo').valid()) {
				if (!matchItemAndDepartmentAmount()) {
					Snackbar.show({
						pos: 'bottom-right',
						text: "Total sum of the department details amount and total sum of the item details amount must match!",
						actionText: 'Okay'
					});

				} else {

					$taxObj = {};
					$.each($('.taxInputs'), function(key, val) {
						if ($(this).data('value') != '') {
							$taxObj[$(this).data('value')] = {
								'tax': $(this).data('tax'),
								'value': $(this).val()
							};
						}
					});

					if ($('#exempt_vat').is(':checked')) {
						$tax = $('input[name="tax_value[VAT]"]').data('value');
						delete $taxObj[$tax];
					}

					axios.post(checkCompanyHaveTaxRegNo, {
							taxes: $taxObj,
							company_id: $('#company_id').val()
						})
						.then(function(response) {
							let res = response.data;
							if (res.status == 'fail') {
								Snackbar.show({
									pos: 'bottom-right',
									text: res.message,
									actionText: 'Okay'
								});
							} else {
								$('.submitBtn').val('Please wait...');
								$('.submitBtn').attr('disabled', 'disabled');
								$('#frmStorePo').submit();
							}
						});
				}
			}
		});

		var departmentList = @json($departmentList);
		var today = new Date();
		var $date = $('.dateselect').datepicker({
			autoHide: true,
			format: 'dd/mm/yyyy',
			zIndex: 2048,
			endDate: today.getDate() + '/' + (today.getMonth() + 1) + '/' + today.getFullYear(),
		});
		$('#date').change(function() {
			$(this).valid();
		})


		$('#company_id').on('change', function() {
			var company_id = $('#company_id').val();
			if (company_id != '') {

				var url = '{{ route("admin.purchase-orders.getContactsByCompanyId",["panel" => session("panel"), "id" => null ]) }}';
				axios.get(url + '/' + company_id)
					.then(function(response) {

						$('#contact_id').empty();
						$('#contact_id').append('<option value="">Select Contact</option>');

						$.each(response.data, function(key, value) {
							$('#contact_id').append('<option value="' + value.id + '">' + value.first_name + ' ' + value.last_name + '</option>');
						});
					});

			} else {

				$('#contact_id').empty();
				$('#contact_id').append('<option value="">Select Contact</option>');
			}
		});

		$('input[name="currency"]').on('click', function() {
			if ($(this).val() === 'USD') {
				$('.conversion_rate_div').removeClass('d-none');
			} else if ($(this).val() === '{{ $franchiseCurrency }}') {
				$('.conversion_rate_div').addClass('d-none');
			}
		});

		
		var itemNo = $('.appended_item_row').length;
		$('.add_item_row').on('click', function() {
			$item_row = `
            <div class="appended_item_row">
                <hr/>
                <div class="row">
                    <div class="col-md-11">
                        <div class="form-group remove-wrapper">
                            <label class="control-label">Item </label>
                            <textarea class="tinymce_class itemName" id="items[` + itemNo + `][name]" name="items[` + itemNo + `][name]"></textarea>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <div class="form-group">
                            <label for="" class="control-label"></label>
							<a href="javascript:void(0)" class="btn remove-row remove_item_row" title="remove"><i class="material-icons">close</i></a>\
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Amount </label>
                            <input type="text" class="form-control itemAmount hasClose" placeholder="Amount" name="items[` + itemNo + `][amount]">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-group">
                            <label class="control-label">Project </label>
                            <select name="items[` + itemNo + `][project]" class="form-control itemProject">
                                <option value="">Select</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>`;

			$('.items_div').append($item_row);
			initTinyMce()
			validateNumericField()
			initProjectSelect2()
			itemNo++;
		});


		$(document).on('click', '.remove_item_row', function() {
			$(this).parents('.appended_item_row').remove();
		});

		var split = $('.appended_department_row').length + parseFloat(1)
		$('.add_department_row').on('click', function() {

			$departments = [];
			var departmentList = @json($departmentList);
			$.each(departmentList, function(key, value) {
				$departments.push('<option value="dept_' + value.id + '" class="optionGroup">' + value.name + '</option>');
				$.each(value.subdepts, function(key1, value1) {
					$departments.push('<option value="subdept_' + value1.id + '">&emsp;&emsp;' + value1.name + '</option>');
				});
			});

			$department_row = '<div class="row appended_department_row">\
					<div class="col-md-4">\
						<div class="form-group btm-arrow select">\
							<label class="control-label" for="split[' + split + '][department_id]">Department </label>\
							<select class="form-control department_id" id="split[' + split + '][department_id]" name="split[' + split + '][department_id]">\
								<option value="" hidden="">Select</option>' +
				$departments +
				'</select>\
						</div>\
					</div>\
					<div class="col-md-4">\
						<div class="form-group btm-arrow select">\
							<label class="control-label" for="split[' + split + '][user_id]">Account </label>\
							<select class="form-control user_id" id="split[' + split + '][user_id]" name="split[' + split + '][user_id]">\
								<option value="" hidden="">Select</option>\
								<option value="cost_of_goods_sold">Cost of Goods Sold</option>\
								<option value="human_capital">Human Capital</option>\
								<option value="operational_expense">Operational Expense</option>\
								<option value="investment">Investment</option>\
								<option value="tax">Tax</option>\
							</select>\
						</div> \
					</div>\
					<div class="col-md-4">\
						<div class="form-group remove-wrapper">\
							<label class="control-label" for="split[' + split + '][amount]">Amount </label>\
							<input type="text" class="form-control amount deptAmount hasClose" placeholder="Amount" name="split[' + split + '][amount]">\
							<a href="javascript:void(0)" class="btn remove-row remove_department_row" title="remove"><i class="material-icons">close</i></a>\
						</div>\
					</div>\
				</div>';
			split++;
			$('.department_div').append($department_row);
			validateNumericField()
		});

		$(document).on('click', '.remove_department_row', function() {
			$(this).parents('.appended_department_row').remove();
		});

		function initTinyMce() {
			var initialOptions = {
				height: 150,
				menubar: false,
				branding: false,
				selector: 'textarea.tinymce_class',
				toolbar1: 'undo redo | bold italic underline | bullist numlist  | removeformat | preview',
				toolbar2: false,
				browser_spellcheck: true,
				plugins: 'lists paste',
				paste_auto_cleanup_on_paste: true,
				paste_remove_styles: true,
				paste_remove_styles_if_webkit: true,
				paste_strip_class_attributes: true
			};
			tinymce.init(initialOptions);
		}

		// use alphanum jquery function
		function validateNumericField() {

			$("#conversion_rate, .itemAmount, .deptAmount").numeric({
				allowMinus: false,
				allowThouSep: false
			});
			$(".taxInputs").numeric({
				allowMinus: false,
				allowDecSep: true,
				maxDecimalPlaces: 2,
				allowThouSep: false
			});
		}

		// match item and department amount
		function matchItemAndDepartmentAmount() {

			if ($('.amount').length > 0) {
				var itemTotalAmount = 0
				$('.itemAmount').each(function(key, val) {
					itemTotalAmount += parseFloat(val.value)
				})

				var depTotalAmount = 0
				$('.amount').each(function(key, val) {
					depTotalAmount += parseFloat(val.value)
				})

				return (itemTotalAmount.toFixed(2) == depTotalAmount.toFixed(2)) ? true : false;
			}
			return true;
		}

		function initProjectSelect2() {
			var getSearchJsonIndexUrl = '{{route("common.get_search_json")}}';
			$(".itemProject").each((index, element) => {
				var $select = $(element);
				$select.select2({
					placeholder: "Select an option",
					allowClear: true,
					ajax: {
						delay: 250,
						url: getSearchJsonIndexUrl,
						dataType: "json",
						data: function(params) {
							var query = {
								search: params.term,
								type: "confirmed_projects"
							};
							return query;
						},
						processResults: function(response) {
							return {
								results: response,
							};
						},
					},
				});

				let projectId = $select.data('project-id')
				let projectName = $select.data('project-name')
				if(projectId && projectName) {
					var newOption = new Option(projectName, projectId, true, true);
					$select.append(newOption).trigger('change');
				}
			});
        }

		initProjectSelect2()

		$(document).on('change', '.customDocumentUpload', function() {

			var input = this

			if (input.files && input.files[0]) {
				var reader = new FileReader();

				reader.onload = function(e) {
					$(input).parents('.custom-file-class').nextAll('.filename').first().find('.form-group a').remove();
					$(input).parents('.custom-file-class').nextAll('.filename').first().find('.control-label').text(input.files[0].name);
				}
				reader.readAsDataURL(input.files[0]);
			}
		});

	});
</script>
@endpush

@push('pageCss')
<style>
	.optionGroup {
		font-weight: bold;
		font-style: italic;
	}
</style>
@endpush