@extends('admin.layouts.app')

@section('title', __('product_seo'))

@section('breadcrumb')
    <li class="breadcrumb-item">
        <a href="{{ route('admin.seo.index') }}">{{ __('seo_management') }}</a>
    </li>
    <li class="breadcrumb-item active">{{ __('product_seo') }}</li>
@endsection

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('product_seo') }}</h1>
        <p class="text-muted">{{ __('manage_product_seo_description') }}</p>
    </div>
    <div class="d-flex gap-2">
        <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                <i class="fas fa-filter me-1"></i>
                {{ __('filter_by_language') }}
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="{{ route('admin.seo.products') }}">{{ __('all_languages') }}</a></li>
                @foreach($availableLocales as $localeCode => $localeData)
                    <li>
                        <a class="dropdown-item" href="{{ route('admin.seo.products', ['locale' => $localeCode]) }}">
                            <i class="fas fa-flag me-2"></i>
                            {{ $localeData['native'] }}
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
        <a href="{{ route('admin.products.index') }}" class="btn btn-outline-primary">
            <i class="fas fa-box me-1"></i>
            {{ __('manage_products') }}
        </a>
    </div>
@endsection

@section('content')
    <div class="admin-card">
        <div class="card-header-custom">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-search me-2"></i>
                    {{ __('products_seo_overview') }}
                </h5>
                <div class="d-flex gap-2">
                    <div class="input-group" style="width: 300px;">
                        <input type="text" class="form-control" placeholder="{{ __('search_products') }}" id="searchInput">
                        <button class="btn btn-outline-secondary" type="button">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body-custom p-0">
            <div class="table-responsive">
                <table class="table admin-table mb-0">
                    <thead>
                    <tr>
                        <th>{{ __('product') }}</th>
                        <th>{{ __('code') }}</th>
                        <th>{{ __('categories') }}</th>
                        @foreach($availableLocales as $localeCode => $localeData)
                            <th class="text-center">
                                <i class="fas fa-flag me-1"></i>
                                {{ $localeData['native'] }}
                            </th>
                        @endforeach
                        <th class="text-center">{{ __('actions') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($products as $product)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    @if($product->main_image)
                                        <img src="{{ Storage::url($product->main_image->image_path) }}"
                                             alt="{{ $product->name }}"
                                             class="rounded me-3"
                                             style="width: 50px; height: 50px; object-fit: cover;">
                                    @else
                                        <div class="bg-light rounded d-flex align-items-center justify-content-center me-3"
                                             style="width: 50px; height: 50px;">
                                            <i class="fas fa-image text-muted"></i>
                                        </div>
                                    @endif
                                    <div>
                                        <div class="fw-medium">{{ $product->name ?: $product->code }}</div>
                                        <small class="text-muted">SKU: {{ $product->sku }}</small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-secondary">{{ $product->code }}</span>
                            </td>
                            <td>
                                @if($product->categories->count() > 0)
                                    @foreach($product->categories->take(2) as $category)
                                        <span class="badge bg-info me-1">{{ $category->name }}</span>
                                    @endforeach
                                    @if($product->categories->count() > 2)
                                        <span class="text-muted small">+{{ $product->categories->count() - 2 }} more</span>
                                    @endif
                                @else
                                    <span class="text-muted">{{ __('no_categories') }}</span>
                                @endif
                            </td>
                            @foreach($availableLocales as $localeCode => $localeData)
                                @php
                                    $translation = $product->translate($localeCode);
                                    $hasTranslation = $translation && $translation->name;
                                    $hasSeo = $translation && ($translation->meta_title || $translation->meta_description);
                                @endphp
                                <td class="text-center">
                                    <div class="d-flex flex-column align-items-center gap-1">
                                        <!-- Translation Status -->
                                        <span class="badge {{ $hasTranslation ? 'bg-success' : 'bg-secondary' }}">
                                            {{ $hasTranslation ? __('translated') : __('not_translated') }}
                                        </span>
                                        <!-- SEO Status -->
                                        <span class="badge {{ $hasSeo ? 'bg-primary' : 'bg-warning' }}">
                                            {{ $hasSeo ? __('seo_configured') : __('seo_missing') }}
                                        </span>
                                    </div>
                                </td>
                            @endforeach
                            <td class="text-center">
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                        <i class="fas fa-cog"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        @foreach($availableLocales as $localeCode => $localeData)
                                            <li>
                                                <a class="dropdown-item" href="{{ route('admin.seo.product.edit', [$product->id, $localeCode]) }}">
                                                    <i class="fas fa-edit me-2"></i>
                                                    {{ __('edit_seo') }} ({{ $localeData['native'] }})
                                                </a>
                                            </li>
                                        @endforeach
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item" href="{{ route('admin.products.edit', $product->id) }}">
                                                <i class="fas fa-box me-2"></i>
                                                {{ __('edit_product') }}
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="{{ route('products.show', $product->translate('ar')->slug ?? $product->id) }}" target="_blank">
                                                <i class="fas fa-external-link-alt me-2"></i>
                                                {{ __('view_product') }}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ 5 + count($availableLocales) }}" class="text-center py-5">
                                <i class="fas fa-box fa-3x text-muted mb-3"></i>
                                <p class="text-muted">{{ __('no_products_found') }}</p>
                                <a href="{{ route('admin.products.create') }}" class="btn btn-primary">
                                    <i class="fas fa-plus me-1"></i>
                                    {{ __('add_first_product') }}
                                </a>
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($products->hasPages())
            <div class="card-footer bg-light">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="text-muted small">
                        {{ __('showing_results', [
                            'from' => $products->firstItem(),
                            'to' => $products->lastItem(),
                            'total' => $products->total()
                        ]) }}
                    </div>
                    {{ $products->links() }}
                </div>
            </div>
        @endif
    </div>

    <!-- SEO Statistics Cards -->
    <div class="row mt-4">
        <div class="col-md-3">
            <div class="stats-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">{{ __('total_products') }}</h6>
                        <h3 class="mb-0">{{ $products->total() }}</h3>
                    </div>
                    <div class="stats-icon bg-primary">
                        <i class="fas fa-box"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">{{ __('products_with_seo') }}</h6>
                        <h3 class="mb-0">{{ $products->where(function($product) { return $product->meta_title || $product->meta_description; })->count() }}</h3>
                    </div>
                    <div class="stats-icon bg-success">
                        <i class="fas fa-check"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">{{ __('missing_seo') }}</h6>
                        <h3 class="mb-0">{{ $products->where(function($product) { return !$product->meta_title && !$product->meta_description; })->count() }}</h3>
                    </div>
                    <div class="stats-icon bg-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-muted mb-1">{{ __('avg_seo_score') }}</h6>
                        <h3 class="mb-0">72<small class="text-muted">/100</small></h3>
                    </div>
                    <div class="stats-icon bg-info">
                        <i class="fas fa-chart-line"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bulk Actions Modal -->
    <div class="modal fade" id="bulkActionsModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('bulk_seo_actions') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="bulkActionForm">
                        <div class="mb-3">
                            <label class="form-label">{{ __('select_action') }}</label>
                            <select class="form-select" name="action" required>
                                <option value="">{{ __('choose_action') }}</option>
                                <option value="generate_seo">{{ __('generate_missing_seo') }}</option>
                                <option value="update_meta_titles">{{ __('bulk_update_titles') }}</option>
                                <option value="export_seo_data">{{ __('export_seo_data') }}</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">{{ __('select_language') }}</label>
                            <select class="form-select" name="locale" required>
                                @foreach($availableLocales as $localeCode => $localeData)
                                    <option value="{{ $localeCode }}">{{ $localeData['native'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('cancel') }}</button>
                    <button type="button" class="btn btn-primary" onclick="executeBulkAction()">{{ __('execute') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .table th {
            font-weight: 600;
            color: #374151;
            background-color: #f9fafb;
            border-bottom: 2px solid #e5e7eb;
        }

        .badge {
            font-size: 0.75rem;
        }

        .stats-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .table td {
            vertical-align: middle;
        }

        .dropdown-toggle::after {
            margin-left: 0.5em;
        }
    </style>
@endpush

@push('scripts')
    <script>
        // Search functionality
        document.getElementById('searchInput').addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            const tableRows = document.querySelectorAll('tbody tr');

            tableRows.forEach(row => {
                const productName = row.querySelector('td:first-child .fw-medium').textContent.toLowerCase();
                const productCode = row.querySelector('.badge').textContent.toLowerCase();

                if (productName.includes(searchTerm) || productCode.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });

        // Bulk actions
        function executeBulkAction() {
            const form = document.getElementById('bulkActionForm');
            const formData = new FormData(form);

            if (!formData.get('action') || !formData.get('locale')) {
                alert('{{ __("admin.please_select_action_and_language") }}');
                return;
            }

            // Show loading state
            const executeBtn = event.target;
            const originalText = executeBtn.textContent;
            executeBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> {{ __("admin.processing") }}...';
            executeBtn.disabled = true;

            fetch('{{ route("admin.seo.bulk-update") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert(data.message || '{{ __("admin.something_went_wrong") }}');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('{{ __("admin.something_went_wrong") }}');
                })
                .finally(() => {
                    executeBtn.textContent = originalText;
                    executeBtn.disabled = false;
                });
        }

        // Auto-refresh badge colors based on status
        document.addEventListener('DOMContentLoaded', function() {
            // Add any additional JavaScript functionality here
        });
    </script>
@endpush