@extends('user::layouts.master')
@section('breadcrumb_title', 'Create Translation')

@section('content')
    <div class="flex justify-between items-center flex-wrap gap-3 mb-4">
        <h1>Create Translation for: {{ $content->title }}</h1>
        <div>
            <a href="{{ route('author.content.translations.index', $content->id) }}" class="btn btn-secondary">
                <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 class="mb-3 input-with-label">
                <label>Title</label>
                <input type="text" class="" value="{{ $content->title }}" readonly>
            </div>

            <div class="mb-3 input-with-label">
                <label>Slug</label>
                <input type="text" class="" 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 class="card">
            <h3 class="mb-3">Translation ({{ $targetLanguage }})</h3>
            <form action="{{ route('author.content.translations.store', $content->id) }}" method="POST">
                @csrf
                <input type="hidden" name="language_code" value="{{ $targetLanguage }}">

                <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') }}" 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') }}" required>
                    @error('slug')
                        <div class="text-red-400 text-xs">{{ $message }}</div>
                    @enderror
                    <small class="text-muted">Leave empty to auto-generate from title</small>
                </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') }}</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') }}</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') === 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="published" {{ old('status') === 'published' ? 'selected' : '' }}>Published
                        </option>
                    </select>
                    @error('status')
                        <div class="text-red-400 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3 flex gap-4">
                    <button type="submit" class="btn btn-primary">Create Translation</button>
                    <a href="{{ route('author.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',
                });

                // Auto-generate slug from title (supports ALL languages)
                $('input[name="title"]').on('blur', function() {
                    if ($('input[name="slug"]').val() === '') {
                        const title = $(this).val();
                        
                        // Generate slug that works with ALL languages (preserves original characters)
                        const slug = title
                            .trim()
                            .replace(/\s+/g, '-')              // Replace spaces with hyphens
                            .replace(/[^\p{L}\p{M}\p{N}\-]/gu, '')  // Keep all letters, marks, numbers, and hyphens
                            .replace(/-+/g, '-')               // Replace multiple hyphens with single hyphen
                            .replace(/^-+|-+$/g, '');          // Remove leading/trailing hyphens
                        
                        $('input[name="slug"]').val(slug);
                    }
                });
            });
        })(jQuery);
    </script>
@endpush