@extends('layouts.app_auth')

@section('title', 'Reset')

@section('css')
<style>
    .login-wrap{
        width:100%;
        margin:auto;
        max-width:450px;
        min-height:520px;
        position:relative;
        font:600 16px/18px 'Open Sans',sans-serif;
    }
</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>Terlupa Kata Laluan</h2>
        <div class="login-form">
            <form action="{{ route('password.email') }}" method="POST">
                @csrf
                <div class="sign-up-htm">
                    <div class="group" style="color: white">
                        <p>Sila masukkan emel untuk reset kata laluan</p>
                    </div>
                    <br>
                    <div class="group">
                        <label for="pass" class="label">E-mel</label>
                        <input id="pass" type="email" class="input" name="email" value="{{ old('email') }}" onblur="checkEmail($(this))" required autocomplete="email" style="margin-bottom: 5px">
                    </div>
                    <div class="group">
                        <button type="submit" class="button">Hantar</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('password.email') }}" method="POST">
    @csrf
    <div class="sign-up-htm">
        <div class="group" style="color: white">
            <h4>Terlupa Kata Laluan?</h4>
            <p>Sila masukkan emel untuk reset kata laluan</p>
        </div>
        <br>
        <div class="group">
            <label for="pass" class="label">E-mel</label>
            <input id="pass" type="email" class="input" name="email" value="{{ old('email') }}" onblur="checkEmail($(this))" required autocomplete="email" style="margin-bottom: 5px">
        </div>
        <div class="group">
            <button type="submit" class="button">Hantar</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 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();
        }
    }
</script>
@endsection