<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login</title>
    @include('frontend.layouts.style')
    <style>
        .container {
            min-height: calc(100vh - 24px);
            ;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .register-form {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .regForm {
            min-width: 50%;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            padding: 15px;
            background-color: #f3f3f3;
        }

        .butn {
            background-color: #272727;
            color: rgb(255, 255, 255);
            padding: 8px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin-top: 11px;
        }

        .butn:hover {
            background-color: #080808;
            color: rgb(189, 189, 189);

        }

        .form-control:focus {
            border-color: #272727 !important;
            box-shadow: none !important;
        }

        .form-label {
            margin-top: 11px !important;
            margin-bottom: 0px !important;
            font-size: 13px;
        }

        @media only screen and (max-width: 768px) {
            .regForm {
                min-width: 90%;

            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="register-form">

            <form action="{{ route('update.password') }}" method="POST" class="regForm">
                @csrf
                <input type="hidden" name="token" value="{{ $token }}">

                @if (session('status'))
                    <div class="alert alert-success">
                        {{ session('status') }}
                    </div>
                @elseif(session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif

                <div class="navbar-brand d-flex justify-content-center">
                    <div class="logo">
                        <img src="{{ asset('assets/img/logo/01.webp') }}" alt=""width="90" height="30">
                    </div>
                </div>
                <label for="email" class="form-label">Email</label><br>
                <input type="email" id="email" name="email" class="form-control"
                    aria-describedby="passwordHelpBlock">
                @error('email')
                    <div class="text-danger">{{ $message }}</div>
                @enderror

                <label for="current_password" class="form-label">Current Password</label><br>
                <input type="password" id="current_password" name="current_password" class="form-control"
                    aria-describedby="current_passwordHelpBlock">
                @error('current_password')
                    <div class="text-danger">{{ $message }}</div>
                @enderror

                <label for="password" class="form-label">New Password</label><br>
                <input type="password" id="password" name="password" class="form-control"
                    aria-describedby="passwordHelpBlock">
                @error('password')
                    <div class="text-danger">{{ $message }}</div>
                @enderror

                <label for="confirmPassword" class="form-label">Confirm Password</label><br>
                <input type="password" id="confirmPassword" name="password_confirmation"
                    class="form-control @error('password_confirmation') is-invalid @enderror"
                    aria-describedby="passwordHelpBlock" required>


                <div>
                    <div class="mt-1">
                        <input type="checkbox" id="chk"> <span class="form-label">show password</span>
                    </div>

                    <div class="d-flex justify-content-between align-items-end">
                        <button type="submit" class="butn rounded-1">Update Password</button>
                        <div>
                        </div>
                    </div>
            </form>

        </div>
    </div>


    @include('frontend.layouts.script');
    <script>
        const pwd = document.getElementById('password');
        const chk = document.getElementById('chk');

        chk.onchange = function(e) {
            pwd.type = chk.checked ? "text" : "password";
        }
    </script>
</body>

</html>
