@extends('layouts.auth')

@section('title', 'Create New Password - ' . setting('brand.name', 'Grace Family Church'))

@section('content')

<div class="login-container">

    <div class="card reset-card" style="max-width: 460px; width: 100%;">
        <div class="card-body">

            <div class="text-center mb-4">
                <div class="login-icon mx-auto" style="width: 60px; height: 60px; border-radius: 50%; background: #f5e6cc; color: #c8913a; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem;">
                    <i class="fas fa-lock"></i>
                </div>
                <h4 class="mt-3">Create New Password</h4>
                <p class="text-muted small">Choose a strong, secure password for your admin account.</p>
            </div>

            @include('partials.alerts')

            <form method="POST" action="{{ route('admin.reset.submit') }}">
                @csrf

                <input type="hidden" name="token" value="{{ $token }}">

                <div class="mb-3">
                    <label class="form-label fw-bold small" style="color: #1b2f9c;">Email Address</label>
                    <input type="email" name="email" class="form-control" placeholder="Enter your admin email address" required>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold small" style="color: #1b2f9c;">New Password</label>
                    <input type="password" name="password" class="form-control" placeholder="Enter a strong new password">
                </div>

                <div class="mb-4">
                    <label class="form-label fw-bold small" style="color: #1b2f9c;">Confirm Password</label>
                    <input type="password" name="password_confirmation" class="form-control" placeholder="Re-enter your new password">
                </div>

                <button class="btn btn-login w-100">
                    <i class="fas fa-check me-1"></i> Reset Password
                </button>

            </form>

            <div class="text-center mt-3">
                <a href="{{ route('admin.login') }}" class="forgot-link" style="color: #c8913a;">
                    <i class="fas fa-arrow-left me-1"></i> Back to Login
                </a>
            </div>

        </div>
    </div>

</div>

@endsection