@extends('layouts.admin')

@section('title', 'Reset Password')
@section('page-title', 'Reset Password: ' . $user->name)

@section('content')
<div class="max-w-2xl">
    <!-- User Info Card -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <div class="flex items-center gap-4 mb-4">
            <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center text-2xl text-gray-600 font-bold">
                {{ strtoupper(substr($user->name, 0, 1)) }}
            </div>
            <div>
                <h2 class="text-xl font-bold text-gray-800">{{ $user->name }}</h2>
                <p class="text-gray-500">{{ $user->email }}</p>
                <div class="flex gap-2 mt-1">
                    @foreach($user->roles as $role)
                        <span class="px-2 py-0.5 rounded-full text-xs font-medium
                            {{ $role->name === 'admin' ? 'bg-red-100 text-red-700' : 
                               ($role->name === 'vendor' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700') }}">
                            {{ ucfirst($role->name) }}
                        </span>
                    @endforeach
                </div>
            </div>
        </div>

        <hr class="border-gray-200 my-4">

        <div class="grid grid-cols-2 gap-4 text-sm">
            <div>
                <span class="text-gray-500">Created:</span>
                <span class="font-medium">{{ $user->created_at->format('M d, Y') }}</span>
            </div>
            <div>
                <span class="text-gray-500">Last Updated:</span>
                <span class="font-medium">{{ $user->updated_at->format('M d, Y') }}</span>
            </div>
        </div>
    </div>

    <!-- Password Reset Form -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="font-bold text-gray-800 mb-4">Set New Password</h3>

        <form action="{{ route('admin.password-resets.reset', $user) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">New Password *</label>
                <input type="password" name="password" required 
                    class="w-full border border-gray-300 rounded-lg px-3 py-2 @error('password') border-red-500 @enderror"
                    placeholder="Enter new password (min 8 characters)">
                @error('password')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Confirm Password *</label>
                <input type="password" name="password_confirmation" required 
                    class="w-full border border-gray-300 rounded-lg px-3 py-2"
                    placeholder="Confirm new password">
            </div>

            <div class="flex gap-4">
                <button type="submit" class="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700">
                    Reset Password
                </button>
                <a href="{{ route('admin.password-resets.index') }}" class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300">
                    Cancel
                </a>
            </div>
        </form>

        <hr class="border-gray-200 my-6">

        <h4 class="font-medium text-gray-800 mb-3">Alternative: Send Reset Link</h4>
        <form action="{{ route('admin.password-resets.send-link', $user) }}" method="POST">
            @csrf
            <p class="text-sm text-gray-500 mb-3">
                Send a password reset link to the user's email address.
            </p>
            
            <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
                Send Reset Link
            </button>
        </form>
    </div>
</div>
@endsection