@extends('layouts.admin')

@section('title', 'Admin - Add Product')

@section('content')
<div class="container mx-auto px-4 py-8">
    <h1 class="text-4xl font-extrabold text-orange-500 mb-10 drop-shadow-lg tracking-wide text-center uppercase w-full">
        {{ __('admin.add_new_product') }}
    </h1>

    <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        @csrf
        
        <div class="lg:col-span-2">
            <div class="bg-white shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold text-gray-700 mb-4">{{ __('admin.product_information') }}</h2>
                
                <div class="mb-6">
                    <div class="border-b border-gray-200">
                        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                            <button type="button" class="language-tab border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm active" data-lang="en">{{ __('admin.english') }}</button>
                            <button type="button" class="language-tab border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap 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 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" data-lang="az">{{ __('admin.azerbaijani') }}</button>
                        </nav>
                    </div>
                </div>

                <div class="language-content" data-lang="en">
                    <div class="mb-4">
                        <label for="name_en" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.product_name_en') }}</label>
                        <input type="text" id="name_en" name="name[en]" value="{{ old('name.en') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
                        @error('name.en')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="description_en" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.description_en') }}</label>
                        <textarea id="description_en" name="description[en]" rows="6" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">{{ old('description.en') }}</textarea>
                        @error('description.en')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="short_description_en" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.short_description_en') }}</label>
                        <textarea id="short_description_en" name="short_description[en]" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">{{ old('short_description.en') }}</textarea>
                         @error('short_description.en')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-6 mt-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">{{ __('admin.tags') }}</label>
                        <div class="space-y-4">
                            <div>
                                <div class="flex items-center mb-2">
                                    <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ __('admin.all_tags') }}</span>
                                    <span class="ml-2 text-xs text-gray-400 dark:text-gray-500" id="all-tags-count">0</span>
                                </div>
                                <div id="all-tags-bar" class="flex flex-wrap gap-2 p-3 border-2 border-dashed border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800/50 min-h-[60px] transition-all duration-200 hover:border-gray-300 dark:hover:border-gray-500">
                                    @foreach($tags as $tag)
                                        @php
                                            $tagName = is_array($tag->name) ? ($tag->name[app()->getLocale()] ?? collect($tag->name)->first()) : $tag->name;
                                        @endphp
                                        <span class="tag-pill tag-available cursor-pointer select-none px-4 py-2 rounded-full border-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 whitespace-nowrap transition-all duration-200 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 dark:hover:bg-blue-900/20 dark:hover:text-blue-300 dark:hover:border-blue-600 shadow-sm hover:shadow-md transform hover:scale-105"
                                            data-tag-id="{{ $tag->id }}" data-tag-name="{{ $tagName }}">
                                            <span class="flex items-center">
                                                <svg class="w-4 h-4 mr-1.5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                                </svg>
                                                {{ $tagName }}
                                            </span>
                                        </span>
                                    @endforeach
                                    <div class="flex items-center justify-center w-full text-gray-400 dark:text-gray-500 text-sm italic" id="all-tags-empty" style="display: none;">
                                        {{ __('admin.no_tags_available') }}
                                    </div>
                                </div>
                            </div>

                            <div>
                                <div class="flex items-center mb-2">
                                    <div class="w-2 h-2 bg-orange-500 rounded-full mr-2"></div>
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ __('admin.product_tags') }}</span>
                                    <span class="ml-2 text-xs text-gray-400 dark:text-gray-500" id="product-tags-count">0</span>
                                </div>
                                <div id="product-tags-bar" class="flex flex-wrap gap-2 p-3 border-2 border-dashed border-orange-200 dark:border-orange-700 rounded-lg bg-orange-50 dark:bg-orange-900/10 min-h-[60px] transition-all duration-200">
                                    <div class="flex items-center justify-center w-full text-gray-400 dark:text-gray-500 text-sm italic" id="product-tags-empty">
                                        {{ __('admin.no_tags_selected') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 flex items-center">
                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            {{ __('admin.select_tags_apply') }}
                        </p>
                        @error('tags')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="language-content hidden" data-lang="ru">
                    <div class="mb-4">
                        <label for="name_ru" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.product_name_ru') }}</label>
                        <input type="text" id="name_ru" name="name[ru]" value="{{ old('name.ru') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                        @error('name.ru')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="description_ru" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.description_ru') }}</label>
                        <textarea id="description_ru" name="description[ru]" rows="6" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">{{ old('description.ru') }}</textarea>
                        @error('description.ru')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="short_description_ru" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.short_description_ru') }}</label>
                        <textarea id="short_description_ru" name="short_description[ru]" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">{{ old('short_description.ru') }}</textarea>
                         @error('short_description.ru')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-6 mt-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">{{ __('admin.tags') }}</label>
                        <div class="space-y-4">
                            <div>
                                <div class="flex items-center mb-2">
                                    <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ __('admin.all_tags') }}</span>
                                    <span class="ml-2 text-xs text-gray-400 dark:text-gray-500" id="all-tags-count-ru">0</span>
                                </div>
                                <div id="all-tags-bar-ru" class="flex flex-wrap gap-2 p-3 border-2 border-dashed border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800/50 min-h-[60px] transition-all duration-200 hover:border-gray-300 dark:hover:border-gray-500">
                                    @foreach($tags as $tag)
                                        @php
                                            $tagName = is_array($tag->name) ? ($tag->name[app()->getLocale()] ?? collect($tag->name)->first()) : $tag->name;
                                        @endphp
                                        <span class="tag-pill tag-available cursor-pointer select-none px-4 py-2 rounded-full border-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 whitespace-nowrap transition-all duration-200 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 dark:hover:bg-blue-900/20 dark:hover:text-blue-300 dark:hover:border-blue-600 shadow-sm hover:shadow-md transform hover:scale-105"
                                            data-tag-id="{{ $tag->id }}" data-tag-name="{{ $tagName }}">
                                            <span class="flex items-center">
                                                <svg class="w-4 h-4 mr-1.5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                                </svg>
                                                {{ $tagName }}
                                            </span>
                                        </span>
                                    @endforeach
                                    <div class="flex items-center justify-center w-full text-gray-400 dark:text-gray-500 text-sm italic" id="all-tags-empty-ru" style="display: none;">
                                        {{ __('admin.no_tags_available') }}
                                    </div>
                                </div>
                            </div>

                            <div>
                                <div class="flex items-center mb-2">
                                    <div class="w-2 h-2 bg-orange-500 rounded-full mr-2"></div>
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ __('admin.product_tags') }}</span>
                                    <span class="ml-2 text-xs text-gray-400 dark:text-gray-500" id="product-tags-count-ru">0</span>
                                </div>
                                <div id="product-tags-bar-ru" class="flex flex-wrap gap-2 p-3 border-2 border-dashed border-orange-200 dark:border-orange-700 rounded-lg bg-orange-50 dark:bg-orange-900/10 min-h-[60px] transition-all duration-200">
                                    <div class="flex items-center justify-center w-full text-gray-400 dark:text-gray-500 text-sm italic" id="product-tags-empty-ru">
                                        {{ __('admin.no_tags_selected') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 flex items-center">
                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            {{ __('admin.select_tags_apply') }}
                        </p>
                        @error('tags')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="language-content hidden" data-lang="az">
                    <div class="mb-4">
                        <label for="name_az" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.product_name_az') }}</label>
                        <input type="text" id="name_az" name="name[az]" value="{{ old('name.az') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                        @error('name.az')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="description_az" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.description_az') }}</label>
                        <textarea id="description_az" name="description[az]" rows="6" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">{{ old('description.az') }}</textarea>
                        @error('description.az')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="short_description_az" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.short_description_az') }}</label>
                        <textarea id="short_description_az" name="short_description[az]" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">{{ old('short_description.az') }}</textarea>
                         @error('short_description.az')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-6 mt-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">{{ __('admin.tags') }}</label>
                        <div class="space-y-4">
                            <div>
                                <div class="flex items-center mb-2">
                                    <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ __('admin.all_tags') }}</span>
                                    <span class="ml-2 text-xs text-gray-400 dark:text-gray-500" id="all-tags-count-az">0</span>
                                </div>
                                <div id="all-tags-bar-az" class="flex flex-wrap gap-2 p-3 border-2 border-dashed border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800/50 min-h-[60px] transition-all duration-200 hover:border-gray-300 dark:hover:border-gray-500">
                                    @foreach($tags as $tag)
                                        @php
                                            $tagName = is_array($tag->name) ? ($tag->name[app()->getLocale()] ?? collect($tag->name)->first()) : $tag->name;
                                        @endphp
                                        <span class="tag-pill tag-available cursor-pointer select-none px-4 py-2 rounded-full border-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 whitespace-nowrap transition-all duration-200 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 dark:hover:bg-blue-900/20 dark:hover:text-blue-300 dark:hover:border-blue-600 shadow-sm hover:shadow-md transform hover:scale-105"
                                            data-tag-id="{{ $tag->id }}" data-tag-name="{{ $tagName }}">
                                            <span class="flex items-center">
                                                <svg class="w-4 h-4 mr-1.5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                                </svg>
                                                {{ $tagName }}
                                            </span>
                                        </span>
                                    @endforeach
                                    <div class="flex items-center justify-center w-full text-gray-400 dark:text-gray-500 text-sm italic" id="all-tags-empty-az" style="display: none;">
                                        {{ __('admin.no_tags_available') }}
                                    </div>
                                </div>
                            </div>

                            <div>
                                <div class="flex items-center mb-2">
                                    <div class="w-2 h-2 bg-orange-500 rounded-full mr-2"></div>
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ __('admin.product_tags') }}</span>
                                    <span class="ml-2 text-xs text-gray-400 dark:text-gray-500" id="product-tags-count-az">0</span>
                                </div>
                                <div id="product-tags-bar-az" class="flex flex-wrap gap-2 p-3 border-2 border-dashed border-orange-200 dark:border-orange-700 rounded-lg bg-orange-50 dark:bg-orange-900/10 min-h-[60px] transition-all duration-200">
                                    <div class="flex items-center justify-center w-full text-gray-400 dark:text-gray-500 text-sm italic" id="product-tags-empty-az">
                                        {{ __('admin.no_tags_selected') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 flex items-center">
                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            {{ __('admin.select_tags_apply') }}
                        </p>
                        @error('tags')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <div class="lg:col-span-1">
            <div class="bg-white shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold text-gray-700 mb-4">{{ __('admin.details') }}</h2>
                
                <div class="mb-4">
                    <label for="price" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.price') }}</label>
                    <input type="number" step="0.01" id="price" name="price" value="{{ old('price') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
                    @error('price')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="discount_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.discount_type') }}</label>
                    <select id="discount_type" name="discount_type" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="" {{ old('discount_type') == '' ? 'selected' : '' }}>{{ __('admin.none') }}</option>
                        <option value="percent" {{ old('discount_type') == 'percent' ? 'selected' : '' }}>{{ __('admin.percent') }}</option>
                        <option value="fixed" {{ old('discount_type') == 'fixed' ? 'selected' : '' }}>{{ __('admin.fixed_amount') }}</option>
                    </select>
                    @error('discount_type')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div class="mb-4">
                    <label for="discount_value" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.discount_value') }}</label>
                    <input type="number" step="0.01" id="discount_value" name="discount_value" value="{{ old('discount_value') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                    @error('discount_value')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div class="mb-4">
                    <label for="discount_start" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.discount_start') }}</label>
                    <input type="datetime-local" id="discount_start" name="discount_start" value="{{ old('discount_start') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                    <p class="text-xs text-gray-500 mt-1">{{ __('admin.current_azerbaijan_time') }}: <span id="current-time">{{ now()->setTimezone('Asia/Baku')->format('Y-m-d H:i') }}</span></p>
                    @error('discount_start')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div class="mb-4">
                    <label for="discount_end" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.discount_end') }}</label>
                    <input type="datetime-local" id="discount_end" name="discount_end" value="{{ old('discount_end') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                    <p class="text-xs text-gray-500 mt-1">{{ __('admin.all_times_azerbaijan_timezone') }}</p>
                    @error('discount_end')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="category_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.category') }}</label>
                    <select id="category_id" name="category_id" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->getTranslation('name', app()->getLocale()) }}</option>
                        @endforeach
                    </select>
                    @error('category_id')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="subcategory_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.subcategory') }}</label>
                    <select id="subcategory_id" name="subcategory_id" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="">{{ __('admin.select_subcategory') }}</option>
                        @foreach($subcategories as $subcategory)
                            <option value="{{ $subcategory->id }}" data-category-id="{{ $subcategory->category_id }}" {{ old('subcategory_id') == $subcategory->id ? 'selected' : '' }}>{{ $subcategory->getTranslation('name', app()->getLocale()) }}</option>
                        @endforeach
                    </select>
                    @error('subcategory_id')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="vendor_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.vendor') }}</label>
                    <select id="vendor_id" name="vendor_id" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="">-- {{ __('admin.none') }} --</option>
                        @foreach($vendors as $vendor)
                            <option value="{{ $vendor->id }}" {{ old('vendor_id') == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                        @endforeach
                    </select>
                    @error('vendor_id')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="stock_quantity" class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.stock_quantity') }}</label>
                    <input type="number" id="stock_quantity" name="stock_quantity" value="{{ old('stock_quantity', 0) }}" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                    @error('stock_quantity')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.product_images') }}</label>
                    <div class="relative">
                        <input type="file" id="images" name="images[]" multiple accept="image/*" class="hidden" onchange="let files = Array.from(this.files).map(f => f.name).join(', '); document.getElementById('images-filename').textContent = files || '{{ __('admin.no_file_chosen') }}';">
                        <label for="images" 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_files') }}</label>
                        <span id="images-filename" class="text-gray-500 align-middle">{{ __('admin.no_file_chosen') }}</span>
                    </div>
                    <div id="image-previews" class="flex flex-wrap gap-2 mt-2"></div>
                    <input type="hidden" name="main_image_index" id="main_image_index" value="0">
                    <p class="text-xs text-gray-500 mt-1">{{ __('admin.upload_new_images_set_main_remove') }}</p>
                    @error('images')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center mb-2">
                    <input id="is_active" name="is_active" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
                    <label for="is_active" class="ml-2 block text-sm text-gray-900">{{ __('admin.is_active') }}</label>
                </div>
                <div class="flex items-center">
                    <input id="is_featured" name="is_featured" type="checkbox" class="h-4 w-4 text-orange-500 focus:ring-orange-500 border-gray-300 rounded">
                    <label for="is_featured" class="ml-2 block text-sm text-orange-700 font-semibold">{{ __('admin.featured_show_on_main') }}</label>
                </div>
            </div>

            <div class="mt-6">
                <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md shadow-sm">
                    {{ __('admin.save_product') }}
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('head')
<style>
.tag-pill {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.tag-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.tag-pill:hover::before {
    left: 100%;
}

.tag-pill.tag-available {
    border-color: #e5e7eb;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    color: #374151;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.tag-pill.tag-available:hover {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.tag-pill.tag-selected {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;
    border-color: #f97316;
    box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.3), 0 2px 4px -1px rgba(249, 115, 22, 0.2);
}

.tag-pill.tag-selected:hover {
    background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
    border-color: #ea580c;
    box-shadow: 0 6px 8px -1px rgba(249, 115, 22, 0.4), 0 4px 6px -1px rgba(249, 115, 22, 0.3);
    transform: translateY(-2px);
}

/* Dark mode styles */
.dark .tag-pill.tag-available {
    border-color: #4b5563;
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    color: #e5e7eb;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.dark .tag-pill.tag-available:hover {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    color: #dbeafe;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.2);
}

.dark .tag-pill.tag-selected {
    background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
    border-color: #ea580c;
}

.dark .tag-pill.tag-selected:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-color: #dc2626;
}

/* Scrollbar styling */
[id*="all-tags-bar"]::-webkit-scrollbar, [id*="product-tags-bar"]::-webkit-scrollbar {
    height: 6px;
}

[id*="all-tags-bar"]::-webkit-scrollbar-track, [id*="product-tags-bar"]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

[id*="all-tags-bar"]::-webkit-scrollbar-thumb, [id*="product-tags-bar"]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
    transition: background 0.2s;
}

