@extends('layouts.admin')

@section('title', 'Admin - Tags')

@section('content')
<div class="container mx-auto px-6 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-semibold text-gray-900 dark:text-white">{{ __('admin.tags') }}</h1>
        <a href="{{ route('admin.tags.create') }}" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded-lg transition duration-200">
            {{ __('admin.add_new_tag') }}
        </a>
    </div>

    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif

    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
        <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 class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ __('admin.name') }}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ __('admin.actions') }}</th>
                    </tr>
                </thead>
            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($tags as $tag)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700" data-tag-id="{{ $tag->id }}">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                                {{ $tag->name }}
                            </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex space-x-2">
                                <a href="{{ route('admin.tags.edit', $tag) }}" class="text-orange-600 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300">{{ __('admin.edit') }}</a>
                                <button type="button" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 delete-tag-btn" data-url="{{ route('admin.tags.destroy', $tag) }}">{{ __('admin.delete') }}</button>
                            </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                        <td colspan="2" class="px-6 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                                {{ __('admin.no_tags_found') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
    </div>
</div>

{{-- Pagination controls --}}
@if($tags instanceof \Illuminate\Pagination\LengthAwarePaginator)
    <div class="mt-4 flex justify-center">
        {{ $tags->links() }}
    </div>
@endif
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const serverAlert = document.querySelector('.bg-green-100[role="alert"]');
    if (serverAlert) {
        setTimeout(() => serverAlert.remove(), 500);
    }

    document.querySelectorAll('.delete-tag-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            if (!confirm('{{ __('admin.are_you_sure_you_want_to_delete_this_tag') }}')) return;
            const url = this.getAttribute('data-url');
            const row = this.closest('tr');
            fetch(url, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    row.remove();
                    showTagSuccess('{{ __('admin.tag_deleted_successfully') }}');
                } else {
                    alert(data.message || '{{ __('admin.failed_to_delete_tag') }}');
                }
            })
            .catch(() => alert('{{ __('admin.failed_to_delete_tag') }}'));
        });
    });

    function showTagSuccess(msg) {
        let alert = document.createElement('div');
        alert.className = 'bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4';
        alert.role = 'alert';
        alert.innerHTML = `<p>${msg}</p>`;
        document.querySelector('.container').prepend(alert);
        setTimeout(() => alert.remove(), 500);
    }
});
</script>
@endpush