@extends('layouts.app', ['title' => 'ইতালিয়ান ব্যাকরণ গাইড (Grammatica)'])

@section('content')
<div class="space-y-3.5 w-full">

    <!-- Header & Level Selector -->
    <div class="glass-card rounded-3xl p-4 shadow-xl border border-white/40 bg-white/95">
        <h2 class="text-lg sm:text-xl font-black text-slate-900 font-outfit">ইতালিয়ান ব্যাকরণ গাইড (Grammatica)</h2>
        <p class="text-xs text-emerald-800 font-medium">A0 থেকে C1 লেভেলের সমস্ত রুলস, ভার্ব কনজুগেশন ও উদাহরণ</p>

        <!-- Level Selector Chips -->
        <div class="flex items-center gap-1.5 overflow-x-auto mt-3 pb-1 scrollbar-none">
            <a href="{{ route('grammar.index') }}" 
               class="text-xs font-bold px-3 py-1 rounded-xl whitespace-nowrap transition {{ !request('level') ? 'bg-emerald-700 text-white shadow' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">
                সকল লেভেল
            </a>
            @foreach(['A0', 'A1', 'A2', 'B1', 'B2', 'C1'] as $lvl)
            <a href="{{ route('grammar.index', ['level' => $lvl]) }}" 
               class="text-xs font-bold px-3 py-1 rounded-xl whitespace-nowrap transition {{ request('level') === $lvl ? 'bg-emerald-700 text-white shadow' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">
                {{ $lvl }}
            </a>
            @endforeach
        </div>
    </div>

    <!-- Grammar Lessons Colorful Cards List (App Exact Palette) -->
    <div class="space-y-3">
        @php
            $bgColors = [
                'from-pink-50 to-rose-50 border-pink-200 text-pink-950',
                'from-sky-50 to-blue-50 border-sky-200 text-sky-950',
                'from-amber-50 to-orange-50 border-amber-200 text-amber-950',
                'from-purple-50 to-indigo-50 border-purple-200 text-purple-950',
                'from-emerald-50 to-teal-50 border-emerald-200 text-emerald-950',
                'from-cyan-50 to-teal-50 border-cyan-200 text-cyan-950',
            ];
        @endphp

        @foreach($grammars as $idx => $g)
        @php
            $colorClass = $bgColors[$idx % count($bgColors)];
        @endphp
        <div class="bg-gradient-to-br {{ $colorClass }} rounded-3xl p-4 sm:p-5 shadow-lg border transition space-y-3">
            
            <!-- Header Row -->
            <div class="flex items-start justify-between gap-2 border-b border-black/5 pb-2.5">
                <div>
                    <span class="text-[10px] font-black uppercase tracking-wider bg-white/90 px-2.5 py-0.5 rounded-md font-outfit shadow-2xs">
                        লেভেল {{ $g->level }} · অধ্যায় {{ $idx + 1 }}
                    </span>
                    <h3 class="text-base sm:text-lg font-black text-slate-900 font-outfit mt-1 leading-snug">
                        {{ $g->topic_it }}
                    </h3>
                    <p class="text-xs font-bold text-slate-800 mt-0.5">{{ $g->topic_bn }}</p>
                </div>
            </div>

            <!-- Content Explanation -->
            <p class="text-xs text-slate-700 leading-relaxed font-medium">
                {{ $g->content }}
            </p>

            <!-- Rules Chart Box -->
            @php
                $rules = is_array($g->rules) ? $g->rules : (json_decode($g->rules, true) ?? []);
            @endphp
            @if(!empty($rules))
            <div class="bg-white/90 backdrop-blur-md rounded-2xl p-3 border border-black/5 shadow-inner space-y-1.5">
                <span class="text-[11px] font-extrabold text-slate-900 block uppercase tracking-wider">
                    📋 মূল সূত্র ও রুলস (Regole):
                </span>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-1.5">
                    @foreach($rules as $r)
                    <div class="bg-slate-50 p-2 rounded-xl text-xs font-semibold text-slate-800 border border-slate-200/60">
                        {{ is_array($r) ? implode(' — ', $r) : $r }}
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            <!-- Examples with Audio -->
            @php
                $examples = is_array($g->examples) ? $g->examples : (json_decode($g->examples, true) ?? []);
            @endphp
            @if(!empty($examples))
            <div class="space-y-1.5 pt-1">
                <span class="text-[11px] font-extrabold text-slate-900 block uppercase tracking-wider">
                    💡 বাস্তব উদাহরণ (Esempi):
                </span>
                @foreach($examples as $ex)
                <div class="bg-white/95 rounded-2xl p-2.5 shadow-sm border border-black/5 flex items-center justify-between text-xs gap-2">
                    <div class="min-w-0">
                        <span class="font-bold text-slate-900 font-outfit block truncate">"{{ $ex['it'] ?? $ex }}"</span>
                        @if(isset($ex['bn']))
                        <span class="text-[11px] text-slate-600 truncate block">{{ $ex['bn'] }}</span>
                        @endif
                    </div>
                    <button onclick="speakItalian('{{ addslashes($ex['it'] ?? $ex) }}')" class="w-8 h-8 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 flex items-center justify-center flex-shrink-0 transition" title="উচ্চারণ শুনুন">
                        🔊
                    </button>
                </div>
                @endforeach
            </div>
            @endif

        </div>
        @endforeach
    </div>

</div>
@endsection