@extends('admin.layouts.app')

@section('title', 'Chi tiết bài viết')
@section('page-title', 'Chi tiết bài viết')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-6">
            <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-6">
            <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
        </div>
    @endif

    <!-- Article Header -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <div class="flex justify-between items-start mb-4">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">{{ $article->title }}</h1>
                <p class="text-sm text-gray-500 mt-1">
                    <i class="fas fa-link mr-1"></i>{{ $article->slug }}
                </p>
            </div>
            <div class="flex space-x-2">
                <a href="{{ route('admin.articles.edit', $article) }}" 
                   class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                    <i class="fas fa-edit mr-2"></i>Sửa bài viết
                </a>
                <a href="{{ route('admin.articles.index') }}" 
                   class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Quay lại
                </a>
            </div>
        </div>

        <div class="flex flex-wrap gap-4 text-sm text-gray-600">
            <div class="flex items-center">
                <i class="fas fa-user mr-2"></i>
                <span>{{ $article->author_name ?? $article->author->name ?? 'Không xác định' }}</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-tag mr-2"></i>
                <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">
                    {{ $article->category ?? 'Chưa phân loại' }}
                </span>
            </div>
            <div class="flex items-center">
                <span class="px-2 py-1 rounded-full text-xs {{ $article->status_badge }}">
                    {{ $article->status_label }}
                </span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-eye mr-2"></i>
                <span>{{ number_format($article->view_count) }} lượt xem</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-heart mr-2"></i>
                <span>{{ number_format($article->likes_count) }} lượt thích</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-clock mr-2"></i>
                <span>Tạo: {{ $article->created_at->format('d/m/Y H:i') }}</span>
            </div>
            @if($article->published_at)
            <div class="flex items-center">
                <i class="fas fa-calendar mr-2"></i>
                <span>Xuất bản: {{ $article->published_at->format('d/m/Y H:i') }}</span>
            </div>
            @endif
        </div>
    </div>

    <!-- Featured Image -->
    @if($article->featured_image)
    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Hình ảnh đại diện</h3>
        <div class="max-w-md">
            <img src="{{ asset('storage/' . $article->featured_image) }}" 
                 alt="{{ $article->title }}" 
                 class="w-full h-auto rounded-lg shadow-md">
        </div>
    </div>
    @endif

    <!-- Article Content -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Nội dung bài viết</h3>
        
        @if($article->excerpt)
        <div class="mb-6">
            <h4 class="text-sm font-medium text-gray-700 mb-2">Tóm tắt:</h4>
            <p class="text-gray-600 leading-relaxed">{{ $article->excerpt }}</p>
        </div>
        @endif

        <div class="prose max-w-none">
            {!! $article->content !!}
        </div>
    </div>

    <!-- SEO Information -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Thông tin SEO</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h4 class="text-sm font-medium text-gray-700 mb-2">Meta Title:</h4>
                <p class="text-gray-600">{{ $article->meta_title ?: 'Chưa có' }}</p>
            </div>
            <div>
                <h4 class="text-sm font-medium text-gray-700 mb-2">Meta Description:</h4>
                <p class="text-gray-600">{{ $article->meta_description ?: 'Chưa có' }}</p>
            </div>
        </div>
    </div>

    <!-- Tags -->
    @if($article->tags && count($article->tags) > 0)
    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Tags</h3>
        <div class="flex flex-wrap gap-2">
            @foreach($article->tags as $tag)
            <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">
                {{ $tag }}
            </span>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Author Information -->
    {{-- <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Thông tin tác giả</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h4 class="text-sm font-medium text-gray-700 mb-2">Tên tác giả:</h4>
                <p class="text-gray-600">{{ $article->author_name ?: 'Chưa có' }}</p>
            </div>
            <div>
                <h4 class="text-sm font-medium text-gray-700 mb-2">Email tác giả:</h4>
                <p class="text-gray-600">{{ $article->author_email ?: 'Chưa có' }}</p>
            </div>
        </div>
    </div> --}}
</div>
@endsection