[id*="all-tags-bar"]::-webkit-scrollbar-thumb:hover, [id*="product-tags-bar"]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark [id*="all-tags-bar"]::-webkit-scrollbar-track, .dark [id*="product-tags-bar"]::-webkit-scrollbar-track {
    background: #374151;
}

.dark [id*="all-tags-bar"]::-webkit-scrollbar-thumb, .dark [id*="product-tags-bar"]::-webkit-scrollbar-thumb {
    background: #6b7280;
}

.dark [id*="all-tags-bar"]::-webkit-scrollbar-thumb:hover, .dark [id*="product-tags-bar"]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Animation for tag movement */
@keyframes tagSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tagSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
}

.tag-pill.tag-available {
    animation: tagSlideIn 0.3s ease-out;
}

.tag-pill.tag-selected {
    animation: tagSlideIn 0.3s ease-out;
}

/* Empty state styling */
[id*="all-tags-empty"], [id*="product-tags-empty"] {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-style: italic;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    background: rgba(249, 250, 251, 0.5);
}

.dark [id*="all-tags-empty"], .dark [id*="product-tags-empty"] {
    color: #6b7280;
    border-color: #4b5563;
    background: rgba(31, 41, 55, 0.5);
}
</style>
@endpush
@push('scripts')
<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');
                }
            });
        });
    });
    
    const languages = ['', '-ru', '-az']; // Default, Russian, Azerbaijani
    
    languages.forEach(langSuffix => {
        const allTagsBar = document.getElementById('all-tags-bar' + langSuffix);
        const productTagsBar = document.getElementById('product-tags-bar' + langSuffix);
        const allTagsCount = document.getElementById('all-tags-count' + langSuffix);
        const productTagsCount = document.getElementById('product-tags-count' + langSuffix);
        const allTagsEmpty = document.getElementById('all-tags-empty' + langSuffix);
        const productTagsEmpty = document.getElementById('product-tags-empty' + langSuffix);
        
        if (!allTagsBar || !productTagsBar) return;
        
        function updateCounts() {
            const availableTags = allTagsBar.querySelectorAll('.tag-pill.tag-available[style*="inline-block"]').length;
            const selectedTags = productTagsBar.querySelectorAll('.tag-pill.tag-selected').length;
            
            if (allTagsCount) allTagsCount.textContent = availableTags;
            if (productTagsCount) productTagsCount.textContent = selectedTags;
            
            if (allTagsEmpty) allTagsEmpty.style.display = availableTags === 0 ? 'flex' : 'none';
            if (productTagsEmpty) productTagsEmpty.style.display = selectedTags === 0 ? 'flex' : 'none';
        }
        
        function createTagPill(tagId, tagName, selected) {
            const pill = document.createElement('span');
            pill.className = 'tag-pill' + (selected ? ' tag-selected' : ' tag-available');
            pill.setAttribute('data-tag-id', tagId);
            pill.setAttribute('data-tag-name', tagName);
            
            const content = document.createElement('span');
            content.className = 'flex items-center';
            
            if (selected) {
                content.innerHTML = `
                    ${tagName}
                    <svg class="w-4 h-4 ml-2 text-white/80 hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                `;
            } else {
                content.innerHTML = `
                    <svg class="w-4 h-4 mr-1.5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    ${tagName}
                `;
            }
            
            pill.appendChild(content);
            return pill;
        }
        
        function addHiddenInput(tagId) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'tags[]';
            input.value = tagId;
            productTagsBar.parentNode.appendChild(input);
        }
        
        function removeHiddenInput(tagId) {
            const inputs = productTagsBar.parentNode.querySelectorAll('input[type="hidden"][name="tags[]"]');
            inputs.forEach(input => { if (input.value == tagId) input.remove(); });
        }
        
        allTagsBar.addEventListener('click', function(e) {
            const pill = e.target.closest('.tag-pill.tag-available');
            if (pill) {
                const tagId = pill.getAttribute('data-tag-id');
                const tagName = pill.getAttribute('data-tag-name');
                
                pill.style.animation = 'tagSlideOut 0.2s ease-in forwards';
                
                setTimeout(() => {
                    pill.style.display = 'none';
                    pill.style.animation = '';
                    
                    const newPill = createTagPill(tagId, tagName, true);
                    productTagsBar.appendChild(newPill);
                    addHiddenInput(tagId);
                    updateCounts();
                }, 200);
            }
        });
        
        productTagsBar.addEventListener('click', function(e) {
            const pill = e.target.closest('.tag-pill.tag-selected');
            if (pill) {
                const tagId = pill.getAttribute('data-tag-id');
                const tagName = pill.getAttribute('data-tag-name');
                
                pill.style.animation = 'tagSlideOut 0.2s ease-in forwards';
                
                setTimeout(() => {
                    pill.remove();
                    
                    const allTagPill = allTagsBar.querySelector('.tag-pill[data-tag-id="' + tagId + '"]');
                    if (allTagPill) {
                        allTagPill.style.display = 'inline-block';
                        allTagPill.style.animation = 'tagSlideIn 0.3s ease-out';
                    }
                    
                    removeHiddenInput(tagId);
                    updateCounts();
                }, 200);
            }
        });
        
        updateCounts();
    });
    
    function updateCurrentTime() {
        const now = new Date();
        const azerbaijanTime = new Date(now.getTime() + (4 * 60 * 60 * 1000)); // UTC+4
        const timeString = azerbaijanTime.toISOString().slice(0, 16).replace('T', ' ');
        const timeElement = document.getElementById('current-time');
        if (timeElement) {
            timeElement.textContent = timeString;
        }
    }
    
    updateCurrentTime();
    setInterval(updateCurrentTime, 60000);

    const categorySelect = document.getElementById('category_id');
    const subcategorySelect = document.getElementById('subcategory_id');
    
    if (categorySelect && subcategorySelect) {
        const allSubcategories = Array.from(subcategorySelect.options).map(option => ({
            id: option.value,
            text: option.textContent,
            categoryId: option.getAttribute('data-category-id')
        }));
        
        function updateSubcategories() {
            const selectedCategoryId = categorySelect.value;
            
            subcategorySelect.innerHTML = '<option value="">{{ __('admin.select_subcategory') }}</option>';
            
            allSubcategories.forEach(subcategory => {
                if (subcategory.categoryId === selectedCategoryId) {
                    const option = document.createElement('option');
                    option.value = subcategory.id;
                    option.textContent = subcategory.text;
                    subcategorySelect.appendChild(option);
                }
            });
        }
        
        categorySelect.addEventListener('change', updateSubcategories);
        
        updateSubcategories();
    }
});
</script>
@endpush