@extends('admin.layouts.app')

@section('content')

{{ show_window_title($page_title) }}

<div class="container-fluid">
    {{-- Course Header Section --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        {{-- Course Thumbnail --}}
                        <div class="col-md-3">
                            @php
                                $thumbnailUrl = $course->thumbnail_url ? $course->thumbnail_url['original'] : null;
                            @endphp
                            
                            @if($thumbnailUrl)
                                <img src="{{ $thumbnailUrl }}" alt="{{ $course->title }}" 
                                     class="img-fluid rounded shadow-sm" 
                                     style="width: 100%; object-fit: cover;">
                            @else
                                <div class="d-flex align-items-center justify-content-center bg-light border rounded" 
                                     style="height: 200px; width: 100%;">
                                    <i class="mdi mdi-image-off text-muted" style="font-size: 64px;"></i>
                                </div>
                            @endif
                        </div>
                        
                        {{-- Course Details --}}
                        <div class="col-md-9">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h2 class="mb-2">{{ $course->title }}</h2>
                                    <div class="mb-3">
                                        @if ($course->status === 'published')
                                            <span class="badge bg-success">Published</span>
                                        @elseif ($course->status === 'draft')
                                            <span class="badge bg-warning">Draft</span>
                                        @else
                                            <span class="badge bg-danger">Archived</span>
                                        @endif
                                        
                                        @if($course->type === 'structured')
                                            <span class="badge bg-primary">Structured</span>
                                        @else
                                            <span class="badge bg-info">Direct</span>
                                        @endif
                                    </div>
                                </div>
                                <a href="{{ route('admin.courses.index') }}" class="btn btn-outline-secondary">
                                    <i class="mdi mdi-arrow-left"></i> Back to Courses
                                </a>
                            </div>
                            
                            {{-- Course Description --}}
                            <div class="mb-3">
                                <h5 class="text-white">Description</h5>
                                <p class="text-muted">{{ $course->description ?: 'No description available' }}</p>
                            </div>
                            
                            {{-- Course Meta Information --}}
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="mb-2">
                                        <strong>Program:</strong> 
                                        {{ $course->program ? $course->program->title : 'No Program' }}
                                    </p>
                                    <p class="mb-2">
                                        <strong>Category:</strong> 
                                        {{ $course->category ? $course->category->title : 'No Category' }}
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p class="mb-2">
                                        <strong>Total Units:</strong> 
                                        {{ $nestedUnits->count() }}
                                    </p>
                                    <p class="mb-2">
                                        <strong>Enrolled Students:</strong> 
                                        {{ $totalEnrollments }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        {{-- Course Units Section --}}
        <div class="col-lg-8">
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0 text-white"><i class="mdi mdi-book-open-page-variant me-2"></i>Course Units</h5>
                </div>
                <div class="card-body p-4">
                    @if($nestedUnits && $nestedUnits->count() > 0)
                        <div class="units-container">
                            @foreach($nestedUnits as $index => $unit)
                                <div class="unit-card mb-3 shadow-sm">
                                    <div class="unit-header" data-bs-toggle="collapse" data-bs-target="#collapse{{ $unit->id }}" 
                                         aria-expanded="{{ $index === 0 ? 'true' : 'false' }}" style="cursor: pointer;">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="d-flex align-items-center flex-grow-1">
                                                <span class="unit-number bg-primary text-white me-3">{{ $loop->iteration }}</span>
                                                <div>
                                                    <h6 class="mb-1 fw-semibold">{{ $unit->title }}</h6>
                                                    @if($unit->description)
                                                        <small class="text-muted">{{ $unit->description }}</small>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-center gap-2">
                                                <span class="badge bg-primary">{{ $unit->materials_count }} Materials</span>
                                                @if($unit->nested_children && $unit->nested_children->count() > 0)
                                                    <span class="badge bg-secondary">{{ $unit->nested_children->count() }} Sub-units</span>
                                                @endif
                                                <i class="mdi mdi-chevron-down text-primary" style="font-size: 20px;"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="collapse{{ $unit->id }}" class="collapse {{ $index === 0 ? 'show' : '' }}">
                                        <div class="unit-body">
                                            @if($unit->nested_children && $unit->nested_children->count() > 0)
                                                @include('admin.courses.partials.nested-units', ['units' => $unit->nested_children, 'level' => 1])
                                            @else
                                                <p class="text-muted mb-0">
                                                    <i class="mdi mdi-information-outline me-1"></i>
                                                    This unit has {{ $unit->materials_count }} material(s) and no sub-units.
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="mdi mdi-folder-open text-muted" style="font-size: 48px;"></i>
                            <h6 class="text-muted mt-3">No units available</h6>
                            <p class="text-muted mb-0">This course doesn't have any units yet.</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Enrolled Students Section --}}
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-primary text-white py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0 text-white"><i class="mdi mdi-account-multiple me-2"></i>Enrolled Students</h5>
                        <span class="badge bg-light text-dark">Total: {{ $totalEnrollments }}</span>
                    </div>
                </div>
                <div class="card-body p-4">
                    @if($latestEnrollments && $latestEnrollments->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Student Name</th>
                                        <th>Phone</th>
                                        <th>Type</th>
                                        <th>Status</th>
                                        <th>Enrolled Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($latestEnrollments as $enrollment)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>
                                                @if($enrollment->user)
                                                    {{ $enrollment->user->name }}
                                                @else
                                                    <span class="text-muted">N/A</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($enrollment->user && $enrollment->user->phone)
                                                    {{ $enrollment->user->phone }}
                                                @else
                                                    <span class="text-muted">N/A</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($enrollment->type === 'paid')
                                                    <span class="badge bg-warning">Paid</span>
                                                @else
                                                    <span class="badge bg-success">Free</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($enrollment->status === 'active')
                                                    <span class="badge bg-success">Active</span>
                                                @elseif($enrollment->status === 'expired')
                                                    <span class="badge bg-danger">Expired</span>
                                                @else
                                                    <span class="badge bg-secondary">Cancelled</span>
                                                @endif
                                            </td>
                                            <td>{{ $enrollment->created_at->format('M d, Y') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @if($totalEnrollments > 10)
                            <div class="text-center mt-3">
                                <a href="{{ route('admin.enrollments.index', ['filters' => ['course_id' => $course->id]]) }}" 
                                   class="btn btn-outline-primary btn-sm">
                                    <i class="mdi mdi-eye"></i> View All Enrollments
                                </a>
                            </div>
                        @endif
                    @else
                        <div class="text-center py-4">
                            <i class="mdi mdi-account-off text-muted" style="font-size: 48px;"></i>
                            <h6 class="text-muted mt-2">No enrollments yet</h6>
                            <p class="text-muted mb-0">No students have enrolled in this course.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Sidebar --}}
        <div class="col-lg-4">
            {{-- Sidebar styles will be applied here --}}
            {{-- Course Features --}}
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0 text-white"><i class="mdi mdi-star me-2"></i>Course Features</h5>
                </div>
                <div class="card-body">
                    @if($courseFeatures && $courseFeatures->count() > 0)
                        <ul class="list-group list-group-flush">
                            @foreach($courseFeatures as $feature)
                                <li class="list-group-item px-0">
                                    <div class="d-flex align-items-start">
                                        <i class="mdi mdi-check-circle text-success me-2 mt-1"></i>
                                        <div>
                                            <strong>{{ $feature->title }}</strong>
                                            @if($feature->description)
                                                <p class="text-muted small mb-0">{{ $feature->description }}</p>
                                            @endif
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <div class="text-center py-3">
                            <i class="mdi mdi-star-off text-muted" style="font-size: 36px;"></i>
                            <p class="text-muted mb-0 mt-2">No features added yet</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Course Tutors --}}
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0 text-white"><i class="mdi mdi-account-tie me-2"></i>Course Tutors</h5>
                </div>
                <div class="card-body">
                    @if($courseTutors && $courseTutors->count() > 0)
                        <ul class="list-group list-group-flush">
                            @foreach($courseTutors as $tutor)
                                <li class="list-group-item px-0">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            @if($tutor->user && $tutor->user->profile_picture)
                                                <img src="{{ $tutor->user->profile_picture_url }}" 
                                                     alt="{{ $tutor->user->name }}" 
                                                     class="rounded-circle" 
                                                     style="width: 40px; height: 40px; object-fit: cover;"
                                                     onerror="this.style.display='none';">
                                            @else
                                                <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" 
                                                     style="width: 40px; height: 40px;">
                                                    <i class="mdi mdi-account"></i>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <strong>{{ $tutor->user ? $tutor->user->name : 'N/A' }}</strong>
                                            <br>
                                            <small class="text-muted">
                                                @if($tutor->role === 'primary')
                                                    <span class="badge bg-primary">Primary Tutor</span>
                                                @else
                                                    <span class="badge bg-secondary">Assistant Tutor</span>
                                                @endif
                                            </small>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <div class="text-center py-3">
                            <i class="mdi mdi-account-off text-muted" style="font-size: 36px;"></i>
                            <p class="text-muted mb-0 mt-2">No tutors assigned yet</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Quick Actions --}}
            <div class="card shadow-sm">
                <div class="card-header bg-secondary text-white py-3">
                    <h5 class="mb-0 text-white"><i class="mdi mdi-lightning-bolt me-2"></i>Quick Actions</h5>
                </div>
                <div class="card-body p-3">
                    <a href="{{ route('admin.courses.edit', $course->id) }}" class="btn btn-primary mb-2">
                        <i class="mdi mdi-pencil me-1"></i> Edit Course
                    </a>
                    <a href="{{ route('admin.course-content.index', $course->id) }}" class="btn btn-outline-primary mb-2">
                        <i class="mdi mdi-book-open-page-variant me-1"></i> Manage Content
                    </a>
                    <a href="{{ route('admin.course-materials.index', $course->id) }}" class="btn btn-outline-primary mb-2">
                        <i class="mdi mdi-file-multiple me-1"></i> Manage Materials
                    </a>
                    <a href="{{ route('admin.course-tutors.index', ['filters' => ['course_id' => $course->id]]) }}" class="btn btn-outline-secondary">
                        <i class="mdi mdi-account-tie me-1"></i> Manage Tutors
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Course Units Section - Clean & Simple */
.unit-card {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    transition: all 0.2s ease;
}

.unit-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
    border-color: #dee2e6;
}

.unit-header {
    padding: 1.25rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    transition: background 0.2s ease;
}

.unit-header:hover {
    background: #e9ecef;
}

.unit-header[aria-expanded="true"] .mdi-chevron-down {
    transform: rotate(180deg);
}

.unit-header .mdi-chevron-down {
    transition: transform 0.3s ease;
}

.unit-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.2);
}

.unit-body {
    padding: 1.5rem;
    background: #ffffff;
    border-top: 1px solid #e9ecef;
}

/* Nested Units */
.nested-unit {
    padding: 1rem 1.25rem;
    margin-bottom: 0.875rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid;
    transition: all 0.2s ease;
}

.nested-unit:hover {
    background: #e9ecef;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Badge Styling */
.badge {
    padding: 0.4rem 0.75rem;
    font-weight: 500;
    font-size: 0.75rem;
    border-radius: 6px;
}

/* Card Shadow */
.shadow-sm {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
    border-radius: 10px;
}

/* Smooth Animations */
.collapse {
    transition: height 0.3s ease;
}

/* Card Body Padding */
.card-body.p-4 {
    padding: 1.5rem !important;
}
</style>

@endsection