design pembayaransag and omit google maps

This commit is contained in:
Hafifie PKB
2024-12-04 22:11:31 +08:00
parent 2ab2980b10
commit de143de7ec
7 changed files with 69 additions and 24 deletions
+43 -12
View File
@@ -1,22 +1,53 @@
const test = () =>{
let btn_payment = document.getElementById('bayarsbmt');
// const test = () =>{
// let btn_payment = document.getElementById('bayarsbmt');
console.log(btn_payment,rad_payment);
}
// console.log(btn_payment,rad_payment);
// }
let checked_rad = () =>{
let rad_payment = document.getElementById('radpembayaran');
const radios = document.querySelectorAll('input[name="radpembayaran"]');
// let rad_payment = document.getElementById('radpembayaran');
let btn_payment = document.getElementById('bayarsbmt');
if(rad_payment.checked){
console.log('checked');
if(radios.checked){
btn_payment.disabled = false;
}else{
console.log('not-checked');
btn_payment.disabled = true;
}
}
document.addEventListener('DOMContentLoaded', function () {
console.log('Document is fully loaded and parsed.');
// Perform your actions here
});
const radios = document.querySelectorAll('input[name="radpembayaran"]');
radios.forEach((radio) => {
radio.addEventListener('change', function () {
let btn_payment = document.getElementById('bayarsbmt');
let content1 = document.getElementById('divpkb');
let content2 = document.getElementById('divkopkb');
if (this.checked) {
if(this.value == 'kopkb'){
content1.classList.add('blurred');
content2.classList.remove('blurred');
btn_payment.disabled = false;
}else{
content2.classList.add('blurred');
content1.classList.remove('blurred');
btn_payment.disabled = false;
}
}
});
// document.getElementById('radpembayaran').addEventListener('change', function () {
// const toggle = this.value;
// console.log(toggle);
// const content = document.getElementById(toggle);
// console.log(dataToggleValue);
// if (this.checked) {
// content.classList.add('blurred');
// } else {
// content.classList.remove('blurred');
// }
// });
});
@@ -181,7 +181,7 @@
<!-- Control Center for Material UI Kit: parallax effects, scripts for the example pages etc -->
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
{{-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script> --}}
<!-- <script src="{{ asset('assets/js/material-kit/material-kit.min.js?v=3.0.0') }}" type="text/javascript"></script> -->
<script>
@@ -10,6 +10,11 @@
.card-header {
padding: 1rem !important;
}
.blurred {
filter: blur(2px); /* Apply a blur effect */
opacity: 0.5; /* Slight transparency */
/*pointer-events: none; */
}
</style>
<title>Bayar SAG | Portal Pelanggan</title>
@@ -29,13 +34,13 @@
<div class="d-flex">
<div class="col-9">
<div class="col-md-11 col-sm-12 mb-4">
<div class="col-md-11 col-sm-12 mb-4" id="divpkb">
<div class="card shadow">
<div class="card-header mb-4 bg-dark border-0">
<div class="row align-items-center">
<div class="d-flex">
<h4 class="text-white" style="margin-right: 1%;">PKB</h4>
<input type="radio" id="radpembayaran" name="radpembayaran" class="ms-auto" style="width: 20px; height: 20px;" />
<input type="radio" id="pkb" name="radpembayaran" value="pkb" class="ms-auto" style="width: 20px; height: 20px;" />
</div>
</div>
</div>
@@ -127,13 +132,13 @@
</div>
</div>
<div class="col-md-11 col-sm-12">
<div class="col-md-11 col-sm-12" id="divkopkb">
<div class="card shadow">
<div class="card-header mb-4 bg-dark border-0">
<div class="row align-items-center">
<div class="d-flex">
<h4 class="text-white" style="margin-right: 1%;">KOPKB</h4>
<input type="radio" id="radpembayaran" name="radpembayaran" class="ms-auto" style="width: 20px; height: 20px;" />
<input type="radio" id="kopkb" name="radpembayaran" value="kopkb" class="ms-auto" style="width: 20px; height: 20px;" />
</div>
</div>
@@ -222,20 +227,20 @@
</div>
<div class="card-body">
<div class="row pb-4 font-weight-light">
<div class="col-6">
<div class="col-8">
<label style="text-transform: uppercase; text-align: center;"><strong>Fi Pengurusan</strong></label>
</div>
<div class="col-6">
<div class="col-4">
<span class="text-primary"><strong>RM<span>1.00</span></strong></span>
</div>
</div>
<div class="row pb-4 font-weight-light">
<div class="col-6">
<div class="col-8">
<label style="text-transform: uppercase; text-align: center;"><strong>Jumlah Keseluruhan</strong></label>
</div>
<div class="col-6">
<div class="col-4">
<span class="text-primary"><strong>RM<span id="spanjumlah">{{ number_format($totalupahasal,2) }}</span></strong></span>
</div>
</div>
@@ -530,6 +535,9 @@
<script>
document.addEventListener('DOMContentLoaded', function() {
/*check radio button enabled*/
checked_rad();
var inputs = document.querySelectorAll('input[name="txtbayarantawarruq"]');
Array.from(inputs).forEach(function(input) {
@@ -71,7 +71,7 @@
<!-- Control Center for Material UI Kit: parallax effects, scripts for the example pages etc -->
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
{{-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script> --}}
<script src="{{ asset('assets/js/material-kit/material-kit.min.js?v=3.0.0') }}" type="text/javascript"></script>
<script>
@@ -108,6 +108,12 @@
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Manual Pengguna">Manual Pengguna</p>
</a>
</li>
<li class="nav-item ms-lg-auto">
<a class="nav-link nav-link-icon me-2" href="">
<i class="fa fa-shopping-cart"></i>
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Troli">Troli</p>
</a>
</li>
<li class="nav-item my-auto ms-3 ms-lg-0">
<a href="{{ route('logout') }}" class="btn btn-sm bg-white border mb-0 me-1 mt-2 mt-md-0" onclick="event.preventDefault();document.getElementById('logout-form').submit();">
<span>{{ __('LOG KELUAR') }}</span>
+1 -1
View File
@@ -28,7 +28,7 @@
<!-- Control Center for Material UI Kit: parallax effects, scripts for the example pages etc -->
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
{{-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script> --}}
<script src="{{ asset('assets/js/material-kit/material-kit.min.js?v=3.0.0') }}" type="text/javascript"></script>
<script>
+1 -1
View File
@@ -467,7 +467,7 @@
<script src="../assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="../assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
<!-- Optional JS -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
{{-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script> --}}
<!-- Argon JS -->
<script src="../assets/js/argon.js?v=1.2.0"></script>
</body>