@extends('layouts.admin', ['title' => 'নতুন শব্দ যোগ করুন'])

@section('content')
<div class="max-w-2xl mx-auto space-y-5">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <a href="{{ route('admin.words.index') }}" class="text-xs text-emerald-400 hover:text-emerald-300 font-bold flex items-center gap-1 mb-1">
                <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
                শব্দ তালিকায় ফিরে যান
            </a>
            <h1 class="text-xl font-bold text-white font-outfit">নতুন শব্দ যোগ করুন</h1>
        </div>
    </div>

    <!-- Form -->
    <div class="bg-slate-950 border border-slate-800 rounded-3xl p-6 shadow-xl">
        <form action="{{ route('admin.words.store') }}" method="POST" class="space-y-4">
            @csrf

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-bold text-slate-300 mb-1">ইতালিয়ান শব্দ (Italian)*</label>
                    <input type="text" name="italian" required placeholder="es. Buongiorno" 
                           class="w-full bg-slate-900 border border-slate-700 text-white rounded-xl py-2.5 px-3 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-300 mb-1">বাংলা অর্থ (Bangla)*</label>
                    <input type="text" name="bangla" required placeholder="উদা: শুভ সকাল" 
                           class="w-full bg-slate-900 border border-slate-700 text-white rounded-xl py-2.5 px-3 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs font-bold text-slate-300 mb-1">উচ্চারণ (IPA/Pronunciation)</label>
                    <input type="text" name="pronunciation" placeholder="es. bwon-JOR-no" 
                           class="w-full bg-slate-900 border border-slate-700 text-white rounded-xl py-2.5 px-3 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-300 mb-1">লেভেল (Level)*</label>
                    <select name="level" required class="w-full bg-slate-900 border border-slate-700 text-white rounded-xl py-2.5 px-3 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500">
                        @foreach(['A0', 'A1', 'A2', 'B1', 'B2', 'C1'] as $lvl)
                        <option value="{{ $lvl }}">লেভেল {{ $lvl }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-300 mb-1">ক্যাটাগরি (Category)*</label>
                    <input type="text" name="category" required placeholder="greeting, work, health..." 
                           class="w-full bg-slate-900 border border-slate-700 text-white rounded-xl py-2.5 px-3 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500">
                </div>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-300 mb-1">ইতালিয়ান উদাহরণ বাক্য (Example Italian)</label>
                <input type="text" name="example_it" placeholder="es. Buongiorno a tutti!" 
                       class="w-full bg-slate-900 border border-slate-700 text-white rounded-xl py-2.5 px-3 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-300 mb-1">বাংলা অনুবাদ (Example Bangla)</label>
                <input type="text" name="example_bn" placeholder="উদা: সবাইকে শুভ সকাল!" 
                       class="w-full bg-slate-900 border border-slate-700 text-white rounded-xl py-2.5 px-3 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>

            <div class="pt-3 border-t border-slate-800 flex items-center justify-end gap-2">
                <a href="{{ route('admin.words.index') }}" class="px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-bold rounded-xl transition">
                    বাতিল
                </a>
                <button type="submit" class="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold rounded-xl transition shadow">
                    সংরক্ষণ করুন
                </button>
            </div>
        </form>
    </div>
</div>
@endsection