@extends('layouts.admin_template')
@section('content')
<!-- container Start -->
<div class="container-fluid px-3 px-xxl-5">
	<div class="titel-head pb-4">
        <h1>@lang('translate.ib_user_list')</h1>
	</div>
	<div class="flash-message">
		@foreach (['danger', 'warning', 'success', 'info'] as $msg)
		@if(Session::has('alert-' . $msg))
		<div class="alert alert-{{ $msg }} alert-dismissible fade show" role="alert">
			<strong>{{ ucfirst(($msg == 'danger') ? "Error" : $msg) }}!</strong> {{ Session::get('alert-' . $msg) }}
			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
		</div>
		@endif
		@endforeach
	</div>
	<div class="row g-3">
        <div class="col-lg-12 mt-3 mt-lg-5">
			<div class="bg-dark rounded-3 box-shadow">
				<div style="overflow:scroll;" class="table-responsive-lg table-p15">
					<table id="ib_user_datatable" class="table table-dark table-striped mb-0 text-center table-hover">
						<thead>
							<tr>
								<th>@lang('translate.id')</th>
								<th>@lang('translate.name')</th>
								<th>@lang('translate.email')</th>
								<th>@lang('translate.phone')</th>
								<th>@lang('translate.country')</th>
								<th>@lang('translate.ib_name')</th>
								<th>@lang('translate.total_commission')</th>
								<th>@lang('translate.available_commission')</th>
								<th>@lang('translate.refferal_link')</th>
								<th>@lang('translate.marketing_name')</th>
								<th class="minw-200">@lang('translate.action')</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
  $(function () { 
    var table = $('#ib_user_datatable').DataTable({
		"autoWidth": false,
		"responsive": true,
		"order": [[0, "desc"]],
		"processing": true,
		"serverSide": true,
		"language": { processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '},
        "ajax": "{{ route('admin.ib.ibuserlist') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'phone', name: 'phone'},
			{data: 'country', name: 'country'},
            {data: 'ib_name', name: 'ib_name'},
            {data: 'totalcommission', name: 'totalcommission'},
            {data: 'availablecommission', name: 'availablecommission'},
            {data: 'copy', name: 'copy'},
            {data: 'marketingdata', name: 'marketingdata'},
            {data: 'action', name: 'action', orderable: true, searchable: true},
        ],
		dom: 'lBfrtip',
		buttons: [
			{ extend: 'excel'},
		],
		"lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, 'All'] ]
    });
  });
  function copyToClipboard(elem){
		var ttcpy = document.getElementById('link_'+elem).value;
		var input = document.createElement('input');
	    input.setAttribute('value', ttcpy);
	    document.body.appendChild(input);
	    input.select();
	    var result = document.execCommand('copy');
		$('#copyBtn_'+elem).animate({'opacity': 0}, 300, function () {
			$(this).text('Copied!');
		}).animate({'opacity': 1}, 1500);
		$('#copyBtn_'+elem).animate({'opacity': 0}, 200, function () {
			$(this).text('Copy');
		}).animate({'opacity': 1}, 500);
	    document.body.removeChild(input)
	    return result;
	}
</script>
@endsection