@extends('layouts.app')
@section('title', 'Edit Claim Details')
@section('content')
<style type="text/css">
	#rejected_remarks {
		background-color: red;
	}
</style>
<div class="container page-content">
	<form action="{{ route('claim-review', ['id'=>$claim_detail->id]) }}" method="POST" enctype="multipart/form-data" autocomplete="off">
	@csrf	
		<input type="hidden" name="id" value="{{ $claim_detail->id }}">
		<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">Claim Details</h1>
	        </div>
	    </div><!-- Header -->
        @if( $claim_detail->checkRejectedClaimDetails() )
        <div class="row justify-content-xl-center page-col pb-3">
        	<div class="col-xl-10 col-12">
        		<div class="card">
        			<div class="card-body">
        				@if( $claim_detail->rejected_by )
    					<div class="row mb-3 align-items-center">
    						<label for="status" class="col-xl-4 col-form-label">
    							{{ __('Rejected by') }}
    						</label>
    						<div class="col-xl-8">
    							<input id="status" type="text" class="form-control-plaintext" name="status" value="{{ $claim_detail->rejectedBy->getName() }}" readonly />
    						</div>
    					</div><!-- Rejected By -->
    					@endif
    					<div class="row mb-3">
    						<label for="rejected_remarks" class="col-xl-4 col-form-label">
    							{{ __('Remarks') }}
    						</label>
    						<div class="col-xl-8">
    							<textarea id="rejected_remarks" class="form-control text-white fw-bold" rows="2" readonly>{{ $claim_detail->reject_remarks ? $claim_detail->reject_remarks : 'N/A' }}</textarea>
    						</div>
    					</div><!-- Remarks -->
        			</div>
        		</div>
        	</div>
        </div>
        @endif
        @if( $claim_detail->checkCancelledClaimDetails() )
        <div class="row justify-content-xl-center page-col pb-3">
        	<div class="col-xl-10 col-12">
        		<div class="card">
        			<div class="card-body">
        				@if( $claim_detail->cancelledBy )
    					<div class="row mb-3 align-items-center">
    						<label for="status" class="col-xl-4 col-form-label">
    							{{ __('Cancelled by') }}
    						</label>
    						<div class="col-xl-8">
    							<input type="text" class="form-control-plaintext" value="{{ $claim_detail->cancelledBy->getName() }}" readonly />
    						</div>
    					</div><!-- Cancelled By -->
    					@endif
    					<div class="row mb-3">
    						<label for="cancel_remarks" class="col-xl-4 col-form-label">
    							{{ __('Remarks') }}
    						</label>
    						<div class="col-xl-8">
    							<textarea id="cancel_remarks" class="form-control text-white fw-bold" rows="2" readonly>{{ $claim_detail->cancel_remarks ? $claim_detail->cancel_remarks : 'N/A' }}</textarea>
    						</div>
    					</div><!-- Cancel remarks -->
        			</div>
        		</div>
        	</div>
        </div>
        @endif
		<div class="row justify-content-xl-center page-col">
			<div class="col-xl-10 col-12">
				<div class="card">
					<div class="card-body">
						<div class="row mb-3">
							<div class="col-md">
								<div class="row mb-3 row align-items-center">
									<label for="full_name" class="col-xl-4 col-form-label">{{ __('Applicant') }}</label>
									<div class="col-xl-8">
										<input id="full_name" type="text" class="form-control-plaintext" name="full_name" value="{{ $claim_detail->user->getFullNameAndNickName() }}" readonly>
									</div>
								</div><!-- Applicant -->
								<div class="row mb-3 align-items-center">
									<label for="status" class="col-xl-4 col-form-label">
										{{ __('Status') }}
									</label>
									<div class="col-xl-8">
										<input id="status" type="text" class="form-control-plaintext" name="status" value="{{ $claim_detail_status[$claim_detail->status] }}" readonly />
									</div>
								</div><!-- Status -->
								<div class="mb-3 row">
									<label for="submit_date" class="col-xl-4 col-form-label">{{ __('Submit Date') }}</label>
									<div class="col-xl-8">
								        <input id="submit_date" type="text" class="form-control" name="submit_date" value="{{ Carbon\Carbon::parse($claim_detail->created_at)->format('d/m/Y') }}" readonly>
									</div>
								</div><!-- Applied Date -->
								<div class="row mb-3">
									<label for="bill_no" class="col-xl-4 col-form-label">
										{{ __('Bill No') }}
									</label>
									<div class="col-xl-8">
										<input id="bill_no" type="text" class="form-control" name="bill_no" value="{{ $claim_detail->bill_no }}" readonly />
									</div>
								</div><!-- Bill Number -->
								<div class="row mb-3">
									<label for="bill_date" class="col-xl-4 col-form-label required-label">
										{{ __('Bill Date') }}
									</label>
									<div class="col-xl-8">
										@if(Auth::user()->isPrimarySuperiorforUserClaimDetail($claim_detail) && !$claim_detail->hasAcknowledgement())
											<input id="bill_date" type="text" class="form-control" name="bill_date" value="{{ Carbon\Carbon::parse($claim_detail->bill_date)->format('d/m/Y') }}" readonly />
										@elseif ( $claim_detail->checkAcknowledgedClaimDetails() && !$claim_detail->checkRejectedByClaimDetails() )
											@if (Auth::user()->allowToReviewClaimsOrManageClaimDetails())
												<input id="bill_date" type="text" class="form-control datepicker_all @error('bill_date') is-invalid @enderror" name="bill_date" value="{{ old('bill_date') ? old('bill_date') : Carbon\Carbon::parse($claim_detail->bill_date)->format('d/m/Y') }}" placeholder="dd/mm/yyyy" />
												@error('bill_date')
			                                        <span class="invalid-feedback" role="alert">
			                                            <strong>{{ $message }}</strong>
			                                        </span>
			                                    @enderror
		                                    @else
		                                    	<input id="bill_date" type="text" class="form-control" name="bill_date" value="{{ Carbon\Carbon::parse($claim_detail->bill_date)->format('d/m/Y') }}" readonly />
		                                    @endif
	                                    @else
	                                    	<input id="bill_date" type="text" class="form-control" name="bill_date" value="{{ Carbon\Carbon::parse($claim_detail->bill_date)->format('d/m/Y') }}" readonly />
	                                    @endif
									</div>
								</div><!-- Bill Date -->
								<div class="row mb-3">
									<label for="claim_type" class="col-xl-4 col-form-label required-label">
										{{ __('Claim Type') }}
									</label>
									<div class="col-xl-8">
										<input id="claim_type" type="text" class="form-control" name="claim_type" value="{{ isset($claim_type['max_amount']) && $claim_type['max_amount'] ? $claim_type['name'].' (RM '.$claim_type['balance'].' available/ RM '.$claim_type['max_amount'].')' : $claim_type['name'] }}" readonly />
									</div>
								</div><!-- Claim Type -->
								<div class="row mb-3">
									<label for="amount" class="col-xl-4 col-form-label required-label">
										{{ __('Claim Amount') }}
									</label>
									<div class="col-xl-8">
										@if(Auth::user()->isPrimarySuperiorforUserClaimDetail($claim_detail) && !$claim_detail->hasAcknowledgement())
											<input id="amount" type="number" class="form-control" name="amount" value="{{ $claim_detail->amount }}" readonly />
										@elseif ($claim_detail->checkAcknowledgedClaimDetails() && $claim_detail->claim_type !='Perk' && !$claim_detail->checkRejectedByClaimDetails())
											<input id="amount" type="number" class="form-control @error('amount') is-invalid @enderror" name="amount" value="{{ old('amount') ? old('amount') : $claim_detail->amount }}" min="0" step=.5/>
											@error('amount')
												<span class="invalid-feedback" role="alert">
													<strong>{{ $message }}</strong>
												</span>
											@enderror
										@else
											<input id="amount" type="number" class="form-control" name="amount" value="{{ $claim_detail->amount }}" readonly />
										@endif
									</div>
								</div><!-- Claim Amount -->
								<div class="row mb-3 {{ strtolower(substr($claim_detail->attachment_url, -3)) == 'pdf' ? 'align-items-center' : '' }}">
									<label for="attachment_url" class="col-xl-4 col-form-label required-label">
										{{ __('Supporting Document') }}
									</label>
									<div class="col-xl-8">
										@if (strtolower(substr($claim_detail->attachment_url, -3)) == 'pdf')
											<div class="form-control-plaintext">
												<a href="{{ Storage::disk('public')->url($claim_detail->attachment_url) }}" class="btn btn-link pt-1 d-flex align-items-center" target="_blank">
													<i class="far fa-2x fa-file-pdf text-dark-red pe-2"></i>View PDF attachment
												</a>
											</div>
										@else
											<a class="thumbnail_container disabled form-control" href="{{ Storage::disk('public')->url($claim_detail->attachment_url) }}" target="_blank">
								        		<img id="thumbnail" src="{{ Storage::disk('public')->url($claim_detail->attachment_url) }}" alt="{{ $claim_detail->bill_no }}" title="{{ $claim_detail->user->getName() }}'s Supporting Document">
								        	</a>
										@endif
									</div>
								</div><!-- Supporting Document -->
								@if ($claim_detail->attachment_url_2)
								<div class="row mb-3 {{ strtolower(substr($claim_detail->attachment_url, -3)) == 'pdf' ? 'align-items-center' : '' }}">
									<label for="attachment_url_2" class="col-xl-4 col-form-label">
										{{ __('Supporting Document 2') }}
									</label>
									<div class="col-xl-8">
										@if (strtolower(substr($claim_detail->attachment_url_2, -3)) == 'pdf')
											<div class="form-control-plaintext">
												<a href="{{ Storage::disk('public')->url($claim_detail->attachment_url_2) }}" class="btn btn-link pt-1 d-flex align-items-center" target="_blank">
													<i class="far fa-2x fa-file-pdf text-dark-red pe-2"></i>View PDF attachment
												</a>
											</div>
										@else
											<a class="thumbnail_container disabled form-control" href="{{ Storage::disk('public')->url($claim_detail->attachment_url_2) }}" target="_blank">
								        		<img id="thumbnail" src="{{ Storage::disk('public')->url($claim_detail->attachment_url_2) }}" alt="{{ $claim_detail->bill_no }}" title="{{ $claim_detail->user->getName() }}'s Supporting Document">
								        	</a>
										@endif
									</div>
								</div><!-- Supporting Document 2 -->
								@endif
								<div class="row mb-3">
									<div class="col-xl-4 col-form-label">
										<label for="description" class="required-label">
											{{ __('Vendor/ Supplier Name') }}
										</label>
										<span class="fa-layers fa-fw fs-3 ms-2" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" title="The supplier name and company name">
											<i class="fas fa-circle text-main"></i>
											<i class="fas fa-info fa-inverse text-white" data-fa-transform="shrink-8"></i>
                                        </span>
									</div>
									<div class="col-xl-8">
										@if(Auth::user()->isPrimarySuperiorforUserClaimDetail($claim_detail) && !$claim_detail->hasAcknowledgement())
											<textarea id="description" class="form-control" name="description" rows="2" readonly>{{ !$claim_detail->description ? '-' : $claim_detail->description }}</textarea>
										@elseif ($claim_detail->checkAcknowledgedClaimDetails() && !$claim_detail->checkRejectedByClaimDetails())
											<textarea id="description" class="form-control @error('description') is-invalid @enderror" name="description" rows="2" placeholder="Write your claim vendor/ supplier name here...">{{ old('description') ? old('description') : $claim_detail->description }}</textarea>
											@error('description')
												<span class="invalid-feedback" role="alert">
													<strong>{{ $message }}</strong>
												</span>
											@enderror
										@else
											<textarea id="description" class="form-control" name="description" rows="2" readonly>{{ !$claim_detail->description ? '-' : $claim_detail->description }}</textarea>
										@endif
									</div>
								</div><!-- Description -->
								<div class="row mb-3">
									<div class="col-xl-4 col-form-label">
										<label for="remarks" class="required-label">
											{{ __('Description/ Purpose') }}
										</label>
										<span class="fa-layers fa-fw fs-3 ms-2" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" title="The purpose of claim">
											<i class="fas fa-circle text-main"></i>
											<i class="fas fa-info fa-inverse text-white" data-fa-transform="shrink-8"></i>
                                        </span>
									</div>
									<div class="col-xl-8">
										@if(Auth::user()->isPrimarySuperiorforUserClaimDetail($claim_detail) && !$claim_detail->hasAcknowledgement())
											<textarea id="remarks" class="form-control" name="remarks" rows="2" readonly>{{ !$claim_detail->remarks ? '-' : $claim_detail->remarks }}</textarea>
										@elseif ($claim_detail->checkAcknowledgedClaimDetails() && !$claim_detail->checkRejectedByClaimDetails())
											<textarea id="remarks" class="form-control @error('remarks') is-invalid @enderror" name="remarks" rows="2" placeholder="Write your claim description here...">{{ old('remarks') ? old('remarks') : $claim_detail->remarks }}</textarea>
											@error('remarks')
												<span class="invalid-feedback" role="alert">
													<strong>{{ $message }}</strong>
												</span>
											@enderror
										@else
											<textarea id="remarks" class="form-control" name="remarks" rows="2" readonly>{{ !$claim_detail->remarks ? '-' : $claim_detail->remarks }}</textarea>
										@endif
									</div>
								</div><!-- Remarks -->
							</div>
						</div>
						<div class="row">
							<div class="col-12 text-end pt-3">
								<a class="btn btn-black btn-custom" href="{{ url()->previous() }}">Back</a>
								@if( $claim_detail->status == 1 )
									@if( Auth::user()->allowToManageClaimDetails() )
										@if( !$claim_detail->hasAcknowledgement() && !$claim_detail->checkRejectedByClaimDetails() )
											<a class="ms-2 btn btn-danger btn-custom btn text-white" data-bs-toggle="modal" data-bs-target="#rejectModal">
												Reject
											</a>
											<button type="submit" class="ms-2 btn btn-purple btn-submit">Reviewed</button>
										@endif
									@elseif( Auth::user()->isPrimarySuperiorforUserClaimDetail($claim_detail) )
										@if( $claim_detail->hasAcknowledgement() && !$claim_detail->rejected_by )
											<a class="ms-2 btn btn-danger btn-custom btn text-white" data-bs-toggle="modal" data-bs-target="#rejectModal">
												Reject
											</a>
											<a class="ms-2 btn btn-purple btn-custom btn-submit" href="{{ route('claim-acknowledge', ['id'=>$claim_detail->id]) }}">
												Acknowledge
											</a>
										@endif
									@endif
								@endif
								@if( Auth::user()->allowToManageClaimDetails() && $claim_detail->status != 4 && $claim_detail->status != 5 )
									<a class="ms-2 btn btn-secondary btn-custom" data-bs-toggle="modal" data-bs-target="#cancelModal">
										Cancel
									</a>
								@endif
							</div>
						</div><!-- Button Actions -->
					</div>
				</div>
			</div>
		</div><!-- Claim Details Form -->
	</form>
