@extends('template.master')

@section('title', 'Referrals Transaction')

@push('styles')
<style>
	.dataTable {
		width: none !important;
	}
</style>
@endpush
@section('content')

<div class=" mt-4">
	<div class="row justify-content-center">
		<div class="col-md-12">
			<div class="card card-secondary">
				<div class="card-header" style="background: #000000;color: #f0ac63 !important;">
					<h3 class="card-title">Referrals Transaction List</h3>
					@if(isset($app_user_id) && !empty($app_user_id))
						<a href="{{ route('app.user.index') }}" class="btn float-right" style="background: #f0ac63;color: #000000 !important;">Back</a>
					@endif
					</div>
				<!-- /.card-header -->
				<div class="card-body">
					@if(session()->has('message'))
					<div class="alert alert-success alert-dismissible">
						{{ session()->get('message') }}
					</div>
					@endif
					@if(session()->has('error'))
					<div class="alert alert-danger alert-dismissible">
						{{ session()->get('error') }}
					</div>
					@endif
					<div class="row my-2">
						<div class="form-group col-sm-12 col-md-3">
							<label><strong>Referral User</strong></label>
							<select name="referral_id" id="referral_id" class="form-control">
								<option value="">All</option>
								@foreach ($appUsers as $user)
									<option value="{{$user->app_user_id}}" @if($user_id == $user->app_user_id) selected @endif>{{$user->first_name.' '.$user->last_name}}</option>
								@endforeach
							</select>
						</div>
						{{-- <div class="form-group col-sm-12 col-md-3">
							<label><strong>Referee User</strong></label>
							<select name="referee_id" id="referee_id" class="form-control">
								<option value="">All</option>
								@foreach ($appUsers as $user)
									<option value="{{$user->app_user_id}}">{{$user->first_name.' '.$user->last_name}}</option>
								@endforeach
							</select>
						</div>
						<div class="form-group col-sm-12 col-md-3">
							<label><strong>Payment Status</strong></label>
							<select name="status" id="status" class="form-control">
								<option value="">Select Status</option>
								@foreach ($REFERRAL_PAYMENT_STATUS as $key=>$value)
									<option value="{{$key}}">{{$value}}</option>
								@endforeach
							</select>
						</div>
						<div class="form-group col-sm-12 col-md-3">
							<label><strong>Subscription Type</strong></label>
							<select name="subscription_type" id="subscription_type" class="form-control">
								<option value="">Select Subscription Type</option>
								@foreach ($SUBSCRIPTION_TYPE as $key=>$value)
									<option value="{{$key}}">{{$value}}</option>
								@endforeach
							</select>
						</div> --}}
						<div class="col-md-3">
							<div class="form-group">
								<label for="status" class="mt-2">Start At</label>
								<input type="date" class="form-control" id="created_at" name="created_at">
							</div>
						</div>
						<div class="col-md-3">
							<div class="form-group">
								<label for="status" class="mt-2">End At</label>
								<input type="date" class="form-control" id="end_at" name="end_at">
							</div>
						</div>
					</div>
					<div class="table-responsive">
						<table class="table table-bordered dt-responsive display" id="example" style="width:none !important">
						<thead>
							<tr>
								<th class="all">Referral Name </th>
								<th class="desktop">Unpaid Amount</th>
								<th class="desktop">Paid Amount</th>
								<th class="desktop">Action</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<div class="modal fade" id="referralPaymentModel" tabindex="-1" role="dialog" aria-labelledby="referralPaymentModel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<form id="referralPaymentForm" action="{{route('referrals.transaction.update')}}">
				<input type="hidden" name="ids" id="updateId">
				<div class="modal-header">
					<center>
						<h4 class="modal-title" id="myModalLabel">Referrals</h4>
					</center>
				</div>
				<div class="modal-body">
					<div class="container-fluid">
					<div class="row form-group">
							<div class="col-sm-4">
								<label class="control-label modal-label">Amount to be paid</label>
							</div>
							<div class="col-sm-8">
							<span id="payable_amount"></span>
							</div>
						</div>
						<div class="row form-group">
							<div class="col-sm-4">
								<label class="control-label modal-label">Note</label>
								<span class="text-danger">*</span>
							</div>
							<div class="col-sm-8">
								<textarea class="form-control" name="note" id="note"></textarea>
							</div>
						</div>
						</br>
						<div class="modal-footer">
							<button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cancel</button>
							<button type="submit" class="btn btn-primary add-modal-waste">Save</a>
						</div>
			</form>
		</div>
	</div>
</div>

