@extends('layouts.app_auth')

@section('title', 'Reset')

@section('css')
<style>
    .login-wrap{
        width:100%;
        margin:auto;
        max-width:450px;
        min-height:550px;
        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">
        <div class="login-form">
            <h2>Terlupa Kata Laluan</h2>
            <form action="{{ route('password.update') }}" method="POST">
                @csrf
                <input type="hidden" name="token" value="{{ $token }}">
                <div class="sign-up-htm">
                    <div class="group">
                        <label for="pass" class="label">E-mel</label>
                        <input type="email" class="input" name="email" value="{{ old('email') }}" onblur="checkEmail($(this))" required autocomplete="email" style="margin-bottom: 5px">
                    </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">
                    </div>
                    <div class="group">
                        <button type="submit" class="button">Hantar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div> -->
<label class="tab active">Reset Kata Laluan</label>
<br><br>
<form action="{{ route('password.update') }}" method="POST">
    @csrf
    <input type="hidden" name="token" value="{{ $token }}">
    <div class="sign-up-htm">
        <div class="group">
            <label for="pass" class="label">E-mel</label>
            <input type="email" class="input" name="email" value="{{ old('email') }}" onblur="checkEmail($(this))" required autocomplete="email" style="margin-bottom: 5px">
        </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">
        </div>
        <div class="group">
            <button type="submit" class="button">Hantar</button>
        </div>
    </div>
</form>
@endsection

@section('js')
    <script>
        $(document).ready(() => {
            $('.login-html a').remove();
        });

        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