@extends('layouts.dashboard')

@section('title', app()->getLocale() == 'ar' ? 'الملف الشخصي' : 'Profile')

@section('page-content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">
        <i class="bi bi-person me-2"></i>
        {{ app()->getLocale() == 'ar' ? 'الملف الشخصي' : 'Profile' }}
    </h1>
</div>

<div class="row">
    <!-- Profile Information -->
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header bg-white">
                <h5 class="mb-0">
                    <i class="bi bi-info-circle me-2"></i>
                    {{ app()->getLocale() == 'ar' ? 'معلومات الحساب' : 'Account Information' }}
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="text-center mb-4">
                        @if($user->avatar)
                            <img src="{{ asset($user->avatar) }}" class="rounded-circle" width="120" height="120">
                        @else
                            <i class="bi bi-person-circle" style="font-size: 120px; color: #ddd;"></i>
                        @endif
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">
                            {{ app()->getLocale() == 'ar' ? 'صورة الملف الشخصي' : 'Profile Picture' }}
                        </label>
                        <input type="file" name="avatar" class="form-control" accept="image/*">
                        <div class="form-text">{{ app()->getLocale() == 'ar' ? 'الحد الأقصى: 2 ميجا' : 'Max: 2MB' }}</div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">
                                {{ app()->getLocale() == 'ar' ? 'الاسم الكامل' : 'Full Name' }}
                                <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="name" class="form-control" value="{{ old('name', $user->name) }}" required>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">
                                {{ app()->getLocale() == 'ar' ? 'البريد الإلكتروني' : 'Email' }}
                                <span class="text-danger">*</span>
                            </label>
                            <input type="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">
                            {{ app()->getLocale() == 'ar' ? 'رقم الهاتف' : 'Phone' }}
                        </label>
                        <input type="text" name="phone" class="form-control" value="{{ old('phone', $user->phone) }}">
                    </div>
                    
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-circle me-2"></i>
                        {{ app()->getLocale() == 'ar' ? 'حفظ التغييرات' : 'Save Changes' }}
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Change Password -->
    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-white">
                <h5 class="mb-0">
                    <i class="bi bi-shield-lock me-2"></i>
                    {{ app()->getLocale() == 'ar' ? 'تغيير كلمة المرور' : 'Change Password' }}
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('profile.change-password') }}" method="POST">
                    @csrf
                    
                    <div class="mb-3">
                        <label class="form-label">
                            {{ app()->getLocale() == 'ar' ? 'كلمة المرور الحالية' : 'Current Password' }}
                        </label>
                        <input type="password" name="current_password" class="form-control" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">
                            {{ app()->getLocale() == 'ar' ? 'كلمة المرور الجديدة' : 'New Password' }}
                        </label>
                        <input type="password" name="new_password" class="form-control" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">
                            {{ app()->getLocale() == 'ar' ? 'تأكيد كلمة المرور' : 'Confirm Password' }}
                        </label>
                        <input type="password" name="new_password_confirmation" class="form-control" required>
                    </div>
                    
                    <button type="submit" class="btn btn-warning w-100">
                        <i class="bi bi-key me-2"></i>
                        {{ app()->getLocale() == 'ar' ? 'تغيير كلمة المرور' : 'Change Password' }}
                    </button>
                </form>
            </div>
        </div>
        
        <!-- Account Info -->
        <div class="card mt-4">
            <div class="card-header bg-white">
                <h5 class="mb-0">
                    <i class="bi bi-info-circle me-2"></i>
                    {{ app()->getLocale() == 'ar' ? 'معلومات إضافية' : 'Additional Info' }}
                </h5>
            </div>
            <div class="card-body">
                <p class="mb-2">
                    <strong>{{ app()->getLocale() == 'ar' ? 'تاريخ التسجيل:' : 'Member Since:' }}</strong><br>
                    {{ $user->created_at->format('d M Y') }}
                </p>
                <p class="mb-0">
                    <strong>{{ app()->getLocale() == 'ar' ? 'آخر تحديث:' : 'Last Updated:' }}</strong><br>
                    {{ $user->updated_at->diffForHumans() }}
                </p>
            </div>
        </div>
    </div>
</div>
@endsection