@extends('admin.layout')
@section('title', 'Traducciones')
@section('page-title', 'Çeviriler')
@section('content')
    <div class="container-xxl">
        <h4 class="mt-4 mb-4">Çeviriler</h4>
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <div class="d-flex justify-content-between align-items-center mb-3">
            <a href="{{ route('admin.translations.create') }}" class="btn btn-primary">Yeni Çeviri</a>

            <div class="col-md-4">
                <input type="text" id="searchInput" class="form-control" placeholder="Anahtar veya değerde ara...">
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped align-middle">
                <thead>
                    <tr>
                        <th>Anahtar</th>
                        <th>Değer (Önizleme)</th>
                        <th>Durum</th>
                        <th>İşlem</th>
                    </tr>
                </thead>
                <tbody id="translationsTable">
                    @forelse($translations as $t)
                        <tr class="translation-row">
                            <td>
                                <span class="copy-key badge bg-light text-dark p-2 border" data-key="{{ $t->t_key }}"
                                    style="cursor:pointer" title="Haz clic para copiar">
                                    {{ $t->t_key }}
                                </span>
                            </td>
                            <td>

                                {!! Str::limit(strip_tags(isset($t->t_values) ? $t->t_values['tr'] ?? $t->t_values['en'] : 'Çeviri yok'), 40) !!}

                            </td>
                            <td>{!! $t->status ? '<span class="badge bg-success">Aktif</span>' : '<span class="badge bg-secondary">Pasif</span>' !!}</td>
                            <td>
                                <a class="btn btn-sm btn-warning text-white"
                                    href="{{ route('admin.translations.edit', $t) }}">Düzenle</a>
                                <form action="{{ route('admin.translations.destroy', $t) }}" method="POST"
                                    class="d-inline">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-danger"
                                        onclick="return confirm('Silinsin mi?')">Sil</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4">Kayıt yok.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>


    </div>

    @verbatim
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                document.querySelectorAll('.copy-key').forEach((el) => {
                    el.addEventListener('click', () => {
                        const key = el.getAttribute('data-key');
                        // Panoya kopyalanacak metin: {{ t('ANAHTAR') }}
                        const textToCopy = `{{ t('${key}') }}`;

                        navigator.clipboard.writeText(textToCopy).then(() => {
                            const original = el.innerText;
                            el.innerText = "✅ Kopyalandı!";
                            el.classList.add("bg-success", "text-success");
                            setTimeout(() => {
                                el.innerText = original;
                                el.classList.remove("bg-success", "text-success");
                            }, 1200);
                        }).catch(err => {
                            alert("Kopyalanamadı: " + err);
                        });
                    });
                });
            });
        </script>
    @endverbatim
@endsection

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Arama fonksiyonu
        const searchInput = document.getElementById('searchInput');
        const tableBody = document.getElementById('translationsTable');
        const rows = tableBody.querySelectorAll('.translation-row');
        const noResultsRow = tableBody.querySelector('.no-results');

        searchInput.addEventListener('input', function() {
            const searchText = this.value.toLowerCase();
            let hasVisibleRows = false;

            rows.forEach(row => {
                const key = row.querySelector('.copy-key').textContent.toLowerCase();
                const value = row.cells[1].textContent.toLowerCase();

                if (key.includes(searchText) || value.includes(searchText)) {
                    row.style.display = '';
                    hasVisibleRows = true;
                } else {
                    row.style.display = 'none';
                }
            });

            // Sonuç yoksa mesaj göster
            if (noResultsRow) {
                noResultsRow.style.display = hasVisibleRows ? 'none' : '';
            }
        });


    });
</script>