<div class="container">
	<div class="row">
		<div class="col">
			<h4><b>THIRD PARTY PAYMENT</b>
				<button type="button" class="btn btn-default btn-sm d-print-none <?php echo $btn_hidden; ?>" onclick="openThirdPartyPaymentModal()" title=" Add New Third Party Payment"><span class="fa fa-plus" style="color: #007bff;"></span></button>
			</h4>
			<small><i>Please add/update your Third Party Payment. (PTPTN, YaPEIM, Tabung Haji, Perbadanan Wakaf Selangor)</i></small>
		</div> 
	</div>
	<div class="row">
		<div class="col table-responsive">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>DATE FROM</th>
						<th>DATE TO</th>
						<th>INSTITUTION / ORGANISATION</th>
						<th>ACC NO</th>
						<th>AMOUNT</th>
						<th>STATUS</th>
						<th class="d-print-none <?php echo $btn_hidden; ?>">ACTION</th>
					</tr>
				</thead>
				<tbody>
					<?php if ($third_party_payments) foreach ($third_party_payments as $key => $third_party): ?>
						<tr>
							<!-- <td><?php echo ($third_party->date_start)?strtoupper(date('d-F-Y',strtotime($third_party->date_start))):'N/A'; ?></td> -->
							<td><?php echo (!empty(mysql_to_date_format($third_party->date_start)))?strtoupper(mysql_to_date_format($third_party->date_start)):'N/A'; ?></td>

							<!-- <td><?php echo ($third_party->date_end)?strtoupper(date('d-F-Y',strtotime($third_party->date_end))):'N/A'; ?></td> -->
							<td><?php echo (!empty(mysql_to_date_format($third_party->date_end)))?strtoupper(mysql_to_date_format($third_party->date_end)):'N/A'; ?></td>

							<td><?php echo ($third_party->type)?strtoupper($third_party->type):'N/A'; ?></td>
							<td><?php echo ($third_party->account_no)?strtoupper($third_party->account_no):'N/A'; ?></td>
							<td><?php echo ($third_party->amount)?strtoupper('RM '.number_format($third_party->amount,2)):'N/A'; ?></td>
							<td><?php echo ($third_party->status == 0)?strtoupper('ongoing'):strtoupper('one time'); ?></td>
							<td class="text-center d-print-none <?php echo $btn_hidden; ?>">
								<div class="btn-group">
									<button id="editThirdPartyPayment" type="button" class="btn btn-default btn-sm d-print-none" title="Edit Current Pursuing Study"  onclick="editThirdPartyPayment(<?php echo $third_party->id; ?>)"><span class="fa fa-edit" style="color: #F0AD4E;"></span></button>
									<button type="button" class="btn btn-default btn-sm d-print-none" onclick="deleteThirdPartyPayment(<?php echo $third_party->id; ?>)" title="Delete thirdPartyPayment"><span class="fa fa-trash" style="color: #D9534F;"></span></button>
								</div>
							</td>
						</tr>
					<?php endforeach ?>
				</tbody>
			</table>
		</div>
	</div>
</div>

<!-- Modal -->
<div class="modal fade d-print-none" role="dialog" aria-hidden="true" id="thirdPartyPaymentModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="racks-modal-title">Add Third Party Payment</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
			<form id="thirdPartyPaymentForm" class="form">
				<div class="modal-body">
					<div class="form-row">
						<div class="col-12 col-sm-4">
							<label for="tpp_date_start">Start Date</label>
							<input class="form-control datepicker" name="tpp_date_start" id="tpp_date_start">
						</div>
						<div class="col-12 col-sm-4">
							<label for="tpp_date_end">End Date</label>
							<input class="form-control datepicker" name="tpp_date_end" id="tpp_date_end">
						</div>
						<div class="col-12 col-sm-4">
							<label for="tpp_status">Status</label>
							<select class="form-control" name="tpp_status" id="tpp_status">
								<option value="0">On-Going</option>
								<option value="1">One Time</option>
							</select>
						</div>
					</div>
					<div class="form-row">
						<div class="col-12">
							<label for="tpp_institutions" class="col-form-label">Institution / Organisation</label>
							<select class="form-control" name="tpp_institutions" id="tpp_institutions" onchange="onAccountNo();">
								<option value="PTPTN">PTPTN</option>
								<option value="YaPEIM">YaPEIM</option>
								<option value="Tabung Haji">Tabung Haji</option>
								<option value="Perbadanan Wakaf Selangor">Perbadanan Wakaf Selangor</option>
								<option value="Zakat">Zakat</option>
							</select>
						</div>
					</div>
					<div class="form-row" id="sect-tpp_account_no">
						<div class="col-12">
							<label for="tpp_account_no">Account No</label>
							<input class="form-control" name="tpp_account_no" id="tpp_account_no">
						</div>
					</div>
					<div class="form-row">
						<div class="col-12">
							<label for="tpp_date_amount">Amount</label>
							<input type="number" class="form-control" name="tpp_amount" id="tpp_amount">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<div class="btn-group float-right">
						<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
						<button type="button" id="saveThirdPartyPaymentButton" onclick="saveThirdPartyPayment();" class="btn btn-primary">Save</button>
					</div>
				</div>
			</form>
        </div>
    </div>
