@extends('layouts.templateregist')
@section('content')
<form class="form w-100" id="form_edit" method="post" action="{{ url('registrasi_new/update') }}" enctype="multipart/form-data">
@csrf @method('patch')
	<div class="mb-10 text-center">
		<h1 class="text-dark mb-3">Verify your acount</h1>
	</div>
	<div class="alert alert-warning">
	    <div class="d-flex flex-column">
	        <span>Anda belum melakukan registrasi</span>
	    </div>
	</div>
	<center>
		<div class="image-input image-input-outline" data-kt-image-input="true" style="background-image: url(/assets/media/avatars/blank.png)">
		    <div class="image-input-wrapper w-125px h-125px" style="background-image: url(/assets/media/avatars/blank.png)"></div>
				<label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-white shadow"
				data-kt-image-input-action="change"
				data-bs-toggle="tooltip"
				data-bs-dismiss="click"
				title="Change avatar">
				 <i class="bi bi-pencil-fill fs-7"></i>
					 <input type="file" data-max-file-size="4M" accept='image/*'capture='camera' name="avatar" class="dropify" required/>
					 <input type="hidden" name="avatar_remove" />
				</label>
				<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-white shadow"
				data-kt-image-input-action="cancel"
				data-bs-toggle="tooltip"
				data-bs-dismiss="click"
				title="Cancel avatar">
					<i class="bi bi-x fs-2"></i>
				</span>
				<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-white shadow"
				data-kt-image-input-action="remove"
				data-bs-toggle="tooltip"
				data-bs-dismiss="click"
				title="Remove avatar">
					<i class="bi bi-x fs-2"></i>
				</span>
	    </div>
	</center>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6">User ID DMS</label>
		<input class="form-control form-control-lg form-control-solid" type="text" placeholder="" name="usernamedms" autocomplete="off" readonly value="{{Auth::user()->username}}"/>
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Nama Lengkap</label>
		<input class="form-control form-control-lg form-control-solid" type="text" placeholder="" name="nama" autocomplete="off" value="{{Auth::user()->name}}" required />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6">Region</label>
		<input class="form-control form-control-lg form-control-solid" type="text" placeholder="" name="region" autocomplete="off" readonly value="{{Auth::user()->region}}" />
		
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Distributor</label>
		<select class="form-select form-select-lg form-select-solid" data-control="select2" data-placeholder="Select an option" id="sDistributor" name="distributor" required>
			@foreach($distributor as $dist)
		    	<option value="{{$dist}}" {{Auth::user()->distributor == $dist  ? 'selected' : ''}}>{{$dist}}</option>
		    @endforeach
		</select>
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Territory</label>
		<select class="form-select form-select-lg form-select-solid" data-control="select2" data-placeholder="Select an option" id="sTerritory" required name="territory">
			@foreach($territory as $terr)
		    	<option value="{{$terr}}" {{Auth::user()->territory == $terr  ? 'selected' : ''}}>{{$terr}}</option>
		   @endforeach
		</select>
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Jabatan</label>
		<select class="form-select form-select-lg form-select-solid" data-control="select2" data-placeholder="Select an option" required name="jabatan">
			@foreach($jabatan as $jab)
		    	<option value="{{$jab->jabatan}}" {{Auth::user()->jabatan == $jab->jabatan  ? 'selected' : ''}}>{{$jab->jabatan}}</option>
		    @endforeach
		</select>
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Jenis Kelamin</label>
		<select class="form-select form-select-lg form-select-solid" required name="jenis_kelamin">
			<option value="">-Pilih Jenis Kelamin-</option>
			<option value="L">Laki-Laki</option>
			<option value="P">Perempuan</option>
		</select>
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Tanggal Lahir</label>
		<input class="form-control form-control-lg form-control-solid" type="date" placeholder="" name="tanggal_lahir" required />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Pendidikan Terakhir</label>
		<select class="form-select form-select-lg form-select-solid" required name="pendidikan">
			<option value="">-Pilih Pendidikan-</option>
			<option value="SMA">SMA</option>
			<option value="D1">D1</option>
			<option value="D2">D2</option>
			<option value="D3">D3</option>
			<option value="S1">S1</option>
			<option value="S2">S2</option>
		</select>
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Tanggal Join</label>
		<input class="form-control form-control-lg form-control-solid" type="date" placeholder="" name="tanggal_join" required />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Alamat</label>
		<textarea class="form-control form-control-lg form-control-solid" placeholder="" name="alamat" required></textarea>
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">E-mail</label>
		<input class="form-control form-control-lg form-control-solid" type="email" placeholder="example@domain.com" name="email" required />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">NIK KTP</label>
		<input class="form-control form-control-lg form-control-solid" type="text" placeholder="" name="no_ktp" required />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">File KTP</label>
		<input class="form-control form-control-lg form-control-solid" type="file" placeholder="" name="file_ktp" required />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Nomor NPWP</label>
		<input class="form-control form-control-lg form-control-solid" type="text" placeholder="" name="no_npwp" required />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">File NPWP</label>
		<input class="form-control form-control-lg form-control-solid" type="file" placeholder="" name="file_npwp" required />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Nomor Rekening</label>
		<input class="form-control form-control-lg form-control-solid" type="text" placeholder="" name="norek" required />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Nama Pemilik Rekening</label>
		<input class="form-control form-control-lg form-control-solid" type="text" placeholder="" name="nama_rekening" required />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Nama Bank</label>
		<select class="form-select form-select-lg form-select-solid" data-control="select2" data-placeholder="Select an option" required name="nama_bank">
			<option value="">Select Nama Bank</option>
			@foreach($bank as $b)
		    <option value="{{$b->nama_bank}}">{{$b->nama_bank}}</option>
		    @endforeach
		</select>
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Foto Buku Tabungan</label>
		<input class="form-control form-control-lg form-control-solid" type="file" placeholder="" name="file_bank" required />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">No. WhatsApp</label>
		<input class="form-control form-control-lg form-control-solid" type="number" placeholder="Contoh : 085692133687" name="no_wa" autocomplete="off" required oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==13 && event.keyCode!=8) return false;" id="no_wa" />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">No. HP LinkAja (Sudah Terdaftar LinkAja)</label>
		<input class="form-control form-control-lg form-control-solid" type="number" placeholder="Contoh : 085692133687" name="no_linkaja" autocomplete="off" required oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==13 && event.keyCode!=8) return false;" id="no_linkaja" />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">Screenshot Profile Account LinkAja</label>
		<input class="form-control form-control-lg form-control-solid" type="file" name="file_linkaja" required />
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">OTP Method</label>
		<select class="form-select form-select-lg form-select-solid" data-control="select2" data-placeholder="Select an option" required name="select_method" id="select_method">
			<option value="">pilih metode</option>
			<option value="1">Whatsapp</option>
			<!-- <option value="2">SMS</option> -->
		</select>
	</div>
	<div class="fv-row mb-7">
		<button type="button" id="btn_req_otp" class="btn btn-lg btn-success" onclick="sendOTP();">
			<span class="indicator-label">Request Kode OTP</span>
		</button>
		<div class="" style="display:inline-flex;">
			<label id="text-timer" style="display: none;">Request ulang OTP dalam</label>&nbsp;<b id="timer" style="color:red; display: none;">30 &nbsp;</b><label id="text-timer1" style="display: none;">detik</label>
		</div>
	</div>
	<div class="fv-row mb-7">
		<label class="form-label fw-bolder text-dark fs-6 required">OTP Code</label>
		<input class="form-control form-control-lg form-control-solid" type="number" placeholder="xxxxx" name="kode_otp" required />
	</div>
	<div class="mb-10 fv-row" data-kt-password-meter="true">
        <div class="mb-1">
            <label class="form-label fw-bolder text-dark fs-6 required">New Password <span style="font-size:12px; color:grey;">(*minimal 8 karakter)</span></label>
            <div class="position-relative mb-3">
                <input id="password" type="password" class="form-control form-control-lg form-control-solid @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
		        @error('password')
		            <span class="invalid-feedback" role="alert">
		                <strong>{{ $message }}</strong>
		            </span>
		        @enderror
                <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
                    <i class="bi bi-eye-slash fs-2"></i>
                    <i class="bi bi-eye fs-2 d-none"></i>
                </span>
            </div>
        </div>
    </div>
    <div class="mb-10 fv-row" data-kt-password-meter="true">
        <div class="mb-1">
            <label class="form-label fw-bolder text-dark fs-6 required">Confirm Password</label>
            <div class="position-relative mb-3">
                <input id="password-confirm" type="password" class="form-control form-control-lg form-control-solid" name="password_confirmation" required autocomplete="new-password">
		        @error('password')
		            <span class="invalid-feedback" role="alert">
		                <strong>{{ $message }}</strong>
		            </span>
		        @enderror
                <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
                    <i class="bi bi-eye-slash fs-2"></i>
                    <i class="bi bi-eye fs-2 d-none"></i>
                </span>
            </div>
        </div>
    </div>
	<div class="form-group" style="margin-top:20px;">
        <div class="controls col-sm-12">
        </div>
        <div class="row">
             <div class="col-md-4">
                <input id="c_in_long" name="get_latitude" readonly type="hidden" class="form-control"/>
            </div>
            <div class="col-md-4">
                <input id="c_in_lat" name="get_longitude" readonly type="hidden" class="form-control"/>
            </div>
        </div>
    </div>
    <div class="form-check form-check-custom form-check-solid">
	    <input class="form-check-input" type="checkbox" value="1" id="flexCheckDefault" required />
	    <label class="form-check-label" for="flexCheckDefault" required>
	        Dengan ini menyatakan bahwa <b>Nomor LinkAja dan Nomor Rekening Transfer Bank</b> yang diinput adalah <b>benar.</b> Kesalahan penginputan data merupakan tanggung jawab pemilik Akun
	    </label>
	</div>
    <br>
	<div class="text-center">
		<button type="submit" id="kt_sign_up_submit" class="btn btn-lg btn-primary">
			<span class="indicator-label">Submit</span>
		</button>
	</div>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrGPbILcsgQ7G4SEy5mxX3p8G-rCjHpDo" async defer></script>
