@extends('backend.layouts.app')

@section('title', 'Edit Speech')

@section('content')
    @php
        $pageTitle = 'Edit Speech';
        $indexRoute = 'content-speech.index';
        $indexLabel = 'Speeches';
    @endphp
    @include('backend.layouts.partials._page_header')

    <form action="{{ route('content-speech.update', $speech->speech_id) }}" method="POST" enctype="multipart/form-data"
        id="main-form">
        @csrf
        @method('PUT')

        <div class="space-y-6">
            @include('backend.module.contentSpeech._form')

            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="flex flex-wrap items-center justify-between gap-3 px-5 py-4 sm:px-6 sm:py-5">
                    <div>
                        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Translations</h3>
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                            Each translation is a separate record (parent → translation).
                        </p>
                    </div>
                    <a href="{{ route('content-speech.add-translation', $speech->speech_id) }}"
                        class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-white/[0.03]">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14M5 12h14"/></svg>
                        Add Translation
                    </a>
                </div>

                <div class="border-t border-gray-100 dark:border-gray-800">
                    @if ($translations->isEmpty())
                        <div class="p-6 text-center text-sm text-gray-500 dark:text-gray-400">
                            No translations yet. Click "Add Translation" to create one.
                        </div>
                    @else
                        <div class="max-w-full overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b border-gray-100 dark:border-gray-800">
                                        <th class="px-5 py-3 text-left"><span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Language</span></th>
                                        <th class="px-5 py-3 text-left"><span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Title</span></th>
                                        <th class="px-5 py-3 text-center"><span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Status</span></th>
                                        <th class="px-5 py-3 text-center"><span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Actions</span></th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                    @foreach ($translations as $translation)
                                        <tr class="transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50">
                                            <td class="px-5 py-4 text-sm font-medium text-gray-800 dark:text-white/90">
                                                {{ $languages[$translation->speech_language] ?? $translation->speech_language ?? "-" }}
                                            </td>
                                            <td class="px-5 py-4 text-sm text-gray-700 dark:text-gray-300">{{ $translation->speech_title ?? "-" }}</td>
                                            <td class="px-5 py-4 text-center">
                                                @php
                                                    $badge = match ($translation->speech_status) {
                                                        'PUBLISHED' => 'bg-success-50 text-success-600 dark:bg-success-500/10 dark:text-success-400',
                                                        'DRAFT' => 'bg-warning-50 text-warning-600 dark:bg-warning-500/10 dark:text-warning-400',
                                                        default => 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300',
                                                    };
                                                @endphp
                                                <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium {{ $badge }}">
                                                    {{ $statuses[$translation->speech_status] ?? $translation->speech_status ?? "-" }}
                                                </span>
                                            </td>
                                            <td class="px-5 py-4">
                                                <div class="flex items-center justify-center gap-2">
                                                    <a href="{{ route('content-speech.edit', $translation->speech_id) }}"
                                                        class="inline-flex items-center justify-center rounded-lg bg-warning-50 p-2 text-warning-500 hover:bg-warning-100 dark:bg-warning-500/10 dark:text-warning-400"
                                                        title="Edit Translation">
                                                        <svg class="fill-current" width="18" height="18" viewBox="0 0 18 18" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 2.5L15.5 4.5L5 15H3V13L13.5 2.5ZM14.5 1.5L12.5 3.5L14.5 5.5L16.5 3.5L14.5 1.5Z" fill=""></path></svg>
                                                    </a>
                                                    <form action="{{ route('content-speech.delete-translation', $translation->speech_id) }}" method="POST" class="inline delete-translation-form">
                                                        @csrf
                                                        @method("DELETE")
                                                        <button type="submit"
                                                            class="inline-flex items-center justify-center rounded-lg bg-error-50 p-2 text-error-500 hover:bg-error-100 dark:bg-error-500/10 dark:text-error-400"
                                                            title="Delete Translation">
                                                            <svg class="fill-current" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M6 2.5H12L13 3.5H16V5H2V3.5H5L6 2.5ZM3.5 6H14.5L14 15.5H4L3.5 6ZM6.5 8.5H8V13.5H6.5V8.5ZM10 8.5H11.5V13.5H10V8.5Z" /></svg>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
            <div class="flex justify-end gap-3">
                <a href="{{ route('content-speech.index') }}"
                    class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300">
                    Cancel
                </a>
                <button type="submit" class="rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600">
                    Update
                </button>
            </div>
        </div>
    </form>
@endsection

@push("styles")
    <style>
        [x-cloak] { display: none !important; }
    </style>
    @include("backend.layouts.partials._directory-select2-styles")
@endpush

@push("scripts")
    <script src="{{ asset('vendor/jquery.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/dist/js/select2.min.js') }}"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            $(".speech-select2").select2({
                width: "100%",
                placeholder: function () {
                    return $(this).data("placeholder");
                },
                allowClear: true
            });

            document.querySelectorAll(".filepond").forEach(function (el) {
                FilePond.create(el, {
                    credits: false,
                    allowImagePreview: true,
                    imagePreviewHeight: 170,
                    storeAsFile: true
                });
            });

            document.querySelectorAll(".delete-translation-form").forEach(function (form) {
                form.addEventListener("submit", function (e) {
                    e.preventDefault();
                    Swal.fire({
                        title: "Delete translation?",
                        text: "This translation will be deleted!",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#ef4444",
                        cancelButtonColor: "#6b7280",
                        confirmButtonText: "Yes, delete it!",
                        width: "380px",
                    }).then(function (result) {
                        if (result.isConfirmed) form.submit();
                    });
                });
            });
        });
    </script>
@endpush