@extends('layouts/microfin_layout') 
@section('title', '| Add Member Samity Transfer') 
@section('content')

<style type="text/css">
	form label {
		font-size: 11px !important;
	}

	.form-control {
		font-size: 11px !important;
		padding: 5px !important;
	}

	.selectize-dropdown-content {
		width: 260px !important;
		background: olive;
		color: #000;
		left: 0px !important;
		position: relative !important;
		top: 0px !important;
	}

	.selectize-dropdown,
	.selectize-input,
	.selectize-input input {
		height: 28px !important;
		font-size: 11px !important;
	}

	.selectize-control .selectize-input input {
		padding-left: 8px !important;
	}

	.selectize-control .selectize-input div {
		padding: 5px 5px 5px 8px !important;
	}

	#memberSummaryBlock p {
		color: #000;
		margin: 0 0 5px 0;
		font-weight: bold;
	}

	#savingsSummary thead tr th,
	#loanSummary thead tr th {
		background: GrayText !important;
		text-transform: uppercase !important;
		font-size: 10px !important;
		border-bottom: 1px solid #eee !important;
		_padding: 5px 0 !important;
		color: #fff !important;
		word-break: normal;
	}

	#savingsSummary tbody tr td:first-child,
	#loanSummary tbody tr td:first-child {
		text-align: left !important;
		font-weight: normal !important;
	}

	#savingsSummary tbody tr td,
	#loanSummary tbody tr td {
		text-align: right !important;
	}

	#memberSummary tbody tr td:first-child,
	#savingsSummary tbody tr td:first-child,
	#loanSummary tbody tr td:first-child {
		font-weight: bold;
	}
</style>

