@extends('layouts.app')
@section('title', 'الملف الشخصي')
@section('breadcrumb')<li class="breadcrumb-item active">الملف الشخصي</li>@endsection

@section('content')
<div class="row g-3">
    <div class="col-xl-4">
        <div class="card">
            <div class="card-body text-center">
                <img src="{{ $user->avatar_url }}" alt="" class="rounded-circle mb-3" style="width:96px;height:96px;object-fit:cover">
                <h2 class="h5 fw-bold mb-1">{{ $user->name }}</h2>
                <div class="text-muted small mb-2">{{ $user->job_title ?: 'مستخدم' }}</div>
                <div>
                    @foreach ($user->roles as $role)
                        {!! badge(\App\Http\Controllers\UserController::ROLE_LABELS[$role->name] ?? $role->name, 'primary') !!}
                    @endforeach
                </div>

                <ul class="detail-list text-start mt-4">
                    <li><span class="dl-label">البريد</span><span class="dl-value">{{ $user->email }}</span></li>
                    <li><span class="dl-label">الجوال</span><span class="dl-value">{{ $user->phone ?: '—' }}</span></li>
                    <li><span class="dl-label">آخر دخول</span><span class="dl-value">{{ arabicDate($user->last_login_at, true) }}</span></li>
                    <li><span class="dl-label">تاريخ الانضمام</span><span class="dl-value">{{ arabicDate($user->created_at) }}</span></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-xl-8">
        <div class="card mb-3">
            <div class="card-header"><span><i class="fa-solid fa-user-pen text-primary ms-2"></i>تعديل البيانات الشخصية</span></div>
            <div class="card-body">
                <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf @method('PUT')
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">الاسم <span class="req">*</span></label>
                            <input type="text" name="name" value="{{ old('name', $user->name) }}" class="form-control" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">البريد الإلكتروني <span class="req">*</span></label>
                            <input type="email" name="email" value="{{ old('email', $user->email) }}" class="form-control" dir="ltr" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">رقم الجوال</label>
                            <input type="text" name="phone" value="{{ old('phone', $user->phone) }}" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">المسمى الوظيفي</label>
                            <input type="text" name="job_title" value="{{ old('job_title', $user->job_title) }}" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">الصورة الشخصية</label>
                            <input type="file" name="avatar" class="form-control" accept="image/*">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary mt-3"><i class="fa-solid fa-floppy-disk ms-2"></i>حفظ البيانات</button>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><span><i class="fa-solid fa-key text-warning ms-2"></i>تغيير كلمة المرور</span></div>
            <div class="card-body">
                <form action="{{ route('profile.password') }}" method="POST">
                    @csrf @method('PUT')
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">كلمة المرور الحالية <span class="req">*</span></label>
                            <input type="password" name="current_password" class="form-control" dir="ltr" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">كلمة المرور الجديدة <span class="req">*</span></label>
                            <input type="password" name="password" class="form-control" dir="ltr" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">تأكيد كلمة المرور <span class="req">*</span></label>
                            <input type="password" name="password_confirmation" class="form-control" dir="ltr" required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-warning mt-3"><i class="fa-solid fa-key ms-2"></i>تغيير كلمة المرور</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection