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

@section('content')
    <div class="flex justify-between flex-wrap gap-3 items-center mb-6">
        <h1 class="text-2xl font-semibold">Edit 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 ({{ $translation->language->name }})</h5>

            <form
                action="{{ route('admin.taxonomy-translations.update', ['taxonomy' => $taxonomy->id, 'translation' => $translation->id]) }}"
                method="POST" enctype="multipart/form-data" class="space-y-4">
                @csrf
                @method('PUT')

                <!-- 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', $translation->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', $translation->slug) }}" required
                        class="w-full rounded-lg border-gray-300 @error('slug') border-red-500 @enderror">
                    @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', $translation->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>
                        @if ($translation->getFirstMediaUrl('featured'))
                            <div class="mb-2">
                                <img src="{{ $translation->getFirstMediaUrl('featured') }}" alt="{{ $translation->name }}"
                                    class="rounded-lg shadow max-h-25 object-contain">
                            </div>
                            <div class="flex items-center mb-2">
                                <input id="remove_featured_image" type="checkbox" name="remove_featured_image"
                                    class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <label for="remove_featured_image" class="ml-2 text-sm text-gray-700">
                                    Remove featured image
                                </label>
                            </div>
                        @endif
                        <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 @error('status') border-red-500 @enderror"
                        {{ old('status', $translation->status) ? 'checked' : '' }}>
                    <label for="status" class="ml-2 text-sm text-gray-700">
                        Active
                    </label>
                    @error('status')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Actions -->
                <div class="flex gap-3">
                    <button type="submit" class="btn btn-primary">
                        Update 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 (optional enhancement for editing)
                $('input[name="name"]').on('blur', function() {
                    const currentSlug = $('input[name="slug"]').val();

                    Swal.fire({
                        title: 'Update Slug',
                        text: 'Would you like to update the slug based on the new name?',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Yes',
                        cancelButtonText: 'No',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            const name = $(this).val();
                            const slug = name.toLowerCase()
                                .replace(/[^\w\s-]/g, '')
                                .replace(/\s+/g, '-')
                                .replace(/-+/g, '-');
                            $('input[name="slug"]').val(slug);
                        }
                    });
                });
            });
        })(jQuery);
    </script>
@endpush