@extends('frontend.layout.app')

@section('content')
<div class="breadcumb-wrapper" data-bg-src="{{ asset('frontend/assets/img/breadcumb/breadcumb-bg.jpg') }}">
    <div class="container z-index-common">
        <div class="breadcumb-content">
            <h1 class="breadcumb-title">Reset Your Password</h1>
            <div class="breadcumb-menu-wrap">
                <ul class="breadcumb-menu">
                    <li><a href="{{route('index')}}">Home</a></li>
                    <li>Reset Your Password</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="site-main">
    <section class="login-section bg-light py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-5 col-md-8">
                    <div class="wrap-login p-4 border rounded shadow-sm bg-white">

                        @if (Session::has('flash_success'))
                            <div class="alert alert-success">
                                {{ Session::get('flash_success') }}
                            </div>
                        @endif

                        @if (Session::has('flash_error'))
                            <div class="alert alert-danger">
                                {{ Session::get('flash_error') }}
                            </div>
                        @endif

                        <h4 class="text-center mb-4">Reset Password</h4>

                        <form action="{{ url('update-password') }}" method="POST" id="resetPasswordForm">
                            @csrf

                            <input type="hidden" name="token" value="{{ Request::get('token') }}">

                            <!-- Email -->
                            <div class="form-group">
                                <label>Email Address</label>
                                <input type="email"
                                       class="form-control"
                                       name="email"
                                       value="{{ Request::get('email') }}"
                                       readonly>
                                @error('email')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <br>

                            <!-- New Password -->
                            <div class="form-group position-relative">
                                <label>New Password</label>
                                <input type="password"
                                       id="password"
                                       class="form-control"
                                       name="password">
                                <span class="toggle-password"
                                      onclick="togglePassword('password', this)">Show</span>
                                @error('password')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <br>

                            <!-- Confirm Password -->
                            <div class="form-group position-relative">
                                <label>Confirm Password</label>
                                <input type="password"
                                       id="password_confirmation"
                                       class="form-control"
                                       name="password_confirmation">
                                <span class="toggle-password"
                                      onclick="togglePassword('password_confirmation', this)">Show</span>
                            </div>
                            <br>

                            <button type="submit" class="btn btn-primary w-100">
                                Submit
                            </button>
                            <br><br>

                            <a href="{{ route('login') }}" class="btn btn-secondary w-100">
                                Login
                            </a>

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

{{-- CSS --}}
<style>
.toggle-password {
    position: absolute;
    right: 15px;
    top: 38px;
    cursor: pointer;
    font-size: 14px;
    color: #0d6efd;
    user-select: none;
}
</style>

{{-- JavaScript --}}
<script>
function togglePassword(fieldId, el) {
    const input = document.getElementById(fieldId);

    if (input.type === "password") {
        input.type = "text";
        el.innerText = "Hide";
    } else {
        input.type = "password";
        el.innerText = "Show";
    }
}
</script>
@endsection