<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تعديل البروفايل - {{ $user->name }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .edit-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .edit-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 20px 20px 0 0;
            padding: 2rem;
            text-align: center;
        }
        .form-control, .form-select {
            border-radius: 10px;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
        }
        .form-control:focus, .form-select:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        .form-label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 0.5rem;
        }
        .btn-save {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border: none;
            border-radius: 25px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-save:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .btn-cancel {
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
            border: none;
            border-radius: 25px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-cancel:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .current-image {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #667eea;
        }
        .image-preview {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #28a745;
            display: none;
        }
        .password-section {
            background-color: #f8f9fa;
            border-radius: 15px;
            padding: 1.5rem;
            margin-top: 1rem;
        }
        .section-title {
            color: #667eea;
            font-weight: 600;
            margin-bottom: 1rem;
            border-bottom: 2px solid #667eea;
            padding-bottom: 0.5rem;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="edit-card">
                    <!-- رأس الصفحة -->
                    <div class="edit-header">
                        <h2 class="mb-2">
                            <i class="fas fa-user-edit me-2"></i>
                            تعديل البروفايل
                        </h2>
                        <p class="mb-0 opacity-75">قم بتحديث معلوماتك الشخصية</p>
                    </div>

                    <!-- نموذج التعديل -->
                    <div class="p-4">
                        <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <!-- رسائل الأخطاء -->
                            @if($errors->any())
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    <strong>يرجى تصحيح الأخطاء التالية:</strong>
                                    <ul class="mb-0 mt-2">
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif

                            <!-- المعلومات الأساسية -->
                            <div class="section-title">
                                <i class="fas fa-info-circle me-2"></i>
                                المعلومات الأساسية
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="name" class="form-label">
                                            <i class="fas fa-user me-2"></i>
                                            الاسم
                                        </label>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                                               id="name" name="name" value="{{ old('name', $user->name) }}" required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $error }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="email" class="form-label">
                                            <i class="fas fa-envelope me-2"></i>
                                            البريد الإلكتروني
                                        </label>
                                        <input type="email" class="form-control @error('email') is-invalid @enderror"
                                               id="email" name="email" value="{{ old('email', $user->email) }}" required>
                                        @error('email')
                                            <div class="invalid-feedback">{{ $error }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="phone" class="form-label">
                                            <i class="fas fa-phone me-2"></i>
                                            رقم الهاتف
                                        </label>
                                        <input type="text" class="form-control @error('phone') is-invalid @enderror"
                                               id="phone" name="phone" value="{{ old('phone', $user->phone) }}">
                                        @error('phone')
                                            <div class="invalid-feedback">{{ $error }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="notes" class="form-label">
                                            <i class="fas fa-sticky-note me-2"></i>
                                            الملاحظات
                                        </label>
                                        <textarea class="form-control @error('notes') is-invalid @enderror"
                                                  id="notes" name="notes" rows="3">{{ old('notes', $user->notes) }}</textarea>
                                        @error('notes')
                                            <div class="invalid-feedback">{{ $error }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- الصورة الشخصية -->
                            <div class="section-title">
                                <i class="fas fa-camera me-2"></i>
                                الصورة الشخصية
                            </div>

                            <div class="row align-items-center">
                                <div class="col-md-4 text-center">
                                    @if($user->profile_image)
                                        <img src="{{ asset('storage/' . $user->profile_image) }}" alt="الصورة الحالية" class="current-image mb-2">
                                        <br>
                                        <small class="text-muted">الصورة الحالية</small>
                                    @else
                                        <div class="current-image d-flex align-items-center justify-content-center bg-light text-muted mb-2">
                                            <i class="fas fa-user fa-2x"></i>
                                        </div>
                                        <br>
                                        <small class="text-muted">لا توجد صورة</small>
                                    @endif
                                </div>
                                <div class="col-md-4 text-center">
                                    <img id="imagePreview" alt="معاينة الصورة" class="image-preview mb-2">
                                    <br>
                                    <small class="text-muted">معاينة الصورة الجديدة</small>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="profile_image" class="form-label">
                                            <i class="fas fa-upload me-2"></i>
                                            اختر صورة جديدة
                                        </label>
                                        <input type="file" class="form-control @error('profile_image') is-invalid @enderror"
                                               id="profile_image" name="profile_image" accept="image/*">
                                        @error('profile_image')
                                            <div class="invalid-feedback">{{ $error }}</div>
                                        @enderror
                                        <small class="form-text text-muted">
                                            أنواع مدعومة: JPG, PNG, GIF. الحد الأقصى: 2MB
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <!-- تغيير كلمة المرور -->
                            <div class="password-section">
                                <div class="section-title">
                                    <i class="fas fa-lock me-2"></i>
                                    تغيير كلمة المرور
                                </div>
                                <small class="text-muted mb-3 d-block">
                                    اترك هذه الحقول فارغة إذا كنت لا تريد تغيير كلمة المرور
                                </small>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="current_password" class="form-label">
                                                <i class="fas fa-key me-2"></i>
                                                كلمة المرور الحالية
                                            </label>
                                            <input type="password" class="form-control @error('current_password') is-invalid @enderror"
                                                   id="current_password" name="current_password">
                                            @error('current_password')
                                                <div class="invalid-feedback">{{ $error }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="new_password" class="form-label">
                                                <i class="fas fa-lock me-2"></i>
                                                كلمة المرور الجديدة
                                            </label>
                                            <input type="password" class="form-control @error('new_password') is-invalid @enderror"
                                                   id="new_password" name="new_password">
                                            @error('new_password')
                                                <div class="invalid-feedback">{{ $error }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="new_password_confirmation" class="form-label">
                                                <i class="fas fa-check-circle me-2"></i>
                                                تأكيد كلمة المرور الجديدة
                                            </label>
                                            <input type="password" class="form-control"
                                                   id="new_password_confirmation" name="new_password_confirmation">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- أزرار الإجراءات -->
                            <div class="text-center mt-4">
                                <button type="submit" class="btn btn-save text-white me-3">
                                    <i class="fas fa-save me-2"></i>
                                    حفظ التغييرات
                                </button>
                                <a href="{{ route('profile') }}" class="btn btn-cancel text-white">
                                    <i class="fas fa-times me-2"></i>
                                    إلغاء
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // معاينة الصورة
        document.getElementById('profile_image').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const preview = document.getElementById('imagePreview');

            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                }
                reader.readAsDataURL(file);
            } else {
                preview.style.display = 'none';
            }
        });

        // إظهار/إخفاء حقول كلمة المرور
        document.getElementById('new_password').addEventListener('input', function() {
            const currentPasswordField = document.getElementById('current_password');
            if (this.value) {
                currentPasswordField.required = true;
            } else {
                currentPasswordField.required = false;
            }
        });
    </script>
</body>
</html>
