@extends('layouts.app')

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

@section('content')
<div class="container py-5">

  {{-- Success Message --}}
  @if(session('success'))
    <div class="alert alert-success">
      {{ session('success') }}
    </div>
  @endif

  <div class="row">

    {{-- Profile Info --}}
    <div class="col-md-4">
      <div class="card mb-4 shadow-sm">
        <div class="card-body text-center">

          {{-- Avatar --}}
          @if($user->avatar)
            <img 
              src="{{ asset('storage/' . $user->avatar) }}" 
              alt="Avatar" 
              class="rounded-circle mb-3" 
              width="100" height="100">
          @else
            <div 
              class="rounded-circle bg-secondary text-white d-inline-flex align-items-center justify-content-center mb-3"
              style="width: 100px; height: 100px; font-size: 2rem;">
              {{ strtoupper(substr($user->name, 0, 1)) }}
            </div>
          @endif

          <h4 class="card-title mb-1">{{ $user->name }}</h4>
          <p class="text-muted mb-2">{{ $user->email }}</p>

          @if($user->bio)
            <p class="mb-3">{{ $user->bio }}</p>
          @else
            <p class="text-muted mb-3">You haven't added a bio yet.</p>
          @endif

          <a href="{{ route('profile.edit') }}" class="btn btn-primary mt-2">Edit Profile</a>
        </div>
      </div>
    </div>

    {{-- User Posts --}}
    <div class="col-md-8">
      <h4 class="mb-3">Your Posts</h4>

      @forelse($posts as $post)
        <div class="card mb-3 shadow-sm">
          <div class="card-body">
            <h5 class="card-title">{{ $post->title }}</h5>
            <p class="text-muted mb-1">Posted {{ $post->created_at->diffForHumans() }}</p>
            <p>{{ \Illuminate\Support\Str::limit($post->content, 200) }}</p>

            {{-- Action Buttons --}}
            <div class="d-flex gap-2">
              <a href="{{ route('posts.edit', $post->id) }}" class="btn btn-sm btn-outline-secondary">Edit</a>
              <form action="{{ route('posts.destroy', $post->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this post?');">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
              </form>
            </div>
          </div>
        </div>
      @empty
        <p class="text-muted">You haven't published any posts yet.</p>
      @endforelse

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