</div>
@push('modal')
<div class="modal fade" id="rejectModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" id="rejectForm" action="{{ route('reject-claim-detail', ['id'=>$claim_detail->id]) }}" autocomplete="off">
                @csrf
                <input type="hidden" name="id" value="{{ $claim_detail->id }}">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Reject Claim Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="reject_remarks" class="col-12 col-form-label required-label">
                            {{ __('Remarks') }}
                        </label>
                        <div class="col-12">
                            <textarea id="reject_remarks" class="form-control @error('reject_remarks') is-invalid @enderror" name="reject_remarks" rows="3" placeholder="Write your remarks here...">{{ old('reject_remarks') }}</textarea>
                            <span class="invalid-feedback" role="alert">
                                <strong id="error_reject_remarks"></strong>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-black" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-purple btn-modal-save">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endpush
@push('modal')
<div class="modal fade" id="cancelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" id="cancelForm" action="{{ route('claim-cancel', ['id'=>$claim_detail->id]) }}" autocomplete="off">
                @csrf
                <input type="hidden" name="id" value="{{ $claim_detail->id }}">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Cancel Claim Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="cancel_remarks" class="col-12 col-form-label required-label">
                            {{ __('Remarks') }}
                        </label>
                        <div class="col-12">
                            <textarea id="cancel_remarks" class="form-control @error('cancel_remarks') is-invalid @enderror" name="cancel_remarks" rows="3" placeholder="Write your remarks here...">{{ old('cancel_remarks') }}</textarea>
                            <span class="invalid-feedback" role="alert">
                                <strong id="error_cancel_remarks"></strong>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-black" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-purple btn-modal-save">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endpush
