<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>{{ __('Traduceri') }} - {{ $language->name }} {{ $language->flag }}
                </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">Setari</a>
                    <span class="mx-2">/</span>
                    <a href="{{ route('admin.settings.languages.index') }}" class="text-blue-600 dark:text-blue-400 hover:underline">Limbi</a>
                    <span class="mx-2">/</span>
                    <span>Traduceri</span>
                </p>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('admin.settings.languages.export', $language) }}" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
                    <i class="fas fa-download"></i>
                    <span>Exporta JSON</span>
                </a>
                <button onclick="document.getElementById('importModal').classList.remove('hidden')" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
                    <i class="fas fa-upload"></i>
                    <span>Importa JSON</span>
                </button>
            </div>
        </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="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
                @if($translations->isEmpty())
                    <div class="text-center py-12">
                        <i class="fas fa-language text-gray-400 text-6xl mb-4"></i>
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Nu exista traduceri</h3>
                        <p class="text-gray-500 dark:text-gray-400 mb-4">Adauga traduceri pentru aceasta limba import�nd un fi?ier JSON sau adaug�ndu-le manual din cod.</p>
                    </div>
                @else
                    <!-- Filters -->
                    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                        <div class="flex items-center gap-4">
                            <div class="w-64">
                                <select id="groupFilter" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-blue-500">
                                    <option value="">All Translations</option>
                                    @foreach($translations as $group => $items)
                                        <option value="{{ $group }}">{{ ucfirst($group) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="flex-1">
                                <div class="relative">
                                    <input type="text" id="searchInput" placeholder="Search ..."
                                        class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-blue-500">
                                    <button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded text-sm">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="px-4 py-2 bg-amber-50 dark:bg-amber-900/20 border-b border-amber-200 dark:border-amber-800">
                        <p class="text-sm text-amber-800 dark:text-amber-200">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            <strong>Attention:</strong> Please do not translate text inside double curly braces, e.g., <code class="bg-amber-100 dark:bg-amber-900 px-1">{any_word}</code>. Also, avoid translating words that start with a colon, e.g., <code class="bg-amber-100 dark:bg-amber-900 px-1">:date, :attribute</code>.
                        </p>
                    </div>

                    <form method="POST" action="{{ route('admin.settings.languages.update-translations', $language) }}" id="translationsForm">
                        @csrf
                        @method('PUT')

                        @foreach($translations as $group => $items)
                            <div class="translation-group" data-group="{{ $group }}">
                                @foreach($items as $translation)
                                    <div class="translation-item" data-key="{{ strtolower($translation->key) }}" data-value="{{ strtolower($translation->value) }}">
                                        <table class="w-full border-collapse">
                                            <tr>
                                                <td class="w-1/3 px-4 py-3 bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-sm text-gray-700 dark:text-gray-300">
                                                    {{ $translation->key }}
                                                </td>
                                                <td class="w-8 text-center border-t border-b border-gray-200 dark:border-gray-700">
                                                    <i class="fas fa-arrow-right text-gray-400 text-xs"></i>
                                                </td>
                                                <td class="px-4 py-3 border border-gray-200 dark:border-gray-700">
                                                    <input type="text"
                                                        name="translations[{{ $translation->id }}]"
                                                        value="{{ old('translations.' . $translation->id, $translation->value) }}"
                                                        class="w-full border-0 focus:ring-0 focus:outline-none bg-transparent text-sm text-gray-900 dark:text-gray-100"
                                                        placeholder="">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                @endforeach
                            </div>
                        @endforeach

                        <div class="p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50">
                            <div class="flex items-center justify-end gap-4">
                                <a href="{{ route('admin.settings.languages.index') }}" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                                    �napoi la Limbi
                                </a>
                                <button type="submit" 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-save"></i>
                                    <span>Salveaza Traducerile</span>
                                </button>
                            </div>
                        </div>
                    </form>
                @endif
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const groupFilter = document.getElementById('groupFilter');
            const searchInput = document.getElementById('searchInput');
            const groups = document.querySelectorAll('.translation-group');

            function filterTranslations() {
                const selectedGroup = groupFilter.value.toLowerCase();
                const searchTerm = searchInput.value.toLowerCase();

                groups.forEach(group => {
                    const groupName = group.dataset.group.toLowerCase();
                    const groupItems = group.querySelectorAll('.translation-item');
                    let visibleItems = 0;

                    groupItems.forEach(item => {
                        const key = item.dataset.key;
                        const value = item.dataset.value;
                        const matchesGroup = !selectedGroup || groupName === selectedGroup;
                        const matchesSearch = !searchTerm || key.includes(searchTerm) || value.includes(searchTerm);

                        if (matchesGroup && matchesSearch) {
                            item.style.display = 'flex';
                            visibleItems++;
                        } else {
                            item.style.display = 'none';
                        }
                    });

                    if (visibleItems > 0 && (!selectedGroup || groupName === selectedGroup)) {
                        group.style.display = 'block';
                    } else {
                        group.style.display = 'none';
                    }
                });
            }

            groupFilter.addEventListener('change', filterTranslations);
            searchInput.addEventListener('input', filterTranslations);
        });
    </script>    <!-- Import Modal -->
    <div id="importModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-lg bg-white dark:bg-gray-800">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Importa Traduceri</h3>
                <button onclick="document.getElementById('importModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <form method="POST" action="{{ route('admin.settings.languages.import', $language) }}" enctype="multipart/form-data">
                @csrf
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Selecteaza fi?ier JSON
                    </label>
                    <input type="file" name="file" accept=".json" required
                        class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                </div>

                <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3 mb-4">
                    <p class="text-xs text-blue-800 dark:text-blue-200">
                        <i class="fas fa-info-circle mr-1"></i>
                        Formatul JSON trebuie sa fie: <code>{"group": {"key": "value"}}</code>
                    </p>
                </div>

                <div class="flex justify-end gap-2">
                    <button type="button" onclick="document.getElementById('importModal').classList.add('hidden')"
                        class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                        Anuleaza
                    </button>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
                        Importa
                    </button>
                </div>
            </form>
        </div>
    </div>
</x-admin-layout>
