@extends('layouts.admin')

@section('title', __('blog.view') . ' ' . __('blog.blog_posts') . ' - ' . $blog->title_en)

@section('content')
<div class="container-fluid" dir="{{ $text_direction }}">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('blog.blog_post_details') }}</h1>
            <p class="mb-0 text-muted">{{ __('blog.view_details_of') }} "{{ $blog->title_en }}"</p>
        </div>
        <div>
            <a href="{{ route('admin.blog.edit', ['locale' => app()->getLocale(), 'blog' => $blog]) }}" class="btn btn-primary">
                <i class="fas fa-edit"></i> {{ __('blog.edit_post') }}
            </a>
            <a href="{{ route('admin.blog.preview', ['locale' => app()->getLocale(), 'blog' => $blog]) }}" class="btn btn-secondary" target="_blank">
                <i class="fas fa-external-link-alt"></i> {{ __('blog.preview') }}
            </a>
            <a href="{{ route('admin.blog.list', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> {{ __('blog.back_to_posts') }}
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Main Content -->
        <div class="col-xl-8 col-lg-7">
            <!-- Post Header -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <div>
                        <h4 class="m-0 font-weight-bold text-primary">{{ $blog->title_en }}</h4>
                        <small class="text-muted">{{ $blog->title_ar }}</small>
                    </div>
                    <div class="text-right">
                        <span class="badge badge-{{ $blog->status == 'published' ? 'success' : ($blog->status == 'draft' ? 'warning' : 'secondary') }}">
                            {{ __('blog.' . $blog->status) }}
                        </span>
                        @if($blog->is_featured)
                            <span class="badge badge-warning ml-1">⭐ {{ __('blog.featured') }}</span>
                        @endif
                        @if($blog->is_pinned)
                            <span class="badge badge-info ml-1">📌 {{ __('blog.pinned') }}</span>
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    <!-- Featured Image -->
                    @if($blog->featured_image)
                    <div class="text-center mb-4">
                        <img src="{{ asset('storage/' . $blog->featured_image) }}" alt="{{ $blog->title_en }}" class="img-fluid rounded" style="max-height: 400px; object-fit: cover;">
                    </div>
                    @endif

                    <!-- Category and Author -->
                    <div class="mb-3">
                        <span class="text-muted">
                            <i class="fas fa-folder mr-1"></i>
                            {{ $blog->category ? $blog->category->name : __('blog.uncategorized') }}
                        </span>
                        <span class="mx-3">•</span>
                        <span class="text-muted">
                            <i class="fas fa-user mr-1"></i>
                            {{ $blog->author ? $blog->author->name : __('blog.unknown') }}
                        </span>
                        <span class="mx-3">•</span>
                        <span class="text-muted">
                            <i class="fas fa-calendar mr-1"></i>
                            {{ $blog->published_at ? $blog->published_at->format('M d, Y') : __('blog.not_set') }}
                        </span>
                        <span class="mx-3">•</span>
                        <span class="text-muted">
                            <i class="fas fa-eye mr-1"></i>
                            {{ $blog->views_count ?? 0 }} {{ __('blog.views') }}
                        </span>
                    </div>

                    <!-- English Content -->
                    <div class="mb-4">
                        <h5 class="font-weight-bold mb-2">{{ __('blog.english_content') }}</h5>
                        <div class="post-content">
                            {!! $blog->content_en !!}
                        </div>
                    </div>

                    <!-- Arabic Content -->
                    <div class="mb-4">
                        <h5 class="font-weight-bold mb-2">{{ __('blog.arabic_content') }}</h5>
                        <div class="post-content" dir="rtl">
                            {!! $blog->content_ar !!}
                        </div>
                    </div>

                    <!-- Gallery Images -->
                    @if($blog->gallery_images && count($blog->gallery_images) > 0)
                    <div class="mb-4">
                        <h5 class="font-weight-bold mb-3">{{ __('blog.gallery_images') }}</h5>
                        <div class="row">
                            @foreach($blog->gallery_images as $image)
                            <div class="col-md-4 mb-3">
                                <img src="{{ asset('storage/' . $image) }}" alt="Gallery Image" class="img-fluid rounded">
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <!-- Tags -->
                    @if($blog->tags)
                    <div class="mb-4">
                        <h5 class="font-weight-bold mb-2">{{ __('blog.tags') }}</h5>
                        <div>
                            @foreach(explode(',', $blog->tags) as $tag)
                                <span class="badge badge-primary mr-1">{{ trim($tag) }}</span>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Comments Section -->
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        {{ __('blog.comments') }}
                        <span class="badge badge-light">{{ $blog->comments()->count() }}</span>
                    </h6>
                </div>
                <div class="card-body">
                    @if($blog->comments()->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>{{ __('blog.author') }}</th>
                                        <th>{{ __('blog.content') }}</th>
                                        <th>{{ __('general.active') }}</th>
                                        <th>{{ __('blog.date') }}</th>
                                        <th>{{ __('general.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($blog->comments()->with('user')->latest()->take(5)->get() as $comment)
                                    <tr>
                                        <td>
                                            {{ $comment->user ? $comment->user->name : $comment->author_name }}
                                            @if($comment->user)
                                                <small class="text-muted d-block">{{ $comment->user->email }}</small>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="content-preview">{{ Str::limit(strip_tags($comment->content), 100) }}</div>
                                        </td>
                                        <td>
                                            <span class="badge badge-{{ $comment->status == 'approved' ? 'success' : ($comment->status == 'pending' ? 'warning' : 'danger') }}">
                                                {{ __('blog.' . $comment->status) }}
                                            </span>
                                        </td>
                                        <td>
                                            {{ $comment->created_at->format('M d, Y H:i') }}
                                        </td>
                                        <td>
                                            <a href="{{ route('admin.blog.comments.show', ['locale' => app()->getLocale(), 'comment' => $comment]) }}" class="btn btn-sm btn-info">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            @if($comment->status != 'approved')
                                                <form action="{{ route('admin.blog.comments.approve', ['locale' => app()->getLocale(), 'comment' => $comment]) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    <button type="submit" class="btn btn-sm btn-success" onclick="return confirm('{{ __('blog.approve_this_comment') }}')">
                                                        <i class="fas fa-check"></i>
                                                    </button>
                                                </form>
                                            @endif
                                            <form action="{{ route('admin.blog.comments.destroy', ['locale' => app()->getLocale(), 'comment' => $comment]) }}" method="POST" class="d-inline" onsubmit="return confirm('{{ __('general.delete_confirm') }}')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @if($blog->comments()->count() > 5)
                            <div class="text-center mt-3">
                                <a href="{{ route('admin.blog.comments.index', ['locale' => app()->getLocale(), 'blog_id' => $blog->id]) }}" class="btn btn-outline-primary">
                                    {{ __('blog.view_all_comments') }} ({{ $blog->comments()->count() }})
                                </a>
                            </div>
                        @endif
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-comments fa-3x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('blog.no_comments_yet_for_this_post') }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-xl-4 col-lg-5">
            <!-- Post Stats -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.post_statistics') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 border-right">
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $blog->views_count ?? 0 }}</div>
                            <div class="text-xs text-muted">{{ __('blog.views') }}</div>
                        </div>
                        <div class="col-6">
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $blog->comments()->count() }}</div>
                            <div class="text-xs text-muted">{{ __('blog.comments') }}</div>
                        </div>
                    </div>
                    <hr>
                    <div class="row text-center">
                        <div class="col-6 border-right">
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $blog->likes_count ?? 0 }}</div>
                            <div class="text-xs text-muted">{{ __('blog.likes') }}</div>
                        </div>
                        <div class="col-6">
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $blog->shares_count ?? 0 }}</div>
                            <div class="text-xs text-muted">{{ __('blog.shares') }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.quick_actions') }}</h6>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        <a href="{{ route('admin.blog.edit', ['locale' => app()->getLocale(), 'blog' => $blog]) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center {{ app()->getLocale() == 'ar' ? 'flex-row-reverse' : '' }}">
                                <i class="fas fa-edit text-primary {{ app()->getLocale() == 'ar' ? 'ms-2' : 'mr-2' }}"></i>
                                <span>{{ __('blog.edit_post') }}</span>
                            </div>
                            <i class="fas fa-arrow-right"></i>
                        </a>
                        <a href="{{ route('admin.blog.preview', ['locale' => app()->getLocale(), 'blog' => $blog]) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" target="_blank">
                            <div class="d-flex align-items-center {{ app()->getLocale() == 'ar' ? 'flex-row-reverse' : '' }}">
                                <i class="fas fa-external-link-alt text-info {{ app()->getLocale() == 'ar' ? 'ms-2' : 'mr-2' }}"></i>
                                <span>{{ __('blog.preview_post') }}</span>
                            </div>
                            <i class="fas fa-arrow-right"></i>
                        </a>
                        <a href="{{ route('admin.blog.duplicate', ['locale' => app()->getLocale(), 'blog' => $blog]) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" onclick="return confirm('{{ __('blog.create_duplicate_post') }}')">
                            <div class="d-flex align-items-center {{ app()->getLocale() == 'ar' ? 'flex-row-reverse' : '' }}">
                                <i class="fas fa-copy text-warning {{ app()->getLocale() == 'ar' ? 'ms-2' : 'mr-2' }}"></i>
                                <span>{{ __('blog.duplicate_post') }}</span>
                            </div>
                            <i class="fas fa-arrow-right"></i>
                        </a>
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <span><i class="fas fa-star text-warning mr-2"></i>{{ __('blog.featured') }}</span>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="toggleFeatured" {{ $blog->is_featured ? 'checked' : '' }} onchange="toggleFeatured({{ $blog->id }})">
                                <label class="form-check-label" for="toggleFeatured"></label>
                            </div>
                        </div>
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <span><i class="fas fa-thumbtack text-info mr-2"></i>{{ __('blog.pinned') }}</span>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="togglePinned" {{ $blog->is_pinned ? 'checked' : '' }} onchange="togglePinned({{ $blog->id }})">
                                <label class="form-check-label" for="togglePinned"></label>
                            </div>
                        </div>
                        <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center text-danger" onclick="return confirm('{{ __('general.delete_confirm') }}')" data-url="{{ route('admin.blog.destroy', ['locale' => app()->getLocale(), 'blog' => $blog]) }}">
                            <span><i class="fas fa-trash text-danger mr-2"></i>{{ __('blog.delete_post') }}</span>
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- SEO Preview -->
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.seo_preview') }}</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>{{ __('blog.meta_title_english') }}:</strong>
                        <div class="bg-light p-2 rounded mt-1" style="font-size: 14px; line-height: 1.4;">
                            {{ $blog->meta_title_en ?: $blog->title_en }}
                        </div>
                    </div>
                    <div class="mb-3">
                        <strong>{{ __('blog.meta_title_arabic') }}:</strong>
                        <div class="bg-light p-2 rounded mt-1" style="font-size: 14px; line-height: 1.4; direction: rtl;">
                            {{ $blog->meta_title_ar ?: $blog->title_ar }}
                        </div>
                    </div>
                    <div class="mb-3">
                        <strong>{{ __('blog.meta_description_english') }}:</strong>
                        <div class="bg-light p-2 rounded mt-1" style="font-size: 14px; line-height: 1.4;">
                            {{ Str::limit($blog->meta_description_en ?: $blog->summary_en ?: strip_tags($blog->content_en), 160) }}
                        </div>
                    </div>
                    <div class="mb-3">
                        <strong>{{ __('blog.meta_description_arabic') }}:</strong>
                        <div class="bg-light p-2 rounded mt-1" style="font-size: 14px; line-height: 1.4; direction: rtl;">
                            {{ Str::limit($blog->meta_description_ar ?: $blog->summary_ar ?: strip_tags($blog->content_ar), 160) }}
                        </div>
                    </div>
                    <div class="text-center">
                        <a href="{{ route('admin.blog.edit', ['locale' => app()->getLocale(), 'blog' => $blog]) }}#seo-section" class="btn btn-sm btn-outline-primary">
                            {{ __('blog.edit_seo') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
@endpush

@push('scripts')
<script>
function toggleFeatured(blogId) {
    $.ajax({
        url: '{{ route("admin.blog.toggle-featured", ["locale" => app()->getLocale(), "blog" => ":id"]) }}'.replace(':id', blogId),
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                toastr.success(response.message);
                // Update UI if needed
            } else {
                toastr.error(response.message);
                // Revert checkbox
                $('#toggleFeatured').prop('checked', !$('#toggleFeatured').prop('checked'));
            }
        },
        error: function() {
            toastr.error('{{ __("An error occurred") }}');
            $('#toggleFeatured').prop('checked', !$('#toggleFeatured').prop('checked'));
        }
    });
}

function togglePinned(blogId) {
    $.ajax({
        url: '{{ route("admin.blog.toggle-pinned", ["locale" => app()->getLocale(), "blog" => ":id"]) }}'.replace(':id', blogId),
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                toastr.success(response.message);
            } else {
                toastr.error(response.message);
                $('#togglePinned').prop('checked', !$('#togglePinned').prop('checked'));
            }
        },
        error: function() {
            toastr.error('{{ __("An error occurred") }}');
            $('#togglePinned').prop('checked', !$('#togglePinned').prop('checked'));
        }
    });
}

// Delete post
$(document).on('click', '[data-url][onclick*="confirm"]', function(e) {
    e.preventDefault();
    if (confirm('{{ __('general.delete_confirm') }}')) {
        let url = $(this).data('url');
        $.ajax({
            url: url,
            method: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                window.location.href = '{{ route("admin.blog.list", ["locale" => app()->getLocale()]) }}';
                } else {
                    toastr.error(response.message);
                }
            },
            error: function() {
                toastr.error('{{ __("blog.an_error_occurred") }}');
            }
        });
    }
});
</script>
@endpush