@endsection
@push('js')
<script type="text/javascript">
	$(document).ready(function(){
		$("body").on("change", 'textarea[name="description"]', function (e){
			if($(this).val()){
				$('#description').removeClass('is-invalid');
			}
		});

		$( "#rejectForm" ).submit(function(event) {
		    event.preventDefault();
		    $('.btn-modal-save').prop('disabled', true);
		    $('.btn-modal-save').html('<i class="fas fa-circle-notch  fa-spin"></i> Loading');
		    var formData = new FormData(this);
		    var action_url = $(this).attr('action');
		    $.ajax({
		        type: 'POST',
		        url: action_url,
		        data: formData,
		        processData: false,
		        contentType: false,
		        success: function(data) {
		            $.each(data, function(k, v) {
		                console.log(k, v);
		                if (k == 'success'){
	                        Swal.fire({
	                          	icon: 'success',
	                          	title: 'Rejected!',
	                          	text: 'The claim details has been rejected.',
	                          	showConfirmButton:false,
	                          	timer: 1500
	                        })
	                        $('#rejectModal').modal('hide');
	                        $('.btn-modal-save').prop('disabled', false);
	                        setTimeout(function() {
	                            // location.reload();
	                            window.location.href = "{{ route('claim-index') }}";
	                        }, 500);
		                }else{
		                    $('textarea[name='+k+']').addClass('is-invalid');
		                    $('#error_'+k).html(v);
		                    $('.btn-modal-save').prop('disabled', false);
		                    $('.btn-modal-save').html('Save');
		                }
		            });
		        }
		    });
		});
		$('#rejectModal').on('hidden.bs.modal', function(e){
            $('#reject_remarks').val('');
        });

        $( "#cancelForm" ).submit(function(event) {
		    event.preventDefault();
		    $('.btn-modal-save').prop('disabled', true);
		    $('.btn-modal-save').html('<i class="fas fa-circle-notch  fa-spin"></i> Loading');
		    var formData = new FormData(this);
		    var action_url = $(this).attr('action');
		    $.ajax({
		        type: 'POST',
		        url: action_url,
		        data: formData,
		        processData: false,
		        contentType: false,
		        success: function(data) {
		            $.each(data, function(k, v) {
		                console.log(k, v);
		                if (k == 'success'){
	                        Swal.fire({
	                          	icon: 'success',
	                          	title: 'Cancelled!',
	                          	text: 'The claim details has been cancelled.',
	                          	showConfirmButton:false,
	                          	timer: 1500
	                        })
	                        $('#cancelModal').modal('hide');
	                        $('.btn-modal-save').prop('disabled', false);
	                        setTimeout(function() {
	                            // location.reload();
	                            window.location.href = "{{ route('claim-index') }}";
	                        }, 500);
		                }else{
		                    $('textarea[name='+k+']').addClass('is-invalid');
		                    $('#error_'+k).html(v);
		                    $('.btn-modal-save').prop('disabled', false);
		                    $('.btn-modal-save').html('Save');
		                }
		            });
		        }
		    });
		});
		$('#cancelModal').on('hidden.bs.modal', function(e){
            $('#cancel_remarks').val('');
        });
	});
</script>
@endpush
@push('js')
<script>
  	var loadFile = function(event) {
    	var reader = new FileReader();
    	reader.onload = function(){
      		var thumbnail = document.getElementById('thumbnail');
      		thumbnail.src = reader.result;
    	};
    	reader.readAsDataURL(event.target.files[0]);
  	};
</script>
@endpush