@extends('layouts.account', ['title' => 'إعدادات الملف الشخصي | RaseedNow'])

@section('account_content')
    <div class="kd-page-head">
        <h1>إعدادات الملف الشخصي</h1>
    </div>

    <div class="kd-two-col">
        <section class="kd-card">
            <div class="kd-card-head"><h2>المعلومات الشخصية</h2></div>
            <form method="POST" action="{{ route('account.profile.update') }}" class="kd-form" enctype="multipart/form-data">
                @csrf
                @method('PATCH')
                <div class="kd-profile-photo-editor">
                    <span class="kd-profile-photo">
                        @if($user->avatarSrc())<img src="{{ $user->avatarSrc() }}" alt="صورتك الشخصية">@else<span>{{ mb_strtoupper(mb_substr($user->display_name ?: $user->name, 0, 1)) }}</span>@endif
                    </span>
                    <div>
                        @php
                            $profileRank = $user->rankMeta();
                        @endphp
                        <strong>صورتك الشخصية <i class="rn-rank-verify is-{{ $profileRank['class'] }}" title="{{ $profileRank['label'] }}">{{ $profileRank['icon'] }}</i></strong>
                        <span class="kd-profile-rank-name">{{ $profileRank['label'] }}</span>
                        <small>ارفع صورة واضحة بصيغة JPG أو PNG أو WebP، بحد أقصى 4MB.</small>
                        <label class="kd-photo-button">تغيير الصورة<input type="file" name="avatar" accept="image/jpeg,image/png,image/webp" data-profile-avatar-input></label>
                    </div>
                    @if($user->avatar_url)<label class="kd-remove-photo"><input type="checkbox" name="remove_avatar" value="1"> حذف الصورة الحالية</label>@endif
                </div>
                <label><span>الاسم الكامل</span><input name="name" value="{{ old('name', $user->name) }}" required></label>
                <label><span>اسم العرض</span><input name="display_name" value="{{ old('display_name', $user->display_name) }}"></label>
                <label><span>البريد الإلكتروني</span><input value="{{ $user->email }}" disabled></label>
                <label><span>رقم الهاتف</span><input name="phone" value="{{ old('phone', $user->phone) }}"></label>
                <label><span>اللغة</span><select name="locale"><option value="ar" @selected($user->locale === 'ar')>العربية</option><option value="en" @selected($user->locale === 'en')>English</option></select></label>
                <button class="kd-primary" type="submit">حفظ التغييرات</button>
            </form>
        </section>

        <section class="kd-card">
            <div class="kd-card-head"><h2>تغيير كلمة المرور</h2></div>
            <form method="POST" action="{{ route('account.profile.password') }}" class="kd-form">
                @csrf
                @method('PATCH')
                <label><span>كلمة المرور الحالية</span><input name="current_password" type="password" required></label>
                <label><span>كلمة المرور الجديدة</span><input name="password" type="password" required></label>
                <label><span>تأكيد كلمة المرور الجديدة</span><input name="password_confirmation" type="password" required></label>
                <button class="kd-primary" type="submit">تغيير كلمة المرور</button>
            </form>
        </section>
    </div>

    <script>
        document.querySelector('[data-profile-avatar-input]')?.addEventListener('change', function () {
            const file = this.files?.[0];
            const preview = document.querySelector('.kd-profile-photo');
            if (!file || !preview) return;
            preview.innerHTML = '';
            const image = document.createElement('img');
            image.src = URL.createObjectURL(file);
            image.alt = 'معاينة الصورة الجديدة';
            preview.appendChild(image);
        });
    </script>
@endsection