@extends('layouts.admin')

@section('title', __('blog.view_category'))

@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.view_category') }}</h1>
            <p class="mb-0 text-muted">{{ __('blog.view_details_of') }} {{ $category->name_en }}</p>
        </div>
        <div>
            <a href="{{ route('admin.blog.categories.edit', ['locale' => app()->getLocale(), 'category' => $category]) }}" class="btn btn-primary">
                <i class="fas fa-edit"></i> {{ __('blog.edit_category') }}
            </a>
            <a href="{{ route('admin.blog.categories.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {{ __('blog.back_to_categories') }}
            </a>
        </div>
    </div>

    <!-- Category Information -->
    <div class="row">
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('general.basic_information') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>{{ __('general.english') }}</h5>
                            <p><strong>{{ __('general.name') }}:</strong> {{ $category->name_en }}</p>
                            <p><strong>{{ __('blog.slug_english') }}:</strong> {{ $category->slug_en }}</p>
                            @if($category->description_en)
                                <p><strong>{{ __('blog.description_english') }}:</strong> {{ $category->description_en }}</p>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <h5>{{ __('general.arabic') }}</h5>
                            <p><strong>{{ __('general.name') }}:</strong> {{ $category->name_ar }}</p>
                            <p><strong>{{ __('blog.slug_arabic') }}:</strong> {{ $category->slug_ar }}</p>
                            @if($category->description_ar)
                                <p><strong>{{ __('blog.description_arabic') }}:</strong> {{ $category->description_ar }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Statistics -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.posts_analytics') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="text-center">
                                <h3 class="text-primary">{{ $category->blogs()->count() }}</h3>
                                <p class="text-muted">{{ __('blog.posts') }}</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center">
                                <h3 class="text-success">{{ $category->blogs()->where('status', 'published')->count() }}</h3>
                                <p class="text-muted">{{ __('blog.published') }}</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center">
                                <h3 class="text-warning">{{ $category->blogs()->where('status', 'draft')->count() }}</h3>
                                <p class="text-muted">{{ __('blog.draft') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Status & Settings -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('general.active_status') }}</h6>
                </div>
                <div class="card-body">
                    <p><strong>{{ __('general.active') }}:</strong>
                        @if($category->is_active)
                            <span class="badge badge-success">{{ __('general.active') }}</span>
                        @else
                            <span class="badge badge-secondary">{{ __('general.inactive') }}</span>
                        @endif
                    </p>
                    <p><strong>{{ __('general.sort_order') }}:</strong> {{ $category->sort_order }}</p>
                    <p><strong>{{ __('general.created_at') }}:</strong> {{ $category->created_at->format('M d, Y H:i') }}</p>
                    <p><strong>{{ __('general.updated_at') }}:</strong> {{ $category->updated_at->format('M d, Y H:i') }}</p>
                </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">{{ __('general.quick_actions') }}</h6>
                </div>
                <div class="card-body">
                    <div class="list-group">
                        <a href="{{ route('admin.blog.categories.edit', ['locale' => app()->getLocale(), 'category' => $category]) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            <span><i class="fas fa-edit text-primary mr-2"></i>{{ __('blog.edit_category') }}</span>
                            <i class="fas fa-arrow-right"></i>
                        </a>
                        <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.categories.destroy', ['locale' => app()->getLocale(), 'category' => $category]) }}">
                            <span><i class="fas fa-trash text-danger mr-2"></i>{{ __('general.delete') }}</span>
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Blog Posts -->
    @if($category->blogs()->count() > 0)
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.recent_blog_posts') }}</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>{{ __('general.title') }}</th>
                            <th>{{ __('general.active') }}</th>
                            <th>{{ __('blog.author') }}</th>
                            <th>{{ __('general.created_at') }}</th>
                            <th>{{ __('general.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($category->blogs()->latest()->limit(10)->get() as $blog)
                        <tr>
                            <td>{{ $blog->title }}</td>
                            <td>
                                @if($blog->status == 'published')
                                    <span class="badge badge-success">{{ __('blog.published') }}</span>
                                @elseif($blog->status == 'draft')
                                    <span class="badge badge-warning">{{ __('blog.draft') }}</span>
                                @else
                                    <span class="badge badge-secondary">{{ __('blog.archived') }}</span>
                                @endif
                            </td>
                            <td>{{ $blog->author->name ?? 'N/A' }}</td>
                            <td>{{ $blog->created_at->format('M d, Y') }}</td>
                            <td>
                                <a href="{{ route('admin.blog.show', ['locale' => app()->getLocale(), 'blog' => $blog]) }}" class="btn btn-sm btn-info">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('admin.blog.edit', ['locale' => app()->getLocale(), 'blog' => $blog]) }}" class="btn btn-sm btn-primary">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Handle delete action
    $('[data-url]').on('click', function(e) {
        e.preventDefault();
        if (confirm('{{ __('general.delete_confirm') }}')) {
            const url = $(this).data('url');
            const form = $('<form>', {
                'method': 'POST',
                'action': url
            });
            form.append('<input type="hidden" name="_token" value="{{ csrf_token() }}">');
            form.append('<input type="hidden" name="_method" value="DELETE">');
            $('body').append(form);
            form.submit();
        }
    });
});
</script>
@endpush