@extends('layouts.app')
@section('title', 'Perk Policy')
@section('content')
<div class="container page-content">
	<div class="row justify-content-xl-center page-col">
        <div class="col-xl-10 col-12">
            <h1 class="font-weight-bold typography-4 mb-0">Perk Policy</h1>
        </div>
    </div>
	<div class="row justify-content-xl-center page-col">
		<div class="col-xl-10 col-12">
			<form action="{{ Route::currentRouteName() == 'perk-policy-edit' ? route('perk-policy-update') : route('perk-policy-store') }}" method="POST" autocomplete="off">
				@csrf
				@if( Route::currentRouteName() == 'perk-policy-edit' )
					<input type="hidden" name="id" value="{{ $perk_policy->id }}">
					<input type="hidden" name="entitlement_id" value="{{ $perk_policy->perkEntitlements->pluck('id') }}">
				@endif
				<div class="card">
					<div class="card-body">
						<div class="row mb-3">
							<div class="col-md">
								<div class="row mb-3">
									<label for="name" class="col-md-4 col-form-label">{{ __('Perk Name') }}</label>
									<div class="col-lg-8">
										@if( Route::currentRouteName() == 'perk-policy-edit' )
											<input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') ? old('name') : $perk_policy->name }}" />
										@else
											<input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" autofocus />
										@endif	
										@error('name')
										<span class="invalid-feedback" role="alert">
											<strong>{{ $message }}</strong>
										</span>
										@enderror
									</div>
								</div><!-- Perk Name -->
								<div class="mb-3 row">
									<label for="gender" class="col-lg-4 col-form-label">{{ __('Gender') }}</label>
									<div class="col-lg-8">
										<select class="@error('gender') is-invalid @enderror" id="gender" name="gender">
											@foreach ($gender_types as $gender_type => $gender_text)
												@if( Route::currentRouteName() == 'perk-policy-add-new' || old('gender') )
													<option value="{{ $gender_type }}" @if( old('gender') == $gender_type ) selected @endif>
														{{ $gender_text }}
													</option>
												@else
													<option value="{{ $gender_type }}" @if( (old('gender') ? old('gender') : $perk_policy->gender) == $gender_type ) selected @endif>
														{{ $gender_text }}
													</option>
												@endif
											@endforeach
										</select>
										@error('gender')
										<span class="invalid-feedback" role="alert">
											<strong>{{ $message }}</strong>
										</span>
										@enderror
									</div>
								</div><!-- Gender -->
								<div class="mb-3 row">
									<label for="marital_status" class="col-lg-4 col-form-label">{{ __('Marital Status') }}</label>
									<div class="col-lg-8">
										<select class="@error('marital_status') is-invalid @enderror" id="marital_status" name="marital_status">
											@foreach ($marital_types as $marital_type => $marital_text)
												@if( Route::currentRouteName() == 'perk-policy-add-new' || old('marital_status') )
													<option value="{{ $marital_type }}" @if( old('marital_status') == $marital_type ) selected @endif>
														{{ $marital_text }}
													</option>
												@else
													<option value="{{ $marital_type }}" @if( (old('marital_status') ? old('marital_status') : $perk_policy->marital_status) == $marital_type ) selected @endif>
														{{ $marital_text }}
													</option>
												@endif
											@endforeach
										</select>
										@error('marital_status')
										<span class="invalid-feedback" role="alert">
											<strong>{{ $message }}</strong>
										</span>
										@enderror
									</div>
								</div><!-- Maritial Status -->
								<div class="mb-3 row">
									<label for="others" class="col-lg-4 col-form-label">{{ __('Others') }}</label>
									<div class="col-lg-8">
										<div class="form-check form-switch">
											@if( Route::currentRouteName() == 'perk-policy-edit' )
												<input class="form-check-input" type="checkbox" value="{{ $perk_policy->support_document }}" id="support_document" name="support_document" {{ $perk_policy->support_document ? 'checked' : '' }} />
											@else
												<input class="form-check-input" type="checkbox" name="support_document" id="support_document" value="1" checked />
											@endif
											<label class="form-check-label" for="support_document">
												Required support document
											</label>
										</div><!-- Support Document -->
										<div class="form-check form-switch">
											@if( Route::currentRouteName() == 'perk-policy-edit' )
												<input class="form-check-input" type="checkbox" value="{{ $perk_policy->annual_renew }}" id="annual_renew" name="annual_renew" {{ $perk_policy->annual_renew ? 'checked' : '' }} />
											@else
												<input class="form-check-input" type="checkbox" name="annual_renew" id="annual_renew" value="1" checked />
											@endif
											<label class="form-check-label" for="annual_renew">
												Annual Renew
											</label>
										</div><!-- Annual Renew -->
										<div class="form-check form-switch">
											@if( Route::currentRouteName() == 'perk-policy-edit' )
												<input class="form-check-input" type="checkbox" value="{{ $perk_policy->allow_application }}" id="allow_application" name="allow_application" {{ $perk_policy->allow_application ? 'checked' : '' }} />
											@else
												<input class="form-check-input" type="checkbox" name="allow_application" id="allow_application" value="1" checked />
											@endif
											<label class="form-check-label" for="allow_application">
												Allow Application
											</label>
										</div><!-- Allow Application -->
									</div>
								</div><!-- Others -->
							</div>
						</div>
					</div>
				</div><!-- Perk Policy -->

				<div class="page-section">
					<div class="card">
						<div class="card-header">
							<div class="row align-items-center">
							    <div class="col-md-10 col-8">
							        {{ __('Perk Entitlement') }}
							    </div>
							    <div id="AddMoreBtnEntitlement" class="col-md-2 col-4 d-flex align-self-center justify-content-end">
							    	<a id="AddMoreEntitlementBtnBox" class="btn btn-purple btn-action" href="#" role="button">
							    		<i class="fas fa-plus"></i>
							    	</a>
							    </div>
							</div><!-- Header Title -->
						</div>
						<div class="card-body">
							<div class="mb-3 row">
								<div class="col-md-12">
									<table class="table table-responsive valign-child-middle">
										<thead class="table-light">
											<tr>
												<th scope="col">#</th>
												<th scope="col">Employee Score</th>
												<th scope="col">Service Month (min)</th>
												<th scope="col">Entitlement Amount (RM)</th>
												<th scope="col">Action</th>
											</tr>
										</thead>
										@if( Route::currentRouteName() == 'perk-policy-edit' )
											<tbody id="PerkEntitlementWrapper">
												@php
													$all_entitlements = old('employee_score') ? old('employee_score') : $all_entitlements;
												@endphp
												<tr>
													<th scope="row">1</th>
													<td>
														@if( $all_entitlements->first() )
															<input class="form-control" type="number" id="employee_score" name="employee_score[]" min="0" placeholder="Score" value="{{ old('employee_score') ? old('employee_score')[0] : $all_entitlements->first()->employee_score }}" />
														@else
															<input class="form-control" type="number" id="employee_score" name="employee_score[]" min="0" placeholder="Score" value="{{ old('employee_score') ? old('employee_score')[0] : '' }}" />
														@endif
													</td>
													<td>
														@if( $all_entitlements->first() )
															<input class="form-control" type="number" id="service_month" name="service_month[]" min="0" placeholder="Months" value="{{ old('service_month') ? old('service_month')[0] : $all_entitlements->first()->service_month }}" />
														@else
															<input class="form-control" type="number" id="service_month" name="service_month[]" min="0" placeholder="Months" value="{{ old('service_month') ? old('service_month')[0] : '' }}" />
														@endif
													</td>
													<td>
														@if( $all_entitlements->first() )
															<input class="form-control" type="number" step="any" id="entitlement_amount" name="entitlement_amount[]" min="0" placeholder="Amount" value="{{ old('entitlement_amount') ? old('entitlement_amount')[0] : $all_entitlements->first()->entitlement_amount }}" />
														@else
															<input class="form-control" type="number" step="any" id="entitlement_amount" name="entitlement_amount[]" min="0" placeholder="Amount" value="{{ old('entitlement_amount') ? old('entitlement_amount')[0] : '' }}" />
														@endif
													</td>
													<td></td>
												</tr>
												@foreach ($all_entitlements as $index => $single_entitlement)
													@if( $index > 0 )
														<tr>
															<th scope="row">{{ $index + 1 }}</th>
															<td>
																<input class="form-control" type="number" id="{{ $index > 0 ? 'employee_score'.($index+1) : 'employee_score' }}" name="employee_score[]" min="0" placeholder="Score" value="{{ old('employee_score') ? old('employee_score')[$index] : $single_entitlement->employee_score }}">
															</td>
															<td>
																<input class="form-control" type="number" id="{{ $index > 0 ? 'service_month'.($index+1) : 'service_month' }}" name="service_month[]" min="0" placeholder="Months" value="{{ old('service_month') ? old('service_month')[$index] : $single_entitlement->service_month }}">
															</td>
															<td>
																<input class="form-control" type="number" step="any" id="{{ $index > 0 ? 'entitlement_amount'.($index+1) : 'entitlement_amount' }}" name="entitlement_amount[]" min="0" placeholder="Amount" value="{{ old('entitlement_amount') ? old('entitlement_amount')[$index] : $single_entitlement->entitlement_amount }}">
															</td>
															<td>
																<div class="col-md-1 col-2 ps-0">
																	<a class="btn btn-danger btn-action" role="button" href="{{ route('perk-policy-delete-perk', $single_entitlement->id) }}" role="button">
																	    <i class="far fa-trash-alt text-white"></i>
																	</a>
																</div>
															</td>
														</tr>
													@endif
												@endforeach
											</tbody>
										@else
											<tbody id="PerkEntitlementWrapper">
												@if (old('employee_score') && old('service_month') && old('entitlement_amount'))
													@foreach (old('employee_score') as $key => $employee_score)
														<tr>
															<td scope="row">{{ ($key + 1) }}</td>
															<td>
																<input class="form-control" type="number" id="{{ $key > 0 ? 'employee_score'.($key+1) : 'employee_score' }}" name="employee_score[]" value="{{ $employee_score }}" min="0" placeholder="Score">
															</td>
															<td>
																<input class="form-control" type="number" id="{{ $key > 0 ? 'service_month'.($key+1) : 'service_month' }}" name="service_month[]" value="{{ old('service_month')[$key] }}" min="0" placeholder="Months">
															</td>
															<td>
																<input class="form-control" type="number" step="any" id="{{ $key > 0 ? 'entitlement_amount'.($key+1) : 'entitlement_amount' }}" name="entitlement_amount[]" value="{{ old('entitlement_amount')[$key] }}" min="0" placeholder="Amount">
															</td>
															<td></td>
														</tr>
													@endforeach
												@else
													<tr>
														<th scope="row">1</th>
														<td>
															<input class="form-control" type="number" id="employee_score" name="employee_score[]" min="0" placeholder="Score">
														</td>
														<td>
															<input class="form-control" type="number" id="service_month" name="service_month[]" min="0" placeholder="Months">
														</td>
														<td>
															<input class="form-control" type="number" step="any" id="entitlement_amount" name="entitlement_amount[]" min="0" placeholder="Amount">
														</td>
														<td></td>
													</tr>
												@endif
											</tbody>
										@endif
									</table>
								</div>
							</div>
						</div>
					</div>
				</div><!-- Perk Entitlements -->	
				<div class="page-section text-end d-flex">
					<a class="btn btn-black btn-custom" href="{{ route('perk-policy-index') }}">Back</a>
					<button type="submit" class="ms-3 btn btn-purple btn-submit">
						{{ Route::currentRouteName() == 'perk-policy-edit' ? 'Update' : 'Create' }}
					</button>
				</div>
			</form>
		</div>
	</div>
