@extends('layouts.app')

@section("scripts")
    <script type="text/javascript">
        $(function () {
            const errorMess = $("#recovery-error");
            $("ul.navbar-nav").hide();

            $("#resetPassword").on("submit", function (e) {

                let pass = $("#pass1").val().trim();
                const r = /\d+/;
                let err = false;

                if(pass.length < 6)
                {
                    errorMess.html("Hasło powinno zawierać conajmniej 6 znaków");
                    err = true
                }else if(!pass.match(r))
                {
                    errorMess.html("Hasło powinno zawierać conajmniej 1 cyfrę");
                    err = true
                }else if(pass !== $("#pass2").val().trim())
                {
                    errorMess.html("Hasła różnią się od siebie");
                    err = true
                }
                if(err) {
                    e.preventDefault();
                    return false;
                }
            });

        });
    </script>
@endsection

@section('content')
    <div class="container py-4 mt-5">
            <img alt="logo" class="logo" src="https://pubcrime.pl/wp-content/uploads/2019/02/pub_crime_logo.png">
        <div class="d-flex flex-wrap justify-content-center">
            <form autocomplete="off" method="POST" action="/pubcrime-password/reset" id="resetPassword" class="text-center w-75" style="max-width: 700px;">
                @csrf
                <h2>
                    Utwórz nowe hasło
                </h2>
                <br>
                <input type="hidden" name="token" value="{{ $token }}">
                <input class="form-control" id="pass1" aria-label="Hasło" type="password" name="password" placeholder="Nowe hasło" maxlength="35"><br><br>
                <input class="form-control" id="pass2" style="margin-bottom: 10px;" aria-label="Powtórz hasło" type="password" placeholder="Powtórz hasło" maxlength="35"><br>
                <div><div id="recovery-loader" style="display:none;" class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
                </div>
                <span class="recovery-info" id="recovery-error"></span>
                @if($errors->any())
                    <span class="text-danger" role="alert">
                        <strong> {{ $errors->first() }} </strong>
                    </span>
                @endif
                <p class="staryanton" id="recovery-complete" style="display:none;color: #444; font-size: 15pt;">Hasło zostało zmienione!</p>
                <br>
                <input type="submit" id="changepass" value="Zmień hasło" class="btn btn-danger" style="transition-duration:0.3s; cursor: pointer; margin-top: 20px; font-size: 10pt; padding: 3px 60px; border-radius: 5px;">
            </form>
        </div>
    </div>
@endsection

@section("style")
    <style scoped>
        body{
            background-color:white;
            background-image: url('https://pubcrime.pl/wp-content/uploads/2019/02/tlo-karteczka.png') !important;
            padding: 0;
            margin: 0;
        }
        .logo{
            position: absolute;
            top: 0;
            left:0;
            right:0;
            margin: auto;
            max-width: 140px;
        }
    </style>
@endsection