@extends('layouts.app')

@section('title', $session->title . ' - ' . $course->title)

@section('content')
<!-- Session Header -->
<section class="text-white py-4" style="background: linear-gradient(135deg, var(--edunetra-gradient-start) 0%, var(--edunetra-gradient-end) 100%);">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <nav aria-label="breadcrumb" class="mb-3">
                    <ol class="breadcrumb text-light">
                        <li class="breadcrumb-item"><a href="{{ route('courses.public') }}" class="text-light text-decoration-none">Courses</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('courses.show', $course->slug) }}" class="text-light text-decoration-none">{{ $course->title }}</a></li>
                        <li class="breadcrumb-item active">Session {{ $session->session_number }}</li>
                    </ol>
                </nav>
                <h1 class="h3 fw-bold mb-2">{{ $session->title }}</h1>
                <p class="text-light opacity-90 mb-0">{{ $session->description }}</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <div class="d-flex align-items-center justify-content-lg-end gap-3">
                    <span class="badge bg-white text-dark fs-6 fw-bold">Session {{ $session->session_number }}</span>
                    <span class="badge bg-edunetra-blue text-white fs-6">{{ $session->duration_minutes }} min</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Session Navigation -->
<section class="py-3 bg-edunetra-light border-bottom">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <div class="d-flex flex-wrap gap-2">
                    @foreach($course->sessions->sortBy('session_number') as $courseSession)
                        <a href="{{ route('courses.session', [$course->slug, $courseSession->session_number]) }}" 
                           class="btn btn-sm {{ $courseSession->id === $session->id ? 'btn-edunetra' : 'btn-outline-edunetra' }}">
                            {{ $courseSession->session_number }}
                        </a>
                    @endforeach
                </div>
            </div>
            <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                <div class="btn-group" role="group">
                    @if($previousSession)
                        <a href="{{ route('courses.session', [$course->slug, $previousSession->session_number]) }}" 
                           class="btn btn-outline-edunetra">
                            <i class="bi bi-chevron-left me-1"></i>Previous
                        </a>
                    @endif
                    @if($nextSession)
                        <a href="{{ route('courses.session', [$course->slug, $nextSession->session_number]) }}" 
                           class="btn btn-edunetra">
                            Next<i class="bi bi-chevron-right ms-1"></i>
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Session Content -->
<section class="py-5">
    <div class="container">
        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-8">
                <!-- Session Content -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <div class="session-content">
                            {!! $session->content !!}
                        </div>
                    </div>
                </div>

                <!-- Session Materials - Display Directly Like Udemy -->
                @if($session->materials && count($session->materials) > 0)
                    @foreach($session->materials as $index => $material)
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-header bg-edunetra-light border-0">
                                <h5 class="fw-bold mb-0 text-edunetra-text">
                                    <i class="bi bi-{{ $material['type'] === 'video' ? 'play-circle' : ($material['type'] === 'audio' ? 'music-note' : ($material['type'] === 'file' ? 'file-earmark' : 'file-text')) }} me-2"></i>
                                    {{ $material['title'] }}
                                </h5>
                            </div>
                            <div class="card-body p-4">
                                @if($material['type'] === 'video')
                                    <!-- Video Player -->
                                    <div class="ratio ratio-16x9 mb-3">
                                        <video controls class="rounded">
                                            <source src="{{ $material['content'] }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                    </div>
                                    <p class="text-muted small mb-0">Video content for this session</p>

                                @elseif($material['type'] === 'audio')
                                    <!-- Audio Player -->
                                    <div class="bg-edunetra-light p-4 rounded mb-3">
                                        <div class="d-flex align-items-center justify-content-center">
                                            <audio controls style="width: 100%; max-width: 500px;">
                                                <source src="{{ $material['content'] }}" type="audio/mpeg">
                                                Your browser does not support the audio tag.
                                            </audio>
                                        </div>
                                    </div>
                                    <p class="text-muted small mb-0">Audio content for this session</p>

                                @elseif($material['type'] === 'file')
                                    <!-- File/Document Viewer -->
                                    <div class="bg-edunetra-light p-4 rounded mb-3 text-center">
                                        <i class="bi bi-file-earmark-pdf fs-1 text-edunetra-primary mb-3"></i>
                                        <h6 class="fw-bold mb-2">Document Resource</h6>
                                        <p class="text-muted small mb-3">Click below to view or download the document</p>
                                        <div class="d-flex gap-2 justify-content-center">
                                            <a href="{{ $material['content'] }}" target="_blank" class="btn btn-edunetra">
                                                <i class="bi bi-eye me-2"></i>View Document
                                            </a>
                                            <a href="{{ $material['content'] }}" download class="btn btn-outline-edunetra">
                                                <i class="bi bi-download me-2"></i>Download
                                            </a>
                                        </div>
                                    </div>

                                @elseif($material['type'] === 'link')
                                    <!-- External Link -->
                                    <div class="bg-edunetra-light p-4 rounded mb-3 text-center">
                                        <i class="bi bi-link-45deg fs-1 text-edunetra-blue mb-3"></i>
                                        <h6 class="fw-bold mb-2">External Resource</h6>
                                        <p class="text-muted small mb-3">Access additional learning materials</p>
                                        <a href="{{ $material['content'] }}" target="_blank" class="btn btn-edunetra">
                                            <i class="bi bi-box-arrow-up-right me-2"></i>Open Link
                                        </a>
                                    </div>

                                @else
                                    <!-- Text Content -->
                                    <div class="bg-edunetra-light p-4 rounded">
                                        <div class="text-content">
                                            {!! nl2br(e($material['content'])) !!}
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                @endif
                
                <!-- Session Navigation Bottom -->
                <div class="d-flex justify-content-between">
                    @if($previousSession)
                        <a href="{{ route('courses.session', [$course->slug, $previousSession->session_number]) }}" 
                           class="btn btn-outline-edunetra">
                            <i class="bi bi-chevron-left me-2"></i>Previous: {{ $previousSession->title }}
                        </a>
                    @else
                        <div></div>
                    @endif
                    
                    @if($nextSession)
                        <a href="{{ route('courses.session', [$course->slug, $nextSession->session_number]) }}" 
                           class="btn btn-edunetra">
                            Next: {{ $nextSession->title }}<i class="bi bi-chevron-right ms-2"></i>
                        </a>
                    @else
                        <a href="{{ route('courses.show', $course->slug) }}" class="btn btn-outline-edunetra">
                            <i class="bi bi-check-circle me-2"></i>Complete Course
                        </a>
                    @endif
                </div>
            </div>
            
            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Course Info -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body">
                        <h5 class="fw-bold text-edunetra-text mb-3">{{ $course->title }}</h5>
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-edunetra-primary rounded-circle d-flex align-items-center justify-content-center me-2" 
                                 style="width: 40px; height: 40px;">
                                <i class="bi bi-person text-white"></i>
                            </div>
                            <div>
                                <div class="fw-semibold">{{ $course->teacher->name }}</div>
                                <small class="text-muted">Instructor</small>
                            </div>
                        </div>
                        
                        <!-- Progress -->
                        @auth
                            @php
                                $enrollment = $course->enrollments()->where('user_id', auth()->id())->first();
                                $progress = $enrollment ? $enrollment->progress : 0;
                            @endphp
                            <div class="mb-3">
                                <div class="d-flex justify-content-between mb-1">
                                    <small class="text-muted">Progress</small>
                                    <small class="text-muted">{{ $progress }}%</small>
                                </div>
                                <div class="progress progress-modern">
                                    <div class="progress-bar" role="progressbar" style="width: {{ $progress }}%"></div>
                                </div>
                            </div>
                        @endauth
                        
                        <!-- Course Stats -->
                        <div class="row text-center">
                            <div class="col-6">
                                <div class="small text-muted">Sessions</div>
                                <div class="fw-bold">{{ $course->sessions->count() }}</div>
                            </div>
                            <div class="col-6">
                                <div class="small text-muted">Duration</div>
                                <div class="fw-bold">{{ $course->duration_weeks }}w</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- All Sessions -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white">
                        <h6 class="fw-bold mb-0">All Sessions</h6>
                    </div>
                    <div class="card-body p-0">
                        @foreach($course->sessions->sortBy('session_number') as $courseSession)
                            <a href="{{ route('courses.session', [$course->slug, $courseSession->session_number]) }}" 
                               class="d-flex align-items-center p-3 text-decoration-none border-bottom {{ $courseSession->id === $session->id ? 'bg-edunetra-light' : '' }}">
                                <div class="me-3">
                                    <span class="badge {{ $courseSession->id === $session->id ? 'bg-edunetra-primary' : 'bg-light text-dark' }} rounded-circle" 
                                          style="width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;">
                                        {{ $courseSession->session_number }}
                                    </span>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="fw-semibold text-edunetra-text">{{ $courseSession->title }}</div>
                                    <small class="text-muted">{{ $courseSession->duration_minutes }} minutes</small>
                                </div>
                                @if($courseSession->id === $session->id)
                                    <i class="bi bi-play-circle text-edunetra-primary"></i>
                                @endif
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Media Modal -->
<div class="modal fade" id="mediaModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mediaModalTitle">Media Viewer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="mediaModalBody">
                <!-- Media content will be loaded here -->
            </div>
        </div>
    </div>
</div>

<script>
function showTextContent(content) {
    document.getElementById('mediaModalTitle').textContent = 'Text Content';
    document.getElementById('mediaModalBody').innerHTML = '<div class="p-3">' + content + '</div>';
    new bootstrap.Modal(document.getElementById('mediaModal')).show();
}

function playVideo(url) {
    document.getElementById('mediaModalTitle').textContent = 'Video Player';
    document.getElementById('mediaModalBody').innerHTML = `
        <video controls style="width: 100%; max-height: 70vh;">
            <source src="${url}" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    `;
    new bootstrap.Modal(document.getElementById('mediaModal')).show();
}

function playAudio(url) {
    document.getElementById('mediaModalTitle').textContent = 'Audio Player';
    document.getElementById('mediaModalBody').innerHTML = `
        <div class="text-center p-4">
            <audio controls style="width: 100%;">
                <source src="${url}" type="audio/mpeg">
                Your browser does not support the audio tag.
            </audio>
        </div>
    `;
    new bootstrap.Modal(document.getElementById('mediaModal')).show();
}
</script>
@endsection