@php
    // Debug and fix the availableLocales issue
    if (empty($availableLocales)) {
        $availableLocales = [
            'ar' => [
                'name' => 'Arabic',
                'native' => 'العربية',
                'dir' => 'rtl',
            ],
            'en' => [
                'name' => 'English',
                'native' => 'English',
                'dir' => 'ltr',
            ],
            'fr' => [
                'name' => 'French',
                'native' => 'Français',
                'dir' => 'ltr',
            ],
        ];
    }
@endphp

@extends('admin.layouts.app')

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

@section('breadcrumb')
    <li class="breadcrumb-item active">{{ __('seo_management') }}</li>
@endsection

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('seo_management') }}</h1>
        <p class="text-muted">{{ __('manage_seo_settings_description') }}</p>
    </div>
@endsection

@section('content')
    <div class="row">
        @section('content')
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h1>{{ __('SEO Management') }}</h1>
                            <div class="btn-group">
                                <a href="{{ route('admin.seo.global', 'ar') }}" class="btn btn-primary">
                                    <i class="fas fa-globe me-2"></i>
                                    {{ __('Global SEO') }}
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- Global SEO Settings Section --}}
                    <div class="col-12 mb-4">
                        <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-globe text-primary me-2"></i>
                                        {{ __('Global SEO Settings') }}
                                    </h5>
                                    <div class="dropdown">
                                        <button class="btn btn-outline-primary dropdown-toggle" type="button"
                                                data-bs-toggle="dropdown">
                                            <i class="fas fa-edit me-2"></i>
                                            {{ __('Quick Edit') }}
                                        </button>
                                        <ul class="dropdown-menu">
                                            @foreach($availableLocales as $localeCode => $localeData)
                                                <li>
                                                    <a class="dropdown-item"
                                                       href="{{ route('admin.seo.global', $localeCode) }}">
                                                        <i class="fas fa-flag me-2"></i>
                                                        {{ $localeData['native'] }}
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body-custom">
                                <div class="row">
                                    @foreach($availableLocales as $localeCode => $localeData)
                                        @php
                                            // Safe way to get global settings
                                            $globalSettings = null;
                                            $isConfigured = false;

                                            if ($globalSeo && $globalSeo->has($localeCode)) {
                                                $globalSettings = $globalSeo->get($localeCode)->first();
                                                $isConfigured = $globalSettings && $globalSettings->meta_title && $globalSettings->meta_description;
                                            }
                                        @endphp
                                        <div class="col-md-4 mb-3">
                                            <div class="border rounded p-3 h-100">
                                                <div class="d-flex justify-content-between align-items-start mb-2">
                                                    <h6 class="mb-0">{{ $localeData['native'] }}</h6>
                                                    <span
                                                        class="badge {{ $isConfigured ? 'bg-success' : 'bg-warning' }}">
                                            {{ $isConfigured ? __('Configured') : __('Not Configured') }}
                                        </span>
                                                </div>
                                                @if($globalSettings)
                                                    <p class="text-muted small mb-2">
                                                        <strong>{{ __('Meta Title') }}:</strong><br>
                                                        {{ Str::limit($globalSettings->meta_title, 50) ?: __('Not set') }}
                                                    </p>
                                                    <p class="text-muted small mb-3">
                                                        <strong>{{ __('Meta Description') }}:</strong><br>
                                                        {{ Str::limit($globalSettings->meta_description, 80) ?: __('Not set') }}
                                                    </p>
                                                @else
                                                    <p class="text-muted small mb-3">{{ __('No SEO settings found') }}</p>
                                                @endif
                                                <a href="{{ route('admin.seo.global', $localeCode) }}"
                                                   class="btn btn-outline-primary btn-sm">
                                                    <i class="fas fa-edit me-1"></i>
                                                    {{ __('Edit') }}
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Page-Specific SEO Section --}}
                    <div class="col-12">
                        <div class="admin-card">
                            <div class="card-header-custom">
                                <h5 class="mb-0">
                                    <i class="fas fa-file-alt text-info me-2"></i>
                                    {{ __('Page SEO Settings') }}
                                </h5>
                            </div>
                            <div class="card-body-custom">
                                <div class="row">
                                    @foreach($pageTypes as $pageType)
                                        <div class="col-lg-6 mb-4">
                                            <div class="border rounded p-3">
                                                <h6 class="mb-3">
                                                    <i class="fas fa-{{ $pageType === 'home' ? 'home' : ($pageType === 'products' ? 'box' : ($pageType === 'categories' ? 'tags' : ($pageType === 'contact' ? 'envelope' : 'info-circle'))) }} me-2"></i>
                                                    {{ __('Page ' . $pageType) }}
                                                </h6>
                                                <div class="row">
                                                    @foreach($availableLocales as $localeCode => $localeData)
                                                        @php
                                                            $pageSettings = null;
                                                            $isConfigured = false;

                                                            if ($pageSeo && $pageSeo->has($pageType) && $pageSeo->get($pageType)->has($localeCode)) {
                                                                $pageSettings = $pageSeo->get($pageType)->get($localeCode)->first();
                                                                $isConfigured = $pageSettings && $pageSettings->meta_title;
                                                            }
                                                        @endphp
                                                        <div class="col-md-4 mb-2">
                                                            <div
                                                                class="d-flex justify-content-between align-items-center">
                                                                <small
                                                                    class="text-muted">{{ $localeData['native'] }}</small>
                                                                <span
                                                                    class="badge badge-sm {{ $isConfigured ? 'bg-success' : 'bg-secondary' }}">
                                                        <i class="fas fa-{{ $isConfigured ? 'check' : 'times' }}"></i>
                                                    </span>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                                <div class="mt-2">
                                                    <a href="{{ route('admin.seo.page.edit', [$pageType, 'ar']) }}"
                                                       class="btn btn-outline-primary btn-sm">
                                                        <i class="fas fa-edit me-1"></i>
                                                        {{ __('Configure') }}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- SEO Statistics Section --}}
                    <div class="col-12 mt-4">
                        <div class="admin-card">
                            <div class="card-header-custom">
                                <h5 class="mb-0">
                                    <i class="fas fa-chart-bar text-success me-2"></i>
                                    {{ __('SEO Statistics') }}
                                </h5>
                            </div>
                            <div class="card-body-custom">
                                <div class="row text-center">
                                    <div class="col-md-3 mb-3">
                                        <div class="stat-item">
                                            <div
                                                class="stat-number text-primary">{{ $globalSeo ? $globalSeo->count() : 0 }}</div>
                                            <div class="stat-label">{{ __('Global SEO Configured') }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <div class="stat-item">
                                            <div
                                                class="stat-number text-info">{{ $pageSeo ? $pageSeo->count() : 0 }}</div>
                                            <div class="stat-label">{{ __('Page SEO Configured') }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <div class="stat-item">
                                            <div
                                                class="stat-number text-warning">{{ collect($availableLocales)->count() }}</div>
                                            <div class="stat-label">{{ __('Supported Languages') }}</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <div class="stat-item">
                                            <div class="stat-number text-success">
                                                {{ round((($globalSeo ? $globalSeo->count() : 0) / (collect($availableLocales)->count() ?: 1)) * 100) }}
                                                %
                                            </div>
                                            <div class="stat-label">{{ __('Completion Rate') }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

    </div>
@endsection

@push('styles')
    <style>
        .stat-item {
            padding: 1rem;
            border-radius: 8px;
            background: #f8f9fa;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            font-size: 0.9rem;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .badge-sm {
            font-size: 0.75rem;
            padding: 0.25rem 0.4rem;
        }

        .admin-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border: 1px solid #e9ecef;
        }

        .card-header-custom {
            padding: 1.25rem;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            border-radius: 10px 10px 0 0;
        }

        .card-body-custom {
            padding: 1.25rem;
        }
    </style>
@endpush