@extends('layouts.app', ['title' => $chapter->title_it . ' - ' . $course->title])

@section('content')
<div class="space-y-4">

    <!-- Top Navigation Bar -->
    <div class="glass-panel rounded-2xl p-3 shadow-md flex items-center justify-between">
        <a href="{{ route('courses.show', $course->level_code) }}" class="text-xs text-emerald-800 hover:text-emerald-950 font-bold flex items-center gap-1">
            <i data-lucide="chevron-left" class="w-4 h-4"></i>
            অধ্যায় তালিকা
        </a>

        <div class="text-center">
            <span class="text-[11px] font-bold text-emerald-900 bg-emerald-100 px-2.5 py-0.5 rounded-full font-outfit">
                {{ $course->level_code }} · অধ্যায় {{ $chapter->chapter_number }}
            </span>
        </div>

        <button onclick="speakItalian('{{ addslashes($chapter->title_it) }}')" class="w-8 h-8 rounded-full bg-amber-100 hover:bg-amber-200 text-amber-900 flex items-center justify-center transition" title="অধ্যায়ের শিরোনাম শুনুন">
            🔊
        </button>
    </div>

    <!-- Chapter Header Box -->
    <div class="glass-panel rounded-3xl p-5 shadow-xl border border-white/60">
        <h2 class="text-xl sm:text-2xl font-black text-slate-900 font-outfit">{{ $chapter->title_it }}</h2>
        <h3 class="text-base font-bold text-emerald-800 mt-0.5">{{ $chapter->title_bn }}</h3>
        @if($chapter->description)
        <p class="text-xs text-slate-600 mt-1">{{ $chapter->description }}</p>
        @endif
    </div>

    <!-- Interactive Lesson Content -->
    @php
        $content = $chapter->content;
        $pages = $content['pages'] ?? [];
    @endphp

    @if(!empty($pages))
        @foreach($pages as $pIndex => $page)
        <div class="glass-panel rounded-3xl p-5 shadow-lg border border-white/60 space-y-4">
            @if(!empty($page['heading']))
            <div class="border-b border-slate-200/80 pb-2 flex items-center justify-between">
                <h4 class="font-black text-base text-slate-900 font-outfit flex items-center gap-2">
                    <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
                    {{ $page['heading'] }}
                </h4>
                @if(!empty($page['page']))
                <span class="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-md font-outfit">
                    পাতা {{ $page['page'] }}
                </span>
                @endif
            </div>
            @endif

            @if(!empty($page['blocks']))
                @foreach($page['blocks'] as $block)
                    @if($block['type'] === 'dialogue' || !empty($block['lines']))
                        <div class="bg-emerald-50/80 border border-emerald-200/80 rounded-2xl p-3.5 space-y-2.5">
                            @if(!empty($block['title']))
                            <div class="text-[11px] font-bold text-emerald-900 uppercase tracking-wider mb-1 flex items-center gap-1">
                                💬 {{ $block['title'] }}
                            </div>
                            @endif
                            @foreach($block['lines'] as $line)
                            <div class="bg-white/90 border border-emerald-100 p-2.5 rounded-xl flex items-center justify-between gap-3 shadow-sm">
                                <div>
                                    <div class="flex items-center gap-2">
                                        @if(!empty($line['sp']))
                                        <span class="font-black text-xs text-emerald-800 font-outfit bg-emerald-100 px-1.5 py-0.5 rounded">
                                            {{ $line['sp'] }}:
                                        </span>
                                        @endif
                                        <span class="font-bold text-sm text-slate-900 font-outfit">{{ $line['it'] ?? '' }}</span>
                                    </div>
                                    <p class="text-xs text-emerald-950 font-medium mt-0.5">{{ $line['bn'] ?? '' }}</p>
                                </div>
                                <button onclick="speakItalian('{{ addslashes($line['it'] ?? '') }}')" class="w-8 h-8 rounded-full bg-emerald-100 hover:bg-emerald-200 text-emerald-900 flex items-center justify-center flex-shrink-0 transition" title="শুনুন">
                                    🔊
                                </button>
                            </div>
                            @endforeach
                        </div>

                    @elseif($block['type'] === 'rule_box' || $block['type'] === 'grammar')
                        <div class="bg-indigo-50/80 border border-indigo-200/80 rounded-2xl p-4">
                            <h5 class="font-bold text-xs text-indigo-950 flex items-center gap-1.5 mb-2">
                                📖 ব্যাকরণ ও নিয়ম (Grammatica)
                            </h5>
                            @if(!empty($block['rules']))
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                    @foreach($block['rules'] as $rule)
                                    <div class="bg-white p-2.5 rounded-xl border border-indigo-100 text-xs shadow-sm">
                                        <div class="font-bold text-indigo-900 font-outfit">{{ $rule['it'] ?? ($rule['form'] ?? '') }}</div>
                                        <div class="text-slate-600 text-[11px] mt-0.5">{{ $rule['bn'] ?? '' }}</div>
                                    </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>

                    @elseif(!empty($block['it']))
                        <div class="bg-white/80 border border-slate-100 p-3 rounded-2xl flex items-center justify-between gap-3">
                            <div>
                                <span class="font-bold text-sm text-slate-900 font-outfit block">{{ $block['it'] }}</span>
                                <span class="text-xs text-emerald-900 font-medium">{{ $block['bn'] ?? '' }}</span>
                            </div>
                            <button onclick="speakItalian('{{ addslashes($block['it']) }}')" class="w-8 h-8 rounded-full bg-slate-100 hover:bg-slate-200 text-slate-700 flex items-center justify-center flex-shrink-0 transition">
                                🔊
                            </button>
                        </div>
                    @endif
                @endforeach
            @endif
        </div>
        @endforeach
    @else
        <!-- Fallback if simple structure -->
        <div class="glass-panel rounded-3xl p-6 text-center text-slate-600">
            <p class="text-sm">এই পাঠের বিস্তারিত কনটেন্ট সফলভাবে সক্রিয় রয়েছে।</p>
        </div>
    @endif

    <!-- Bottom Lesson Pagination -->
    <div class="flex items-center justify-between gap-3 pt-2">
        @if($prevChapter)
        <a href="{{ route('courses.chapter', [$course->level_code, $prevChapter->chapter_number]) }}" class="glass-panel hover:bg-white text-slate-800 font-bold text-xs px-4 py-3 rounded-2xl shadow-md flex items-center gap-1.5 transition">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            <span>আগের পাঠ ({{ $prevChapter->chapter_number }})</span>
        </a>
        @else
        <div></div>
        @endif

        @if($nextChapter)
        <a href="{{ route('courses.chapter', [$course->level_code, $nextChapter->chapter_number]) }}" class="bg-emerald-700 hover:bg-emerald-800 text-white font-bold text-xs px-5 py-3 rounded-2xl shadow-lg flex items-center gap-1.5 transition">
            <span>পরবর্তী পাঠ ({{ $nextChapter->chapter_number }})</span>
            <i data-lucide="arrow-right" class="w-4 h-4"></i>
        </a>
        @endif
    </div>

</div>
@endsection