@extends('admin.layouts.main')

@section('title')
@if($edit)
{{ @trans('finance.edit_pro_forma') }}
@else
{{ @trans('finance.add_pro_forma') }}
@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.pro-formas.index',['panel' => session('panel')]) }}">{{ @trans('finance.pro_formas') }}</a>
					</li>
					<li class="breadcrumb-item active" aria-current="page">
						@if($edit){{ @trans('finance.edit_pro_forma') }}@else{{ @trans('finance.add_pro_forma') }}@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.pro-formas.store', ['panel' => Session::get('panel')]) }}"
									id="frmStorePo" enctype="multipart/form-data" autocomplete="off">

									@csrf

									<div class="form-body">

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

										<div class="row">

											<div class="col-md-6">
												<div class="form-group">
													<label
														class="control-label">{{ @trans('finance.pro_forma_number') }}
														<span class="required">*</span></label>
													<input type="text" class="form-control disabled"
														placeholder="{{ @trans('finance.pro_forma_number') }}"
														name="serial_number" id="serial_number"
														value="@if($edit){{ $pvDetail->pfi_serial_number }} @else{{ $serialNo }}@endif">
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group">
													<label
														class="control-label">{{ @trans('finance.bank') }}
														<span class="required">*</span></label>
													<select id="bank_id" name="bank_id" class="form-control">
														<option hidden value="">Select Bank</option>
														@foreach($banks as $bank)
															<option value="{{ $bank->id }}" @if($edit && $pvDetail->bank_id == $bank->id) selected
																	@elseif($edit && !$pvDetail->bank_id && $bank->is_default == 1) selected
																	@elseif(!$edit && $bank->is_default == 1) selected
																	@endif>{{ $bank->name }}</option>
														@endforeach
													</select>
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group date">
													<label class="control-label">{{ @trans('finance.invoice_date') }}
														<span class="required">*</span></label>
													<div class="input-group date">
														<input type="text" class="form-control dateselect bg-white"
															placeholder="Select Invoice Date" id="invoice_date" name="invoice_date" readonly
															value="@if($edit){{ $pvDetail->invoice_date_formatted_full }}@else{{ old('invoice_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 date">
													<label class="control-label">{{ @trans('finance.payment_days_term') }}
														<span class="required">*</span></label>
													<div class="input-group">
														<input type="text" class="form-control numeric"
															placeholder="Payment Days Term" id="payment_days_term" name="payment_days_term"
															value="@if($edit){{ $pvDetail->payment_days_term }}@else{{ old('payment_days_term') }}@endif">
													</div>
												</div>
											</div>
                                        </div>
                                        @if(!$oldRecord)
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group btm-arrow select">
                                                        <label class="control-label">{{ @trans('finance.project') }} <span class="required">*</span></label>
                                                        <select name="project_id" id="project_id" class="form-control">
                                                            <option value="">Select</option>
                                                            @foreach ($projects as $project)
                                                            <option value="{{ $project->id }}"  @if($edit && $pvDetail->project_id == $project->id) selected @endif>{{ $project->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="row">
											<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_company') }}</option>
                                                        @if($edit)
                                                            @foreach ($companyList as $company)
                                                                <option value="{{$company->id}}" @if($company->id == $pvDetail->company_id) selected @endif>{{$company->name}}</option>
                                                            @endforeach
                                                        @endif
													</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="{{ $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 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="EUROTZS" name="currency" value="TZS_TO_EURO" @if($edit)
																	@if($pvDetail->currency == "TZS" && $pvDetail->currency_conversion_flag == 1 ) checked @endif
																	@endif
																	@if(old('currency') == "TZS_TO_EURO") checked @endif>
																	<label class="custom-control-label"
																		for="EUROTZS">{{ @trans('finance.euro_and_tzs') }}</label>
																</div>
														</div>
													</div>
													@if($edit && $pvDetail->currency == 'USD')
													<div class="col-md-6 conversion_rate_div">
														<div class="form-group">
															<label
																id="conversionRateLabel"
																class="control-label">{{ @trans('finance.usd_to_tzs_conversion_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>
													@elseif ($edit && $pvDetail->currency_conversion_flag == 1)
													<div class="col-md-6 conversion_rate_div">
														<div class="form-group">
															<label
																id="conversionRateLabel"
																class="control-label">{{ @trans('finance.tzs_to_euro_conversion_rate') }}
																<span class="required">*</span></label>
															<input type="text" class="form-control"
																placeholder="Conversion Rate (TZS to EURO)" 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
																id="conversionRateLabel" class="control-label">
																<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>

											<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="row appended_item_row">
															<div class="col-md-8">
																<div class="form-group">
																	<label class="control-label">{{ @trans('finance.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-4">
																<div class="form-group remove-wrapper">
																	<label class="control-label amountLabel">{{ @trans('finance.amount')  }}{{$pvDetail->currency == 'USD' ? ' (USD)' : ' (TZS)'}}
																	</label>
																	<input type="text" class="form-control itemAmount" placeholder="Amount"
																		name="items[{{$loop->index}}][amount]"
																		value="{{ $item->amount }}">
																	@if($loop->index == 0)
																	<a href="javascript:void(0)"
																		class="btn add-row add_item_row" title="remove"><i
																			class="material-icons">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>
														@endforeach
													@else
														<div class="row appended_item_row">
															<div class="col-md-8">
																<div class="form-group">
																	<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-4">
																<div class="form-group remove-wrapper">
																	<label class="control-label amountLabel">Amount </label>
																	<input type="text" class="form-control itemAmount hasClose" placeholder="Amount" name="items[0][amount]">
																	<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>
													@endif
												@else
													<div class="row appended_item_row">
														<div class="col-md-8">
															<div class="form-group">
																<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-4">
															<div class="form-group remove-wrapper">
																<label class="control-label amountLabel">Amount </label>
																<input type="text" class="form-control itemAmount hasClose" placeholder="Amount" name="items[0][amount]">
																<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>
												@endif


											</div>

											<div class="col-md-12">
												<h2 class=" form-sec-title">{{ @trans('finance.taxation_details') }}
												</h2>
											</div>
											@if($edit)
											{{-- @foreach($pvDetail->taxes as $tax) --}}
											@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 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)}}]"
														data-value="{{ $country->countryRegistration->registration_title ?? '' }}"
														data-tax="{{ $country->tax_title }}"
														value="" 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">
														@if($loop->index != 0)
														<div class="col-md-12" style="">
															<hr>
														</div>
														@endif
														<div class="col-md-6">
															<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-5">
															<div class="form-group btm-arrow select">
																<label class="control-label"
																	for="split[{{$loop->index}}][user_id]">Staff Member</label>
																<select class="form-control user_id"
																	name="split[{{$loop->index}}][user_id]">
																	<option value="" hidden="">
																		{{ @trans('finance.select') }}</option>
																	@if($edit)
																	@foreach($staffMembersList as $user)
																	<option value="{{ $user->id }}" @if($user->id == $split->user_id) selected @endif>{{ $user->first_name }} {{ $user->last_name }}</option>
																	@endforeach
																	@endif
																</select>
															</div>
														</div>
														<div class="col-md-6">
															<div class="form-group">
																<label
																	class="control-label deptAmountLabel">{{ @trans('finance.amount') }}{{$pvDetail->currency == 'USD' ? ' (USD)' : ' (TZS)'}}</label>
																<input type="text" class="form-control amount deptAmount" placeholder="Amount"
																	name="split[{{$loop->index}}][amount]"
																	value="{{ $split->amount }}">
															</div>
														</div>
														<div class="col-md-5">
															<div class="form-group">
																<label
																	class="control-label">{{ @trans('finance.sale_type') }}</label>
																<select class="form-control sale_type" id="split[{{$loop->index}}][sale_type]" name="split[{{$loop->index}}][sale_type]">
																	<option value="" hidden="">Select</option>
																	<option value="b2b" @if($split->sale_type == 'b2b') selected @endif>B2B</option>
																	<option value="b2c" @if($split->sale_type == 'b2c') selected @endif>B2C</option>
																</select>
															</div>
														</div>
														<div class="col-md-1">
															<div class="form-group remove-wrapper">
																<label class="control-label"></label>
																@if($loop->index == 0)
																<a href="javascript:void(0)" class="btn add-row add_department_row" title="remove"><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-6">
															<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-5">
															<div class="form-group btm-arrow select">
																<label class="control-label" for="split[0][user_id]">Staff Member </label>
																<select class="form-control user_id" id="split[0][user_id]" name="split[0][user_id]">
																	<option value="" hidden="">Select</option>
																	@foreach($staffMembersList as $user)
																	<option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }}</option>
																	@endforeach
																</select>
															</div>
														</div>
														<div class="col-md-6">
															<div class="form-group">
																<label class="control-label deptAmountLabel" for="split[0][amount]">Amount </label>
																<input type="text" class="form-control amount deptAmount" placeholder="Amount" name="split[0][amount]">
															</div>
														</div>
														<div class="col-md-5">
															<div class="form-group btm-arrow select">
																<label class="control-label">Sale Type</label>
																<select class="form-control sale_type" id="split[0][sale_type]" name="split[0][sale_type]">
																	<option value="" hidden="">Select</option>
																	<option value="b2b">B2B</option>
																	<option value="b2c">B2C</option>
																</select>
															</div>
														</div>
														<div class="col-md-1">
															<div class="form-group remove-wrapper">
																<label class="control-label"></label>
																<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-6">
														<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-5">
														<div class="form-group btm-arrow select">
															<label class="control-label" for="split[0][user_id]">Staff Member </label>
															<select class="form-control user_id" id="split[0][user_id]" name="split[0][user_id]">
																<option value="" hidden="">Select</option>
																@foreach($staffMembersList as $user)
																<option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }}</option>
																@endforeach
															</select>
														</div>
													</div>
													<div class="col-md-6">
														<div class="form-group">
															<label class="control-label deptAmountLabel" for="split[0][amount]">Amount </label>
															<input type="text" class="form-control amount deptAmount" placeholder="Amount" name="split[0][amount]">
														</div>
													</div>
													<div class="col-md-5">
														<div class="form-group btm-arrow select">
															<label class="control-label">Sale Type</label>
															<select class="form-control sale_type" id="split[0][sale_type]" name="split[0][sale_type]">
																<option value="" hidden="">Select</option>
																<option value="b2b">B2B</option>
																<option value="b2c">B2C</option>
															</select>
														</div>
													</div>
													<div class="col-md-1">
														<div class="form-group remove-wrapper">
															<label class="control-label"></label>
															<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>
									</div>
									<div class="form-action text-right">
										<input type="button" class="btn step-btn submitBtn"
											value="@if($edit){{ @trans('finance.edit_pro_forma_details') }}@else{{ @trans('finance.add_pro_forma_details') }}@endif">
									</div>

								</form>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>
