@extends('layouts.app')

@section('content')


<!-- Header Section -->
<div class="relative pt-32 pb-12 bg-[#15171e] border-b border-white/5">
    <div class="absolute inset-0 bg-gradient-to-b from-mwb-secondary/5 to-transparent pointer-events-none"></div>
    <div class="max-w-4xl mx-auto px-4 text-center relative z-10">
        <h1 class="text-4xl md:text-5xl font-bold display-font text-white mb-6">
            Claim Your <span class="text-transparent bg-clip-text bg-gradient-to-r from-mwb-secondary to-mwb-accent">Share</span>
        </h1>
        <p class="text-gray-400 text-lg max-w-xl mx-auto">
            Join the network today. Secure your identity, start accumulating MeWeBe Coin, and be part of the future of shared prosperity.
        </p>
    </div>
</div>

<!-- Main Registration Section -->
<div class="py-16 bg-[#1a1c23]">
    <div class="max-w-md mx-auto px-4">
        <div class="bg-mwb-card border border-white/5 rounded-2xl p-8 shadow-2xl">

            @if(session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-3" role="alert">
                    <strong class="font-bold">Success!</strong>
                    <span class="block sm:inline">{{ session('success') }}</span>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger">
                    
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-3" role="alert">
                        <strong class="font-bold">Error!</strong>
                        <span class="block sm:inline">{{ session('error') }}</span>
                    </div>
                </div>
            @endif

            <!-- Manual Form -->
            <form method="POST" action="{{ route('UserResetPassword') }}">
                @csrf
                <div class="space-y-1">
                    <label class="text-sm text-gray-400 font-medium ml-1">Password</label>
                    <input type="hidden" class="form-control w-full form-input rounded-lg py-3 pl-10 pr-4 mb-3 text-black" name="verification_key" value="{{ $token }}"  >
                    <div class="relative">
                        <span class="absolute left-3 top-3 text-gray-500 material-symbols-outlined text-lg">lock</span>
                        <input id="password" type="password" class="form-control w-full form-input rounded-lg py-3 pl-10 pr-4 mb-3 text-black @error('password') is-invalid @enderror" name="password" value="{{ old('password') }}" required >
                        @error('password')
                            <span class="invalid-feedback text-red-700" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>

                <div class="space-y-1">
                    <label class="text-sm text-gray-400 font-medium ml-1">Confirm Password</label>
                    <input type="hidden" class="form-control w-full form-input rounded-lg py-3 pl-10 pr-4 mb-3 text-black" name="verification_key" value="{{ $token }}"  >
                    <div class="relative">
                        <span class="absolute left-3 top-3 text-gray-500 material-symbols-outlined text-lg">lock</span>
                        <input id="confirm_password" type="confirm_password" class="form-control w-full form-input rounded-lg py-3 pl-10 pr-4 mb-3 text-black @error('confirm_password') is-invalid @enderror" name="confirm_password" value="{{ old('confirm_password') }}" required >
                        @error('confirm_password')
                            <span class="invalid-feedback text-red-700" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>
                
                <button type="submit" class="w-full py-4 bg-gradient-to-r from-mwb-secondary to-mwb-accent text-black font-bold text-lg rounded-xl hover:opacity-90 transition-all shadow-lg flex items-center justify-center gap-2 mt-3">
                     Reset Password 
                    <span class="material-symbols-outlined">arrow_forward</span>
                </button>

                <p class="text-center text-sm text-gray-500 mt-6">
                    Don't have an account? <a href="{{ route('register') }}" class="text-mwb-secondary hover:underline font-medium"> Join the Network </a>
                </p>

            </form>
        </div>

        <div class="text-center mt-8 opacity-60">
            <p class="text-xs text-gray-500 flex items-center justify-center gap-2">
                <span class="material-symbols-outlined text-sm">lock</span>
                Your data is encrypted and secure.
            </p>
        </div>
    </div>
</div>

@endsection