@extends('layouts.admin')

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

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

    <div class="max-w-2xl bg-white shadow-md rounded-lg p-8">
        <form action="{{ route('admin.tags.store') }}" method="POST">
            @csrf
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.tag_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.tag_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.tag_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.tag_name_az') }}">
                    @error('name.az')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            <div class="flex justify-end">
                <a href="{{ route('admin.tags.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_tag') }}
                </button>
            </div>
        </form>
    </div>
</div>
@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
@endsection