@extends('layouts.app')

@section('title', 'Profile')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Profile</h1>
        <p class="text-gray-600">Manage your account settings</p>
    </div>

    <!-- Profile Form -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <form method="POST" action="{{ route('profile.update') }}" class="space-y-6">
            @csrf
            @method('PUT')
            
            <!-- Personal Information -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Personal Information</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label>
                        <input type="text" id="name" name="name" value="{{ $user->name }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#BF6679] focus:border-[#BF6679]">
                    </div>
                    
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                        <input type="email" id="email" name="email" value="{{ $user->email }}" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#BF6679] focus:border-[#BF6679]">
                    </div>
                </div>
            </div>

            <!-- Role Information -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Account Information</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Role</label>
                        <div class="px-3 py-2 bg-gray-100 rounded-md">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
                                @if($user->role === 'admin') bg-purple-100 text-purple-800
                                @elseif($user->role === 'vendor') bg-blue-100 text-blue-800
                                @elseif($user->role === 'buyer') bg-green-100 text-green-800
                                @else bg-gray-100 text-gray-800
                                @endif">
                                {{ ucfirst($user->role) }}
                            </span>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Member Since</label>
                        <div class="px-3 py-2 bg-gray-100 rounded-md">
                            {{ $user->created_at->format('F j, Y') }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Vendor Specific Information -->
            @if($user->role === 'vendor' && $user->vendor)
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Vendor Information</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Company Name</label>
                        <div class="px-3 py-2 bg-gray-100 rounded-md">
                            {{ $user->vendor->company_name ?? 'Not set' }}
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">KYC Status</label>
                        <div class="px-3 py-2 bg-gray-100 rounded-md">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
                                @if($user->vendor->kyc_status === 'verified') bg-green-100 text-green-800
                                @elseif($user->vendor->kyc_status === 'waiting') bg-orange-100 text-orange-800
                                @elseif($user->vendor->kyc_status === 'progress') bg-blue-100 text-blue-800
                                @elseif($user->vendor->kyc_status === 'rejected') bg-red-100 text-red-800
                                @else bg-gray-100 text-gray-800
                                @endif">
                                {{ ucfirst($user->vendor->kyc_status ?? 'pending') }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Submit Button -->
            <div class="flex justify-end">
                <button type="submit" class="bg-[#BF6679] text-white px-6 py-2 rounded-lg hover:bg-[#A34E5D] transition-colors">
                    Update Profile
                </button>
            </div>
        </form>
    </div>
</div>
@endsection