@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto mt-10 bg-white p-6 rounded shadow" dir="rtl">
    @if (session('success'))
        <div class="mb-4 text-green-600 bg-green-100 border border-green-300 rounded p-3">
            {{ session('success') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="mb-4 text-red-600 bg-red-100 border border-red-300 rounded p-3">
            <ul class="list-disc pl-5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="space-y-4">
        @csrf
        @method('PUT')

        <div class="flex items-center gap-4">
                @php
                    $avatar = $user->avatar ? basename($user->avatar) : null;
                    $avatarKey = $avatar ? ('avatars/' . $avatar) : null;
                    $avatarUrl = ($avatarKey && \Illuminate\Support\Facades\Storage::disk('public')->exists($avatarKey))
                        ? \Illuminate\Support\Facades\Storage::disk('public')->url($avatarKey)
                        : asset('images/default-avatar.png');
                @endphp
                <img src="{{ $avatarUrl }}"
                     class="w-20 h-20 rounded-full object-cover border" alt="الصورة الشخصية">
            <input type="file" name="avatar" accept="image/*"
                   class="text-sm text-brand-text file:mr-3 file:py-2 file:px-4 file:border file:rounded file:text-sm file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
        </div>

        <div>
            <label class="block font-semibold mb-1">الاسم الكامل</label>
            <input type="text" name="name" value="{{ old('name', $user->name) }}" required
                   class="w-full border rounded p-2 focus:outline-none focus:ring focus:border-blue-300">
        </div>

        <div>
            <label class="block font-semibold mb-1">البريد الإلكتروني</label>
            <input type="email" name="email" value="{{ old('email', $user->email) }}" disabled
                   class="w-full border rounded p-2 bg-brand-secondary cursor-not-allowed">
        </div>

        <div>
            <label class="block font-semibold mb-1">الجنس</label>
            <select name="gender" class="w-full border rounded p-2">
                <option value="male" {{ old('gender', $user->gender) === 'male' ? 'selected' : '' }}>ذكر</option>
                <option value="female" {{ old('gender', $user->gender) === 'female' ? 'selected' : '' }}>أنثى</option>
            </select>
        </div>

        <div>
            <label class="block font-semibold mb-1">البلد</label>
            <input type="text" name="country" value="{{ old('country', $user->country) }}"
                   class="w-full border rounded p-2">
        </div>

        <div>
            <label class="block font-semibold mb-1">كلمة المرور الجديدة</label>
            <input type="password" name="password" placeholder="اتركه فارغًا إن لم ترغب بالتغيير"
                   class="w-full border rounded p-2">
        </div>

        <div>
            <label class="block font-semibold mb-1">تأكيد كلمة المرور</label>
            <input type="password" name="password_confirmation"
                   class="w-full border rounded p-2">
        </div>

        <button type="submit"
                class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition">
            حفظ التغييرات
        </button>
    </form>
</div>
@endsection