@extends('layouts.auth')

@section('title', 'Select Account Type')

@section('content')
<div class="min-h-screen flex items-center justify-center gradient-bg p-4">
    <div class="w-full max-w-2xl animate-fade-in">
        <div class="bg-white rounded-2xl shadow-2xl p-8">
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
                    <i class="fas fa-user-check text-2xl text-blue-600"></i>
                </div>
                <h2 class="text-2xl font-bold text-gray-800">Welcome!</h2>
                <p class="text-gray-500 mt-2">Choose how you want to use our platform</p>
            </div>

            <form method="POST" action="{{ route('auth.role-selection.process') }}">
                @csrf
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Customer Option -->
                    <label class="cursor-pointer group">
                        <input type="radio" name="role" value="customer" class="peer sr-only" required>
                        <div class="h-full p-6 border-2 border-gray-200 rounded-xl peer-checked:border-blue-500 peer-checked:bg-blue-50 transition-all hover:border-blue-300">
                            <div class="text-center">
                                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition">
                                    <i class="fas fa-shopping-bag text-3xl text-green-600"></i>
                                </div>
                                <h3 class="text-xl font-semibold text-gray-800 mb-2">I'm a Customer</h3>
                                <p class="text-gray-500 text-sm mb-4">I want to browse and buy auto parts</p>
                                
                                <ul class="text-left text-sm text-gray-600 space-y-2">
                                    <li><i class="fas fa-check text-green-500 mr-2"></i>Browse products</li>
                                    <li><i class="fas fa-check text-green-500 mr-2"></i>Place orders</li>
                                    <li><i class="fas fa-check text-green-500 mr-2"></i>Track shipments</li>
                                    <li><i class="fas fa-check text-green-500 mr-2"></i>Write reviews</li>
                                </ul>
                            </div>
                        </div>
                    </label>

                    <!-- Vendor Option -->
                    <label class="cursor-pointer group">
                        <input type="radio" name="role" value="vendor" class="peer sr-only">
                        <div class="h-full p-6 border-2 border-gray-200 rounded-xl peer-checked:border-blue-500 peer-checked:bg-blue-50 transition-all hover:border-blue-300">
                            <div class="text-center">
                                <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition">
                                    <i class="fas fa-store text-3xl text-purple-600"></i>
                                </div>
                                <h3 class="text-xl font-semibold text-gray-800 mb-2">I'm a Vendor</h3>
                                <p class="text-gray-500 text-sm mb-4">I want to sell auto parts</p>
                                
                                <ul class="text-left text-sm text-gray-600 space-y-2">
                                    <li><i class="fas fa-check text-purple-500 mr-2"></i>List products</li>
                                    <li><i class="fas fa-check text-purple-500 mr-2"></i>Manage inventory</li>
                                    <li><i class="fas fa-check text-purple-500 mr-2"></i>Process orders</li>
                                    <li><i class="fas fa-check text-purple-500 mr-2"></i>Grow your business</li>
                                </ul>
                            </div>
                        </div>
                    </label>
                </div>

                @error('role')
                    <p class="text-red-500 text-center mt-4">{{ $message }}</p>
                @enderror

                <div class="mt-8 text-center">
                    <button type="submit" class="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
                        Continue
                        <i class="fas fa-arrow-right ml-2"></i>
                    </button>
                </div>
            </form>

            <p class="mt-6 text-center text-sm text-gray-500">
                <i class="fas fa-info-circle mr-1"></i>
                Vendors require admin approval before going live
            </p>
        </div>
    </div>
</div>
@endsection
