@extends('layouts.admin')

@section('title', __('admin.add_new_catalog'))

@section('content')
<div class="container mx-auto px-6 py-8">
    <div class="max-w-4xl mx-auto">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-white">{{ __('admin.add_new_catalog') }}</h1>
            <a href="{{ route('admin.catalogs.index') }}" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded-lg transition duration-200">
                {{ __('admin.cancel') }}
            </a>
        </div>

        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
            <form action="{{ route('admin.catalogs.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <div class="mb-6">
                    <div class="border-b border-gray-200 dark:border-gray-700">
                        <nav class="-mb-px flex space-x-8">
                            <button type="button" class="language-tab active border-indigo-500 text-indigo-600 py-2 px-1 border-b-2 font-medium text-sm" data-lang="">
                                {{ __('admin.english') }}
                            </button>
                            <button type="button" class="language-tab border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-2 px-1 border-b-2 font-medium text-sm" data-lang="-ru">
                                {{ __('admin.russian') }}
                            </button>
                            <button type="button" class="language-tab border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-2 px-1 border-b-2 font-medium text-sm" data-lang="-az">
                                {{ __('admin.azerbaijani') }}
                            </button>
                        </nav>
                    </div>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ __('admin.catalog_title') }} *
                    </label>
                    
                    <div class="language-content" data-lang="">
                        <input type="text" name="title[en]" value="{{ old('title.en') }}" required
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white"
                               placeholder="{{ __('admin.catalog_title_en') }}">
                    </div>
                    
                    <div class="language-content hidden" data-lang="-ru">
                        <input type="text" name="title[ru]" value="{{ old('title.ru') }}"
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white"
                               placeholder="{{ __('admin.catalog_title_ru') }}">
                    </div>
                    
                    <div class="language-content hidden" data-lang="-az">
                        <input type="text" name="title[az]" value="{{ old('title.az') }}"
                               class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white"
                               placeholder="{{ __('admin.catalog_title_az') }}">
                    </div>
                    
                    @error('title.en')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ __('admin.catalog_description') }}
                    </label>
                    
                    <div class="language-content" data-lang="">
                        <textarea name="description[en]" rows="3"
                                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white"
                                  placeholder="{{ __('admin.catalog_description_en') }}">{{ old('description.en') }}</textarea>
                    </div>
                    
                    <div class="language-content hidden" data-lang="-ru">
                        <textarea name="description[ru]" rows="3"
                                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white"
                                  placeholder="{{ __('admin.catalog_description_ru') }}">{{ old('description.ru') }}</textarea>
                    </div>
                    
                    <div class="language-content hidden" data-lang="-az">
                        <textarea name="description[az]" rows="3"
                                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white"
                                  placeholder="{{ __('admin.catalog_description_az') }}">{{ old('description.az') }}</textarea>
                    </div>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ __('admin.catalog_file') }} *
                    </label>
                    <div class="relative">
                        <input type="file" id="catalog_file" name="catalog_file" accept=".pdf,.doc,.docx" required class="hidden" onchange="document.getElementById('catalog-file-filename').textContent = this.files[0] ? this.files[0].name : '{{ __('admin.no_file_chosen') }}';">
                        <label for="catalog_file" class="inline-block cursor-pointer bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-4 rounded-md shadow-sm mr-2">{{ __('admin.choose_file') }}</label>
                        <span id="catalog-file-filename" class="text-gray-500 align-middle">{{ __('admin.no_file_chosen') }}</span>
                    </div>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        {{ __('admin.upload_catalog_file_hint') }}
                    </p>
                    @error('catalog_file')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ __('admin.preview_image') }} ({{ __('admin.optional') }})
                    </label>
                    <div class="relative">
                        <input type="file" id="preview_image" name="preview_image" accept="image/*" class="hidden" onchange="if(this.files[0]){document.getElementById('preview-img').src=URL.createObjectURL(this.files[0]);document.getElementById('preview-img').classList.remove('hidden');document.getElementById('preview-image-filename').textContent=this.files[0].name;}else{document.getElementById('preview-img').classList.add('hidden');document.getElementById('preview-image-filename').textContent='{{ __('admin.no_file_chosen') }}';}">
                        <label for="preview_image" class="inline-block cursor-pointer bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-4 rounded-md shadow-sm mr-2">{{ __('admin.choose_file') }}</label>
                        <span id="preview-image-filename" class="text-gray-500 align-middle">{{ __('admin.no_file_chosen') }}</span>
                    </div>
                    <img id="preview-img" src="#" alt="Preview" class="hidden mt-2 max-h-32 rounded shadow" />
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">JPG, PNG, WEBP, max 2MB</p>
                    @error('preview_image')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ __('admin.sort_order') }}
                    </label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" min="0"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white">
                </div>

                <div class="mb-6">
                    <div class="flex items-center">
                        <input id="is_active" name="is_active" type="checkbox" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                        <label for="is_active" class="ml-2 block text-sm text-gray-900 dark:text-white">
                            {{ __('admin.is_active') }}
                        </label>
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded-lg transition duration-200">
                        {{ __('admin.save_catalog') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabs = document.querySelectorAll('.language-tab');
    const contents = document.querySelectorAll('.language-content');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const lang = this.getAttribute('data-lang');
            
            tabs.forEach(t => {
                t.classList.remove('active', 'border-indigo-500', 'text-indigo-600');
                t.classList.add('border-transparent', 'text-gray-500');
            });
            this.classList.add('active', 'border-indigo-500', 'text-indigo-600');
            this.classList.remove('border-transparent', 'text-gray-500');
            
            contents.forEach(content => {
                if (content.getAttribute('data-lang') === lang) {
                    content.classList.remove('hidden');
                } else {
                    content.classList.add('hidden');
                }
            });
        });
    });
});
</script>
@endsection