<div class="collapse" id="collapseThirdParty">
	<div class="card card-body">
		<div class="container">
            <div class="row">
                <h4 class="card-title float-left">Third Party Payment</h4>
	            <?php if(strtotime(date('d-m-Y')) <= $end_date){ ?>
	                <div class="btn-group ml-auto float-right">
	                    <button type="button" class="btn btn-primary btn-sm d-print-none <?php echo $btn_hidden; ?>" style="margin-bottom:15px; width: 200px;" onclick="openThirdPartyPaymentModal();" data-trigger="hover" data-tooltip="tooltip" title="Add New Third Party Payment">
	                        <i class="fa fa-plus"></i> Add New
	                    </button>
	                </div>
	            <?php } ?>
            </div>
        </div>

        <hr>
		
		<div class="table-responsive">
			<table id="table_third_party" class="table table-hover table-bordered">
				<thead>
					<tr>
						<th>Details</th>
						<th>Created At</th>
						<?php if($btn_hidden == ''){ ?>	
							<th class="d-print-none">Action</th>
						<?php } ?>
						
					</tr>
				</thead>
				<tbody>

					<?php if($thirdPartyPayments) foreach ($thirdPartyPayments as $key => $payment): ?>
						<tr class="link-row" data-id="" >
							<td>
								<!-- <b>Date From : </b><?php //echo date('d-F-Y',strtotime($payment->date_start)); ?><br>
								<b>Date End : </b><?php //echo date('d-F-Y',strtotime($payment->date_end)); ?><br> -->
								<b>Date From : </b><?php echo mysql_to_date_format((!empty($payment->date_start))?$payment->date_start:null); ?><br>
								<b>Date End : </b><?php echo mysql_to_date_format((!empty($payment->date_end))?$payment->date_end:null); ?><br>
								<b>Third Party Institution / Organisation : </b><?php echo $payment->type; ?><br>
								<b>Status : </b><?php echo ($payment->status == '0')?'Ongoing':'End';?><br>
								<b>Amount : </b>RM<?php echo number_format($payment->amount,2); ?>
							</td>
							<td><?php echo $payment->created_at; ?></td>
							<?php if($btn_hidden == ''){ ?>	
								<?php if(strtolower($payment->action_type) == 'personal data update' && (date('m-Y',strtotime($payment->created_at)) == date('m-Y', $live_date)) &&  (strtotime(date('d-m-Y')) <= $end_date)) { ?>                  
		                            <td class="text-center">
		                                <div class="btn-group">
		                                    <button id="editThirdPartyPayment" type="button" class="btn btn-success btn-sm d-print-none" title="Edit Current Pursuing Study"  onclick="editThirdPartyPayment(<?php echo $payment->id; ?>)"><span class="fa fa-edit"></span></button>
										<button type="button" class="btn btn-danger btn-sm d-print-none" onclick="deleteThirdPartyPayment(<?php echo $payment->id; ?>)" title="Delete thirdPartyPayment"><span class="fa fa-trash"></span></button>
		                                </div>
		                            </td> 
		                        <?php } else { ?>
		                            <td class="text-center">
		                                <div class="btn-group" role="group">
		                                    <button class="btn btn-success btn-sm" disabled style="cursor: not-allowed;" data-trigger="hover" data-tooltip="tooltip" title="Not allowed to update"><i class="fas fa-edit" ></i></button>
		                                    <button class="btn btn-danger btn-sm" disabled style="cursor: not-allowed;" data-trigger="hover" data-tooltip="tooltip" title="Not allowed to delete"><i class="fas fa-trash-alt"></i></button>
		                                </div>
		                            </td> 
		                        <?php } ?>
							<?php } ?>
						</tr>
					<?php endforeach ?>
					
				</tbody>
			</table>
		</div>
	</div><br>
</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 third_party_date" name="tpp_date_start" id="tpp_date_start" required>
						</div>
						<div class="col-12 col-sm-4">
							<label for="tpp_date_end">End Date</label>
							<input class="form-control third_party_date" name="tpp_date_end" id="tpp_date_end" required>
						</div>
						<div class="col-12 col-sm-4">
							<label for="tpp_status">Status</label>
							<select class="form-control" name="tpp_status" id="tpp_status" required>
								<option value="0">On-Going</option>
								<option value="1">End</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();" required>
								<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="text" class="form-control" name="tpp_amount" id="tpp_amount" required>
						</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>

<script type="text/javascript">
	$(document).ready(function(){
		change_date();
	});

	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');
			$('#sect-tpp_account_no').attr('required','required');
		}else{
			$('#sect-tpp_account_no').addClass('d-none');
			$('#sect-tpp_account_no').removeClass('d-block');
			$('#sect-tpp_account_no').removeAttr('required');
		}
	}

	function openThirdPartyPaymentModal()
	{
		clearForm("#thirdPartyPaymentForm");

		var update_profile_year = <?php echo date('Y'); ?>; //2021
	    var update_profile_month = '<?php echo date('m',$live_date);?>';
	    var end_month = (11 - update_profile_month);
	    var date = new Date();
	    var full_start_date = date.setFullYear(update_profile_year,update_profile_month-1 , 1);
	    var start_update_profile     = moment(full_start_date).startOf('month').format('DD-MM-YYYY');
	    // var start_update_profile     = moment(full_start_date).subtract(2,'months').startOf('month').format('DD-MM-YYYY');

	    var full_end_date = date.setFullYear(update_profile_year,update_profile_month,1);
	    var end_update_profile     = moment(full_end_date).add(end_date,'months').endOf('month').format('DD-MM-YYYY');

	    $( ".third_party_date" ).datepicker({
            uiLibrary: 'bootstrap4',
            format: 'dd-mm-yyyy',
            autoclose: true,
            changeMonth: true, 
            changeYear: false,
            startDate :start_update_profile,
            endDate:end_update_profile
        });

		$('#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();
					}
				}
			});
		})
	}

	function change_date()
	{
		var update_profile_year = <?php echo date('Y'); ?>;
	    var update_profile_month = '<?php echo date('m',$live_date);?>';
	    var end_month = (11 - update_profile_month);
	    var date = new Date();
	    var full_start_date = date.setFullYear(update_profile_year,update_profile_month-1 , 1);
	    var start_update_profile     = moment(full_start_date).startOf('month').format('DD-MM-YYYY');
	    // var start_update_profile     = moment(full_start_date).subtract(2,'months').startOf('month').format('DD-MM-YYYY');

	    var full_end_date = date.setFullYear(update_profile_year,update_profile_month,1);
	    var end_update_profile     = moment(full_end_date).add(end_month,'months').endOf('month').format('DD-MM-YYYY');

	    $( ".third_party_date" ).datepicker({
            uiLibrary: 'bootstrap4',
            format: 'dd-mm-yyyy',
            autoclose: true,
            changeMonth: true, 
            changeYear: false,
            startDate :start_update_profile,
            endDate:end_update_profile
        });
	}
</script>