@extends('layouts/microfin_layout')
@section('title', '| One Time Loan Details')
@section('content')
	<style type="text/css">
        #interestRateList > tbody > tr > td:last-child a {
        	padding: 0 3px;
        }
        #regularLoanEmploymentData thead tr th,
        #regularLoanEmploymentData tbody tr td,
        #regularLoanEmploymentData thead tr th,
        #regularLoanEmploymentData tbody tr th {
        	font-size: 11px;
		    text-align: left;
		    padding: 3px;
        }
        #regularLoanEmploymentData tbody tr th {
        	border: 1px solid #FFF;
		    background: #696969 !important;
		    border-bottom: 0 !important;
		    color: #FFF;
		    text-align: left;
        }

		.center {
			margin: auto;
			width: 175px;
			height: 200px;
			border: 3px solid #898a8c;
			padding: 4px;
		}
    </style>

    <style>
		body {font-family: Arial, Helvetica, sans-serif;}

		#myImg {
		  border-radius: 5px;
		  cursor: pointer;
		  transition: 0.3s;
		}

		#myImg1 {
		  border-radius: 5px;
		  cursor: pointer;
		  transition: 0.3s;
		}

		#myImg2 {
		  border-radius: 5px;
		  cursor: pointer;
		  transition: 0.3s;
		}

		#myImg3 {
		  border-radius: 5px;
		  cursor: pointer;
		  transition: 0.3s;
		}

		#myImg:hover {opacity: 0.7;}

		#myImg1:hover {opacity: 0.7;}

		#myImg2:hover {opacity: 0.7;}

		#myImg3:hover {opacity: 0.7;}

		/* The Modal (background) */
		.modal {
		  display: none; /* Hidden by default */
		  position: fixed; /* Stay in place */
		  z-index: 1; /* Sit on top */
		  padding-top: 200px; /* Location of the box */
		  left: 0;
		  top: 0;
		  width: 100%; /* Full width */
		  height: 100%; /* Full height */
		  overflow: auto; /* Enable scroll if needed */
		  background-color: rgb(0,0,0); /* Fallback color */
		  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
		}

		/* Modal Content (image) */
		.modal-content {
		  margin: auto;
		  display: block;
		  width: 80%;
		  max-width: 700px;
		}

		/* Caption of Modal Image */
		#caption {
		  margin: auto;
		  display: block;
		  width: 80%;
		  max-width: 700px;
		  text-align: center;
		  color: #ccc;
		  padding: 10px 0;
		  height: 150px;
		}

		/* Add Animation */
		.modal-content, #caption {  
		  -webkit-animation-name: zoom;
		  -webkit-animation-duration: 0.6s;
		  animation-name: zoom;
		  animation-duration: 0.6s;
		}

		@-webkit-keyframes zoom {
		  from {-webkit-transform:scale(0)} 
		  to {-webkit-transform:scale(1)}
		}

		@keyframes zoom {
		  from {transform:scale(0)} 
		  to {transform:scale(1)}
		}

		/* The Close Button */
		.close {
		  position: absolute;
		  top: 15px;
		  right: 35px;
		  padding-top: 75px;
		  color: #f1f1f1;
		  font-size: 40px;
		  font-weight: bold;
		  transition: 0.3s;
		}

		.close:hover,
		.close:focus {
		  color: #bbb;
		  text-decoration: none;
		  cursor: pointer;
		}

		/* 100% Image Width on Smaller Screens */
		@media only screen and (max-width: 700px){
		  .modal-content {
		    width: 100%;
		  }
		}
	</style>

	<!-- The Modal -->
	<div id="myModal" class="modal">
	  	<span class="close">&times;</span>
	  	<img class="modal-content" id="img01"/>
	  	<div id="caption"></div>
	</div>


	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default" style="_background-color:#708090;">
				<div class="panel-heading" style="padding-bottom:0px">
					<div class="panel-options">
						<a href="{{ url('mfn/viewOneTimeLoan/') }}" class="btn btn-info pull-right addViewBtn">
							<i class="glyphicon glyphicon-plus-sign addIcon"></i> 
							One Time Loan Lists
													</a>
					</div>
				</div>
				<div class="panel-body panelBodyView"> 

					<div class="row">
						<div class="col-md-1"></div>
						<div class="col-md-10">
							<table class="table table-striped table-bordered member-info">
								<thead>
									<tr>
										<th colspan="6">
											<strong>Pictures</strong>
										</th>
									</tr>
								</thead>
							</table>
						</div>
						<div class="col-md-1"></div>
					</div>
					<div class="row">
						<div class="col-md-1"></div>
						<div class="col-md-2" style="color: black; text-align: left; padding-top: 85px;">Member Picture :</div>
						<div class="col-md-3">
							{{-- <div class="well">
								
							</div> --}}
							{{-- <table class="table table-striped table-bordered member-info" >
								<tbody>
									<tr>
										<td style="font-size: 14px;">Member Picture :</td>
										<td style="padding-right:150px !important;">
											@if ($damageData['memberImage'] != '')
												<img id="guarantorImagePreview" src="{{ asset($damageData['memberImage']) }}"  class="img-responsive img-rounded full-width center">
											@else 
												<img id="guarantorImagePreview" src="{{ asset('images/image-4.jpg') }}"  class="img-responsive img-rounded full-width center">
											@endif
										</td>
									</tr>
								</tbody>
							</table> --}}
							@if ($damageData['memberImage'] != '')
								<img id="myImg" src="{{ asset($damageData['memberImage']) }}" alt="Profile Image" height="175" width="175">
							@else 
								<img id="guarantorImagePreview" src="{{ asset('images/image-4.jpg') }}"  height="175" width="175">
							@endif
						</div>
						<div class="col-md-2" style="color: black; text-align: left; padding-top: 85px;">Guarantor Picture : </div>
						<div class="col-md-3">
							{{-- <div class="well">
								
							</div> --}}
							{{-- <table class="table table-striped table-bordered member-info" >
								<tbody>
									<tr>
										<td style="font-size: 14px;">Guarantor Picture : </td>
										<td style="padding-right:175px !important;">
											@if ($damageData['guarantorImage'] != '')
												<img id="guarantorImagePreview" src="{{ asset($damageData['guarantorImage']) }}"  class="img-responsive img-rounded full-width center">
											@else 
												<img id="guarantorImagePreview" src="{{ asset('images/image-4.jpg') }}"  class="img-responsive img-rounded full-width center">
											@endif
										</td>
									</tr>
								</tbody>
							</table> --}}
							@if ($damageData['guarantorImage'] != '')
								<img id="myImg1" src="{{ asset($damageData['guarantorImage']) }}" alt="Guarantor Image" height="175" width="175">
							@else 
								<img id="guarantorImagePreview" src="{{ asset('images/image-4.jpg') }}"  height="175" width="175">
							@endif
						</div>
						<div class="col-md-1"></div>
					</div>

					<div class="row">
						<div class="col-md-12">
							&nbsp;
						</div>
					</div>

					<div class="row">
						<div class="col-md-1"></div>
						<div class="col-md-2"  style="color: black; text-align: left; padding-top: 53px;">Member NID Signature :</div>
						<div class="col-md-3">
							{{-- <div class="well">
								
							</div> --}}
							{{-- <table class="table table-striped table-bordered member-info" >
								<tbody>
									<tr>
										<td style="font-size: 14px;">Member Picture :</td>
										<td style="padding-right:150px !important;">
											
										</td>
									</tr>
								</tbody>
							</table> --}}
							@if (isset($damageData['memberNidImage']))
								<img id="myImg2" src="{{ asset($damageData['memberNidImage']) }}" alt="Member NID Image"  height="100" width="175">
							@else 
								<img id="guarantorImagePreview" src="{{ asset('images/image-4.jpg') }}"   height="100" width="175">
							@endif
						</div>
						<div class="col-md-2"  style="color: black; text-align: left; padding-top: 53px;">Guarantor NID Signature : </div>
						<div class="col-md-3">
							{{-- <div class="well">
								
							</div> --}}
							{{-- <table class="table table-striped table-bordered member-info" >
								<tbody>
									<tr>
										<td style="font-size: 14px;">Guarantor Picture : </td>
										<td style="padding-right:175px !important;">
											
										</td>
									</tr>
								</tbody>
							</table> --}}
							@if ($damageData['guarantorNidImage'] != '')
								<img id="myImg3" src="{{ asset($damageData['guarantorNidImage']) }}" alt="Guarantor NID Image"  height="100" width="175">
							@else 
								<img id="guarantorImagePreview" src="{{ asset('images/image-4.jpg') }}"   height="100" width="175">
							@endif
						</div>
						<div class="col-md-1"></div>
					</div>

					<div class="row">
						<div class="col-md-10 col-md-offset-1">
							<table class="table table-striped table-bordered member-info">
								<thead>
									<tr>
										<th colspan="6">
											<strong>Loan Information</strong>
										</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['loanId'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['loanCode'] }}</td>
										<td>{{ $damageData['loanDetailsTCN']['product'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['productIdFk'] }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['memberName'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['memberInfoOB']->name . '&nbsp;' .'(' . $damageData['regularLoanDetail']['memberInfoOB']->code .')' }}</td>
										<td>{{ $damageData['loanDetailsTCN']['loanCycle'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['loanCycle'] }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['fatherSpouseName'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['memberInfoOB']->spouseFatherSonName }}</td>
										<td>{{ $damageData['loanDetailsTCN']['paymentMode'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['paymentTypeIdFk'] }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['age'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['memberInfoOB']->age . '&nbsp;' . 'Years' }}</td>
										<td>{{ $damageData['loanDetailsTCN']['mobileNo'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['memberInfoOB']->mobileNo }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['samity'] }}</td>
										<td>{!! $damageData['regularLoanDetail']['samityName'] . '&nbsp;' .'(' . $damageData['regularLoanDetail']['samityCode'] . ')' . '<br/>' . $damageData['regularLoanDetail']['samityDay']  !!}</td>
										<td>{{ $damageData['loanDetailsTCN']['transferDate'] }}</td>
										<td></td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['disbursementDate'] }}</td>
										<td>{{ $damageData['MicroFinance']->getMicroFinanceDateFormat($damageData['regularLoanDetail']['disbursementDate']) }}</td>
										<td>{{ $damageData['loanDetailsTCN']['dueAmount'] }}</td>
										<td>-</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['firstRepayDate'] }}</td>
										<td>{{ $damageData['MicroFinance']->getMicroFinanceDateFormat($damageData['regularLoanDetail']['firstRepayDate']) }}</td>
										<td>{{ $damageData['loanDetailsTCN']['advanceAmount'] }}</td>
										<td>-</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['interestRate'] }}</td>
										<td>{{ sprintf("%.2f", $damageData['regularLoanDetail']['interestRate']) . '&nbsp;' . '%' . '&nbsp;' . $damageData['regularLoanDetail']['interestRateIndex'] . '&nbsp;' . '(' . $damageData['regularLoanDetail']['interestCalculationMethod'] . ')' }}</td>
										<td>{{ $damageData['loanDetailsTCN']['recoveryAmount'] }}</td>
										<td>-</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['extraInstallmentAmount'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['extraInstallmentAmount'] }}</td>
										<td>{{ $damageData['loanDetailsTCN']['openingLoanOutstanding'] }}</td>
										<td>
											{{-- {{ sprintf("%.2f", $damageData['regularLoanDetail']['totalRepayAmount']) }} --}}
										</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['currentStatus'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['isLoanCompleted']==0?'Active':'Closed' }}</td>
										<td>{{ $damageData['loanDetailsTCN']['rebate'] }}</td>
										<td>-</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['repaymentFrequency'] }}</td>
										<td></td>
										<td>{{ $damageData['loanDetailsTCN']['loanOutstanding'] }}</td>
										{{-- <td>{{ sprintf("%.2f", $damageData['regularLoanDetail']['totalRepayAmount']) }}</td> --}}
										@php
											// if ($damageData['regularLoanDetail']['totalCollectionAmount'] <= $damageData['regularLoanDetail']['totalRepayAmount']) {
											// 	$totalOutstanding = $damageData['regularLoanDetail']['totalRepayAmount'] - $damageData['regularLoanDetail']['totalCollectionAmount'];
											// }
											$totalOutstanding = 0;
											if ($damageData['totalCollectionForLoan'] <= $damageData['regularLoanDetail']['totalRepayAmount']) {
												$totalOutstanding = $damageData['regularLoanDetail']['totalRepayAmount'] - $damageData['totalCollectionForLoan'];
											}
										@endphp
										<td>{{ sprintf("%.2f", $totalOutstanding) }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['interestMode'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['interestMode'] }}</td>
										@php
											// dd($damageData['loanDetailsTCN']['loanPurpose'], $damageData['regularLoanDetail']['loanPurpose']);
										@endphp
										<td>{{ $damageData['loanDetailsTCN']['loanPurpose'] }}</td>
										@if ($damageData['regularLoanDetail']['loanPurpose'] != "")
											<td>{{ $damageData['regularLoanDetail']['loanPurpose'] }}</td>
										@else 
											<td></td>
										@endif
										
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['loanAmount'] }}</td>
										<td>{{ sprintf("%.2f", $damageData['regularLoanDetail']['loanAmount']) }}</td>
										<td>{{ $damageData['loanDetailsTCN']['loanSubPurpose'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['loanSubPurposeIdFk'] }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['interestAmount'] }}</td>
										<td>{{ sprintf("%.2f", $damageData['regularLoanDetail']['interestAmount']) }}</td>
										<td>{{ $damageData['loanDetailsTCN']['guarantorNameFirst'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['firstGuarantorName'] }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['totalRepayAmount'] }}</td>
										<td>{{ sprintf("%.2f", $damageData['regularLoanDetail']['totalRepayAmount']) }}</td>
										<td>{{ $damageData['loanDetailsTCN']['guarantorRelationshipFirst'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['firstGuarantorRelation'] }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['installmentNum'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['repaymentNo'] }}</td>
										<td>{{ $damageData['loanDetailsTCN']['guarantorAddressFirst'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['firstGuarantorAddress'] }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['loanPeriodInMonth'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['loanRepayPeriodIdFk'] }}</td>
										<td>{{ $damageData['loanDetailsTCN']['guarantorNameSecond'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['secondGuarantorName'] }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['loanApplicationNo'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['loanApplicationNo'] }}</td>
										<td>{{ $damageData['loanDetailsTCN']['guarantorRelationshipSecond'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['secondGuarantorRelation'] }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['insuranceGuarantorAmount'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['insuranceAmount'] }}</td>
										<td>{{ $damageData['loanDetailsTCN']['guarantorAddressSecond'] }}</td>
										<td>{{ $damageData['regularLoanDetail']['secondGuarantorAddress'] }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['loanClosingDate'] }}</td>
										<td>-</td>
										<td>{{ $damageData['loanDetailsTCN']['transferOutDate'] }}</td>
										<td>-</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['installmentAmount'] }}</td>
										<td>{!! sprintf("%.2f", $damageData['regularLoanDetail']['installmentAmount']) !!}</td>
										<td>{{ $damageData['loanDetailsTCN']['folioNumber'] }}</td> 
										<td>{{ $damageData['regularLoanDetail']['folioNum'] }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['additionalFee'] }}</td>
										<td>{{ sprintf("%.2f", $damageData['regularLoanDetail']['additionalFee']) }}</td>
										<td>{{ $damageData['loanDetailsTCN']['loanFormFee'] }}</td>
										<td>{{ sprintf("%.2f", $damageData['regularLoanDetail']['loanFormFee']) }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['payment'] }}</td>
										<td colspan="3">{{ $damageData['regularLoanDetail']['paymentTypeIdFk'] }}</td>
									</tr>
									<tr>
										<td>{{ $damageData['loanDetailsTCN']['employment'] }}</td>
										<td colspan="3">
											<table width="100%">
												<tbody>
													<tr>
														<td>Self: {{ $damageData['regularLoanDetail']['isSelfEmployment'] }}</td>
													</tr>
													<tr>
														<td>
															<table width="100%" id="regularLoanEmploymentData">
																<thead>
																	<tr>
																		<th width="25%"></th>
																		<th>Family</th>
																		<th>Wages Based</th>
																		<th>Wage (Per Month)</th>
																	</tr>
																</thead>
																<tbody>
																	<tr>
																		<th>Full Time Male</th>
																		<td>0</td>
																		<td>0</td>
																		<td>0</td>
																	</tr>
																	<tr>
																		<th>Full Time Female</th>
																		<td>0</td>
																		<td>0</td>
																		<td>0</td>
																	</tr>
																	<tr>
																		<th>Part Time Male</th>
																		<td>0</td>
																		<td>0</td>
																		<td>0</td>
																	</tr>
																	<tr>
																		<th>Part Time Female</th>
																		<td>0</td>
																		<td>0</td>
																		<td>0</td>
																	</tr>
																</tbody>
															</table>
														</td>
													</tr>
												</tbody>
											</table>
										</td>
									</tr>
								</tbody>
							</table>
							<div style="height:20px"></div>
							<table class="table table-striped table-bordered view" id="interestRateList">
								<thead>
									<tr>
										<th colspan="9" style="text-align:left">
											<strong>Loan Schedule</strong>
										</th>
									</tr>
									<tr>
										<th>#</th>
										<th>Date</th>
										<th>Samity Day</th>
										<th>Installment Amount</th>
										<th>Principal Amount (P)</th>
										<th>Interest Amount (I)</th>
										<th>Transaction Amount</th>
										<th>Status</th>
				                    </tr>
								</thead>
								<tbody>
																		@foreach($damageData['loanSchedules'] as $loanSchedule)
									@php
										$installmentSl = $loanSchedule->installmentSl;
									@endphp
										<tr>
											<td>{{ $SL }}</td>
											<td>{{ $damageData['MicroFinance']->getMicroFinanceDateFormat($loanSchedule->scheduleDate) }}</td>
											<td>{{ date('l', strtotime($loanSchedule->scheduleDate)) }}</td>
											<td>{{ sprintf("%.2f", $loanSchedule->installmentAmount) }}</td>
											<td>{{ sprintf("%.2f", $loanSchedule->principalAmount) }}</td>
											<td>{{ sprintf("%.2f", $loanSchedule->interestAmount) }}</td>
											<td></td>
											<td>
												
													<a style="color:#000;" href="{{ url('regularLoanReschedule/'.$damageData['regularLoanDetails']->id.'/'.$installmentSl) }}">
														<i style="font-size:15px;" class="fa fa-plus-circle" aria-hidden="true"></i>
														Reschedule
													</a>
											</td>
										</tr>
																			@endforeach
								</tbody>
							</table>
						</div>
					</div>
				</div> 
			</div>
		</div>
	</div>

	<script type="text/javascript">
		// Get the modal
		var modal = document.getElementById('myModal');

		// Get the image and insert it inside the modal - use its "alt" text as a caption
		var img = document.getElementById('myImg');
		var img1 = document.getElementById('myImg1');
		var img2 = document.getElementById('myImg2');
		var img3 = document.getElementById('myImg3');
		var modalImg = document.getElementById("img01");
		var captionText = document.getElementById("caption");
		img.onclick = function(){
		  	modal.style.display = "block";
		  	modalImg.src = this.src;
		  	captionText.innerHTML = this.alt;
		}

		img1.onclick = function(){
		  	modal.style.display = "block";
		  	modalImg.src = this.src;
		  	captionText.innerHTML = this.alt;
		}

		img2.onclick = function(){
		  	modal.style.display = "block";
		  	modalImg.src = this.src;
		  	captionText.innerHTML = this.alt;
		}

		img3.onclick = function(){
		  	modal.style.display = "block";
		  	modalImg.src = this.src;
		  	captionText.innerHTML = this.alt;
		}

		// Get the <span> element that closes the modal
		var span = document.getElementsByClassName("close")[0];

		// When the user clicks on <span> (x), close the modal
		span.onclick = function() { 
		  modal.style.display = "none";
		}
	</script>

@endsection