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

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

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Original Taxonomy -->
        <div class="card">
            <h5 class="text-lg font-medium mb-5">Original Taxonomy ({{ $taxonomy->language->name }})</h5>

            <div class="mb-4 input-with-label">
                <label>Name</label>
                <input type="text" value="{{ $taxonomy->name }}" readonly>
            </div>

            <div class="mb-4 input-with-label">
                <label>Slug</label>
                <input type="text" value="{{ $taxonomy->slug }}" readonly>
            </div>

            @if ($taxonomy->description)
                <div class="mb-4 input-with-label">
                    <label>Description</label>
                    <textarea rows="3" readonly>{{ $taxonomy->description }}</textarea>
                </div>
            @endif

            @if ($taxonomy->getFirstMediaUrl('featured'))
                <div class="mb-4 input-with-label">
                    <label>Featured Image</label>
                    <img src="{{ $taxonomy->getFirstMediaUrl('featured') }}" alt="{{ $taxonomy->name }}"
                        class="rounded-lg shadow max-h-52 object-contain">
                </div>
            @endif
        </div>

        <!-- Translation Form -->
        <div class="card">
            <h5 class="text-lg font-medium mb-5">Translation ({{ $targetLanguage }})</h5>
            <form action="{{ route('admin.taxonomy-translations.store', $taxonomy->id) }}" method="POST"
                enctype="multipart/form-data" class="space-y-4">
                @csrf
                <input type="hidden" name="language_code" value="{{ $targetLanguage }}">

                <!-- Name -->
                <div class="mb-4 input-with-label">
                    <label>Name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name') }}" required
                        class="w-full rounded-lg border-gray-300 @error('name') border-red-500 @enderror">
                    @error('name')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Slug -->
                <div class="mb-4 input-with-label">
                    <label>Slug <span class="text-red-500">*</span></label>
                    <input type="text" name="slug" value="{{ old('slug') }}" required
                        class="w-full rounded-lg border-gray-300 @error('slug') border-red-500 @enderror">
                    <p class="text-gray-500 text-sm mt-1">Leave empty to auto-generate from name</p>
                    @error('slug')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Description -->
                <div class="mb-4 input-with-label">
                    <label>Description</label>
                    <textarea name="description" rows="3"
                        class="w-full rounded-lg border-gray-300 @error('description') border-red-500 @enderror">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Featured Image -->
                @if ($taxonomy->taxonomy_type === 'category' || $taxonomy->taxonomy_type === 'brand')
                    <div class="mb-4 input-with-label">
                        <label>Featured Image</label>
                        <input type="file" name="featured_image" accept="image/*"
                            class="w-full text-sm border rounded-lg @error('featured_image') border-red-500 @enderror">
                        @error('featured_image')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                @endif

                <!-- Status -->
                <div class="flex items-center">
                    <input id="status" type="checkbox" name="status" value="1"
                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                        {{ old('status') ? 'checked' : '' }}>
                    <label for="status" class="ml-2 text-sm text-gray-700">Active</label>
                </div>

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

@push('scripts')
    <script>
        (function($) {
            "use strict"
            $(document).ready(function() {
                // Auto-generate slug from name (supports ALL languages)
                $('input[name="name"]').on('blur', function() {
                    if ($('input[name="slug"]').val() === '') {
                        const name = $(this).val();
                        
                        // Generate slug that works with ALL languages (preserves original characters)
                        const slug = name
                            .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