@extends('website::modern.layout.master')

@section('title', ($post->title ?? 'Blog Post') . ' - ' . ($data['values']['doctor_name'] ?? 'Doctor'))

@section('content')
    <!-- Page Header -->
    <section class="page-header py-5 bg-light">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h1 class="display-5 fw-bold mb-3">
                        {{ $post->title ?? 'Blog Post' }}
                    </h1>
                    @if($post->author || $post->published_at)
                        <div class="post-meta text-muted mb-4">
                            @if($post->author)
                                <span class="me-3">
                                    <i class="fas fa-user me-1"></i> {{ $post->author }}
                                </span>
                            @endif
                            @if($post->published_at)
                                <span>
                                    <i class="fas fa-calendar me-1"></i> {{ $post->published_at->format('M d, Y') }}
                                </span>
                            @endif
                        </div>
                    @endif
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center mb-0">
                            <li class="breadcrumb-item">
                                <a href="{{ url("website/preview/$template->slug?token=$token") }}" class="text-decoration-none">
                                    <i class="fas fa-home me-1"></i>Home
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ url("website/preview/$template->slug/blog?token=$token") }}" class="text-decoration-none">
                                    Blog
                                </a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Post</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>

    <!-- Blog Post Content -->
    <section class="blog-post-section py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <!-- Main Post Card -->
                    <div class="card border-0 shadow-sm mb-5">
                        <div class="card-body p-0">
                            <!-- Featured Image -->
                            @if($post->image)
                                <div class="post-featured-image">
                                    <img src="{{ asset($post->image) }}"
                                         alt="{{ $post->title }}"
                                         class="img-fluid w-100"
                                         style="max-height: 500px; object-fit: cover; border-radius: 0.5rem 0.5rem 0 0;">
                                </div>
                            @endif

                            <!-- Post Body -->
                            <div class="p-4 p-md-5">
                                <!-- Post Meta Info -->
                                <div class="d-flex flex-wrap align-items-center mb-4 pb-4 border-bottom">
                                    @if($post->author)
                                        <div class="d-flex align-items-center me-4 mb-2">
                                            <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-2"
                                                 style="width: 40px; height: 40px; font-size: 16px;">
                                                {{ strtoupper(substr($post->author, 0, 1)) }}
                                            </div>
                                            <div>
                                                <small class="text-muted d-block">Written by</small>
                                                <strong>{{ $post->author }}</strong>
                                            </div>
                                        </div>
                                    @endif
                                    @if($post->published_at)
                                        <div class="me-4 mb-2">
                                            <small class="text-muted d-block">Published on</small>
                                            <strong>{{ $post->published_at->format('F j, Y') }}</strong>
                                        </div>
                                    @endif
                                </div>

                                <!-- Post Content -->
                                <div class="post-content">
                                    <article class="prose">
                                        @if($post->content)
                                            <div class="post-body" style="font-size: 1.125rem; line-height: 1.8; color: #2d3748;">
                                                {!! nl2br(e($post->content)) !!}
                                            </div>
                                        @else
                                            <div class="post-body text-center py-5">
                                                <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                                                <p class="text-muted">No content available for this post.</p>
                                            </div>
                                        @endif
                                    </article>
                                </div>

                                <!-- Post Actions -->
                                <div class="d-flex justify-content-between align-items-center mt-5 pt-4 border-top">
                                    <a href="{{ url("website/preview/$template->slug/blog?token=$token") }}"
                                       class="btn btn-outline-primary">
                                        <i class="fas fa-arrow-left me-2"></i>Back to Blog
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Related Posts -->
                    @if(isset($relatedPosts) && $relatedPosts->count() > 0)
                        <div class="related-posts mt-5">
                            <h3 class="mb-4 fw-bold">Related Posts</h3>
                            <div class="row">
                                @foreach($relatedPosts as $relatedPost)
                                    <div class="col-md-4 mb-4">
                                        <div class="box h-100">
                                            @if($relatedPost->image)
                                                <img src="{{ asset($relatedPost->image) }}" alt="{{ $relatedPost->title }}">
                                            @else
                                                <img src="{{ asset('websites/modern') }}/image/blog-1.jpg" alt="{{ $relatedPost->title }}">
                                            @endif
                                            <div class="text">
                                                <h4>{{ Str::limit($relatedPost->title, 60) }}</h4>
                                                <div class="info">
                                                    @if($relatedPost->published_at)
                                                        <span class="clander">{{ $relatedPost->published_at->format('d F Y') }}</span>
                                                    @endif
                                                    <span class="event">Blog</span>
                                                </div>
                                            </div>
                                            <a href="{{ url("website/preview/$template->slug/post/$relatedPost->id?token=$token") }}" class="btn">
                                                Read more
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection