@extends('layouts.app_auth')

@section('title', 'Register')
@section('register', 'active')

@section('css')
<style>
    .login-wrap{
        width:100%;
        margin:auto;
        max-width:450px;
        min-height:720px;
        position:relative;
        font:600 16px/18px 'Open Sans',sans-serif;
    }
    .login-html {
        /* top: 0px; */
        top: 100px;
        width: 100%;
        /*height: 100%;*/
        position: absolute;
        /*padding: 50px 50px 50px 50px;*/
        background: rgba(0,0,0,.7);
    }
</style>
@endsection

@section('content')
<!-- <header>
    <div class="container">
        <div class="row">
            <div class="col-sm-5">
                <a href="https://ssipr.selangor.gov.my" style="text-decoration:none;"><div class="logo"></div></a>
            </div>
            <div class="col-sm-7 hidden-xs">
                
            </div>
        </div>
    </div>
</header>

<div class="login-wrap">
    <div class="login-html">
        <h2>Daftar Akaun</h2>
        <div class="login-form">
            <form action="{{ route('register') }}" method="POST">
                @csrf
                <div class="sign-up-htm">
                    <div class="group">
                        <label for="user" class="label">Nama</label>
                        <input id="user" type="text" class="input" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
                    </div>
                    <div class="group">
                        <label for="pass" class="label">E-mel</label>
                        <input type="email" class="input" name="email" value="{{ old('email') }}" required autocomplete="email" onblur="checkEmail($(this))" style="margin-bottom: 5px">
                    </div>
                    <div class="group">
                        <label for="pass" class="label">No Identiti</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                            <select class="form-control" style="height: 35px;font-size: 14px;background-color: #dddddd; padding: 0;border-radius: 0;" id="ic_type" name="ic_type" onchange="$('#username').val('');" required>
                                <option value="1">No. K/P</option>
                                <option value="2">No. Tentera</option>
                                <option value="3">No. Polis</option>
                            </select>
                            </div>
                            <input type="text" class="form-control" aria-label="Text input with dropdown button" id="username" name="username" value="{{ old('username') }}" required autocomplete="username" maxlength="12" oninput="setInput(this)"
                            style="background:rgba(255,255,255,.1);border:none;color:white;height:35px;">
                        </div>
                    </div>
                    <div class="group">
                        <label for="pass" class="label">Kata Laluan</label>
                        <input type="password" class="input" data-type="password" name="password" required autocomplete="new-password">
                    </div>
                    <div class="group">
                        <label for="pass" class="label">Pengesahan Kata Laluan</label>
                        <input type="password" class="input" data-type="password" name="password_confirmation" required autocomplete="new-password">
                        <ul style="margin-top: 5px; padding-left: 15px;">
                            <li><small>Mengandungi 8 aksara minimum.</small></li>
                            <li><small>Mengandungi minimum 1 huruf besar & 1 huruf kecil.</small></li>
                            <li><small>Mengandungi minimum 1 angka.</small></li>
                        </ul>
                    </div>
                    <div class="group">
                        <button type="submit" class="button">Daftar</button>
                    </div>
                    <div class="hr"></div>
                    <div class="foot-lnk">
                        <a href="{{ route('login') }}">Log Masuk</a>
                    </div>
                </div>
            </form>
            
        </div>
    </div>
</div> -->
<form action="{{ route('register') }}" method="POST">
    @csrf
    <div class="sign-up-htm">
        <div class="group">
            <label for="user" class="label">Nama</label>
            <input id="user" type="text" class="input" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
        </div>
        <div class="group">
            <label for="pass" class="label">E-mel</label>
            <input type="email" class="input" name="email" value="{{ old('email') }}" required autocomplete="email" onblur="checkEmail($(this))" style="margin-bottom: 5px">
        </div>
        <div class="group">
            <label for="pass" class="label">No Identiti</label>
            <div class="input-group">
                <div class="input-group-prepend">
                   <select class="form-control" style="height: 35px;font-size: 14px;background-color: #dddddd; padding: 0;border-radius: 0;" id="ic_type" name="ic_type" onchange="$('#username').val('');" required>
                       <option value="1">No. K/P</option>
                       {{-- <option value="2">No. Tentera</option>
                       <option value="3">No. Polis</option> --}}
                   </select>
                </div>
                <input type="text" class="form-control" aria-label="Text input with dropdown button" id="username" name="username" value="{{ old('username') }}" required autocomplete="username" maxlength="12" oninput="setInput(this)"
                style="background:rgba(255,255,255,.1);border:none;color:white;height:35px;">
                <span style="color: grey"><small>Sila masukkan No. Kad Pengenalan 12 digit sahaja tanpa (-)<small></span>
            </div>
        </div>
        <div class="group">
            <label for="pass" class="label">Kata Laluan</label>
            <input type="password" class="input" data-type="password" name="password" required autocomplete="new-password">
        </div>
        <div class="group">
            <label for="pass" class="label">Pengesahan Kata Laluan</label>
            <input type="password" class="input" data-type="password" name="password_confirmation" required autocomplete="new-password">
            <ul style="margin-top: 5px; padding-left: 15px;">
                <li><small>Mengandungi 8 aksara minimum.</small></li>
                <li><small>Mengandungi minimum 1 huruf besar & 1 huruf kecil.</small></li>
                <li><small>Mengandungi minimum 1 angka.</small></li>
            </ul>
        </div>
        <div class="group">
            <button type="submit" id="id_daftar" class="button">Daftar</button>
        </div>
        <div class="hr"></div>
        <div class="foot-lnk">
            <a href="{{ route('login') }}">Log Masuk</a>
        </div>
    </div>
</form>
@endsection

@section('js')
<script>
    function setInput(x) {
        if($('#ic_type').val() == 1) {
            return x.value=x.value.replace(/[^\d]/,'');
        } else {
            //
        }
    }

    function checkEmail(x) {
        var email_format = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        x.next().remove();
        
        if(x.val().match(email_format)) {
            x.next().remove();
        } else if(x.val() == '') {
            x.next().remove();
        } else {
            x.after("<span style='color: #f4516c'>Sila masukkan format emel yang betul.</span>");
            x.focus();
        }
    }

document.getElementById("id_daftar").onclick = function(){
    if($('input[name ="name"]').val() && $('input[name ="password"]').val() && $('input[name ="email"]').val() && $('input[name ="username"]').val() && $('input[name ="password_confirmation"]').val() ){
        document.getElementById("id_daftar").innerHTML = "<i class='fa fa-spinner fa-spin'></i>";
    }
}

$(document).ready(function(){
    const idleDurationSecs = 180;    // X number of seconds
    const redirectUrl = 'https://ssipr.selangor.gov.my';  // Redirect idle users to this URL
    let idleTimeout; // variable to hold the timeout, do not modify
    
    const resetIdleTimeout = function() {
    
        // Clears the existing timeout
        if(idleTimeout) clearTimeout(idleTimeout);
    
        // Set a new idle timeout to load the redirectUrl after idleDurationSecs
        idleTimeout = setTimeout(() => location.href = redirectUrl, idleDurationSecs * 1000);
    };
    
    // Init on page load
    resetIdleTimeout();
    
    // Reset the idle timeout on any of the events listed below
    ['click', 'touchstart', 'mousemove'].forEach(evt => 
        document.addEventListener(evt, resetIdleTimeout, false)
    );
});

</script>
@endsection