@extends('front.layouts.app')


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

        <!-- PROFILE HEADER (CENTERED ROW) -->
        <div class="row justify-content-center align-items-center text-center text-md-start mb-5">

            <!-- COLUMN 1: IMAGE -->
            <div class="col-md-3 mb-3 mb-md-0 text-center">

                <img src="{{ asset('storage/' . $author->image) }}" alt="Author Image" class="rounded-circle shadow-sm"
                    width="130" height="130" style="object-fit: cover; aspect-ratio: 1/1;">

            </div>

            <!-- COLUMN 2: NAME + DESIGNATION + EMAIL -->
            <div class="col-md-4 mb-3 mb-md-0">

                <h3 class="fw-bold mb-1">
                    {{ $author->name }}
                </h3>

                <p class="text-muted mb-1">
                    {{ $author->designation }}
                </p>

                <p class="text-secondary small mb-0">
                    {{ $author->email }}
                </p>

                <!-- SMALL STATS -->
                <div class="mt-3">
                    <span class="badge bg-light text-dark border">
                        {{ $author->blogPosts->count() }} Articles
                    </span>
                </div>

            </div>

            <!-- COLUMN 3: BIO -->
            <div class="col-md-5">

                <p class="text-muted mb-0" style="line-height: 1.7;">
                    {{ $author->bio }}
                </p>

            </div>

        </div>

        <!-- DIVIDER -->
        <hr class="my-4">

        <!-- ARTICLES TITLE -->
        <div class="text-center mb-4">
            <h4 class="fw-bold">Articles by {{ $author->name }}</h4>
            <p class="text-muted">Latest posts written by this author</p>
        </div>

        <!-- BLOG GRID -->
        <div class="row g-4">

            @foreach ($author->blogPosts as $post)
                <div class="col-md-4">

                    <div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden">

                        <img src="{{ asset('storage/blog-images/featured/' . $post->featured_image) }}" class="w-100"
                            style="height: 190px; object-fit: cover;">

                        <div class="p-3">

                            <h6 class="fw-bold">
                                {{ $post->title }}
                            </h6>

                            <p class="text-muted small">
                                {{ Str::limit($post->excerpt, 90) }}
                            </p>

                            <a href="{{ route('blog.details-show', $post->id) }}"
                                class="btn btn-sm btn-outline-primary rounded-pill">
                                Read More
                            </a>

                        </div>

                    </div>

                </div>
            @endforeach

        </div>

    </div>
@endsection