@endsection


@push('pageJs')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.alphanum/1.0.24/jquery.alphanum.min.js"></script>
<script src="{{ asset('js/admin/finance/pro_forma_store.js') }}"></script>
<script>
	var checkCompanyHaveTaxRegNo = "{{ route('admin.finance.companyHaveRegNo', ['panel' => Session::get('panel')]) }}";
    var getSelectOptionsByIdUrl = "{{ route('common.select2OptionsById',['panel' => Session::get('panel'), 'id' => null ]) }}";
	$(document).ready(function() {

		initTinyMce();
		validateNumericField();

		$.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',
				invoice_date: 'required',
				payment_days_term: {
					required : true,
					number: true,
					min: 0
				},
				short_description: 'required',
				bank_id: 'required',
				currency: 'required',
                project_id: 'required',
				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' || $("#frmStorePo [name='currency']:checked").val() ==  'TZS_TO_EURO';
					},
					number: true,
					min: 0
				},
			},
			messages: {
				serial_number : {
					required: 'Serial number is required'
				},
				bank_id : {
					required: 'Bank is required'
				},
				invoice_date : {
					required: 'Invoice date is required'
				},
				payment_days_term : {
					required: 'Payment Days Term is required',
					number: 'Payment Days Term must be a number',
					min: 'Payment Days Term must be a number',
				},
				short_description : {
					required: 'Short Description is required'
				},
				currency: 'Currency is required',
                project_id: 'Project is required',
				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('itemAmount')) {
					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() {
				$(this).rules("add",
				{
					number: true,
					min: 0,
					messages: {
						number: 'Tax must be a number',
						min: 'Tax must be a number',
					}
				});
			});

			$('[name^="split"]').each(function() {

				var message = '';
				if($(this).hasClass('user_id'))
					message = 'Staff Member is required';
				else if($(this).hasClass('department_id'))
					message = 'Department is required';
				else if($(this).hasClass('amount'))
					message = 'Amount is required';
				else if($(this).hasClass('sale_type'))
					message = 'Sale Type 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('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') != '' && $(this).data('value') != 'VRN') {
							$taxObj[$(this).data('value')] = {
								'tax': $(this).data('tax'),
								'value': $(this).val()
							};
						}
					});

					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 = {!! $departmentList !!};
		var departmentUsersList = {!! $staffMembersList !!};
		var today = new Date();
		var $startDate = $('#invoice_date');
        var $endDate = $('#date');

        $startDate.datepicker({
            format: 'dd/mm/yyyy',
            zIndex: 2048,
            autoHide: true,
			date: null,
			endDate: today.getDate() + '/' + (today.getMonth() + 1) + '/' + today.getFullYear(),
        });
        $endDate.datepicker({
            autoHide: true,
            format: 'dd/mm/yyyy',
            zIndex: 2048,
            date: null,
            startDate: $startDate.datepicker('getDate'),
		});

		// @if($edit)
        // $startDate.datepicker('setEndDate', $endDate.datepicker('getDate'));
		// @endif

        $startDate.on('change', function () {
            $endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
		});

		$endDate.on('change', function () {
            $startDate.datepicker('setEndDate', $endDate.datepicker('getDate'));
        });

		$('#invoice_date').change(function() {
			$(this).valid();
		})

		$('#date').change(function() {
			$(this).valid();
		})

		var currencyLabel = 'Amount';
		
		//--Get the checked currency value
		var currencyValue = $("#frmStorePo [name='currency']:checked").val();

		if (currencyValue === 'USD') {
			currencyLabel = 'Amount (USD)';
		} else if (currencyValue !== undefined && currencyValue !== null) {
			currencyLabel = 'Amount (TZS)';
		} else {
			currencyLabel = 'Amount';
		}

		$('input[name="currency"]').on('click', function(){
			var conversionRatePlaceholder = 'Conversion Rate';
			var asteriskSpan = '<span class="required">*</span>';
			if($(this).val() === 'USD') {
				$('.conversion_rate_div').removeClass('d-none');
				conversionRatePlaceholder = 'Conversion Rate (USD to TZS)';
				currencyLabel = 'Amount (USD)';
			} else if ($(this).val() === 'TZS_TO_EURO') {
				$('.conversion_rate_div').removeClass('d-none');
				conversionRatePlaceholder = 'Conversion Rate (EURO to TZS)';
				currencyLabel = 'Amount (TZS)';
			} else if ($(this).val() === '{{ $franchiseCurrency }}') {
				currencyLabel = 'Amount ({{ $franchiseCurrency }})'
				$('.conversion_rate_div').addClass('d-none');
			}

			$('#conversion_rate').attr('placeholder', conversionRatePlaceholder);
			$('#conversionRateLabel').html(conversionRatePlaceholder + asteriskSpan);
			$('.amountLabel').html(currencyLabel);
			$('.deptAmountLabel').html(currencyLabel);
		});


		var itemNo = $('.appended_item_row').length;
		$('.add_item_row').on('click',function() {

			$item_row = '<div class="row appended_item_row">\
					<div class="col-md-8">\
						<div class="form-group">\
							<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-4">\
						<div class="form-group remove-wrapper">\
							<label class="control-label amountLabel">'+currencyLabel+'</label>\
							<input type="text" class="form-control itemAmount hasClose" placeholder="Amount" name="items['+itemNo+'][amount]">\
							<a href="javascript:void(0)" class="btn remove-row remove_item_row" title="remove"><i class="material-icons">close</i></a>\
						</div>\
					</div>\
			</div>';

			$('.items_div').append($item_row);
			initTinyMce();
			validateNumericField();
			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 = [];
			$.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>');
				});
			});

			$departmentUsers = [];
			$.each(departmentUsersList,function(key,value){
				$departmentUsers.push('<option value="'+ value.id +'">'+ value.first_name +' '+ value.last_name +'</option>');
			});

			$department_row = '<div class="row appended_department_row">\
					<div class="col-md-12" style="">\
					<hr>\
					</div>\
					<div class="col-md-6">\
						<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-5">\
						<div class="form-group btm-arrow select">\
							<label class="control-label" for="split['+split+'][user_id]">Staff Member </label>\
							<select class="form-control user_id" id="split['+split+'][user_id]" name="split['+split+'][user_id]">\
								<option value="" hidden="">Select</option>'
								+ $departmentUsers +
							'</select>\
						</div> \
					</div>\
					<div class="col-md-6">\
						<div class="form-group">\
							<label class="control-label deptAmountLabel" for="split['+split+'][amount]">'+currencyLabel+'</label>\
							<input type="text" class="form-control amount deptAmount" placeholder="Amount" name="split['+split+'][amount]">\
						</div>\
					</div>\
					<div class="col-md-5">\
						<div class="form-group btm-arrow select">\
							<label class="control-label">Sale Type</label>\
							<select class="form-control sale_type" id="split['+split+'][sale_type]" name="split['+split+'][sale_type]">\
								<option value="" hidden="">Select</option>\
								<option value="b2b">B2B</option>\
								<option value="b2c">B2C</option>\
							</select>\
						</div>\
					</div>\
					<div class="col-md-1">\
							<div class="form-group remove-wrapper">\
								<label class="control-label"></label>\
								<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);
		}

		// 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;
		}

		// 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
			});
		}

		$(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