@extends('layouts.app')

@section('content')
<style>
</style>

<div class="container-fluid px-4 py-4">
    <div class="row g-4">
        @if($sidebarSubjects->count() > 1)
            <!-- Sidebar "Collections" -->
            <div class="col-lg-3">
                <div class="sidebar-card">
                    <div class="sidebar-title">
                        <i class="bi bi-grid-3x3-gap-fill text-primary"></i> Collections
                    </div>
                    @foreach($sidebarSubjects as $s)
                        <a href="{{ route('student.courses.index', $s) }}" class="sidebar-item {{ $course->subject_id == $s->id ? 'active' : '' }}">
                            <span>{{ $s->name }}</span>
                            <span class="sidebar-badge">{{ $s->courses_count }}</span>
                        </a>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- Main Content Area -->
        <div class="col-12 {{ $sidebarSubjects->count() > 1 ? 'col-lg-9' : '' }} px-3 px-lg-0">
            <!-- Navigation Pill Buttons (Scrollable on mobile) -->
            <div class="lms-nav-btns mt-2 mt-lg-0">
                <a href="{{ route('home') }}" class="lms-nav-btn">
                    <i class="bi bi-house-door"></i> Dashboard
                </a>
                <a href="{{ route('student.courses.index', $course->subject) }}" class="lms-nav-btn">
                    <i class="bi bi-journal-text"></i> {{ $course->subject->name }}
                </a>
                <a href="#" class="lms-nav-btn active">
                    <i class="bi bi-play-circle"></i> {{ $course->name }}
                </a>
            </div>

            <!-- Unified Elite Panel (Edge-to-edge on mobile) -->
            <div class="lms-unified-panel shadow-none border-0 bg-transparent">
                <div class="lms-main-panel p-0">
                    <div class="row g-3 g-lg-4"> {{-- Thinner gutter on mobile --}}
                        @forelse($course->chapters as $index => $chapter)
                            <div class="col-6 col-md-4 col-lg-4 col-xl-2"
                                 x-show="search === '' || '{{ strtolower($chapter->name) }}'.includes(search.toLowerCase())"
                                 x-transition.opacity>
                                <div class="lms-card border-0 shadow-sm" style="border-radius: 24px;">
                                    @php 
                                        $coursePurchased = auth()->user()->hasPurchased($course) || auth()->user()->isAdmin();
                                        $chapterPurchased = $coursePurchased || auth()->user()->hasPurchased($chapter);
                                    @endphp
                                    <div class="lms-thumb" style="background-image: url('{{ $chapter->thumbnail_url }}'); position: relative; border-radius: 20px 20px 0 0;">
                                        @if(!$chapterPurchased)
                                            <div style="position: absolute; inset: 0; background: linear-gradient(rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.7)); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);">
                                                <div class="text-white text-center">
                                                    <div class="bg-white bg-opacity-20 rounded-circle mb-2 d-inline-flex align-items-center justify-content-center" style="width: 48px; height: 48px; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.3);">
                                                        <i class="bi bi-lock-fill fs-4 text-white"></i>
                                                    </div>
                                                    <span class="d-block text-uppercase fw-black tracking-wider" style="font-size: 0.6rem; letter-spacing: 2px;">Elite Access Only</span>
                                                </div>
                                            </div>
                                        @endif
                                        <div style="position: absolute; bottom: 12px; right: 12px;">
                                            <span class="badge" style="font-size: 10px; font-weight: 800; border-radius: 8px; padding: 6px 10px; background: rgba(15, 23, 42, 0.8) !important; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.1); color: white;">
                                                MODULE {{ $index + 1 }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="card-body p-3 d-flex flex-column">
                                        <h6 class="fw-bold text-dark mb-1 text-truncate" style="font-size: 0.8rem;" title="{{ $chapter->name }}">{{ $chapter->name }}</h6>
                                        @if($chapter->description)
                                            <p class="text-secondary mb-2 text-truncate-2" style="font-size: 0.6rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 1.6rem;">{{ $chapter->description }}</p>
                                        @else
                                            <p class="text-secondary mb-2" style="font-size: 0.65rem;">Explore high-definition modules</p>
                                        @endif
                                        <div class="d-flex align-items-center gap-2 mb-3">
                                            <button onclick="toggleLike(this, 'chapter', '{{ $chapter->getRouteKey() }}')" class="btn btn-sm p-0 border-0 d-flex align-items-center gap-1 {{ auth()->user()->hasLiked($chapter) ? 'text-danger' : 'text-secondary' }}" style="font-size: 0.7rem;">
                                                <i class="bi {{ auth()->user()->hasLiked($chapter) ? 'bi-heart-fill' : 'bi-heart' }}"></i>
                                                <span class="like-count">{{ $chapter->likes_count ?? $chapter->likes()->count() }}</span>
                                            </button>
                                            <div class="text-warning" style="font-size: 0.7rem;">
                                                <i class="bi bi-star-fill"></i>
                                                <span>{{ number_format($chapter->ratings()->avg('rating') ?: 0, 1) }}</span>
                                            </div>
                                        </div>
                                        
                                        <div class="mt-auto">
                                            @if(!$chapterPurchased)
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    @if($chapter->discount_price > 0)
                                                        <div class="d-flex flex-column">
                                                            <span class="text-secondary text-decoration-line-through" style="font-size: 0.6rem;">${{ number_format($chapter->price, 2) }}</span>
                                                            <div class="price-tag-premium">${{ number_format($chapter->discount_price, 2) }}</div>
                                                        </div>
                                                    @else
                                                        <div class="price-tag-premium">${{ number_format($chapter->price, 2) }}</div>
                                                    @endif
                                                </div>
                                            @endif

                                            <div class="d-grid gap-2">
                                                @if($chapterPurchased)
                                                    <a href="{{ route('student.lessons.index', $chapter) }}" class="btn btn-navy py-2" style="background: var(--zoho-navy); color: white; font-size: 0.7rem; font-weight: 700; border-radius: 12px;">
                                                        <i class="bi bi-play-fill me-1"></i> Open Module
                                                    </a>
                                                @else
                                                    <div class="d-flex flex-column gap-2">
                                                        <a href="{{ route('student.lessons.index', $chapter) }}" class="btn btn-outline-secondary py-2" style="font-size: 0.7rem; font-weight: 700; border-radius: 12px;">
                                                            View Curriculum
                                                        </a>
                                                        @if(auth()->user()->isInCart($chapter))
                                                            <a href="{{ route('student.cart.index') }}" class="btn btn-success py-2 w-100" style="font-size: 0.7rem; font-weight: 700; border-radius: 12px;">
                                                                <i class="bi bi-cart-check-fill me-1"></i> In Cart
                                                            </a>
                                                        @else
                                                            <form action="{{ route('student.cart.add') }}" method="POST">
                                                                @csrf
                                                                <input type="hidden" name="type" value="chapter">
                                                                <input type="hidden" name="id" value="{{ $chapter->getRouteKey() }}">
                                                                <button type="submit" class="btn btn-primary py-2 w-100" style="font-size: 0.7rem; font-weight: 700; border-radius: 12px;">
                                                                    <i class="bi bi-cart-plus me-1"></i> Add to Cart
                                                                </button>
                                                            </form>
                                                        @endif
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                    <div class="col-12 text-center py-5">
                        <div class="mb-3 text-muted" style="font-size: 3rem;"><i class="bi bi-camera-reels"></i></div>
                        <h4 class="fw-bold text-secondary">No modules found for this course</h4>
                        <p class="text-secondary">Check back later or browse other courses.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
        </div>
    </div>

    <!-- Deprecated Floating Action Bar -->
</div>
@endsection