Hafifie PKB
336 lines
18 KiB
PHP
336 lines
18 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
|
|
|
|
<style>
|
|
.background {
|
|
max-width: -webkit-fill-available;
|
|
padding: 15%;
|
|
}
|
|
|
|
.shadow-primary {
|
|
box-shadow: #4A4E59 !important;
|
|
}
|
|
|
|
.text-primary {
|
|
color: #4A4E59 !important;
|
|
}
|
|
</style>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Fonts and icons -->
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
|
<!-- Nucleo Icons -->
|
|
<link href="{{ asset('css/nucleo-icons.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('css/nucleo-svg.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('argon') }}/img/brand/ARRAHN1.png" rel="icon" type="image/png">
|
|
|
|
<!-- Material Icons -->
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
|
<!-- CSS Files -->
|
|
<link href="{{ asset('css/material-kit-login.css') }}" rel="stylesheet">
|
|
<script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body class="sign-in-basic">
|
|
|
|
<div class="page-header align-items-start min-vh-100" style="background-image: url('/argon/login/backg4_x2.jpg');" loading="lazy">
|
|
<span class="mask bg-gradient-dark opacity-6"></span>
|
|
<div class="container my-auto mx-auto">
|
|
<div class="row">
|
|
<div class="col-lg-10 col-md-12 col-12 mx-auto mt-5">
|
|
<div class="card z-index-0 fadeIn3 fadeInBottom">
|
|
|
|
<!-- <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
|
<div class="bg-gradient-primary border-radius-lg py-3 pe-1" style="background: #4A4E59;">
|
|
<img src="{{ asset('/argon/login/logo_arrahn_baru2.png') }}" alt="Logo Ar Rahn" class="background" style="text-align: center;">
|
|
<h3 style="text-align: center; color:#12B652">CUSTOMER PORTAL</h3>
|
|
</div>
|
|
</div> -->
|
|
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
|
<div class="bg-gradient-primary border-radius-lg py-3 pe-1" style="background: #4A4E59;">
|
|
<h4 class="text-white font-weight-bolder text-center mt-2 mb-0">Portal Pelanggan</h4>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-lg-5">
|
|
<h3 class="mt-2 mb-4" style="text-align: center;">Daftar Akaun</h3>
|
|
<p>Sila isi nombor OTP yang telah di mesej ke nombor telefon bimbit anda.</p>
|
|
<div class="input-group input-group-outline my-3 {{ $errors->has('email') ? ' has-danger' : '' }}">
|
|
<input placeholder="One-Time-Password" class="form-control{{ $errors->has('otp') ? ' is-invalid' : '' }}" type="text" name="otp" value="{{ old('otp') }}" id="login-otp" required autofocus aria-required="true">
|
|
</div>
|
|
<span id="spanotp" class="text-danger" role="alert">
|
|
<small><strong id="errorotp"></strong></small>
|
|
</span> </span>
|
|
<div class="input-group input-group-outline mb-3">
|
|
<input placeholder="No. Kad Pengenalan" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" type="email" name="password" id="login-password">
|
|
</div>
|
|
<span id="spanic" class="text-danger invisible" role="alert">
|
|
<small><strong id="erroricno">ss</strong></small>
|
|
</span>
|
|
<div class="text-center mt-6">
|
|
<button type="submit" class="btn bg-gradient-dark w-100 my-4 mb-2" onclick="loadingbtn();this.disabled=true;this.form.submit();" style="background: #4A4E59;">SETERUSNYA</button>
|
|
<button id="seterusbtn" class="btn btn-success login pull-right" type="button" onclick="checkpelanggan();">Seterusnya</button>
|
|
|
|
</div>
|
|
<p class="mt-6 text-sm text-center">
|
|
|
|
<a href="{{ route('login') }}">Log-Masuk</a>
|
|
<a href="#" class="text-dark text-gradient font-weight-bold"> | </a>
|
|
<a href="{{ route('password.request') }}">Lupa Kata Laluan</a>
|
|
</p>
|
|
</div>
|
|
<div class="col-lg-6 mt-lg-0 mt-5 ps-lg-0 ps-0 ms-auto">
|
|
<div class="my-auto mx-auto">
|
|
<h5 class="mt-2 mb-4" style="text-align: center;">Maklumat Pelanggan</h5>
|
|
</div>
|
|
<div class="card-body p-0 my-3 mt-5">
|
|
<div class="row">
|
|
|
|
<div class="col-md-12">
|
|
<div class="input-group input-group-static mb-4">
|
|
<label>Nama</label>
|
|
<input type="email" class="form-control" placeholder="ahmad" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="input-group input-group-static mb-4">
|
|
<label>No. Kad Pengenalan</label>
|
|
<input type="email" class="form-control" placeholder="8989989-89-0555" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 ps-md-2">
|
|
<div class="input-group input-group-static mb-4">
|
|
<label>No. Telefon</label>
|
|
<input type="email" class="form-control" placeholder="0128989500" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group mb-0 mt-md-0">
|
|
<div class="input-group input-group-static mb-4">
|
|
<label>Alamat</label>
|
|
<input type="email" class="form-control" placeholder="lot 1934, skeksyten" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="input-group input-group-static mb-4">
|
|
<label>Poskod</label>
|
|
<input type="email" class="form-control" placeholder="121" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="input-group input-group-static mb-4">
|
|
<label>Daerah</label>
|
|
<input type="email" class="form-control" placeholder="Kota Bharu" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="input-group input-group-static mb-4">
|
|
<label>Negeri</label>
|
|
<input type="email" class="form-control" placeholder="Kelantammm" readonly>
|
|
</div>
|
|
</div>
|
|
<span class="text-danger text-xl-center font-weight-bold" style="text-align: center;"><small>*Diminta untuk semak maklumat pelanggan terlebih dahulu!</small></span><br>
|
|
|
|
<div class="row">
|
|
<div class="col-6" style="text-align: center;">
|
|
<button id="betulbtn" type="submit" class="btn btn-success mt-2">Betul</button>
|
|
</div>
|
|
<div class="col-6" style="text-align: center;">
|
|
<button type="button" class="btn btn-danger mt-2" onclick="backfunc()">Salah</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer bottom-0 py-2 w-100">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-12 my-auto">
|
|
<div class="text-sm text-white text-lg-start" style="text-align: center !important;">
|
|
@2021, Copyright Koperasi Permodalan Kelantan Berhad
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
<!-- Core JS Files -->
|
|
<script src="{{ asset('assets/js/material-kit/core/popper.min.js') }}" type="text/javascript"></script>
|
|
|
|
|
|
<script src="{{ asset('assets/js/material-kit/core/bootstrap.min.js') }}" type="text/javascript"></script>
|
|
|
|
<script src="{{ asset('assets/js/material-kit/plugins/perfect-scrollbar.min.js') }}"></script>
|
|
|
|
<!-- Plugin for Parallax, full documentation here: https://github.com/wagerfield/parallax -->
|
|
<script src="{{ asset('assets/js/material-kit/plugins/parallax.min.js') }}"></script>
|
|
|
|
<!-- 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="{{ asset('assets/js/material-kit/material-kit.min.js?v=3.0.0') }}" type="text/javascript"></script> -->
|
|
|
|
<script>
|
|
let api_url = "{{ config('api.url') }}";
|
|
|
|
|
|
function checkpelanggan() {
|
|
var otp_verify = $('#login-otp').val();
|
|
var otp_icno = $('#login-icno').val();
|
|
var boolotp = false;
|
|
var boolicno = false;
|
|
|
|
if (otp_verify == null || otp_verify == '') {
|
|
$('#errorotp').text('sila isikan otp anda!');
|
|
$('#spanotp').addClass('visible');
|
|
$('#spanotp').removeClass('invisible');
|
|
boolotp = true;
|
|
} else {
|
|
$('#errorotp').text('');
|
|
$('#spanotp').addClass('invisible');
|
|
$('#spanotp').removeClass('visible');
|
|
boolotp = false;
|
|
}
|
|
|
|
if (otp_icno == null || otp_icno == '') {
|
|
$('#erroricno').text('sila isikan icno anda!');
|
|
$('#spanic').addClass('visible');
|
|
$('#spanic').removeClass('invisible');
|
|
boolicno = true;
|
|
} else {
|
|
$('#erroricno').text('');
|
|
$('#spanic').addClass('invisible');
|
|
$('#spanic').removeClass('visible');
|
|
boolicno = false;
|
|
}
|
|
|
|
if (boolotp === false && boolicno === false) {
|
|
$.ajax({
|
|
url: api_url + '/api/otp/check/' + otp_verify,
|
|
method: 'GET',
|
|
success: function(data) {
|
|
|
|
if (data.length > 0) {
|
|
console.log(data[0].nokp);
|
|
$.ajax({
|
|
url: api_url + '/api/customers/' + data[0].nokp,
|
|
method: 'GET',
|
|
success: function(data) {
|
|
|
|
$('input[name="name"]').val(data.nama);
|
|
$('input[name="icno"]').val(data.kpbaru);
|
|
$('input[name="notel"]').val(data.telefon);
|
|
$('input[name="poskod"]').val(data.poskod);
|
|
$('textarea[name="alamat"]').val(data.alamat1);
|
|
|
|
$.ajax({
|
|
url: api_url + '/api/daerah/' + data.koddaerah,
|
|
method: 'GET',
|
|
success: function(data) {
|
|
console.log(data);
|
|
$('input[name="namadaerah"]').val(data.namadaerah);
|
|
}
|
|
});
|
|
$.ajax({
|
|
url: api_url + '/api/negeri/' + data.kodnegeri,
|
|
method: 'GET',
|
|
success: function(data) {
|
|
console.log(data);
|
|
$('input[name="negeri"]').val(data.negeri);
|
|
}
|
|
});
|
|
|
|
|
|
$('#spanic').addClass('invisible');
|
|
$('#spanic').removeClass('visible');
|
|
$('#spanic').addClass('invisible');
|
|
$('#spanic').removeClass('visible');
|
|
$("#seterusbtn").prop("disabled", true);
|
|
|
|
$('#makpel').addClass('visible');
|
|
$('#makpel').removeClass('invisible');
|
|
|
|
}
|
|
});
|
|
} else {
|
|
$.notify({
|
|
icon: 'fas fa-exclamation-triangle fa-2x',
|
|
newest_on_top: true,
|
|
message: "<strong style='font-size:15px;text-align:center;margin-left:100px;'>Pelanggan tidak membuat sebarang login!</strong>"
|
|
}, {
|
|
type: 'danger',
|
|
allow_dismiss: false,
|
|
placement: {
|
|
align: 'center',
|
|
from: 'bottom'
|
|
},
|
|
animate: {
|
|
enter: 'animate__animated animate__bounce',
|
|
|
|
exit: 'animate__animated animate__bounceOutDown'
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function backfunc() {
|
|
$('#makpel').addClass('invisible');
|
|
$('#makpel').removeClass('visible');
|
|
$("#seterusbtn").prop("disabled", false);
|
|
}
|
|
|
|
// $('body').on('click', '.loading', function() {
|
|
// loading();
|
|
// });
|
|
|
|
$(function() {
|
|
$('.login-form').submit(function() {
|
|
if ($(this).valid()) {
|
|
//
|
|
} else {
|
|
loading_close();
|
|
}
|
|
});
|
|
});
|
|
|
|
var slideIndex = 0;
|
|
showSlides();
|
|
|
|
function showSlides() {
|
|
var i;
|
|
var slides = document.getElementsByClassName("mySlides");
|
|
for (i = 0; i < slides.length; i++) {
|
|
slides[i].style.display = "none";
|
|
}
|
|
slideIndex++;
|
|
if (slideIndex > slides.length) {
|
|
slideIndex = 1
|
|
}
|
|
slides[slideIndex - 1].style.display = "block";
|
|
setTimeout(showSlides, 10000); // Change image every 2 seconds
|
|
}
|
|
</script>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |