@extends('layouts.app')

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

@section('content')

<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-black via-red-900 to-black px-4">

    <div class="w-full max-w-md bg-black/80 rounded-3xl p-8 shadow-xl">

        <!-- Header -->
        <div class="text-center mb-6">
            <a href="{{ route('home') }}">
                <img src="{{ asset('images/playmax247-logo.png') }}" alt="Playmax247" class="h-12 mx-auto">
            </a>
            <h2 class="text-2xl font-bold text-white mt-4">Reset Your Password</h2>
        </div>

        <!-- Errors -->
        @if ($errors->any())
        <div class="bg-red-600 text-white p-3 rounded-lg mb-4 text-center">
            {{ $errors->first() }}
        </div>
        @endif

        @if(session('status'))
        <div class="bg-green-600 text-white p-3 rounded-lg mb-4 text-center">
            {{ session('status') }}
        </div>
        @endif

        <!-- Reset Form -->
        <form method="POST" action="{{ route('password.update') }}" class="space-y-5">
            @csrf

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

            <!-- New Password -->
            <div>
                <label class="block text-gray-300 mb-2 text-sm font-semibold">New Password</label>
                <input
                    type="password"
                    name="password"
                    class="w-full px-4 py-3 rounded-xl bg-gray-800 border border-gray-700 focus:border-red-500 text-white"
                    placeholder="Enter new password"
                    required
                >
            </div>

            <!-- Confirm Password -->
            <div>
                <label class="block text-gray-300 mb-2 text-sm font-semibold">Confirm Password</label>
                <input
                    type="password"
                    name="password_confirmation"
                    class="w-full px-4 py-3 rounded-xl bg-gray-800 border border-gray-700 focus:border-red-500 text-white"
                    placeholder="Re-enter new password"
                    required
                >
            </div>

            <!-- Submit -->
            <div>
                <button
                    type="submit"
                    class="w-full text-center bg-red-600 hover:bg-red-700 text-white font-bold py-3 rounded-xl transition"
                >
                    Set New Password
                </button>
            </div>

        </form>

        <!-- Back to Login -->
        <p class="text-center text-gray-400 text-sm mt-4">
            Remember your password?
            <a href="{{ route('login') }}" class="text-red-500 hover:underline">Login</a>
        </p>

    </div>

</div>

@endsection