@extends('admin.layouts.app')

@section('title', 'Lessons')
@section('page-title', 'Lesson Management')

@section('content')
<!-- Search & Filter -->
<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-body" style="padding: 1rem 1.5rem;">
        <form action="{{ route('admin.lessons.index') }}" method="GET" style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
            <input type="text" name="search" placeholder="Search by title..." value="{{ request('search') }}" 
                style="flex: 1; min-width: 200px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; background: var(--bg-surface); color: var(--text);">
            <select name="course" style="padding: 10px 16px; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; background: var(--bg-surface); color: var(--text);">
                <option value="">All Courses</option>
                @foreach($courses as $course)
                    <option value="{{ $course->id }}" {{ request('course') == $course->id ? 'selected' : '' }}>{{ $course->title }}</option>
                @endforeach
            </select>
            <button type="submit" class="btn btn-primary">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                Search
            </button>
            @if(request('search') || request('course'))
                <a href="{{ route('admin.lessons.index') }}" class="btn" style="background: var(--border); color: var(--text);">Clear</a>
            @endif
        </form>
    </div>
</div>

<!-- Success/Error Messages -->
@if(session('success'))
    <div class="alert-auto-dismiss" style="background: rgba(0, 255, 65, 0.1); border: 1px solid var(--primary); border-radius: 4px; padding: 12px 16px; margin-bottom: 1.5rem; color: var(--primary);">
        {{ session('success') }}
    </div>
@endif
@if(session('error'))
    <div class="alert-auto-dismiss" style="background: rgba(255, 0, 64, 0.1); border: 1px solid var(--danger); border-radius: 4px; padding: 12px 16px; margin-bottom: 1.5rem; color: var(--danger);">
        {{ session('error') }}
    </div>
@endif

<!-- Lessons Table -->
<div class="card">
    <div class="card-header">
        <h3>All Lessons ({{ $lessons->total() }})</h3>
    </div>
    <div class="card-body" style="padding: 0;">
        <table>
            <thead>
                <tr>
                    <th>Order</th>
                    <th>Title</th>
                    <th>Course</th>
                    <th>Quiz Completions</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($lessons as $lesson)
                <tr>
                    <td>#{{ $lesson->order }}</td>
                    <td>{{ Str::limit($lesson->title, 40) }}</td>
                    <td><span style="color: var(--primary); font-weight: 600;">{{ $lesson->course->title ?? 'N/A' }}</span></td>
                    <td>
                        <span style="color: {{ $lesson->quiz_completions_count > 0 ? 'var(--success)' : 'var(--text-muted)' }}; font-weight: 600;">
                            {{ $lesson->quiz_completions_count ?? 0 }} {{ Str::plural('user', $lesson->quiz_completions_count ?? 0) }}
                        </span>
                    </td>
                    <td>
                        <div style="display: flex; gap: 8px;">
                            <a href="{{ route('admin.lessons.show', $lesson) }}" class="btn btn-sm btn-info">
                                View
                            </a>
                            <a href="{{ route('admin.lessons.edit', $lesson) }}" class="btn btn-sm btn-primary">
                                Edit
                            </a>
                            <form action="{{ route('admin.lessons.destroy', $lesson) }}" method="POST" style="display: inline;">
                                @csrf
                                @method('DELETE')
                                <button type="button" class="btn btn-sm btn-danger" 
                                    data-delete="Delete this lesson? This action cannot be undone and will remove all associated quiz questions.">
                                    Delete
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" style="text-align: center; padding: 3rem; color: var(--text-muted);">
                        No lessons found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Pagination -->
@if($lessons->hasPages())
<div style="margin-top: 1.5rem; display: flex; justify-content: center; align-items: center; gap: 1rem;">
    @if($lessons->onFirstPage())
        <span class="btn" style="background: var(--border); color: var(--text-muted); cursor: not-allowed;">Previous</span>
    @else
        <a href="{{ $lessons->appends(request()->query())->previousPageUrl() }}" class="btn btn-primary">Previous</a>
    @endif
    
    <span style="color: var(--text-muted);">Page {{ $lessons->currentPage() }} of {{ $lessons->lastPage() }}</span>
    
    @if($lessons->hasMorePages())
        <a href="{{ $lessons->appends(request()->query())->nextPageUrl() }}" class="btn btn-primary">Next</a>
    @else
        <span class="btn" style="background: var(--border); color: var(--text-muted); cursor: not-allowed;">Next</span>
    @endif
</div>
@endif
@endsection