Files
erahn-click/resources/views/auth/pertama-kali/firsttime2.blade.php
T
2025-03-12 11:50:58 +08:00

633 lines
30 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;
}
.portalloader {
/* display: none;
position: fixed;
top: 0;
left: 0;
background: white;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 100000;
opacity: 0.8; */
/* display: none; */
position: fixed;
background: white;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
z-index: 100000;
opacity: 0.8;
display: flex;
}
</style>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="{{ asset('argon') }}/img/brand/ARRAHN1.png" rel="icon" type="image/png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
<script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js"></script>
<link href="{{ asset('css/nucleo-icons.css') }}" rel="stylesheet">
<link href="{{ asset('css/nucleo-svg.css') }}" rel="stylesheet">
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css" />
<script src="{{ asset('argon') }}/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ asset('argon') }}/js/ifvisible.js"></script>
<script src="{{ asset('argon') }}/js/jquery.backDetect.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript" src="{{ asset('argon') }}/js/main.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('argon') }}/js/bootstrap-notify.js"></script>
<link href="{{ asset('css/material-kit-login.css') }}" rel="stylesheet">
</head>
<title>Daftar Akaun | Portal Pelanggan</title>
<style>
#buttonspare:hover {
background-color: #12b65224;
}
</style>
<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">
<div class="row">
<div class="col-lg-4 col-md-8 col-12 mx-auto">
<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;">
<h4 class="text-white font-weight-bolder text-center mt-2 mb-0">Portal Pelanggan</h4>
</div>
</div> -->
<div class="card-body">
<div style="text-align: center;"><img src="{{ asset('/argon/img/brand/arrahnpay3.png') }}" style="text-align: center;"></div>
<div class="row justify-content-center">
<div class="col-lg-12">
<h6 class="mt-2 mb-4" style="text-align: center;">Pertama Kali</h6>
{{-- <p>Sila isi nomborxz OTP yang telah di hantar ke nombor telefon bimbit anda.</p> --}}
<p>Sila isi Nombor Kad Pengenalan anda di dalam kotak yang disediakan.</p>
@csrf
{{-- <div class="input-group input-group-outline mt-3 {{ $errors->has('otp') ? ' 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> --}}
<div class="input-group input-group-outline mt-3 {{ $errors->has('icno') ? ' has-danger' : '' }}">
<input type="text" placeholder="Nombor Kad Pengenalan / Passport" class="form-control{{ $errors->has('icno') ? ' is-invalid' : '' }}" id="login-icno" name="icno" required aria-required="true">
</div>
<span id="spanic" class="text-danger invisible" role="alert">
<small><strong id="erroricno">ss</strong></small>
</span>
<div class="mt-n3 input-group input-group-outline justify-content-between">
<div class="input-group-prepend col-7">
<input type="text" id="tac" name="tac" class="form-control" placeholder="Nombor TAC" disabled/>
<span id="spantac" class="text-danger invisible" role="alert">
<small><strong>TAC yang anda masukkan salah!</strong></small>
</span>
</div>
<div class="input-group-prepend">
<button class="btn btn-secondary" onclick="generatetac()">Minta TAC</button>
</div>
</div>
<span id="spanhantarnombor" class="text-dark d-none" role="alert">
<small><strong>Nombor TAC anda telah dihantar melalui SMS ke +601XXXX <b id="backphone">0569</b>. Jika anda tidak menerima TAC anda dalam masa 5 minit tekan "Mohon TAC". </strong></small>
</span>
<div id="divsahkan" class="row d-none">
<div class="text-center my-4">
<!-- <button type="button" class="btn bg-gradient-primary" data-toggle="modal" data-target="#exampleModal">modal</button> -->
<button id="seterusbtn" class="btn btn-secondary login pull-right" type="button" data-toggle="modal" data-target="#exampleModal" onclick="checkpelanggan();" style="background: #4A4E59;">Sahkan</button>
</div>
</div>
<div class="text-center mt-3" style="margin: 0% 10%;">
{{-- <a href="https://spare.arrahn.com.my/pembayaransegera" id="buttonspare" title="Pembayaran Pantas SPARE" style="color: #12B652; border: 1px solid #12B652;" class="btn my-4 mb-2" target="_blank">BAYARAN PANTAS (SPARE)</a href="#"> --}}
</div>
<p class="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>
<a href="#" class="text-dark text-gradient font-weight-bold"> | </a>
<a href="{{ route('auth.forgotemel') }}">Lupa Emel</a>
</p>
<p class="text-sm text-center">
<a href="{{ route('termasyarat') }}">Terma Dan Syarat</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer position-absolute bottom-2 py-2 w-100">
<div class="container">
<div class="row align-items-center justify-content-lg-between">
<div class="col-12 col-md-6 my-auto">
<div class="copyright text-center text-sm text-white text-lg-start">
Hak Milik ©
<script>
// document.write(new Date().getFullYear())
</script> Koperasi Permodalan Kelantan Berhad
</div>
</div>
{{-- <div class="col-12 col-md-6">
<ul class="nav nav-footer justify-content-center justify-content-lg-end">
<li class="nav-item">
<a href="#" class="nav-link text-white">Hubungi Kami</a>
</li>
</ul>
</div> --}}
</div>
</div>
</footer>
<div class="portalloader">
<img src="{{ asset('argon/img/brand/bluespinner.gif') }}" alt="loader_photo">
</div>
<div id="modal-loading" name="myModal" class="modalloading modal fade" role="dialog" style="display:none">
<div class="modal-dialog-loading">
<img src="{{ asset('argon') }}/login/curvebars.svg" style="height:150px;width:150px;">
</div>
</div>
<!-- END : LOGIN PAGE 5-2 -->
<!--[if lt IE 9]>
<script src="assets/global/plugins/respond.min.js"></script>
<script src="assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
</div>
<div class="modal fade" id="seterusnyaModal" tabindex="-1" aria-labelledby="seterusnyaModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content justify-content-center">
<div class="modal-header" style="text-align: center;">
<h5 class="modal-title" id="seterusnyaModalLabel">Maklumat Pelanggan</h5>
<button type="button" class="close" onclick="backfunc()" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p class="text-danger text-sm">*Sila semak maklumat pelanggan di bawah. Pelanggan hendaklah hadir di mana-mana cawangan Ar-Rahn berdekatan untuk membuat pengemaskinian maklumat pelanggan.</p>
<div>
@if (Session::has('custdetail'))
<?php $customerdetails = Session::get('custdetail'); ?>
@endif
<form method="GET" action="{{ route('register') }}">
{{-- @csrf --}}
<div class="card-body p-0 my-3">
<div class="row">
<div class="col-md-12">
<div class="input-group input-group-static mb-4">
<label for="name">{{ __('Nama') }}</label>
<input autocomplete="off" type="text" name="name" class="input-group-outline form-control @error('name') is-invalid @enderror" value="{{ Session::has('custdetail') ? $customerdetails[0]['nama'] : old('name') }}" readonly>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="input-group input-group-static mb-4">
<label for="icno">{{ __('No IC') }}</label>
<input autocomplete="off" type="text" name="icno" class="input-group-outline form-control @error('icno') is-invalid @enderror" value="{{ Session::has('custdetail') ? $customerdetails[0]['kpbaru'] : old('icno') }}" readonly>
@error('icno')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="col-md-6 ps-md-2">
<div class="input-group input-group-static mb-4">
<label for="notel">{{ __('No. Tel') }}</label>
<input autocomplete="off" type="text" name="notel" class="input-group-outline form-control" value="{{ Session::has('custdetail') ? $customerdetails[0]['telefon'] : old('notel') }}" disabled>
</div>
</div>
<div class="form-group mb-0 mt-md-0">
<div class="input-group input-group-static mb-4">
<label for="alamat">{{ __('Alamat') }}</label>
@php
// $koddaerah = Http::withOptions(['verify' => config('app.api_verify')])->get(config('api.url') .'/api/daerah/' .$customerdetails[0]['koddaerah'] )->json();
// $kodnegeri = Http::withOptions(['verify' => config('app.api_verify')])->get(config('api.url') .'/api/negeri/' .$customerdetails[0]['kodnegeri'] )->json();
@endphp
<textarea name="alamat" class="form-control input-group-outline" rows="2" disabled>{{ Session::has('custdetail') ? $customerdetails[0]['alamat1'] : old('alamat') }}
</textarea>
</div>
</div>
<div class="col-md-4">
<div class="input-group input-group-static mb-4">
<label for="poskod">{{ __('Poskod') }}</label>
<input autocomplete="off" type="text" name="poskod" class="input-group-outline form-control @error('poskod') is-invalid @enderror" value="{{ Session::has('custdetail') ? $customerdetails[0]['poskod'] : old('poskod') }}" disabled>
@error('poskod')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="col-md-8">
<div class="input-group input-group-static mb-4">
<label for="namadaerah">{{ __('Daerah') }}</label>
<input autocomplete="off" type="text" name="namadaerah" class=" input-group-outline form-control" value="{{ Session::has('custdetail') ? $koddaerah['namadaerah'] : old('namadaerah') }}" disabled>
</div>
</div>
<div class="col-md-12">
<div class="input-group input-group-static mb-4">
<label for="negeri">{{ __('Negeri') }}</label>
<input autocomplete="off" type="text" name="negeri" class="input-group-outline form-control @error('negeri') is-invalid @enderror" value="{{ Session::has('custdetail') ? $kodnegeri['negeri'] : old('negeri') }}" disabled>
@error('negeri')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<!-- <span class="text-danger text-xl-center font-weight-bold"><small>*Diminta untuk semak maklumat pelanggan terlebih dahulu!</small></span><br> -->
</div>
<div class="modal-footer justify-content-center">
<!-- <button type="button" class="btn bg-gradient-dark mb-0" data-dismiss="modal">Close</button> -->
{{-- <button type="button" class="btn btn-danger mb-0" onclick="backfunc()" data-dismiss="modal">Salah</button> --}}
<!-- <button type="button" class="btn bg-gradient-primary mb-0">Save changes</button> -->
<button id="betulbtn" type="submit" class="btn btn-success mb-0">Sahkan</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
setTimeout(() => {
$(".portalloader").fadeOut(300);
}, 300)
})
let api_url = "{{ config('api.url') }}";
function generatetac() {
let icno = $('#login-icno').val();
if(icno === '')
{
$("#tac").prop('disabled', true);
$.notify({
icon: 'fas fa-exclamation-triangle fa-2x',
newest_on_top: true,
message: "<strong style='font-size:15px;text-align:center;margin-left:100px; color: #ffff'>Sila Masukkan Nombor Kad Pengenalan!</strong>"
}, {
type: 'danger',
allow_dismiss: false,
placement: {
align: 'center',
from: 'bottom'
},
animate: {
enter: 'animate__animated animate__bounce',
exit: 'animate__animated animate__bounceOutDown'
}
});
}else{
var csrf_token = $('meta[name="csrf-token"]').attr('content');
$.ajax({
url: '{{ route("requestic") }}',
method: 'get',
data:{
"_token": "{{ csrf_token() }}",
"icno" : icno
},
success: function(data) {
if(data.notexpired){
$.notify({
icon: 'fas fa-exclamation-triangle fa-2x',
newest_on_top: true,
message: "<strong style='font-size:15px;text-align:center;margin-left:100px; color: #ffff'>anda telah meminta tac kurang daripada 5 minit!</strong>"
}, {
type: 'warning',
allow_dismiss: false,
placement: {
align: 'center',
from: 'bottom'
},
animate: {
enter: 'animate__animated animate__bounce',
exit: 'animate__animated animate__bounceOutDown'
}
});
return;
}
if(data.message){
$.notify({
icon: 'fas fa-exclamation-triangle fa-2x',
newest_on_top: true,
message: "<strong style='font-size:15px;text-align:center;margin-left:100px; color: #ffff'>anda telah menjadi ahli dalam ini!</strong>"
}, {
type: 'warning',
allow_dismiss: false,
placement: {
align: 'center',
from: 'bottom'
},
animate: {
enter: 'animate__animated animate__bounce',
exit: 'animate__animated animate__bounceOutDown'
}
});
return;
}
if(data['status'] == 1)
{
$("#tac").prop('disabled', false);
$("#spanhantarnombor").removeClass('d-none');
$("#divsahkan").removeClass('d-none');
$('#backphone').text(data['notelefon']);
$.notify({
icon: 'fas fa-2x fa-exclamation-triangle',
newest_on_top: true,
message: "<strong style='font-size:15px;text-align:center;margin-left:100px; color: #ffff'>Permohonan TAC telah dihantar melalui SMS!</strong>"
}, {
type: 'success',
allow_dismiss: false,
placement: {
align: 'center',
from: 'bottom'
},
animate: {
enter: 'animate__animated animate__bounce',
exit: 'animate__animated animate__bounceOutDown'
}
});
}else{
$.notify({
icon: 'fas fa-2x fa-exclamation-triangle',
newest_on_top: true,
message: "<strong style='font-size:15px;text-align:center;margin-left:100px; color: #ffff'>No Kad Pengenalan / Passport tiada dalam simpanan!</strong>"
}, {
type: 'danger',
allow_dismiss: false,
placement: {
align: 'center',
from: 'bottom'
},
animate: {
enter: 'animate__animated animate__bounce',
exit: 'animate__animated animate__bounceOutDown'
}
});
}
}
});
}
}
function checkpelanggan() {
var otp_verify = $('#tac').val();
var otp_icno = $('#login-icno').val();
var boolotp = false;
var boolicno = false;
if (otp_verify == null || otp_verify == '') {
// $('#errorotp').text('Sila Isi Nombor OTP!');
// $('#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 Isi No Kad Pengenalan 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,
url: "{{ route('requesttac') }}",
data:{
icno: otp_icno,
tac: otp_verify
},
method: 'GET',
success: function(data) {
if (data.status == 1) {
$('input[name="name"]').val(data.customerinfo.nama);
if (data.customerinfo.kpbaru == '') {
$('input[name="icno"]').val(data.customerinfo.kplama);
} else {
$('input[name="icno"]').val(data.customerinfo.kpbaru);
}
// $('input[name="icno"]').val(data.customerinfo.kpbaru);
$('input[name="notel"]').val(data.customerinfo.telefon);
$('input[name="poskod"]').val(data.customerinfo.poskod);
$('textarea[name="alamat"]').val(data.customerinfo.alamat1);
$('input[name="namadaerah"]').val(data.namadaerah);
$('input[name="negeri"]').val(data.namanegeri);
$('#spanic').addClass('invisible');
$('#spanic').removeClass('visible');
$('#spanic').addClass('invisible');
$('#spanic').removeClass('visible');
$("#seterusbtn").prop("disabled", true);
$('#logobg').addClass('invisible');
$('#logobg').removeClass('visible');
$('#makpel').addClass('visible');
$('#makpel').removeClass('invisible');
$('#seterusnyaModal').modal({
backdrop: 'static',
keyboard: false
});
} else {
$.notify({
icon: 'fas fa-2x fa-exclamation-triangle',
newest_on_top: true,
message: "<strong style='font-size:15px;text-align:center;margin-left:100px; color: #ffff'>TAC anda salah sila periksa balik!</strong>"
}, {
type: 'danger',
allow_dismiss: false,
placement: {
align: 'center',
from: 'bottom'
},
animate: {
enter: 'animate__animated animate__bounce',
exit: 'animate__animated animate__bounceOutDown'
}
});
}
}
});
}else{
$.notify({
icon: 'fas fa-2x fa-exclamation-triangle',
newest_on_top: true,
message: "<strong style='font-size:15px;text-align:center;margin-left:100px; color: #ffff'>Sila masukkan ruang yang disediakan!</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();
}
});
});
</script>
</body>
</html>