@extends('admin.layouts.app')

@section('title', __('View Category'))

@section('breadcrumb')
    <li class="breadcrumb-item">
        <a href="{{ route('admin.categories.index') }}">{{ __('Categories') }}</a>
    </li>
    <li class="breadcrumb-item active">{{ $category->name }}</li>
@endsection

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ $category->name }}</h1>
        <p class="text-muted mb-0">{{ __('Category Details and Management') }}</p>
    </div>
    <div>
        <a href="{{ route('admin.categories.edit', $category) }}" class="btn btn-primary-custom me-2">
            <i class="fas fa-edit me-2"></i>
            {{ __('Edit Category') }}
        </a>
        <a href="{{ route('admin.categories.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>
            {{ __('Back to Categories') }}
        </a>
    </div>
@endsection

@push('styles')
    <style>
        .category-image-large {
            max-width: 300px;
            max-height: 300px;
            object-fit: cover;
            border-radius: 0.75rem;
            border: 1px solid #e5e7eb;
        }

        .status-badge {
            font-size: 0.75rem;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            font-weight: 600;
        }

        .status-active {
            background: #dcfce7;
            color: #166534;
        }

        .status-inactive {
            background: #fee2e2;
            color: #991b1b;
        }

        .info-card {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .info-card h5 {
            color: #374151;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .translation-card {
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }

        .translation-header {
            background: #f9fafb;
            padding: 1rem;
            border-bottom: 1px solid #e5e7eb;
            border-radius: 0.5rem 0.5rem 0 0;
        }

        .translation-body {
            padding: 1rem;
        }

        .seo-indicator {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .seo-good {
            background: #dcfce7;
            color: #166534;
        }

        .seo-warning {
            background: #fef3c7;
            color: #92400e;
        }

        .seo-error {
            background: #fee2e2;
            color: #991b1b;
        }

        .hierarchy-indicator {
            background: #f3f4f6;
            border: 1px solid #d1d5db;
            border-radius: 0.5rem;
            padding: 0.75rem;
            margin-bottom: 1rem;
        }

        .product-card {
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 0.75rem;
            transition: all 0.2s ease;
        }

        .product-card:hover {
            border-color: #4f46e5;
            transform: translateY(-1px);
        }

        .product-image {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 0.375rem;
        }
    </style>
@endpush

@section('content')
    <div class="row">
        {{-- Main Category Information --}}
        <div class="col-lg-8">
            {{-- Category Overview --}}
            <div class="admin-card mb-4">
                <div class="card-header-custom">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        {{ __('Category Overview') }}
                    </h5>
                </div>
                <div class="card-body-custom">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <h3 class="mb-2">{{ $category->name }}</h3>
                                <div class="d-flex align-items-center gap-3 mb-3">
                                    <span class="status-badge {{ $category->is_active ? 'status-active' : 'status-inactive' }}">
                                        <i class="fas {{ $category->is_active ? 'fa-check-circle' : 'fa-pause-circle' }} me-1"></i>
                                        {{ $category->is_active ? __('Active') : __('Inactive') }}
                                    </span>
                                    <span class="badge bg-secondary">
                                        <i class="fas fa-hashtag me-1"></i>
                                        {{ $category->code }}
                                    </span>
                                    <span class="badge bg-info">
                                        <i class="fas fa-sort-numeric-down me-1"></i>
                                        {{ __('Order') }}: {{ $category->sort_order }}
                                    </span>
                                </div>
                                @if($category->description)
                                    <p class="text-muted mb-0">{{ $category->description }}</p>
                                @endif
                            </div>

                            {{-- Hierarchy Information --}}
                            @if($category->parent || $category->children->count() > 0)
                                <div class="hierarchy-indicator">
                                    <h6 class="mb-2">
                                        <i class="fas fa-sitemap me-2"></i>
                                        {{ __('Category Hierarchy') }}
                                    </h6>

                                    @if($category->parent)
                                        <div class="mb-2">
                                            <small class="text-muted">{{ __('Parent Category') }}:</small>
                                            <br>
                                            <a href="{{ route('admin.categories.show', $category->parent) }}" class="text-decoration-none">
                                                <i class="fas fa-level-up-alt me-1"></i>
                                                {{ $category->parent->name }}
                                            </a>
                                        </div>
                                    @endif

                                    @if($category->children->count() > 0)
                                        <div>
                                            <small class="text-muted">{{ __('Subcategories') }} ({{ $category->children->count() }}):</small>
                                            <br>
                                            @foreach($category->children as $child)
                                                <a href="{{ route('admin.categories.show', $child) }}" class="badge bg-light text-dark text-decoration-none me-1">
                                                    <i class="fas fa-level-down-alt me-1"></i>
                                                    {{ $child->name }}
                                                </a>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            @endif
                        </div>
                        <div class="col-md-4 text-center">
                            @if($category->image)
                                <img src="{{ Storage::url($category->image) }}"
                                     alt="{{ $category->name }}"
                                     class="category-image-large">
                            @else
                                <div class="category-image-large bg-light d-flex align-items-center justify-content-center mx-auto">
                                    <i class="fas fa-tag fa-3x text-muted"></i>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- Translations --}}
            <div class="admin-card mb-4">
                <div class="card-header-custom">
                    <h5 class="mb-0">
                        <i class="fas fa-language me-2"></i>
                        {{ __('Translations & SEO') }}
                    </h5>
                </div>
                <div class="card-body-custom">
                    @foreach(config('laravellocalization.supportedLocales') as $localeCode => $locale)
                        @php
                            $translation = $category->translateOrNew($localeCode);
                            $seoScore = 0;
                            if ($translation->exists) {
                                // Calculate basic SEO score
                                if ($translation->meta_title && strlen($translation->meta_title) >= 30 && strlen($translation->meta_title) <= 60) $seoScore += 35;
                                elseif ($translation->meta_title) $seoScore += 17;

                                if ($translation->meta_description && strlen($translation->meta_description) >= 120 && strlen($translation->meta_description) <= 160) $seoScore += 30;
                                elseif ($translation->meta_description) $seoScore += 15;

                                if ($translation->meta_keywords) {
                                    $keywords = explode(',', $translation->meta_keywords);
                                    if (count($keywords) >= 3 && count($keywords) <= 5) $seoScore += 20;
                                    elseif (count($keywords) > 0) $seoScore += 10;
                                }

                                if ($translation->name && strlen($translation->name) >= 5 && strlen($translation->name) <= 50) $seoScore += 15;
                                elseif ($translation->name) $seoScore += 7;
                            }
                        @endphp

                        <div class="translation-card">
                            <div class="translation-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0">
                                        <i class="fas fa-flag me-2"></i>
                                        {{ $locale['native'] }}
                                    </h6>
                                    <div class="d-flex align-items-center gap-2">
                                        @if($translation->exists)
                                            <span class="seo-indicator {{ $seoScore >= 80 ? 'seo-good' : ($seoScore >= 60 ? 'seo-warning' : 'seo-error') }}">
                                                <i class="fas fa-chart-line me-1"></i>
                                                SEO: {{ $seoScore }}/100
                                            </span>
                                            <i class="fas fa-check-circle text-success"></i>
                                        @else
                                            <span class="badge bg-warning">{{ __('Missing') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            @if($translation->exists)
                                <div class="translation-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <strong>{{ __('Name') }}:</strong>
                                                <br>{{ $translation->name }}
                                            </div>
                                            @if($translation->description)
                                                <div class="mb-3">
                                                    <strong>{{ __('Description') }}:</strong>
                                                    <br><small class="text-muted">{{ $translation->description }}</small>
                                                </div>
                                            @endif
                                            <div class="mb-3">
                                                <strong>{{ __('URL Slug') }}:</strong>
                                                <br><code>{{ $translation->slug }}</code>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            @if($translation->meta_title)
                                                <div class="mb-3">
                                                    <strong>{{ __('Meta Title') }}:</strong>
                                                    <br><small class="text-muted">{{ $translation->meta_title }}</small>
                                                </div>
                                            @endif
                                            @if($translation->meta_description)
                                                <div class="mb-3">
                                                    <strong>{{ __('Meta Description') }}:</strong>
                                                    <br><small class="text-muted">{{ $translation->meta_description }}</small>
                                                </div>
                                            @endif
                                            @if($translation->meta_keywords)
                                                <div class="mb-3">
                                                    <strong>{{ __('Keywords') }}:</strong>
                                                    <br>
                                                    @foreach(explode(',', $translation->meta_keywords) as $keyword)
                                                        <span class="badge bg-light text-dark me-1">{{ trim($keyword) }}</span>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="translation-body text-center py-3">
                                    <i class="fas fa-exclamation-triangle text-warning fa-2x mb-2"></i>
                                    <p class="text-muted mb-0">{{ __('Translation not available for this language') }}</p>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Category Products --}}
            @if($category->products->count() > 0)
                <div class="admin-card">
                    <div class="card-header-custom">
                        <h5 class="mb-0">
                            <i class="fas fa-box me-2"></i>
                            {{ __('Products in this Category') }} ({{ $category->products->count() }})
                        </h5>
                    </div>
                    <div class="card-body-custom">
                        <div class="row">
                            @foreach($category->products->take(6) as $product)
                                <div class="col-md-6">
                                    <div class="product-card">
                                        <div class="d-flex align-items-center">
                                            @if($product->images->first())
                                                <img src="{{ Storage::url($product->images->first()->image_path) }}"
                                                     alt="{{ $product->name }}"
                                                     class="product-image me-3">
                                            @else
                                                <div class="product-image bg-light d-flex align-items-center justify-content-center me-3">
                                                    <i class="fas fa-box text-muted"></i>
                                                </div>
                                            @endif
                                            <div class="flex-grow-1">
                                                <h6 class="mb-1">{{ $product->name }}</h6>
                                                <div class="d-flex align-items-center gap-2 mb-1">
                                                    <span class="badge bg-primary">${{ number_format($product->price, 2) }}</span>
                                                    @if($product->sale_price)
                                                        <span class="badge bg-success">${{ number_format($product->sale_price, 2) }}</span>
                                                    @endif
                                                </div>
                                                <small class="text-muted">{{ $product->sku }}</small>
                                            </div>
                                            <div class="text-end">
                                                <a href="{{ route('admin.products.show', $product) }}" class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        @if($category->products->count() > 6)
                            <div class="text-center mt-3">
                                <a href="{{ route('admin.products.index', ['category' => $category->id]) }}" class="btn btn-outline-primary">
                                    {{ __('View All Products') }} ({{ $category->products->count() }})
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <div class="col-lg-4">
            {{-- Quick Stats --}}
            <div class="info-card">
                <h5>
                    <i class="fas fa-chart-bar me-2"></i>
                    {{ __('Quick Statistics') }}
                </h5>
                <div class="row text-center">
                    <div class="col-6">
                        <div class="mb-3">
                            <h3 class="text-primary mb-0">{{ $category->products->count() }}</h3>
                            <small class="text-muted">{{ __('Products') }}</small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="mb-3">
                            <h3 class="text-info mb-0">{{ $category->children->count() }}</h3>
                            <small class="text-muted">{{ __('Subcategories') }}</small>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Category Actions --}}
            <div class="info-card">
                <h5>
                    <i class="fas fa-cogs me-2"></i>
                    {{ __('Category Actions') }}
                </h5>
                <div class="d-grid gap-2">
                    <a href="{{ route('admin.categories.edit', $category) }}" class="btn btn-primary-custom">
                        <i class="fas fa-edit me-2"></i>
                        {{ __('Edit Category') }}
                    </a>

                    <button type="button"
                            class="btn btn-outline-{{ $category->is_active ? 'warning' : 'success' }}"
                            onclick="toggleStatus({{ $category->id }})">
                        <i class="fas fa-{{ $category->is_active ? 'pause' : 'play' }} me-2"></i>
                        {{ $category->is_active ? __('Deactivate') : __('Activate') }}
                    </button>

                    @if($category->products->count() === 0 && $category->children->count() === 0)
                        <button type="button"
                                class="btn btn-outline-danger"
                                onclick="deleteCategory({{ $category->id }}, '{{ $category->name }}')">
                            <i class="fas fa-trash me-2"></i>
                            {{ __('Delete Category') }}
                        </button>
                    @endif
                </div>
            </div>

            {{-- Category Information --}}
            <div class="info-card">
                <h5>
                    <i class="fas fa-info me-2"></i>
                    {{ __('Category Information') }}
                </h5>
                <div class="small">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">{{ __('Code') }}:</span>
                        <code>{{ $category->code }}</code>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">{{ __('Sort Order') }}:</span>
                        <span>{{ $category->sort_order }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">{{ __('Created') }}:</span>
                        <span>{{ $category->created_at->format('M d, Y') }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">{{ __('Last Updated') }}:</span>
                        <span>{{ $category->updated_at->format('M d, Y') }}</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">{{ __('Default Locale') }}:</span>
                        <span>{{ strtoupper($category->default_locale) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Delete Confirmation Modal --}}
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Confirm Delete') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>{{ __('Are you sure you want to delete the category') }} "<span id="categoryName"></span>"?</p>
                    <p class="text-danger"><small>{{ __('This action cannot be undone.') }}</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        {{ __('Cancel') }}
                    </button>
                    <form method="POST" id="deleteForm" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            {{ __('Delete Category') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Toggle category status
        function toggleStatus(categoryId) {
            fetch(`/admin/categories/${categoryId}/toggle-status`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Content-Type': 'application/json',
                },
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('{{ __("Error updating category status") }}');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('{{ __("Error updating category status") }}');
                });
        }

        // Delete category
        function deleteCategory(id, name) {
            document.getElementById('categoryName').textContent = name;
            document.getElementById('deleteForm').action = `/admin/categories/${id}`;
            new bootstrap.Modal(document.getElementById('deleteModal')).show();
        }
    </script>
@endpush