@extends('includes.layout') <!-- Extend the layout -->
@section('content')
    <!-- Define the content section -->
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="p-5 login-form">
                    <nav class="justify-content-center">
                        <ul class="nav nav-pills" id="nav-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab"
                                    data-bs-target="#nav-home" role="tab" aria-controls="nav-home"
                                    aria-selected="true">Reset Password</button>
                            </li>    
                        </ul>
                    </nav>

                    <div class="tab-content py-5" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-home" role="tabpanel"
                            aria-labelledby="nav-home-tab">

                            @if (session('status'))
                                <div class="mb-4 font-medium text-sm text-green-600">
                                    {{ session('status') }}
                                </div>
                            @endif

                            <x-validation-errors class="mb-4" />

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

                                <div class="mb-4">
                                    <input type="email"  placeholder="Email *"
                                        class="py-2 form-control rounded-0 border-0 tx-14 border-bottom"  id="email" name="email" value="{{ $request->email }}" required autofocus autocomplete="username" />
                                </div>
                                <div class="mb-4">
                                    <input placeholder="New Password *"
                                        class="py-2 form-control rounded-0 border-0 tx-14 border-bottom"  id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
                                </div>
                                <div class="mb-4">
                                    <input placeholder="Confirm New Password *"
                                        class="py-2 form-control rounded-0 border-0 tx-14 border-bottom"  id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" />
                                </div>
                               <div class="mb-2 text-end">
								
                                <a class="text-decoration-none  tx-13" href="{{ route('password.request') }}">Forget password ?</a>
								</div>
                                
                        
                                <button type="submit" class="btn btn-dark w-100 fw-bold mt-3 rounded-pill py-3">{{ __('Reset Password') }}</button>
                            
                            </form>
                        </div>
                       
                    </div>
                </div>
            </div>
            <div class="col-md-6 p-0 d-none d-sm-block">
                <img src="{{ asset('assets/images/login.png') }}" class="img-fluid" alt="Login Image" />
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@endsection