@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Edit Translation')

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

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="card">
            <h3 class="mb-3">Original Content ({{ $content->language?->name }})</h3>
            <div>
                <div class="mb-3 input-with-label">
                    <label>Title</label>
                    <input type="text" class="form-control" value="{{ $content->title }}" readonly>
                </div>

                <div class="mb-3 input-with-label">
                    <label>Slug</label>
                    <input type="text" class="form-control" value="{{ $content->slug }}" readonly>
                </div>

                @if ($content->excerpt)
                    <div class="mb-3 input-with-label">
                        <label>Short Description</label>
                        <textarea class="rich-editor" rows="3" readonly>{{ $content->excerpt }}</textarea>
                    </div>
                @endif

                @if ($content->content)
                    <div class="mb-3 input-with-label">
                        <label>Content</label>
                        <textarea class="rich-editor" rows="3" readonly>
                            {!! $content->content !!}
                        </textarea>
                    </div>
                @endif

                @if ($content->getFirstMediaUrl('featured'))
                    <div class="mb-3 input-with-label">
                        <label>Featured Image</label>
                        <div>
                            <img src="{{ $content->getFirstMediaUrl('featured') }}" class="img-thumbnail"
                                alt="{{ $content->title }}" style="max-height: 200px;">
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <div class="card">
            <h3 class="mb-3">Translation ({{ $translation->language->name }})</h3>
            <form
                action="{{ route('admin.content.translations.update', ['content' => $content->id, 'translation' => $translation->id]) }}"
                method="POST">
                @csrf
                @method('PUT')

                <div class="mb-3 input-with-label">
                    <label>Title <span class="text-danger">*</span></label>
                    <input type="text" class="@error('title') is-invalid @enderror" name="title"
                        value="{{ old('title', $translation->title) }}" required>
                    @error('title')
                        <div class="text-red-400 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3 input-with-label">
                    <label>Slug <span class="text-danger">*</span></label>
                    <input type="text" class="@error('slug') is-invalid @enderror" name="slug"
                        value="{{ old('slug', $translation->slug) }}" required>
                    @error('slug')
                        <div class="text-red-400 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3 input-with-label">
                    <label>Short Description</label>
                    <textarea class="rich-editor @error('excerpt') is-invalid @enderror" name="excerpt" rows="3">
                                {{ old('excerpt', $translation->excerpt) }}
                            </textarea>
                    @error('excerpt')
                        <div class="text-red-400 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3 input-with-label">
                    <label>Content</label>
                    <textarea class="rich-editor @error('content') is-invalid @enderror" name="content">{{ old('content', $translation->content) }}</textarea>
                    @error('content')
                        <div class="text-red-400 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3 input-with-label">
                    <label>Status <span class="text-danger">*</span></label>
                    <select class="form-select @error('status') is-invalid @enderror" name="status" required>
                        <option value="draft" {{ old('status', $translation->status) === 'draft' ? 'selected' : '' }}>
                            Draft</option>
                        <option value="published"
                            {{ old('status', $translation->status) === 'published' ? 'selected' : '' }}>Published
                        </option>
                    </select>
                    @error('status')
                        <div class="text-red-400 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3 flex flex-wrap gap-3">
                    <button type="submit" class="btn btn-primary">Update Translation</button>
                    <a href="{{ route('admin.content.translations.index', $content->id) }}"
                        class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('common/tinymce/js/tinymce/tinymce.min.js') }}"></script>
    <script>
        (function($) {
            "use strict"
            $(document).ready(function() {
                // Initialize TinyMCE
                tinymce.init({
                    selector: '.rich-editor',
                    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
                    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
                    tinycomments_mode: 'embedded',
                    tinycomments_author: 'Author name',
                });
            });
        })(jQuery);
    </script>
@endpush