</div>
<?php  
//1. script for modal address
//2. script to ajax load for update address
//3. script to refresh table address
//4. script document ready to refresh table 
//5. script to save and refresh table after save 
?>
<script type="text/javascript">

	function onAccountNo()
	{
		var tpp_institutions = $('#tpp_institutions').val();

		if(tpp_institutions == 'Tabung Haji'){
			$('#sect-tpp_account_no').removeClass('d-none');
			$('#sect-tpp_account_no').addClass('d-block');
		}else{
			$('#sect-tpp_account_no').addClass('d-none');
			$('#sect-tpp_account_no').removeClass('d-block');
		}
	}

	function openThirdPartyPaymentModal()
	{

		clearForm("#thirdPartyPaymentForm");

		$('#thirdPartyPaymentModal').find('#racks-modal-title').text('Add Third Party Payment');
        $('#saveThirdPartyPaymentButton').attr('onclick', 'saveThirdPartyPayment()');
		$('#thirdPartyPaymentModal').modal('show');
	}
	
	function saveThirdPartyPayment()
	{
		var postData = {
			'profiling_id' 		: $("#profiling_id_new").val(),
			'tpp_date_start' 	: $("#tpp_date_start").val(),
			'tpp_date_end' 		: $("#tpp_date_end").val(),
			'tpp_status' 		: $("#tpp_status").val(),
			'tpp_institutions' 	: $("#tpp_institutions").val(),
			'tpp_account_no' 	: $("#tpp_account_no").val(),
			'tpp_amount' 		: $("#tpp_amount").val()
		};

		$.ajax({
			url:'<?php echo base_url('hr/Myprofile/saveThirdPartyPayment') ?>',
			data: postData,
			type: 'post',
			dataType: 'json',
			success: (data) => {
				if(data.status == "success") 
				{
					localStorage.setItem("status",data.status);
					localStorage.setItem("msg",data.msg);

					location.replace(data.redirect);
				}
			}
		});
	}

	function editThirdPartyPayment(id)
	{
		clearForm("#studyForm");
		var profiling_id = $("#profiling_id_new").val();

		$('#thirdPartyPaymentModal').find('#racks-modal-title').text('Edit Current Pursuing Study');
        $('#saveThirdPartyPaymentButton').attr('onclick', 'save_editThirdPartyPayment('+ id +')');
		$('#thirdPartyPaymentModal').modal('show');

		$.ajax({
			type: 'POST',
			url: '<?php echo base_url('hr/Myprofile/getThirdPartyPayment'); ?>',
			data: {
				'payment_id' 		: id,
				'profiling_id' 	: profiling_id
			},
			dataType: 'JSON',
			success: function(data) {
				if(data.status == 'success')
				{
					var payment_data = data.payment_data;

                    $("#tpp_date_start").val(moment(payment_data[0]['date_start']).format('DD-MM-YYYY'));
                    $("#tpp_date_end").val(moment(payment_data[0]['date_end']).format('DD-MM-YYYY'));
                    $("#tpp_status").val(payment_data[0]['status']);
                    $("#tpp_account_no").val(payment_data[0]['account_no']);
                    $("#tpp_institutions").val(payment_data[0]['type']);
                    $("#tpp_amount").val(payment_data[0]['amount']);

                    if(payment_data[0]['type'] == 'Tabung Haji'){
						$('#sect-tpp_account_no').removeClass('d-none');
						$('#sect-tpp_account_no').addClass('d-block');
					}else{
						$('#sect-tpp_account_no').addClass('d-none');
						$('#sect-tpp_account_no').removeClass('d-block');
					}
				}
			}
		});
	}

	function save_editThirdPartyPayment(id) 
	{
        var postData = {
        	'payment_id'			: id,
			'profiling_id' 		: $("#profiling_id_new").val(),
			'tpp_date_start' 	: $("#tpp_date_start").val(),
			'tpp_date_end' 		: $("#tpp_date_end").val(),
			'tpp_status' 		: $("#tpp_status").val(),
			'tpp_institutions' 	: $("#tpp_institutions").val(),
			'tpp_account_no' 	: $("#tpp_account_no").val(),
			'tpp_amount' 		: $("#tpp_amount").val()
		};

		$.ajax({
			url: '<?php echo base_url('hr/Myprofile/save_editThirdPartyPayment'); ?>',
			data: postData,
			type: 'POST',
			dataType: 'json',
			success: function(data) {
				if(data.status == 'success')
				{
					localStorage.setItem("status",data.status);
					localStorage.setItem("msg",data.msg);

					location.replace(data.redirect);
				}
			}
		});
	}

	function deleteThirdPartyPayment(ID)
	{
		toastConfirm("Are you sure you want to delete this Study record?", function(){

			$.ajax({
				type: 'POST',
				url: '<?php echo base_url('hr/Myprofile/deleteThirdPartyPayment'); ?>',
				data: {
					'payment_id' 		: ID,
					'profiling_id' 		: $("#profiling_id_new").val(),
				},
				dataType: 'JSON',
				success: function(data) {
					if(data.status == 'success')
					{
						localStorage.setItem("status",data.status);
						localStorage.setItem("msg",data.msg);

						location.replace(data.redirect);
						// location.reload();
					}
				}
			});
		})
	}

	</script>