@endsection
@push('child-scripts')
<script>
	$(document).ready(function() {
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});

		let table = $('#example').DataTable({
			columnDefs: [{
				"defaultContent": "-",
				"targets": "_all"
			}],
			processing: true,
			serverSide: true,
			searching: false,
			info: false,
			paging : true,
			lengthChange : true,
			autoWidth : true,
			responsive:true,
			order:[0, 'asc'],
			ajax: {
				url: "{{ route('referrals.transaction.list') }}",
				method: "GET",
				data: function(d) {
					d.name = $('#name').val();
					d.referral_id = $('#referral_id').val();
					d.referee_id = $('#referee_id').val();
					d.type = $('#type').val();
					d.subscription_type = $('#subscription_type').val();
					d.app_user_id = $('#app_user_id').val();
					d.status = $('#status').val();
					d.created_at = $('#created_at').val();
					d.end_at = $('#end_at').val();
				}
			},
			columns: [{
					data: 'referral_name',
					name: 'referral_name',
				},
				{
					data: 'unpaid_amount',
					name: 'unpaid_amount',
				},
				{
					data: 'paid_amount',
					name: 'paid_amount',
				},
				{
					data: 'action',
					name: 'action'
				}
			]

		});
		$('#example tbody').on('click', '.details-control', function() {
            var tr = $(this).closest('tr');
            var row = table.row(tr);
			var fa_icon = $(this).find('i.fa');

            if (row.child.isShown()) {
                row.child.hide();
                tr.removeClass('shown');
				fa_icon.removeClass('fa-minus');
				fa_icon.addClass('fa-plus');
            } else {
				fa_icon.addClass('fa-minus');
				fa_icon.removeClass('fa-plus');
                var rowData = row.data();
                var subtableData = rowData.referrals;
                var subtableHtml = '<table class="subtable" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;width:100%;">' +
                    '<thead>' +
                    '<tr>' +
                    '<th>Referee Name</th>' +
                    '<th>Purchase Date</th>' +
                    '<th>Subscription</th>' +
                    '<th>Subscription Type</th>' +
                    '<th>Note</th>' +
                    '<th>Amount</th>' +
                    '<th>Status</th>' +
                    '</tr>' +
                    '</thead>' +
                    '<tbody>';

				subtableData.forEach(function(referral) {
					subtableHtml += '<tr>' +
						'<td>' + referral.referee.first_name + ' ' + referral.referee.last_name + '</td>';

					if (referral.referee_payment_log) {
						let purchase_date = formatDate(referral.referee_payment_log.created_at);
						let status = referral.referee_payment_log.status?"Paid":"Unpaid";
						subtableHtml += '<td>' + purchase_date + '</td><td>' + (referral.referee_payment_log.subscription_data.subscription.subscription_name || '-') + '</td>' +
							'<td>' + (referral.referee_payment_log.subscription_type == 1 ? 'Monthly' : 'Yearly') + '</td>' +
							'<td>' + (referral.referee_payment_log.note || '-') + '</td>' +
							'<td>' + (referral.referee_payment_log.amount || '-') + '</td>' +
							'<td>' + (status || '-') + '</td>';
					} else {
						// If referee_payment_log is null or undefined, display placeholder values
						subtableHtml += '<td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td>';
					}

					subtableHtml += '</tr>';
				});

                subtableHtml += '</tbody></table>';

                row.child(subtableHtml).show();
                tr.addClass('shown');
            }
        });
		$('#referee_id, #referral_id, #subscription_type, #status, #created_at, #type,#created_at, #end_at').change(function() {
			redrawTable(table);
		});
		$('#created_at').change(function() {
			var startDateValue = $(this).val();
			$('#end_at').attr('min', startDateValue);
		});

		$(document).on('click','.updatePaymentDataBtn',function(){
			var paymentData = $(this).data('value');
			$('#payable_amount').text('$'+ $(this).data('unpaidamount'));
			$('#updateId').val($(this).data('referralpaymentlogids'));
		});
	});

	function redrawTable(table) {
		table.draw();
	}

	function formatDate(dateString) {
		const date = new Date(dateString);

		// Get the day, month, year, hours, minutes, and seconds
		const day = ('0' + date.getDate()).slice(-2); // Add leading zero if needed
		const month = ('0' + (date.getMonth() + 1)).slice(-2); // Months are zero-based
		const year = date.getFullYear();
		const hours = ('0' + date.getHours()).slice(-2);
		const minutes = ('0' + date.getMinutes()).slice(-2);
		const seconds = ('0' + date.getSeconds()).slice(-2);

		// Concatenate the formatted date parts
		const formattedDate = `${day}-${month}-${year} ${hours}:${minutes}:${seconds}`;

		return formattedDate;
	}
</script>
@endpush