@if (!empty($user) && !empty($user->reset_password_token))
    

<title>{{ $page_title }}</title>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="./stylesheets/style.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://doc.invoicecreateur.com/view/css/AdminLTE.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<style>
    html,
    body {
        height: 100%;
    }

    .login-page,
    .register-page {
        height: 100%;
    }

    .global-container {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
    }

    form {
        padding-top: 10px;
        font-size: 14px;
        margin-top: 30px;
    }

    .card-title {
        font-weight: 300;
    }

    .btn {
        font-size: 14px;
        margin-top: 20px;
    }


    .login-form {
        width: 330px;
        margin: 20px;
    }

    .sign-up {
        text-align: center;
        padding: 20px 0 0;
    }

    .alert {
        margin-bottom: -30px;
        font-size: 13px;
        margin-top: 20px;
    }

    #spinner {
        visibility: hidden;
        display: none;
        width: 80px;
        height: 80px;

        border: 2px solid #f3f3f3;
        border-top: 3px solid #f25a41;
        border-radius: 100%;

        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;

        animation: spin 1s infinite linear;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    #spinner.show {
        visibility: visible;
        display: block;
    }

    #overlay {
        position: fixed;
        top: 0;
        z-index: 100;
        width: 100%;
        height: 100%;
        display: none;
        background: rgba(0, 0, 0, 0.6);
    }
</style>

<!-- this will show our spinner -->
<div id="overlay">
    <div id="spinner"></div>
</div>

<div class="global-container">
    <div class="card login-form">


        <div class="card-body">
            <h3 class="card-title text-center">{{ $title }}</h3>
            <div class="card-text">
                <div class="alert hidden" id="messagediv">
                </div>

                <form id="loginform" method="POST">

                    <div class="form-group">
                        <label for="exampleInputEmail1">New Password</label>
                        <input type="password" class="form-control form-control-sm" id="new_password"
                            name="new_password" aria-describedby="emailHelp" required>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Confirm Password</label>
                        <input type="password" name="confirm_password" class="form-control form-control-sm"
                            id="confirm_password" required>
                    </div>
                    <input type="hidden" id="code" value="{{ $token }}">

                    <input type="submit" value="Submit" class="btn btn-primary btn-block">

                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        const spinner = document.getElementById("spinner");

        function showSpinner() {
            spinner.className = "show";
        }

        $('#loginform').on('submit', function(e) {

         
            e.preventDefault();
            showSpinner();
            $("#overlay").fadeIn(300);
            $("#messagediv").addClass("hidden");
            $("#messagediv").removeClass("alert-success");
            $("#messagediv").removeClass("alert-danger");
            const data = {
                "password": $("#new_password").val(),
                "password_confirm": $("#confirm_password").val(),
                "reset_password_token": $("#code").val()
            };
            var url = '{{ route("update_password") }}';
            fetch(url, {
                    method: "POST",
                    body: JSON.stringify(data),
                    headers: {
                        "Content-type": "application/json; charset=UTF-8",
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                }).then(response => response.json())
                .then(data => {
                    setTimeout(function() {
                        $("#overlay").fadeOut(300);
                    }, 500);
                    if (data.code == 200) {
                        $("#messagediv").removeClass("hidden");
                        $("#messagediv").addClass("alert-success");
                        $("#messagediv").html(data.message);
                        $("#new_password").val("")
                        $("#confirm_password").val("")
                    } else {
                        $("#messagediv").removeClass("hidden");
                        $("#messagediv").addClass("alert-danger");
                        $("#messagediv").html(data.message);
                    }
                });
        });
    });
</script>
@else
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="./stylesheets/style.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> 	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>	
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link href="https://doc.invoicecreateur.com/view/css/AdminLTE.min.css" rel="stylesheet" />
	<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<style>
    .login-page, .register-page {
        height: 100%;
    }
</style>
<style>
    html,
    body {
        height: 100%;
    }

    .login-page, .register-page {
        height: 100%;
    }

    .global-container {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
    }

    form {
        padding-top: 10px;
        font-size: 14px;
        margin-top: 30px;
    }

    .card-title {
        font-weight: 300;
    }

    .btn {
        font-size: 14px;
        margin-top: 20px;
    }

    .login-form {
        width: 330px;
        margin: 20px;
    }

    .sign-up {
        text-align: center;
        padding: 20px 0 0;
    }

    .alert {
        margin-bottom: -30px;
        font-size: 13px;
        margin-top: 20px;
    }

    #spinner {
        visibility: hidden;
        display: none;
        width: 80px;
        height: 80px;

        border: 2px solid #f3f3f3;
        border-top: 3px solid #f25a41;
        border-radius: 100%;

        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;

        animation: spin 1s infinite linear;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    #spinner.show {
        visibility: visible;
        display: block;
    }

    #overlay {
        position: fixed;
        top: 0;
        z-index: 100;
        width: 100%;
        height: 100%;
        display: none;
        background: rgba(0, 0, 0, 0.6);
    }
</style>
<div class="global-container">
    <div class="card login-form">
        <div class="card-body">
            <div class="card-text">
                <div class="row">
                    <div class="col-xs-12">
                        <h2 class="text-center">Oops !!</h2>
                        <hr>
                        <div class="alert alert-error">
                            <strong>Error! </strong>{{$error}}.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif