@extends('layouts.auth')

@section('styles')

@endsection

@section('content')
    <!-- CONTAINER OPEN -->                
    <div class="">
        <div class="text-center">
            <a href="javascript::void();"><img src="{{ asset('build/assets/images/brand/desktop-dark.png') }}" class="header-brand-img m-0" alt=""></a>
        </div>
    </div>
    <div class="container-lg">
        <div class="row justify-content-center mt-4 mx-0">
            <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
                <div class="card shadow-none">
                    <div class="card-body p-sm-6">
                        <div class="text-center mb-4">
                            <h4 class="mb-1">Forgot Password?</h4>
                            <p>Enter your email address registered on your account</p>
                        </div>
                        <form action="{{ route('password-reset') }}" method="post">
                            @csrf

                            <div class="row">
                                <input type="hidden" name="email" value="{{ $email }}">
                                <input type="hidden" name="token" value="{{ $token }}">

                                <div class="col-sm-12">
                                    <div class="mb-3">
                                        <label class="mb-2 fw-500">New Password <span class="text-danger ms-1">*</span></label>
                                        <div class="input-group has-validation">
                                            <input type="password" name="password" class="form-control ms-0 @error('password') is-password-invalid is-invalid @enderror" placeholder="Enter your New Password" id="reset-password">
                                            <button type="button" class="btn btn-light" onclick="createpassword('reset-password',this)" id="button-addon21"><i class="ri-eye-off-line align-middle"></i></button>

                                            @error('password')
                                                <span class="invalid-feedback d-block" role="alert">
                                                    {{ $message }}
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-12">
                                    <div class="mb-3">
                                        <label class="mb-2 fw-500">Confirm Password <span class="text-danger ms-1">*</span></label>
                                        <div class="input-group has-validation">
                                            <input type="password" name="password_confirmation" class="form-control ms-0 @error('password_confirmation') is-password-invalid is-invalid @enderror" placeholder="Confirm your Password" id="reset-password-confirm">
                                            <button type="button" class="btn btn-light" onclick="createpassword('reset-password-confirm',this)" id="button-addon21"><i class="ri-eye-off-line align-middle"></i></button>

                                            @error('password_confirmation')
                                                <span class="invalid-feedback d-block" role="alert">
                                                    {{ $message }}
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-12">
                                    <div class="d-grid mb-3">
                                        <button type="submit" class="btn btn-primary"> Submit</a>
                                    </div>
                                    <div class="text-center">
                                        <p class="mb-0 tx-14">Remembered your password?
                                            <a href="{{ route('get.login') }}" class="tx-primary ms-1 text-decoration-underline">Sign In</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- CONTAINER CLOSED -->
@endsection

@section('scripts')
    <!-- Show Password JS -->
    <script src="{{asset('build/assets/show-password.js')}}"></script>
@endsection