@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Taxonomy Translations')

@section('content')
    <div class="flex justify-between items-center mb-6 flex-wrap gap-3">
        <h1 class="text-2xl font-semibold">Translations for: {{ $taxonomy->name }}</h1>
        <div class="flex gap-2">
            <a href="{{ route('admin.taxonomy.edit', $taxonomy->id) }}"
                class="btn btn-primary">
                <i class="fas fa-edit mr-2"></i> Edit Original Taxonomy
            </a>
            <a href="{{ route('admin.taxonomy.index') }}"
                class="btn btn-primary btn-black">
                <i class="fas fa-arrow-left mr-2"></i> Back to Taxonomies
            </a>
        </div>
    </div>

    <!-- Original Taxonomy -->
    <div class="card mb-5">
        <h5 class="text-lg font-medium mb-2">Original Taxonomy</h5>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="md:col-span-2 space-y-2">
                <p><strong>Name:</strong> {{ $taxonomy->name }}</p>
                <p><strong>Type:</strong> {{ ucfirst($taxonomy->taxonomy_type) }}</p>
                <p><strong>Language:</strong> {{ $taxonomy->language->name }}</p>
            </div>
            <div>
                @if ($taxonomy->getFirstMediaUrl('featured'))
                    <img src="{{ $taxonomy->getFirstMediaUrl('featured') }}" alt="{{ $taxonomy->name }}"
                        class="rounded-lg shadow max-h-48 object-contain">
                @endif
            </div>
        </div>
    </div>

    <!-- Existing Translations -->
    <div class="card mb-5">
        <div class="flex justify-between items-center">
            <h5 class="text-lg font-medium mb-3">Existing Translations</h5>
            @if (count($availableLanguages) > 0)
                <div class="relative inline-block text-left">
                    <button type="button"
                        class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"
                        id="createTranslationDropdown">
                        <i class="fas fa-plus mr-2"></i> Create New Translation
                    </button>
                    <div id="dropdownMenu"
                        class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                        <ul class="py-1">
                            @foreach ($availableLanguages as $language)
                                <li>
                                    <a href="{{ route('admin.taxonomy-translations.create', ['taxonomy' => $taxonomy->id, 'language' => $language['code']]) }}"
                                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                        {{ $language['name'] }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @else
                <span class="text-gray-500 text-sm">All languages have translations</span>
            @endif
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full border border-gray-200 rounded-lg">
                <thead>
                    <tr>
                        <th class="text-left">Language</th>
                        <th class="text-left">Name</th>
                        <th class="text-left">Status</th>
                        <th class="text-left">Created</th>
                        <th class="text-left">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($translations as $langCode => $translation)
                        @if ($translation->id !== $taxonomy->id)
                            <tr>
                                <td class="px-4 py-2">{{ $translation->language->name }}</td>
                                <td class="px-4 py-2">{{ $translation->name }}</td>
                                <td class="px-4 py-2">
                                    <span
                                        class="px-2 py-1 text-xs rounded-full {{ $translation->status ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                        {{ $translation->status ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>
                                <td class="px-4 py-2">{{ $translation->created_at->format('M d, Y') }}</td>
                                <td>
                                    <div class="flex gap-2">

                                        @include('backend::components.edit-button', [
                                            'route' => route('admin.taxonomy.edit', $translation->id),
                                        ])

                                        <a href="{{ route('admin.taxonomy-translations.edit', ['taxonomy' => $taxonomy->id, 'translation' => $translation->id]) }}"
                                            class="inline-flex items-center px-3 py-1 bg-indigo-500 text-white rounded-lg text-sm hover:bg-indigo-600 transition">
                                            <i class="fas fa-language"></i>
                                        </a>

                                        @include('backend::components.delete-button', [
                                            'id' => $translation->id,
                                            'class' => 'delete-translation',
                                        ])
                                    </div>
                                </td>
                            </tr>
                        @endif
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-6 text-center text-gray-500">No translations available.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function($) {
            "use strict"

            $(document).ready(function() {
                // Dropdown toggle
                $('#createTranslationDropdown').on('click', function() {
                    $('#dropdownMenu').toggleClass('hidden');
                });

                // Delete translation
                $('.delete-translation').on('click', function() {
                    const translationId = $(this).data('id');

                    Swal.fire({
                        title: "Are you sure?",
                        text: "You won't be able to revert this!",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#3085d6",
                        cancelButtonColor: "#d33",
                        confirmButtonText: "Yes, delete it!"
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                url: `{{ route('admin.taxonomy-translations.destroy', ['taxonomy' => $taxonomy->id, 'translation' => ':id']) }}`
                                    .replace(':id', translationId),
                                type: 'DELETE',
                                data: {
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(response) {
                                    if (response.success) {
                                        Swal.fire({
                                            title: "Deleted!",
                                            text: "The translation has been deleted.",
                                            icon: "success"
                                        }).then(() => {
                                            location.reload();
                                        });
                                    } else {
                                        toastr.error(
                                            "Failed to delete translation.");
                                    }
                                },
                                error: function() {
                                    toastr.error("Server error.");
                                }
                            });
                        }
                    });
                });
            });

        })(jQuery);
    </script>
@endpush