<div class="row add-data-form">
	<div class="col-md-12">
		<div class="col-md-10 col-md-offset-1 fullbody">
			<div class="viewTitle" style="border-bottom:1px solid white;">
				<a
					href="{{ url('viewMemberClosing/') }}"
					class="btn btn-info pull-right addViewBtn"
				>
					<i class="glyphicon glyphicon-th-list viewIcon"></i>
					Member Closing List
				</a>
			</div>
			<div class="panel panel-default panel-border">
				<div class="panel-heading">
					<div class="panel-title">New Member Closing</div>
				</div>
				<div class="panel-body">
					<div class="row">
						<div class="col-md-12">
							{!! Form::open(array('url' => '', 'role' => 'form', 'class' =>
							'form-horizontal form-groups validate', 'id'=>'memberClosingForm')) !!}
							<div class="row">
								<div class="col-md-6">
									@if (Auth::user()->branchId == 1)
									<div class="form-group">
										{!! Form::label('branch', 'Branch:', ['class' => 'col-sm-4
										control-label']) !!}
										<div class="col-sm-8">
											{!! Form::select('branch', $branchList, null,
											['id'=>'branch','class' => 'form-control']) !!}
										</div>
									</div>
									@endif 
									
									<div class="form-group">
										{!! Form::label('samity', 'Samity:', ['class' => 'col-sm-4
										control-label']) !!}
										<div class="col-sm-8">
											{!! Form::select('samity', $samityList, null,
											['id'=>'samity','class' => 'form-control']) !!}
										</div>
									</div>

									<div class="form-group">
										{!! Form::label('member', 'Member:*', ['class' => 'col-sm-4
										control-label']) !!}
										<div class="col-sm-8">
											{!! Form::select('memberIdFk', array('' => 'Select'),
											null, array('class' => 'form-control', 'id' =>
											'select-to', 'data-validate' => 'required')) !!}
										</div>
									</div>
									<div class="form-group">
										{!! Form::label('member closing date', 'Member Closing
										Date:*', ['class' => 'col-sm-4 control-label']) !!}
										<div class="col-sm-8">
											{!! Form::text('closingDate', $branchDate,
											['class' => 'form-control', 'id' => 'closingDate', 'type'
											=> 'text', 'readonly' => 'readonly', 'data-validate' =>
											'required']) !!}
										</div>
									</div>
									<div class="form-group">
										{!! Form::label('note', 'Note:', ['class' => 'col-sm-4
										control-label']) !!}
										<div class="col-sm-8">
											{!! Form::textarea('note', $value = null, ['class' =>
											'form-control', 'id' => 'note', 'type' => 'textarea',
											'rows' => '3', 'cols' => '50']) !!}
										</div>
									</div>
								</div>
								<div id="memberSummaryBlock" class="col-md-6 hidden">
									<div class="row">
										<div class="col-md-12">
											<p>Member's Information:</p>
											<table
												id="memberSummary"
												style="width:100%"
												class="table table-striped table-bordered loan-saving-summary-table right">
												<tbody>
													<tr>
														<td>Member Name</td>
														<td class="memberName"></td>
													</tr>
													<tr>
														<td>Branch Name</td>
														<td class="branchName"></td>
													</tr>
													<tr>
														<td>Samity Name</td>
														<td class="samityName"></td>
													</tr>
													<tr>
														<td>Current Primary Product</td>
														<td class="currentProductName"></td>
													</tr>
													<tr>
														<td>Working Area</td>
														<td class="workingArea"></td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
									<div class="row"></div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<p id="loanSummaryTitle"></p>
									<table
										id="loanSummary"
										style="width:100%;margin-bottom:10px"
										class="table table-striped table-bordered loan-saving-summary-table right"
									>
										<thead></thead>
										<tbody></tbody>
									</table>
									<p id="savingsSummaryTitle" style="display:none;"></p>
									<table
										id="savingsSummary"
										style="width:100%; display:none;"
										class="table table-striped table-bordered loan-saving-summary-table right"
									>
										<thead></thead>
										<tbody></tbody>
									</table>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<div class="form-group">
										<div class="col-sm-8 col-sm-offset-4">
											{!! Form::submit('Submit', ['id' => 'submit', 'class' =>
											'btn btn-info']) !!}
											<a
												href="{{ url('viewMemberClosing/') }}"
												class="btn btn-danger closeBtn"
												>Close</a
											>
										</div>
									</div>
								</div>
							</div>
							{!! Form::close() !!}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<link rel="stylesheet" href="{{ asset('css/selection.css') }}" />
<link rel="stylesheet" href="{{ asset('css/selectize.default.css') }}" />
<script src="{{ asset('js/selectize.js') }}"></script>
<script>
	var formatName = function(item) {
		return $.trim((item.memberName || "") + " - " + (item.memberCode || ""));
	};
</script>
<script type="text/javascript">
	function loadBankList(paymentTypeId, projectId, branchId) {
		if ($("#" + paymentTypeId + "").val() == "Bank") {
			$("#" + paymentTypeId + "")
				.parents("tr")
				.find(".ledgerId")
				.prop("disabled", false);
			$("#" + paymentTypeId + "")
				.parents("tr")
				.find(".chequeNo")
				.prop("readonly", false);

			$("#submit").prop("disabled", true);
			$.ajax({
				type: "post",
				url: "./getLedgersOptionByBranch",
				dataType: "json",
				data: {
					projectId: projectId,
					branchId: branchId
				},
				success: function(_response) {
					if (_response.errors) {
						alert(_response.errors);
					} else {
						$("#" + paymentTypeId + "")
							.parents("tr")
							.find(".ledgerId")
							.empty();
						$("#" + paymentTypeId + "")
							.parents("tr")
							.find(".ledgerId")
							.append("<option value='' selected='selected'>Select</option>");

						$.each(_response.ledgerOfBanksOptions, function(index, value) {
							$("#" + paymentTypeId + "")
								.parents("tr")
								.find(".ledgerId")
								.append(
									"<option value='" +
										value.id +
										"'>" +
										value.code +
										" - " +
										value.name +
										"</option>"
								);
						});
					}
				},
				error: function(_response) {
					alert(_response.errors);
				}
			});
		} else if ($("#" + paymentTypeId + "").val() == "Cash") {
			$("#" + paymentTypeId + "")
				.parents("tr")
				.find(".ledgerId")
				.val("");
			$("#" + paymentTypeId + "")
				.parents("tr")
				.find(".chequeNo")
				.val("");
			$("#" + paymentTypeId + "")
				.parents("tr")
				.find(".ledgerId")
				.empty();
			$("#" + paymentTypeId + "")
				.parents("tr")
				.find(".ledgerId")
				.append("<option value='' selected='selected'>Select</option>");
			$("#" + paymentTypeId + "")
				.parents("tr")
				.find(".chequeNo")
				.prop("readonly", true);
		}
	}

	$(document).ready(function() {
		$("label:contains('*')").html(function() {
			return $(this)
				.html()
				.replace(
					"*",
					"<span style='float:right;position:relative;top:-8px;right:-25px;font-size:13px;'>*</span>"
				);
		});

		$(document).on("change", "#select-to", function() {
			$("#newSamityId").empty();

			$("#submit").prop("disabled", true);
			$.ajax({
				type: "post",
				url: "./reqLoanAndSavingsSummaryForMemberClosing",
				data: {
					memberId: $("#select-to").val()
				},
				dataType: "json",
				success: function(_response) {
					if (_response.errors) {
						alert(_response.errors);
					} else {
						$("#newSamityId").append('<option value="">Select</option>');
						$.each(_response.samityOption, function(index, value) {
							$("#newSamityId").append(
								'<option value="' + index + '">' + value + "</option>"
							);
						});

						$("#memberSummaryBlock").removeClass("hidden");
						$(".memberName").text(_response.memberName);
						$(".branchName").text(_response.branchName);
						$(".samityName").text(_response.samityName);
						$(".currentProductName").text(_response.currentProductName);
						$(".workingArea").text(_response.workingArea);

						var str = "<tr>";
						var i = 1;

						/*$.each(_response.loanSummary, function(index, value) {
						    for(var key in value) {
						        str += '<td>' + value[key] + '</td>';

						        if(i%10==0)
						            str += '</tr>';
						        i++;
						    }
						});*/

						if (_response.savingsSummary == "")
							str =
								'<tr><td colspan="10" style="text-align:center!important;">No Savings account found.</td></tr>';

						/*$('#loanSummary').parent().css('margin-top', '10px');
						$('#loanSummaryTitle').text('Loan Information:').css('color', '#000');
						$('#loanSummary thead').html('<tr><th>Loan No</th><th>Loan Amount</th><th>Interest Amount</th><th>Discount Amount</th><th>Payable Amount</th><th>NOI</th><th>Total Payment Amount</th><th>Outstanding</th><th>Interest Amount only for One Time Loan</th><th>Paid Amount</th></tr>');

						$('#loanSummary tbody').html(str);*/

						var str = "<tr>";
						var i = 1;

						$.each(_response.savingsSummary, function(index, value) {
							for (var key in value) {
								str += "<td>" + value[key] + "</td>";

								if (i % 12 == 0) str += "</tr>";
								i++;
							}
						});

						if (_response.savingsSummary == "")
							str =
								'<tr><td colspan="12" style="text-align:center!important;">No savings account found.</td></tr>';

						$("#savingsSummaryTitle")
							.text("Savings Information:")
							.css("color", "#000");
						$("#savingsSummary thead").html(
							"<tr><th>Savings Code</th><th>Product</th><th>Opening Date</th><th>Savings Amount</th><th>Total Desposit</th><th>Total Withdraw</th><th>Savings Balance</th><th>Remaining Amount</th><th>Interest Amount</th><th>Payment Mode</th><th>Bank List</th><th>Cheque No</th></tr>"
						);

						$("#savingsSummary tbody").html(str);

						$(".chequeNo").prop("readonly", true);
						$("#loanSummary")
							.parent()
							.css("margin-bottom", "20px");
					}
				},
				error: function(_response) {
					alert(_response.errors);
				}
			});
		});

		$("form").submit(function(event) {
			event.preventDefault();
			$("#submit").prop("disabled", true);
			this.disabled = true;

			if ($("#select-to").val() == "") {
				alert("Please select a member first.");
				$("#submit").prop("disabled", false);
				return false;
			}

			var validatePaidAmount = 0;
			var requiredChequeNo = 0;
			var requiredLedgerId = 0;

			//  VALIDATE PAID AMOUNT.
			/*$('#loanSummary tbody tr').each(function() {
			    if(parseInt($(this).closest('tr').find('.paidAmount').val())<parseInt($(this).closest('tr').find('.interestAmountForOTL').parent().prev().text())) {
			        validatePaidAmount++;
			    }
			});

			if(validatePaidAmount>0) {
			    alert('Please enter full outstanding as paid amount of loan.');
			    $("#submit").prop('disabled', false);
			    return false;
			} */

			//  VALIDATE CHEQUE NO AND LEDGER ID.
			$("#savingsSummary tbody tr").each(function() {
				if (
					$(this)
						.find(".paymentTypeId")
						.val() == "Bank"
				) {
					if (
						$(this)
							.find(".chequeNo")
							.val() == ""
					) {
						requiredChequeNo++;
					}
					if (
						$(this)
							.find(".ledgerId")
							.val() == ""
					) {
						requiredLedgerId++;
					}
				}
			});

			if (requiredChequeNo > 0) {
				alert("Please enter cheque number.");
				$("#submit").prop("disabled", false);
				return false;
			}

			if (requiredLedgerId > 0) {
				alert("Please select bank name.");
				$("#submit").prop("disabled", false);
				return false;
			}

			$("#submit").prop("disabled", true);
			$.ajax({
				type: "post",
				url: "./addMemberClosingItem",
				data: $("form").serialize(),
				dataType: "json",
				success: function(_response) {
				    console.log(_response);
					if (_response.errors) {
						if ((_response.errors =="This member is already exist in the closing table. Please try another member to close!")) {
							alert(
								"This member is already exist in the closing table. Please try another member to close!"
							);
						}
						
						if (_response.errors == 'Write_off') {
							toastr.warning("This member is already exist in the write off table. Please try another member to close!");
						}

						if (_response.errors["memberIdFk"]) {
							toastr.warning(_response.errors.memberIdFk, null, opts);
						}
					} else {
						if (_response.responseTitle=='Success!') {
							toastr.success(_response.responseText, _response.responseTitle, opts);
							setTimeout(function() {
								window.location.href = "{{ url('./viewMemberClosing/') }}";
							}, 3000);
						}	else if(_response.responseTitle=='Warning!'){
							toastr.warning(_response.responseText, _response.responseTitle, opts);
							$('#submit').removeAttr("disabled", 'disabled');
						}
					}
				},
				error: function(_response) {
					alert(_response.errors);
				}
			});
		});

		function selectizeMember(members) {
			// alert();
			$("#select-to")
				.selectize()[0]
				.selectize.destroy();
			if (members != "") {
				$("#select-to").selectize({
					persist: false,
					maxItems: 1,
					valueField: "id",
					labelField: "name",
					searchField: [
						"memberName",
						"samityName",
						"memberCode",
						"workingArea"
					],
					sortField: [
						{
							field: "memberName",
							direction: "asc"
						}
					],
					options: members,

					render: {
						item: function(item, escape) {
							var name = formatName(item);

							return (
								"<div>" +
								(name ? '<span class="name">' + escape(name) + "</span>" : "") +
								"</div>"
							);
						},
						option: function(item, escape) {
							var name = formatName(item);
							var label = name || item.samityName;
							var branch = name ? item.branchName : null;
							var samity = name ? item.samityName : null;
							var workingArea = name ? item.workingArea : null;

							return (
								"<div>" +
								'<span class="label">' +
								escape(label) +
								"</span>" +
								(branch
									? '<span class="caption">' +
									  escape("Branch: " + branch) +
									  "</span>"
									: "") +
								(samity
									? '<span class="caption">' +
									  escape("Samity: " + samity) +
									  "</span>"
									: "") +
								(workingArea
									? '<span class="caption">' +
									  escape("Working Area: " + workingArea) +
									  "</span>"
									: "") +
								"</div>"
							);
						}
					}
				});
			}
		}

		// $(document).on('change', '#branch', function() {
		$("#branch").change(function(e) {
			$("#samity option:gt(0)").remove();

			selectizeMember("");

			if (this.value == "") {
				return false;
			}

			// SET THE CLOSING DATE
			$.ajax({
				type: "post",
				url: "./getBranchWiseMfnSoftwareDate",
				data: {branchId: this.value},
				dataType: "json",
				success: function (date) {
					
					console.log(date);
					
					$("#closingDate").val(date);
				}
			});

			$("#submit").prop("disabled", true);
			$.ajax({
				type: "post",
				url: "./getMfnBranchWiseSamityList",
				data: { branchId: this.value },
				dataType: "json",
				success: function(samityList) {
					$.each(samityList, function(index, val) {
						$("#samity").append(
							"<option value='" + index + "'>" + val + "</option>"
						);
					});
				}
			});
		});

		$("#samity").change(function(e) {
			var branchId = $("#branch").val();

			if (branchId == "") {
				return false;
			}

			$("#submit").prop("disabled", true);
			$.ajax({
				type: "post",
				url: "./getMemberOptionsForList",
				data: { branchId: branchId, samityId: this.value },
				dataType: "json",
				success: function(members) {
					selectizeMember(members);
				}
			});
		});

		$(document).ajaxStop(function(event) {
			
			$("#submit").prop("disabled", false);
		});
	}); /* ready */
</script>
@endsection