<x-admin-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                    <i class="fas fa-language mr-2"></i>@trans_db('title', 'languages', 'Limbi')
                </h2>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    <a href="{{ route('dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Dashboard</a>
                    <span class="mx-2">/</span>
                    <a href="{{ route('admin.dashboard') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Admin</a>
                    <span class="mx-2">/</span>
                    <a href="{{ route('admin.settings.index') }}" class="text-blue-600 dark:text-blue-400 hover:underline">@trans_db('settings', 'general', 'Setări')</a>
                    <span class="mx-2">/</span>
                    <span>@trans_db('title', 'languages', 'Limbi')</span>
                </p>
            </div>
            <a href="{{ route('admin.settings.languages.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
                <i class="fas fa-plus"></i>
                <span>@trans_db('add_new', 'languages', 'Adaugă Limbă Nouă')</span>
            </a>
        </div>
    </x-slot>

    @if (session('success'))
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6 rounded" role="alert">
            <p class="font-bold">Succes!</p>
            <p>{{ session('success') }}</p>
        </div>
    @endif

    @if (session('error'))
        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded" role="alert">
            <p class="font-bold">Eroare!</p>
            <p>{{ session('error') }}</p>
        </div>
    @endif

    <div class="py-12">
        <div class="px-6 lg:px-8">
            <div class="flex gap-6">
                <!-- Settings Sidebar Menu -->
                <x-settings-sidebar />

                <!-- Main Content Area -->
                <div class="flex-1">
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
                        <div class="p-6">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-6">@trans_db('management', 'languages', 'Managementul Limbilor')</h3>

                            <!-- Languages Table -->
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                    <thead class="bg-gray-50 dark:bg-gray-700">
                                        <tr>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                                @trans_db('language', 'languages', 'Limbă')
                                            </th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                                @trans_db('code', 'languages', 'Cod')
                                            </th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                                @trans_db('progress', 'languages', 'Progres')
                                            </th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                                @trans_db('status', 'general', 'Status')
                                            </th>
                                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                                @trans_db('actions', 'general', 'Acțiuni')
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                        @forelse ($languages as $language)
                                            <tr>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <div class="flex items-center">
                                                        @if($language->flag)
                                                            <span class="text-2xl mr-3">{{ $language->flag }}</span>
                                                        @endif
                                                        <div>
                                                            <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                                {{ $language->name }}
                                                            </div>
                                                            @if($language->is_default)
                                                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
                                                                    <i class="fas fa-star"></i>
                                                                    @trans_db('default_language', 'languages', 'Implicită')
                                                                </span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <div class="text-sm text-gray-900 dark:text-gray-100 uppercase font-mono">
                                                        {{ $language->code }}
                                                    </div>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <div class="flex items-center">
                                                        <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700 mr-2">
                                                            <div class="bg-blue-600 h-2 rounded-full" style="width: {{ $language->progress }}%"></div>
                                                        </div>
                                                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ $language->progress }}%</span>
                                                    </div>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    @if($language->is_active)
                                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
                                                            <i class="fas fa-check-circle"></i>
                                                            @trans_db('active', 'general', 'Activă')
                                                        </span>
                                                    @else
                                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-semibold bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
                                                            <i class="fas fa-times-circle"></i>
                                                            @trans_db('inactive', 'general', 'Inactivă')
                                                        </span>
                                                    @endif
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                                    <div class="flex items-center justify-end gap-2">
                                                        <a href="{{ route('admin.settings.languages.translations', $language) }}"
                                                           class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-blue-100 hover:bg-blue-200 dark:bg-blue-900/30 dark:hover:bg-blue-900/50 text-blue-600 dark:text-blue-400 transition-all border border-blue-200 dark:border-blue-800 shadow-sm"
                                                           title="Editează Traduceri">
                                                            <i class="fas fa-language text-sm"></i>
                                                        </a>
                                                        <a href="{{ route('admin.settings.languages.edit', $language) }}"
                                                           class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-indigo-100 hover:bg-indigo-200 dark:bg-indigo-900/30 dark:hover:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400 transition-all border border-indigo-200 dark:border-indigo-800 shadow-sm"
                                                           title="Editează">
                                                            <i class="fas fa-edit text-sm"></i>
                                                        </a>
                                                        @if(!$language->is_default)
                                                            <form action="{{ route('admin.settings.languages.set-default', $language) }}" method="POST" class="inline">
                                                                @csrf
                                                                @method('PATCH')
                                                                <button type="submit"
                                                                        class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-amber-100 hover:bg-amber-200 dark:bg-amber-900/30 dark:hover:bg-amber-900/50 text-amber-600 dark:text-amber-400 transition-all border border-amber-200 dark:border-amber-800 shadow-sm"
                                                                        title="Setează ca Implicită">
                                                                    <i class="fas fa-star text-sm"></i>
                                                                </button>
                                                            </form>
                                                            <form action="{{ route('admin.settings.languages.toggle-active', $language) }}" method="POST" class="inline">
                                                                @csrf
                                                                @method('PATCH')
                                                                <button type="submit"
                                                                        class="inline-flex items-center justify-center w-9 h-9 rounded-lg {{ $language->is_active ? 'bg-orange-100 hover:bg-orange-200 dark:bg-orange-900/30 dark:hover:bg-orange-900/50 text-orange-600 dark:text-orange-400 border-orange-200 dark:border-orange-800' : 'bg-green-100 hover:bg-green-200 dark:bg-green-900/30 dark:hover:bg-green-900/50 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800' }} transition-all border shadow-sm"
                                                                        title="{{ $language->is_active ? 'Dezactivează' : 'Activează' }}">
                                                                    <i class="fas fa-{{ $language->is_active ? 'eye-slash' : 'eye' }} text-sm"></i>
                                                                </button>
                                                            </form>
                                                            <form action="{{ route('admin.settings.languages.destroy', $language) }}" method="POST" class="inline" onsubmit="return confirm('Sigur vrei să ștergi această limbă?');">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit"
                                                                        class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-red-100 hover:bg-red-200 dark:bg-red-900/30 dark:hover:bg-red-900/50 text-red-600 dark:text-red-400 transition-all border border-red-200 dark:border-red-800 shadow-sm"
                                                                        title="Șterge">
                                                                    <i class="fas fa-trash text-sm"></i>
                                                                </button>
                                                            </form>
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="5" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                                                    Nu există limbi configurate. Adaugă prima limbă!
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-admin-layout>