</div>
@endsection

@push('js')
<script type="text/javascript">
	$(document).ready(function(){
		var max_inputs = 5; //maximum extra input boxes allowed
		var perk_Entitlement_wrapper = $("#PerkEntitlementWrapper"); //input wrapper ID
		var add_button_entitlement = $("#AddMoreEntitlementBtnBox"); //Add button ID

		var count_entitlement = perk_Entitlement_wrapper.children().length; //initlal input box count

	    //on add input button click
		$(add_button_entitlement).click(function (e) {
	        //max input box allowed
	        if(count_entitlement <= max_inputs) {
	        	count_entitlement++; //input box increment
	            //add input box
	            $(perk_Entitlement_wrapper).append(`
            		<tr>
            			<th scope="row">`+count_entitlement+`</th>
            			<td>
            				<input class="form-control" type="number" id="employee_score`+ count_entitlement +`" name="employee_score[]" min="0" placeholder="Score">
            			</td>
            			<td>
            				<input class="form-control" type="number" id="service_month`+ count_entitlement +`" name="service_month[]" min="0" placeholder="Days">
            			</td>
            			<td>
            				<input class="form-control" type="number" id="entitlement_amount`+ count_entitlement +`" step="any" name="entitlement_amount[]" min="0" placeholder="Amount">
            			</td>
            			<td>
            				<a class="btn btn-danger btn-action removeclassEntitlement text-white" role="button">
            					<i class="far fa-trash-alt"></i>
            				</a>
            			</td>
            		</tr>
            	`);
	            // Delete the remove button if there is max input boxes.
	            if( count_entitlement == max_inputs ) {
	            	add_button_entitlement.hide();
	            }
	        }
	        return false;
	    });

		$("body").on("click",".removeclassEntitlement", function(e){ //user click on remove button
			if( count_entitlement > 1 ) {
	            $(this).parent('td').parent('tr').remove(); //remove input box
	            count_entitlement--; //decrement input box
	            add_button_entitlement.show();
	        }
	        return false;
	    });
	});
</script>
@endpush