@extends('layouts.app')

@section('title', 'Edit Profile')

@section('content')
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-md-6">

      <div class="card shadow-sm">
        <div class="card-body">
          <h4 class="mb-4 text-center">تعديل البروفايل</h4>

          @if($errors->any())
            <div class="alert alert-danger">
              <ul class="mb-0">
                @foreach($errors->all() as $error)
                  <li>{{ $error }}</li>
                @endforeach
              </ul>
            </div>
          @endif

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

            {{-- الاسم --}}
            <div class="mb-3">
              <label class="form-label">الاسم</label>
              <input
                type="text"
                name="name"
                class="form-control"
                value="{{ old('name', $user->name) }}"
                required
              >
            </div>

            {{-- النبذة --}}
            <div class="mb-3">
              <label class="form-label">نبذة عنك (bio)</label>
              <textarea
                name="bio"
                class="form-control"
                rows="3"
                placeholder="اكتب سطرين عن نفسك"
              >{{ old('bio', $user->bio) }}</textarea>
            </div>

            {{-- الصورة الشخصية --}}
            <div class="mb-3">
              <label class="form-label d-block">الصورة الشخصية (avatar)</label>

              @if($user->avatar)
                <div class="mb-2">
                  <img
                    src="{{ asset('storage/'.$user->avatar) }}"
                    alt="Avatar"
                    class="rounded-circle border"
                    width="80"
                    height="80"
                  >
                </div>
              @endif

              <input type="file" name="avatar" class="form-control">
              <small class="text-muted">jpg, jpeg, png, webp — حد أقصى 2MB</small>
            </div>

            <button type="submit" class="btn btn-success w-100">
              حفظ التغييرات
            </button>
          </form>

          <a href="{{ route('profile.show') }}" class="btn btn-link mt-3 w-100">
            العودة إلى البروفايل
          </a>
        </div>
      </div>

    </div>
  </div>
</div>
@endsection