{{-- resources/views/auth/reset-password.blade.php --}}
@extends('layouts.horizontalLayoutMaster')

@section('title', 'Reset Password')

@section('page-style')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .auth-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 40px;
        }

        .auth-inner {
            width: 100%;
            max-width: 440px;
        }

        .card {
            padding: 30px;
            border-radius: 12px;
        }

        .btn-primary {
            width: 100%;
            margin-top: 20px;
        }

        .form-title {
            font-size: 20px;
            margin-bottom: 10px;
            text-align: center;
        }

        .form-description {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 25px;
            text-align: center;
        }
    </style>
@endsection

@section('content')
    <div class="auth-wrapper">
        <div class="auth-inner">
            <div class="card shadow">
                <div class="card-body">
                    <h4 class="form-title">Reset Your Password</h4>
                    <p class="form-description">Please enter your email and new password to continue.</p>

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('password.store') }}">
                        @csrf

                        {{-- Password Reset Token --}}
                        <input type="hidden" name="token" value="{{ $request->route('token') }}">

                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address</label>
                            <input id="email" class="form-control" type="email" name="email"
                                value="{{ old('email', $request->email) }}" required autofocus>
                        </div>

                        <div class="mb-3">
                            <label for="password" class="form-label">New Password</label>
                            <input id="password" class="form-control" type="password" name="password" required
                                autocomplete="new-password">
                        </div>

                        <div class="mb-3">
                            <label for="password_confirmation" class="form-label">Confirm Password</label>
                            <input id="password_confirmation" class="form-control" type="password"
                                name="password_confirmation" required autocomplete="new-password">
                        </div>

                        <button type="submit" class="btn btn-primary">Reset Password</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection