itcn/backend_parkir
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Penambahan FrontEnd All-New-Manufacture

Browse Source
This commit is contained in:
pand03
2026-01-31 14:23:04 +07:00
parent 1b2e320b2b
commit 4feb21dcbc
2891 changed files with 426849 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

530
resources/views/member/member.blade.php Normal file
View File

@@ -0,0 +1,530 @@
@extends('layouts.master')
@section('styles')
<link href="{{asset ('vendor/bootstrap-daterangepicker/daterangepicker.css') }}" rel="stylesheet">
<link rel="stylesheet" href="vendor/pickadate/themes/default.css">
<link rel="stylesheet" href="vendor/pickadate/themes/default.date.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@endsection
@section('content')
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-md-2 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Daftar Transaksi Langganan</h4>
<div class="form-group">
<label>Dasar Pencarian</label>
<div class="row">
<div class="col-md-5">
<select class="select-option form-control">
<option selected value="">Pencarian Data... (Semua)</option>
<option value="nama">Nama</option>
<option value="nopol">No. Polisi</option>
<option value="nocard">No. Card</option>
<option value="notrans">No. Transaksi</option>
</select>
</div>
{{-- <div class="col-md-7">
<input type="text" class="form-control form-control-sm" placeholder="Username" aria-label="Username">
</div> --}}
<div class="col-md-7 p2 nama" style="display: none">
<input type="text" class="form-control form-control-sm" value="" name="nama" placeholder="Cari Nama...">
</div>
<div class="col-md-7 p2 nopol" style="display: none">
<input type="text" class="form-control form-control-sm" onkeyup="this.value = this.value.toUpperCase();" value="" name="nopol" placeholder="Cari No. Polisi...">
</div>
<div class="col-md-7 p2 nocard" style="display: none">
<input type="text" class="form-control form-control-sm" value="" name="nocard" placeholder="Cari No Kartu...">
</div>
<div class="col-md-7 p2 notrans" style="display: none">
<input type="text" class="form-control form-control-sm" value="" name="notrans" placeholder="Cari No. Trans...">
</div>
</div>
</div>
</hr>
<div class="form-group">
<label>Jenis Langganan</label>
<select class="select form-control" id="vehicle" name="vehicle" >
<option selected value="">Semua Kendaraan</option>
@foreach ($vehicleSelect as $kendaraan)
<option value="{{ $kendaraan->id }}">{{ $kendaraan->nama }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label>Unit Kerja</label>
<select class="select-data form-control" name="depart" id="department">
<option selected value="">Semua Departemen</option>
@foreach ($departmentSelect as $department)
<option value="{{ $department->kode }}">{{ $department->nama }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label>Kendaraan</label>
<select class="select-data form-control" name="member" id="member">
<option selected value="">Semua Member</option>
@foreach ($memberSelect as $member)
<option value="{{ $member->id }}">{{ $member->nama }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label>Kategori</label>
<div class="form-check custom-checkbox p-2 checkbox-primary">
<input type="hidden" name="isactive" value="0">
<input type="checkbox" class="form-check-input" checked name="isactive" value="1" id="isactive" required>
<label class="form-check-label" for="customCheckBox1">Active</label>
</div>
</div>
<div class="form-group">
<button type="button" id="search-button" class="btn btn-primary">Cari Data</button>
</div>
</div>
</div>
</div>
<div class="col-10 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="mb-3">
<button type="button" class="btn btn-primary btn-xs btn-right" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Tambah</button>
</div>
<table class="table-bordered" id="example" class="display" style="width:100%" data-url="{{ route('getMember') }}" >
<thead>
<tr>
<th class="p-3" style="text-align: center;">No.</th>
<th style="text-align: center;">No. Transaksi</th>
<th style="text-align: center;">Nama</th>
<th style="text-align: center;">Alamat</th>
<th style="text-align: center;">Telepone</th>
<th style="text-align: center;">Jenis Langganan</th>
<th style="text-align: center;">Departement</th>
<th style="text-align: center;">Periode</th>
<th style="text-align: center;">Details Kendaraan</th>
<th width="130" style="text-align: center;">No. Kartu</th>
<th width="250" style="text-align: center;">Action</th>
</tr>
</thead>
<tbody>
</tobdy>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-body">
<div class="container-fluid">
<div class="row page-titles">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0)">Table</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0)">Datatable</a></li>
</ol>
</div>
<!-- ADD MEMMBER MODAL -->
@include('member.modal-add')
<!-- END MEMMBER MODAL -->
<!-- ADD MEMMBER MODAL -->
<div class="modal fade bd-example-modal-lg" id="modal-member-extend" tabindex="-1" role="dialog" data-bs-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="card-title">Perpanjang Member</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<div class="custom-tab-1">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home-ext"><i class="la la-user me-2"></i>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#profile-ext"><i class="la la-home me-2"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#contact-ext"><i class="la la-phone me-2"></i> Contact</a>
</li>
</ul>
<form class="perpanjang-member" id="extend-member" action="{{route('member.store')}}">
<div class="tab-content">
<div class="tab-pane fade show active" id="home-ext" role="tabpanel">
<div class="pt-4">
<div class="row">
<div class="col-xl-6">
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">No. Trans</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="notrans" id="notransnya" readonly>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Jenis Transaksi</label>
<div class="col-lg-8">
<input type="text" class="form-control" value="PERPANJANGAN" readonly>
<input type="hidden" class="form-control" name="jenis_transaksi" value="1">
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Nama</label>
<div class="col-lg-8">
<input type="text" class="form-control nama" name="nama" id="namanya" placeholder="Masuk kan nama...." required>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Alamat</label>
<div class="col-lg-8">
<textarea type="text" class="form-control address" rows="3" name="address" id="address" placeholder="JL. Hati hati raya..."></textarea>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Telepon</label>
<div class="col-lg-8">
<input type="number" class="form-control phone" phone="phone" placeholder="+62 81/081...">
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label required">Periode :</label>
<div class="col-lg-8">
<input class="form-control input-daterange-timepicker" id="periode" type="text" name="daterange" value="">
</div>
</div>
</div>
<div class="col-xl-6">
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Jenis</label>
<div class="col-lg-6">
<select class="select-data form-control" name="member" id="member-ext">
<option selected value="">Pilih Jenis</option>
@foreach ($memberSelect as $member)
<option value="{{ $member->id }}">{{ $member->nama }}</option>
@endforeach
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Dept</label>
<div class="col-lg-6">
<select class="select-data form-control" name="depart" id="department-ext">
<option selected value="">Pilih Departemen</option>
@foreach ($departmentSelect as $department)
<option value="{{ $department->kode }}">{{ $department->nama }}</option>
@endforeach
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Note :</label>
<div class="col-lg-6">
<input type="text" class="form-control" name="note" placeholder="Catatan...">
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Harga (Rp.):</label>
<div class="col-lg-6">
<input type="text" class="form-control" name="harga" placeholder="10.000">
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label required">Best Skill</label>
<div class="col-lg-6">
<select class="default-select wide form-control" id="validationCustom05">
<option data-display="Select">Please select</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile-ext">
<div class="pt-4">
<h4>Tambahkan Kendaraan</h4>
<div class="row form-material">
<div class="col-xl-3 col-md-6 mb-3">
<label class="form-label">Nomer Polisi</label>
<input type="text" class="form-control nopol-add" onkeyup="this.value = this.value.toUpperCase();" placeholder="No. Polisi">
<div class="invalid-feedback">Nomer Polisi sudah ada</div>
</div>
<div class="col-xl-3 col-md-6 mb-3">
<label class="form-label">Jenis Kendaraan :</label>
<select class="select form-control" id="jenisVehicle">
<option selected value="">Jenis Kendaraan</option>
@foreach ($vehicleSelect as $kendaraan)
<option value="{{ $kendaraan->id }}">{{ $kendaraan->nama }}</option>
@endforeach
</select>
</div>
<div class="col-xl-3 col-md-6 mb-3">
<label class="form-label">Jenis Member :</label>
<select class="select-data form-control member" id="jenis-member">
</select>
</div>
<div class="col-xl-3 col-md-6 mb-3">
<label class="form-label">Merk : </label>
<input type="text" class="form-control merk" onkeyup="this.value = this.value.toUpperCase();" placeholder="Honda...">
</div>
<div class="col-xl-3 col-md-6 mb-3">
<label class="form-label"></label>
<button type="button" id="nopol-add" class="btn btn-primary btn-xs">Tambah</button>
</div>
<hr>
<table class="table-bordered table-striped">
<thead>
<tr>
<th class="col-2 text-center p-2">Nomer Polisi</th>
<th class="col-2 text-center">Jenis Kendaraan</th>
<th class="col-2 text-center">Merk Kendaraan</th>
<th class="col-2 text-center">Type Member</th>
</tr>
</thead>
<tbody id="list-nopol-ext">
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane fade" id="contact-ext">
<div class="pt-4">
<h4>Tambahkan Kartu</h4>
<div class="row form-material">
<div class="col-xl-6 col-md-6 mb-3">
<label class="form-label">Nomer Kartu</label>
<input type="text" class="form-control kartu" placeholder="01234567...">
</div>
<div class="col-xl-6 col-md-6 mb-3">
<label class="form-label">Nomer Urut</label>
<input type="text" class="form-control nourut" placeholder="01234567...">
</div>
<hr>
{{-- <div class="table-responsive"> --}}
<table class="table-bordered">
<thead>
<tr>
<th class="col-5 text-center p-2" >Nomer Kartu</th>
<th class="col-5 text-center">No. Urut</th>
</tr>
</thead>
<tbody id="list-card-ext">
</tbody>
</table>
{{-- </div> --}}
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary extend">Perpanjang Member</button>
</div>
</div>
</div>
</div>
<!-- END MEMMBER MODAL -->
</div>
</div>
@endsection
@section('javascript')
<!--********* Scripts *********-->
<!-- Datatable -->
<!--********* Scripts *********-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.js"></script>
<script src="{{asset ('vendor/moment/moment.min.js') }}"></script>
<script src="vendor/bootstrap-daterangepicker/daterangepicker.js"></script>
{{-- <script src="{{asset ('vendor/datatables/js/jquery.dataTables.min.js') }}"></script> --}}
{{-- <script src="{{asset ('vendor/datatables/responsive/responsive.js') }}"></script> --}}
<script src="{{asset ('vendor/bootstrap-select/dist/js/bootstrap-select.min.js') }}"></script>
{{-- <script src="{{asset ('vendor/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script> --}}
{{-- <script src="{{asset ('vendor/bootstrap-datepicker-master/js/bootstrap-datepicker.min.js') }}"></script> --}}
<script src="{{asset ('vendor/sweetalert2/dist/sweetalert2.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/3.0.7/metisMenu.min.js"></script>
<script src="{{asset ('js/custom.min.js') }}"></script>
<script src="{{asset ('js/dlabnav-init.js') }}"></script>
<script src="{{asset ('js/member/index.js') }}"></script>
<script>
var member = @json($jenisStiker);
</script>
<script src="{{asset ('js/member/member-register.js') }}"></script>
<script>
$(document).ready(function () {
var vehicle = @json($vehicleSelect);
$(document).on('click', '.extend-button', function () {
var rawId = $(this).data('id');
let id = rawId.substring(0, rawId.indexOf('/'));
var kendaraan = vehicle;
console.log('Data ID : ', id);
var actionUrl = '{{ route("member.show", ":id") }}';
actionUrl = actionUrl.replace(':id', id);
console.log('Action URL : ', actionUrl);
// $('#extend-member').attr('action'), actionUrl;
$.ajax({
url: actionUrl,
type: 'GET',
success: function (r) {
if (r) {
$('#extend-member').val('');
$('#list-nopol-ext').empty();
$('#list-card-ext').empty();
console.log(r.nama);
$('#notransnya').val(r.notrans);
$('#namanya').val(r.nama);
$('#address').val(r.alamat);
$('#periode').val(`${moment(r.awal).format('DD-MM-YYYY HH:mm')} - ${moment(r.akhir).format('DD-MM-YYYY HH:mm')}`);
$('#member-ext').val(r.unit_kerja);
$('#department-ext').val(r.jenis_langganan);
var rows = r.stiker_details;
if (rows.length !== 0) {
rows.forEach(row => {
var vehicleName = vehicle.find(v => v.id === row.jenis_mobil)?.nama || 'Unknown';
$('#list-nopol-ext').append(`
<tr>
<td class="text-center p-2">${row.nopol}</td>
<td class="text-center p-2" data-value="${row.jenis_mobil}">${vehicleName}</td>
<td class="text-center p-2">${row.merk}</td>
<td class="text-center p-2">${row.jenis_member}</td>
</tr>
`);
});
} else {
$('#list-nopol-ext').append(`
<tr>
<td class="text-center p-2">Tidak ada data</td>
<td class="text-center p-2">Tidak ada data</td>
<td class="text-center p-2">Tidak ada data</td>
<td class="text-center p-2">Tidak ada data</td>
</tr>
`);
}
var rowss = r.member_card;
if (rowss.length !== 0) {
rowss.forEach(ro => {
$('#list-card-ext').append(`
<tr>
<td class="text-center p-2">${ro.no_card}</td>
<td class="text-center p-2">${ro.no_urut}</td>
</tr>
`);
});
} else {
$('#list-card-ext').append(`
<tr>
<td class="text-center p-2">Tidak ada data</td>
<td class="text-center p-2">Tidak ada data</td>
</tr>
`);
}
console.log('Data : ', r);
}
},
error: function (xhr) {
console.error('Error : ', xhr);
},
});
$('#modal-member-extend').modal('show');
});
$('.extend').on('click', function () {
// $('#modal-member-extend').modal('show');
var url = $('#extend-member').attr('action').replace(":notrans",$("#extend-member").data('notrans'));
var extend = $(this);
var formExtend = $('#extend-member').serialize();
var nopolData = [];
var cardData = [];
$('#list-nopol-ext tr').each(function () {
var row = $(this);
var rowData = {
nopol: row.find('td:nth-child(1)').text().trim(),
vehicle: row.find('td:nth-child(2)').data('value'),
member: row.find('td:nth-child(3)').text().trim(),
merk: row.find('td:nth-child(4)').text().trim(),
};
nopolData.push(rowData);
});
console.log(nopolData);
$('#list-card-ext tr').each(function () {
var row = $(this);
var rowCard = {
nocard: row.find('td:nth-child(1)').text(),
nourut: row.find('td:nth-child(2)').text(),
};
cardData.push(rowCard);
});
const stringDataExt = formExtend;
// Mengonversi query string menjadi objek
const formDataExt = {};
const searchExtend = new URLSearchParams(stringDataExt);
searchExtend.forEach((value, key) => {
formDataExt[key] = value;
});
// console.log(formDataExt);
var extData = {
formData: formDataExt,
nopolData: nopolData,
cardNumber: cardData,
};
$.ajax({
url: url,
type: 'POST',
data: extData,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
berforeSend: function () {
extend.text('Loading...');
},
success: function (data) {
if (data.response === true) {
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: data.message,
});
$('#modal-member-extend').modal('hide');
} else {
Swal.fire({
icon: 'error',
title: 'Gagal',
text: data.message,
});
}
console.log(data);
},
error: function (xhr) {
console.error('Error : ', xhr);
},
});
});
});
</script>
@endsection

196
resources/views/member/modal-add.blade.php Normal file
View File

@@ -0,0 +1,196 @@
<div class="modal fade bd-example-modal-lg" id="modal-member" tabindex="-1" role="dialog" data-bs-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="card-title">Tambah Member</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<div class="custom-tab-1">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home1"><i class="la la-user me-2"></i>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#profile1"><i class="la la-home me-2"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#contact1"><i class="la la-phone me-2"></i> Contact</a>
</li>
</ul>
<form class="tambah-member" id="add-member" action="{{route('member.store')}}">
<div class="tab-content">
<div class="tab-pane fade show active" id="home1" role="tabpanel">
<div class="pt-4">
<div class="row">
<div class="col-xl-6">
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Jenis Transaksi</label>
<div class="col-lg-8">
<input type="text" class="form-control" value="BARU" readonly>
<input type="hidden" class="form-control" name="jenis_transaksi" value="0" readonly>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label required">Nama</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="nama" placeholder="Masuk kan nama...." required>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Alamat</label>
<div class="col-lg-8">
<textarea type="text" class="form-control" rows="3" name="address" placeholder="JL. Hati hati raya..."></textarea>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Telepon</label>
<div class="col-lg-8">
<input type="number" class="form-control" phone="phone" placeholder="+62 81/081...">
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label required">Periode :</label>
<div class="col-lg-8">
<input class="form-control input-daterange-timepicker" type="text" name="daterange" value="">
</div>
</div>
</div>
<div class="col-xl-6">
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Jenis</label>
<div class="col-lg-6">
<select class="select-data form-control" name="member" id="member">
<option selected value="">Pilih Jenis</option>
@foreach ($memberSelect as $member)
<option value="{{ $member->id }}">{{ $member->nama }}</option>
@endforeach
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Dept</label>
<div class="col-lg-6">
<select class="select-data form-control" name="depart" id="department">
<option selected value="">Pilih Departemen</option>
@foreach ($departmentSelect as $department)
<option value="{{ $department->kode }}">{{ $department->nama }}</option>
@endforeach
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Note :</label>
<div class="col-lg-6">
<input type="text" class="form-control" name="note" placeholder="Catatan...">
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label">Harga (Rp.):</label>
<div class="col-lg-6">
<input type="text" class="form-control" name="harga" placeholder="10.000">
</div>
</div>
<div class="mb-3 row">
<label class="col-lg-3 col-form-label form-label required">Best Skill</label>
<div class="col-lg-6">
<select class="default-select wide form-control" id="validationCustom05">
<option data-display="Select">Please select</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile1">
<div class="pt-4">
<h4>Tambahkan Kendaraan</h4>
<div class="row form-material">
<div class="col-xl-3 col-md-6 mb-3">
<label class="form-label">Nomer Polisi</label>
<input type="text" class="form-control nopol-add" onkeyup="this.value = this.value.toUpperCase();" placeholder="No. Polisi">
<div class="invalid-feedback">Nomer Polisi sudah ada</div>
</div>
<div class="col-xl-3 col-md-6 mb-3">
<label class="form-label">Jenis Kendaraan :</label>
<select class="select form-control" id="jenisVehicle">
<option selected value="">Jenis Kendaraan</option>
@foreach ($vehicleSelect as $kendaraan)
<option value="{{ $kendaraan->id }}">{{ $kendaraan->nama }}</option>
@endforeach
</select>
</div>
<div class="col-xl-3 col-md-6 mb-3">
<label class="form-label">Jenis Member :</label>
<select class="select-data form-control member" id="jenis-member">
</select>
</div>
<div class="col-xl-3 col-md-6 mb-3">
<label class="form-label">Merk : </label>
<input type="text" class="form-control merk" onkeyup="this.value = this.value.toUpperCase();" placeholder="Honda...">
</div>
<div class="col-xl-3 col-md-6 mb-3">
<label class="form-label"></label>
<button type="button" id="nopol-add" class="btn btn-primary btn-xs">Tambah</button>
</div>
<hr>
<table class="table-bordered table-striped">
<thead>
<tr>
<th class="col-2 text-center p-2">Nomer Polisi</th>
<th class="col-2 text-center">Jenis Kendaraan</th>
<th class="col-2 text-center">Merk Kendaraan</th>
<th class="col-2 text-center">Type Member</th>
<th class="col-2 text-center">Aksi</th>
</tr>
</thead>
<tbody id="list-nopol">
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane fade" id="contact1">
<div class="pt-4">
<h4>Tambahkan Kartu</h4>
<div class="row form-material">
<div class="col-xl-6 col-md-6 mb-3">
<label class="form-label">Nomer Kartu</label>
<input type="text" class="form-control kartu" placeholder="01234567...">
</div>
<div class="col-xl-6 col-md-6 mb-3">
<label class="form-label">Nomer Urut</label>
<input type="text" class="form-control nourut" placeholder="01234567...">
</div>
<hr>
{{-- <div class="table-responsive"> --}}
<table class="table-bordered">
<thead>
<tr>
<th class="col-5 text-center p-2" >Nomer Kartu</th>
<th class="col-5 text-center">No. Urut</th>
<th class="col-2 text-center">Aksi</th>
</tr>
</thead>
<tbody id="list-card">
</tbody>
</table>
{{-- </div> --}}
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary simpan">Save changes</button>
</div>
</div>
</div>
</div>