@extends('layouts.admin')

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

@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_category') }}
    </h1>

    <div class="max-w-2xl bg-white shadow-md rounded-lg p-8">
        <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.category_name') }}</label>
                <div class="border-b border-gray-200 mb-2">
                    <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 class="language-content" data-lang="en">
                    <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 placeholder="{{ __('admin.category_name_en') }}">
                    @error('name.en')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div class="language-content hidden" data-lang="ru">
                    <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" placeholder="{{ __('admin.category_name_ru') }}">
                    @error('name.ru')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div class="language-content hidden" data-lang="az">
                    <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" placeholder="{{ __('admin.category_name_az') }}">
                    @error('name.az')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mb-6" x-data="{ imageUrl: '' }">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.image') }}</label>
                
                <div class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md" x-show="!imageUrl">
                    <div class="space-y-1 text-center">
                        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div class="flex text-sm text-gray-600">
                            <label for="image" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
                                <span>{{ __('admin.upload_a_file') }}</span>
                                <input id="image" name="image" type="file" class="sr-only" x-ref="imageInput" @change="imageUrl = $event.target.files.length > 0 ? URL.createObjectURL($event.target.files[0]) : ''">
                            </label>
                            <p class="pl-1">{{ __('admin.or_drag_and_drop') }}</p>
                        </div>
                        <p class="text-xs text-gray-500">{{ __('admin.image_upload_hint') }}</p>
                    </div>
                </div>

                <div x-show="imageUrl" class="mt-2 text-center">
                    <img :src="imageUrl" class="mx-auto h-48 w-auto rounded-md shadow-sm">
                    <button type="button" @click="imageUrl = ''; $refs.imageInput.value = ''" class="mt-2 inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                        {{ __('admin.remove') }}
                    </button>
                </div>

                @error('image')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6">
                <label for="sort_order" class="block text-sm font-medium text-gray-700 mb-1">Order (optional)</label>
                <input type="number" id="sort_order" name="sort_order" value="{{ old('sort_order') }}" 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" min="0" step="1" placeholder="e.g. 1, 2, 3...">
                @error('sort_order')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6">
                <div class="flex items-center">
                    <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.active') }}
                    </label>
                </div>
            </div>

            <div class="flex justify-end">
                <a href="{{ route('admin.categories.index') }}" class="bg-gray-200 hover:bg-gray-300 text-black font-bold py-2 px-4 rounded-md shadow-sm mr-2">
                    {{ __('admin.cancel') }}
                </a>
                <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md shadow-sm">
                    {{ __('admin.save_category') }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@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');
                }
            });
        });
    });
});
</script>
@endpush