<script type="text/javascript">

"use strict";


// check if browser supports the geolocation api
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success); // if geolocation supported, call function
} else {
    $("#c_in_longlat").val('Your browser doesn\'t support the geolocation api.');
}

function success(position) {
    var latitude = position.coords.latitude; // set latitude variable
    var longitude = position.coords.longitude; // set longitude variable

    var response = '' + latitude + ',' + longitude; // build string containing lat/long
    var lat = latitude;
    var long = longitude;

    $("#c_in_longlat").val(response); // write string to input field c_in_long
    $("#c_in_long").val(long); // write string to input field c_in_long
    $("#c_in_lat").val(lat); // write string to input field c_in_long
}

function sendOTP(){
	
    var nomor = $('#no_wa').val();
    var method = $('#select_method').val();
    if(nomor == '' || method ==''){
    	alert('isi nomor dan otp method');
    }else{
    	timer();
    	$.ajax({
			url:"{{ route('registrasi.sendOtp') }}",
			method:"get",
			type:"json",
			data: {
			nomor :nomor,
			method :method
			},
			success:function (data) {
				console.log(data);
				if(data.status == 1){
					Swal.fire({
				        text: "Kode OTP Berhasil Terkirim",
				        icon: "success",
				        buttonsStyling: false,
				        confirmButtonText: "Ok, got it!",
				        customClass: {
				            confirmButton: "btn btn-primary"
				        }
				    });
				}else{
					alert('fail');
				}
			}
	    })
    }
}

function timer(){
	var timeleft = 120;
        var downloadTimer = setInterval(function () {
            document.getElementById("timer").innerHTML = timeleft;
            timeleft -= 1;
            if (timeleft <= 0) {
                clearInterval(downloadTimer);
                var d = document.getElementById("timer");
                var btn = document.getElementById("btn_req_otp");
                var text = document.getElementById("text-timer");
                var text1 = document.getElementById("text-timer1");

                d.style.display = "none";
                text.style.display = "none";
                text1.style.display = "none";

                btn.style.display = "block";
                
            }else{
            	var d = document.getElementById("timer");
                var btn = document.getElementById("btn_req_otp");
                var text = document.getElementById("text-timer");
                var text1 = document.getElementById("text-timer1");

                d.style.display = "block";
                text.style.display = "block";
                text1.style.display = "block";

                btn.style.display = "none";
                
            }
        }, 1000);
}
        
</script>
@endsection