@extends('layouts.responsive')

@section('title', 'Profile Settings')

@section('content')
<div class="space-y-6 pb-20">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white">Profile Settings</h1>
            <p class="text-gray-400 text-sm">Manage your personal information and account details</p>
        </div>
    </div>

    <!-- Profile Information -->
    <div class="bg-dark-800/50 border border-dark-600/50 rounded-xl p-6">
        <div class="flex items-center mb-6">
            <div class="w-20 h-20 rounded-full overflow-hidden mr-6 border-2 border-primary-400/30">
                @if($user->profile_picture)
                    <img src="{{ $user->profile_picture }}" alt="{{ $user->first_name }}" class="w-full h-full object-cover">
                @else
                    <div class="w-full h-full bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center">
                        <span class="text-white font-bold text-2xl">{{ strtoupper(substr($user->first_name, 0, 1)) }}</span>
                    </div>
                @endif
            </div>
            <div>
                <h3 class="text-white font-semibold text-xl">{{ $user->full_name }}</h3>
                <p class="text-gray-400 text-sm">{{ $user->email }}</p>
                <p class="text-gray-400 text-sm">{{ $user->phone }}</p>
                <div class="mt-2">
                    @if($user->hasCompletedKyc())
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400">
                            <i class="fas fa-check-circle mr-1"></i>
                            Verified Account
                        </span>
                    @else
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-500/20 text-yellow-400">
                            <i class="fas fa-exclamation-triangle mr-1"></i>
                            KYC Pending
                        </span>
                    @endif
                </div>
            </div>
        </div>

        <!-- Profile Form -->
        <form method="POST" action="{{ route('settings.profile.update') }}" class="space-y-6">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="first_name" class="form-label">
                        First Name
                    </label>
                    <input id="first_name" type="text" name="first_name" 
                           value="{{ old('first_name', $user->first_name) }}" 
                           class="form-input @error('first_name') border-red-500 @enderror" 
                           placeholder="Enter your first name"
                           required>
                    @error('first_name')
                        <p class="mt-2 text-sm text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                        </p>
                    @enderror
                </div>

                <div>
                    <label for="last_name" class="form-label">
                        Last Name
                    </label>
                    <input id="last_name" type="text" name="last_name" 
                           value="{{ old('last_name', $user->last_name) }}" 
                           class="form-input @error('last_name') border-red-500 @enderror" 
                           placeholder="Enter your last name"
                           required>
                    @error('last_name')
                        <p class="mt-2 text-sm text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                        </p>
                    @enderror
                </div>
            </div>

            <div>
                <label for="email" class="form-label">
                    Email Address
                    @if($user->hasVerifiedEmail())
                        <span class="inline-flex items-center px-2 py-0.5 ml-2 rounded text-xs font-medium bg-green-500/20 text-green-400">
                            <i class="fas fa-check-circle mr-1"></i>Verified
                        </span>
                    @else
                        <span class="inline-flex items-center px-2 py-0.5 ml-2 rounded text-xs font-medium bg-yellow-500/20 text-yellow-400">
                            <i class="fas fa-exclamation-triangle mr-1"></i>Unverified
                        </span>
                    @endif
                </label>
                <input id="email" type="email" name="email" 
                       value="{{ old('email', $user->email) }}" 
                       class="form-input @error('email') border-red-500 @enderror" 
                       placeholder="Enter your email address"
                       required>
                @if(!$user->hasVerifiedEmail())
                    <p class="mt-1 text-sm text-yellow-400">
                        <i class="fas fa-info-circle mr-1"></i>
                        Changing your email will require re-verification.
                    </p>
                @endif
                @error('email')
                    <p class="mt-2 text-sm text-red-400 flex items-center">
                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                    </p>
                @enderror
            </div>

            <div>
                <label for="phone" class="form-label">
                    Phone Number
                    @if($user->hasVerifiedPhone())
                        <span class="inline-flex items-center px-2 py-0.5 ml-2 rounded text-xs font-medium bg-green-500/20 text-green-400">
                            <i class="fas fa-check-circle mr-1"></i>Verified
                        </span>
                    @else
                        <span class="inline-flex items-center px-2 py-0.5 ml-2 rounded text-xs font-medium bg-yellow-500/20 text-yellow-400">
                            <i class="fas fa-exclamation-triangle mr-1"></i>Unverified
                        </span>
                    @endif
                </label>
                <input id="phone" type="tel" name="phone" 
                       value="{{ old('phone', $user->phone) }}" 
                       class="form-input @error('phone') border-red-500 @enderror" 
                       placeholder="08012345678"
                       required>
                @if(!$user->hasVerifiedPhone())
                    <p class="mt-1 text-sm text-yellow-400">
                        <i class="fas fa-info-circle mr-1"></i>
                        Changing your phone will require re-verification.
                    </p>
                @endif
                @error('phone')
                    <p class="mt-2 text-sm text-red-400 flex items-center">
                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                    </p>
                @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="date_of_birth" class="form-label">
                        Date of Birth
                    </label>
                    <input id="date_of_birth" type="date" name="date_of_birth" 
                           value="{{ old('date_of_birth', $user->date_of_birth ? $user->date_of_birth->format('Y-m-d') : '') }}" 
                           class="form-input @error('date_of_birth') border-red-500 @enderror">
                    @error('date_of_birth')
                        <p class="mt-2 text-sm text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                        </p>
                    @enderror
                </div>

                <div>
                    <label for="gender" class="form-label">
                        Gender
                    </label>
                    <select id="gender" name="gender" 
                            class="form-input @error('gender') border-red-500 @enderror">
                        <option value="">Select Gender</option>
                        <option value="male" {{ old('gender', $user->gender) == 'male' ? 'selected' : '' }}>Male</option>
                        <option value="female" {{ old('gender', $user->gender) == 'female' ? 'selected' : '' }}>Female</option>
                        <option value="other" {{ old('gender', $user->gender) == 'other' ? 'selected' : '' }}>Other</option>
                    </select>
                    @error('gender')
                        <p class="mt-2 text-sm text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                        </p>
                    @enderror
                </div>
            </div>

            <button type="submit" class="btn btn-primary w-full py-4 text-base font-semibold">
                <i class="fas fa-save mr-2"></i>
                Update Profile
            </button>
        </form>
    </div>

    <!-- Account Information -->
    <div class="bg-dark-800/50 border border-dark-600/50 rounded-xl p-6">
        <h3 class="text-white font-semibold text-lg mb-4">Account Information</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="form-label">Account Created</label>
                <div class="bg-dark-700/50 border border-dark-600/50 rounded-lg p-3">
                    <p class="text-white">{{ $user->created_at->format('M d, Y') }}</p>
                    <p class="text-gray-400 text-sm">{{ $user->created_at->diffForHumans() }}</p>
                </div>
            </div>
            
            <div>
                <label class="form-label">Last Updated</label>
                <div class="bg-dark-700/50 border border-dark-600/50 rounded-lg p-3">
                    <p class="text-white">{{ $user->updated_at->format('M d, Y') }}</p>
                    <p class="text-gray-400 text-sm">{{ $user->updated_at->diffForHumans() }}</p>
                </div>
            </div>
            
            <div>
                <label class="form-label">Account Status</label>
                <div class="bg-dark-700/50 border border-dark-600/50 rounded-lg p-3">
                    <div class="flex items-center">
                        <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
                        <span class="text-white">Active</span>
                    </div>
                </div>
            </div>
            
            <div>
                <label class="form-label">{{ setting('business.name', 'AbokiPay') }} User ID</label>
                <div class="bg-dark-700/50 border border-dark-600/50 rounded-lg p-3">
                    <p class="text-white font-mono">#{{ str_pad($user->id, 6, '0', STR_PAD_LEFT) }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Security Settings -->
    <div class="bg-dark-800/50 border border-dark-600/50 rounded-xl p-6">
        <h3 class="text-white font-semibold text-lg mb-4">Security Settings</h3>
        
        <div class="space-y-4">
            <a href="{{ route('settings.security') }}" class="flex items-center justify-between p-4 bg-dark-700/50 hover:bg-dark-600/50 border border-dark-600/50 rounded-lg transition-colors">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-blue-500/20 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-lock text-blue-400"></i>
                    </div>
                    <div>
                        <h4 class="text-white font-medium">Change Password</h4>
                        <p class="text-gray-400 text-sm">Update your account password</p>
                    </div>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </a>
            
            <div class="flex items-center justify-between p-4 bg-dark-700/50 border border-dark-600/50 rounded-lg">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-500/20 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-shield-alt text-green-400"></i>
                    </div>
                    <div>
                        <h4 class="text-white font-medium">Two-Factor Authentication</h4>
                        <p class="text-gray-400 text-sm">{{ $user->two_factor_secret ? 'Enabled' : 'Disabled' }}</p>
                    </div>
                </div>
                <div class="w-12 h-6 bg-gray-600 rounded-full p-1 {{ $user->two_factor_secret ? 'bg-green-500' : '' }}">
                    <div class="w-4 h-4 bg-white rounded-full transition-transform {{ $user->two_factor_secret ? 'translate-x-6' : '' }}"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Danger Zone -->
    <div class="bg-red-500/10 border border-red-500/30 rounded-xl p-6">
        <h3 class="text-red-400 font-semibold text-lg mb-4">Danger Zone</h3>
        
        <div class="space-y-4">
            <div class="flex items-center justify-between p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
                <div>
                    <h4 class="text-red-400 font-medium">Close Account</h4>
                    <p class="text-red-300 text-sm">Permanently delete your {{ setting('business.name', 'AbokiPay') }} account</p>
                </div>
                <button class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors">
                    Close Account
                </button>
            </div>
        </div>
    </div>
</div>
@endsection