<x-app-layout title="Vip Lian Lian Card Lock">
<div class="max-w-8xl mx-auto p-8 bg-white">
<x-score-card.blue-header>{{ __('Vip Lian Lian Card Lock') }}</x-score-card.blue-header>
@can('view-lianlian-card-lock')
<form id="card-lock-form">
@csrf
<div class="md:grid grid-cols-12 col-span-full gap-x-2 gap-y-2 sm:gay-y-0 py-4">
<div class="col-span-2">
<x-label for="company_id" class="pt-2">{{ __('Company Name:') }}</x-label>
</div>
<div class="col-span-5 w-full">
<x-select id="company_id" name="company_id" value="{{ old('company_id') }}" class="w-full">
@foreach ($companyList as $company)
<option value="{{ $company['onboard_company_id'] }}" data-lluserid="{{ $company['lianlian_user_id'] }}" data-cardlist="{{ json_encode($company['cardList']) }}">{{ $company['company_name'] }}</option>
@endforeach
</x-select>
<x-small-text.danger class="company_id_error"></x-small-text.danger>
</div>
<div class="col-span-5"></div>
<div class="col-span-2">
<x-label for="ll_user_id">{{ __('LL User ID:') }}</x-label>
</div>
<div class="col-span-5 w-full">
<x-input id="ll_user_id" name="ll_user_id" value="{{ old('ll_user_id') }}" readonly></x-input>
<x-small-text.danger class="ll_user_id_error"></x-small-text.danger>
</div>
<div class="col-span-5"></div>
<div class="col-span-2">
<x-label for="card_no">{{ __('Card No.:') }}</x-label>
</div>
<div class="col-span-5 w-full">
<x-input id="card_no" name="card_no" value="{{ old('card_no') }}" class="w-full"></x-input>
<x-small-text.danger class="card_no_error"></x-small-text.danger>
</div>
<x-input id="card_id" name="card_id" value="{{ old('card_id') }}" class="w-full" type="hidden"></x-input>
<x-button.normal type="button" style="height:42px;">{{ __('SUBMIT') }}</x-button.normal>
</div>
</form>
@endcan
<div class="flex flex-col bg-white overflow-hidden sm:rounded-lg p-2 shadow-md">
<table id="card-lock-datatable" class="display nowrap" width="100%">
<x-thead :headers="Constants::LIANLIAN_CARD_LOCK"></x-thead>
</table>
</div>
</div>
</x-app-layout>
<script>
$(document).ready(function() {
$('#card-lock-datatable').DataTable({
language: {
"processing": "{{__('processing...')}}",
"loadingRecords": "{{__('Loading...')}}",
"lengthMenu": "{{__('Show _MENU_ entries')}}",
"zeroRecords": "{{__('No matching records found')}}",
"info": "{{__('Showing _START_ to _END_ of _TOTAL_ entries')}}",
"infoEmpty": "{{__('Showing 0 to 0 of 0 entries')}}",
"infoFiltered": "(filter from _MAX_ items)",
"infoPostFix": "",
"search": "{{__('Search')}}:",
"paginate": {
"first": "First",
"last": "Last",
"next": "{{__('Next')}}",
"previous": "{{__('Previous')}}"
},
"searchPlaceholder": "Company ID, Company Name"
},
ajax: {
url: "/vip/lianlian/getCardLockList",
type: "POST",
dataType: "JSON"
},
columns: [{
data: 'id',
name: 'id',
visible: false
},
{
data: 'ap_cid',
name: 'ap_cid',
},
{
data: 'company_name',
name: 'company_name',
},
{
data: 'lianlian_user_id',
name: 'lianlian_user_id',
},
{
data: 'vip_user_id',
name: 'vip_user_id',
},
{
data: 'currency',
name: 'currency',
},
{
data: 'card_no',
name: 'card_no',
},
{
data: 'status',
name: 'status',
responsivePriority: 3,
"orderable": false,
},
{
data: 'submitted_by',
name: 'submitted_by',
},
{
data: 'submission_time',
name: 'submission_time',
},
{
data: 'last_update',
name: 'last_update',
}
],
order: [
[0, "desc"]
],
responsive: true,
serverSide: true,
processing: true,
retrieve: true,
lengthMenu: [10, 15, 50, 100],
pageLength: 15,
initComplete: function(settings, json) {
this.api()
.columns(7)
.every(function() {
var column = this;
var select = $("[name='Status']")
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
var text = $(this).find("option:selected").data("text");
column.search('card_status', val ? val : false, false).draw();
});
});
},
});
});
$('#company_id').change(function() {
var selectedOption = $(this).find('option:selected');
var cardList = JSON.parse(selectedOption.attr('data-cardlist'));
var llUserId = selectedOption.attr('data-lluserid');
// 设置card_id值为空
$('#card_id').val('');
// 清空card_no的选项
$('#card_no').empty();
$('#ll_user_id').val(llUserId);
$('#ll_user_id').prop('readonly', true);
// 添加cardList数据到card_no的选项
$('#card_no').autocomplete({
source: cardList.map(function(card) {
console.log(card);
return {
label: card.card_no,
value: card.card_no,
card_id: card.id // 添加card_id为自定义属性
};
}),
minLength: 0,
select: function(event, ui) {
console.log(event);
console.log(ui);
// 当用户选择一个选项时执行的操作
var selectedOption = ui.item.value;
var selectedCardId = ui.item.card_id; // 获取选中的card_id
$('#card_id').val(selectedCardId); // 将选中的card_id赋值给$('#card_id')
// 在此处执行您的操作
}
}).focus(function() {
// 当<input>元素获得焦点时显示自动完成列表
$(this).autocomplete('search', '');
});
});
$('#card-lock-form button[type=button]').on('click', function(e) {
e.preventDefault()
let company_id = $('#company_id :selected').val();
let ll_user_id = $('#ll_user_id').val();
let card_id = $('#card_id').val();
let card_no = $('#card_no').val();
if (!company_id) {
$('#company_id').addClass('border-red-500');
$('#ll_user_id').removeClass('border-red-500');
$('#card_no').removeClass('border-red-500');
$('.company_id_error').text('Company Name is required');
$('.ll_user_id_error').text('');
$('.card_no_error').text('');
return false;
}
if (!ll_user_id) {
$('#company_id').removeClass('border-red-500');
$('#ll_user_id').addClass('border-red-500');
$('#card_no').removeClass('border-red-500');
$('.company_id_error').text('');
$('.ll_user_id_error').text('LL User ID not obtained!');
$('.card_no_error').text('');
return false;
}
if (!card_no) {
$('#company_id').removeClass('border-red-500');
$('#ll_user_id').removeClass('border-red-500');
$('#card_no').addClass('border-red-500');
$('.company_id_error').text('');
$('.ll_user_id_error').text('');
$('.card_no_error').text('Card No. not obtained!');
return false;
}
if (!card_id) {
$('#company_id').removeClass('border-red-500');
$('#ll_user_id').removeClass('border-red-500');
$('#card_no').addClass('border-red-500');
$('.company_id_error').text('');
$('.ll_user_id_error').text('');
$('.card_no_error').text('Card ID not obtained!');
return false;
}
if (!/^[a-zA-Z0-9]+$/.test(card_no)) {
$('#company_id').removeClass('border-red-500');
$('#ll_user_id').removeClass('border-red-500');
$('#card_no').addClass('border-red-500');
$('.company_id_error').text('');
$('.ll_user_id_error').text('');
$('.card_no_error').text('Card No. only input numbers and letters');
return false;
}
$.ajax({
url: "/tabf-i-monitoring/lianlian/submitNewCompany",
method: 'post',
data: {
company_id: company_id,
ll_user_id: ll_user_id,
card_id: card_id,
card_no: card_no,
},
beforeSend: function(xhr) {
$("#loadingAnimation").show();
$('#company_id').removeClass('border-red-500');
$('#ll_user_id').removeClass('border-red-500');
$('#card_no').removeClass('border-red-500');
$('.company_id_error').text('');
$('.ll_user_id_error').text('');
$('.card_no_error').text('');
}
})
.done(function(response) {
iztoastNotice('Submit Success');
setTimeout(function() {
clearInputCoefficient();
location.reload();
}, 1000);
})
.fail(function(response) {
if (response.status == 422) {
var errors = $.parseJSON(response.responseText);
$.each(errors.errors, function(key, value) {
$('#' + key).addClass('border-red-500');
$('.' + key + '_error').text(value);
});
} else {
iztoastError(response.responseJSON.message);
}
})
.always(function() {
$("#loadingAnimation").hide();
});
});
</script>
