@extends('user::layouts.master')
@section('breadcrumb_title', 'Content Translations')

@push('styles')
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown button {
            background: #2563eb;
            /* blue-600 */
            color: #fff;
            padding: 10px 16px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .dropdown button:hover {
            background: #1d4ed8;
            /* darker blue */
        }

        .dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 200px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 50;
        }

        .dropdown-menu li {
            list-style: none;
        }

        .dropdown-menu a {
            display: block;
            padding: 10px 14px;
            color: #333;
            text-decoration: none;
            font-size: 14px;
        }

        .dropdown-menu a:hover {
            background: #f3f4f6;
        }

        /* show dropdown */
        .dropdown.show .dropdown-menu {
            display: block;
        }
    </style>
@endpush

@section('content')
    <div class="flex justify-between items-center mb-4">
        <h1>Translations for: {{ $content->title }}</h1>
        <div class="flex gap-2">
            <a href="{{ route('author.' . $content->content_type . '.edit', $content->id) }}" class="btn btn-primary">
                <i class="fas fa-edit me-1"></i> Edit Original Content
            </a>
            <a href="{{ route('author.' . $content->content_type . '.index') }}" class="btn btn-primary btn-black">
                <i class="fas fa-arrow-left me-1"></i> Back to {{ ucfirst($content->content_type) }}s
            </a>
        </div>
    </div>

    <div class="card mb-4">
        <h3>Original Content</h3>

        <div class="grid grid-cols-2">
            <div>
                <p><strong>Title:</strong> {{ $content->title }}</p>
                <p><strong>Language:</strong> {{ $content->language?->name }}</p>
                <p><strong>Status:</strong> {{ ucfirst($content->status) }}</p>
            </div>
            <div>
                @if ($content->getFirstMediaUrl('featured'))
                    <img src="{{ $content->getFirstMediaUrl('featured') }}" class="img-thumbnail"
                        alt="{{ $content->title }}">
                @endif
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="flex justify-between items-center">
            <h3 class="mb-3">Existing Translations</h3>
            @if (count($availableLanguages) > 0)
                <div class="dropdown mb-3" id="translationDropdown">
                    <button type="button">
                        <i class="fas fa-plus"></i> Create New Translation
                    </button>
                    <ul class="dropdown-menu">
                        @foreach ($availableLanguages as $language)
                            <li>
                                <a
                                    href="{{ route('author.content.translations.create', ['content' => $content->id, 'language' => $language->code]) }}">
                                    {{ $language->name }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @else
                <span class="text-muted">All languages have translations</span>
            @endif
        </div>

        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th class="text-left">Title</th>
                        <th class="text-left">Language</th>
                        <th class="text-left">Status</th>
                        <th class="text-left">Created</th>
                        <th class="text-left">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($translations as $langCode => $translation)
                        @if ($translation->id !== $content->id)
                            <tr>
                                <td>{{ $translation->title }}</td>
                                <td>{{ $translation->language->name }}</td>
                                <td>{{ ucfirst($translation->status) }}</td>
                                <td>{{ customDateTimeFormate($translation->created_at) }}</td>
                                <td>
                                    <div class="flex gap-3 flex-wrap">

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

                                        <a class="btn btn-primary"
                                            href="{{ route('author.content.translations.edit', ['content' => $content->id, 'translation' => $translation->id]) }}"
                                            class="btn btn-sm btn-info">
                                            <i class="fas fa-language"></i> Translation
                                        </a>

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

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

            $(document).ready(function() {
                // 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('author.content.translations.destroy', ['content' => $content->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.");
                                }
                            });
                        }
                    });
                });
            });

            document.addEventListener("click", function(e) {
                const dropdown = document.getElementById("translationDropdown");
                if (dropdown.contains(e.target)) {
                    dropdown.classList.toggle("show");
                } else {
                    dropdown.classList.remove("show");
                }
            });

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