@extends('layouts.app')

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

@section('content')
<style>
    .session-layout {
        min-height: 100vh;
        position: relative;
    }

    .session-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        width: 380px;
        height: 100vh;
        background: white;
        border-left: 2px solid var(--edunetra-border);
        overflow-y: auto;
        z-index: 1000;
        box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
    }

    .session-main {
        margin-right: 380px;
        min-height: 100vh;
        padding-bottom: 2rem;
    }
    
    .session-header {
        background: linear-gradient(135deg, var(--edunetra-gradient-start) 0%, var(--edunetra-gradient-end) 100%);
        padding: 1.5rem 0;
        border-bottom: 3px solid var(--edunetra-secondary);
    }
    
    .session-content {
        padding: 2rem 0;
    }
    
    .session-nav-item {
        padding: 1rem;
        border-bottom: 1px solid var(--edunetra-border);
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .session-nav-item:hover {
        background-color: var(--edunetra-light);
    }
    
    .session-nav-item.active {
        background-color: var(--edunetra-primary);
        color: white;
    }
    
    .session-nav-item.active .text-muted {
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    .material-card {
        border: 1px solid var(--edunetra-border);
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 2rem;
    }
    
    .material-header {
        background: var(--edunetra-light);
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--edunetra-border);
    }
    
    .material-body {
        padding: 1.5rem;
    }
    
    @media (max-width: 992px) {
        .session-sidebar {
            width: 100%;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
        }

        .session-sidebar.show {
            transform: translateX(0);
        }

        .session-main {
            margin-right: 0;
        }

        .session-header {
            padding: 1rem 0;
        }

        .session-content {
            padding: 1rem 0;
        }
    }
</style>

<div class="session-layout">
    <!-- Main Content Area -->
    <div class="session-main">
        <!-- Session Header -->
        <div class="session-header">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <nav aria-label="breadcrumb" class="mb-3">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('courses.public') }}" class="text-dark text-decoration-none fw-semibold">Courses</a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="{{ route('courses.show', $course->slug) }}" class="text-dark text-decoration-none fw-semibold">{{ Str::limit($course->title, 30) }}</a>
                                </li>
                                <li class="breadcrumb-item active text-dark fw-bold">Session {{ $session->session_number }}</li>
                            </ol>
                        </nav>
                        <h1 class="h3 fw-bold mb-2 text-dark">{{ $session->title }}</h1>
                        <p class="text-dark opacity-75 mb-0">{{ $session->description }}</p>
                    </div>
                    <div class="col-md-4 text-md-end">
                        <div class="d-flex align-items-center justify-content-md-end gap-2">
                            <span class="badge bg-dark text-white fw-bold px-3 py-2">Session {{ $session->session_number }}</span>
                            <span class="badge bg-edunetra-blue text-white px-3 py-2">{{ $session->duration_minutes }} min</span>
                            <button class="btn btn-outline-dark btn-sm d-md-none" onclick="toggleSidebar()">
                                <i class="bi bi-list"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Session Content -->
        <div class="session-content">
            <div class="container">
                <!-- Main Session Content -->
                <div class="mb-4">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4">
                            <div class="session-content-text">
                                {!! $session->content !!}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Session Materials - Display Directly Like Udemy -->
                @if($session->materials && count($session->materials) > 0)
                    @foreach($session->materials as $index => $material)
                        <div class="material-card">
                            <div class="material-header">
                                <h5 class="fw-bold mb-0 text-edunetra-text">
                                    <i class="bi bi-{{ $material['type'] === 'video' ? 'play-circle text-danger' : ($material['type'] === 'audio' ? 'music-note text-warning' : ($material['type'] === 'file' ? 'file-earmark text-success' : 'file-text text-primary')) }} me-2"></i>
                                    {{ $material['title'] }}
                                </h5>
                            </div>
                            <div class="material-body">
                                @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
                
                <!-- Navigation Buttons -->
                <div class="d-flex justify-content-between mt-5 mb-4">
                    @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: {{ Str::limit($previousSession->title, 20) }}
                        </a>
                    @else
                        <div></div>
                    @endif
                    
                    @if($nextSession)
                        <a href="{{ route('courses.session', [$course->slug, $nextSession->session_number]) }}" 
                           class="btn btn-edunetra">
                            Next: {{ Str::limit($nextSession->title, 20) }}<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>
        </div>
    </div>

    <!-- Fixed Sidebar -->
    <div class="session-sidebar" id="sessionSidebar">
        <!-- Course Info Header -->
        <div class="p-4 border-bottom bg-edunetra-light">
            <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-3"
                     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-0">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="fw-semibold text-edunetra-text">Progress</span>
                        <span class="fw-bold text-edunetra-primary">{{ $progress }}%</span>
                    </div>
                    <div class="progress" style="height: 8px; border-radius: 10px; background-color: #e5e7eb;">
                        <div class="progress-bar" role="progressbar" style="width: {{ $progress }}%; background: linear-gradient(135deg, var(--edunetra-gradient-start), var(--edunetra-gradient-end)); border-radius: 10px;"></div>
                    </div>
                </div>
            @endauth
        </div>
        
        <!-- Session List -->
        <div class="session-list">
            @foreach($course->sessions->sortBy('session_number') as $courseSession)
                <a href="{{ route('courses.session', [$course->slug, $courseSession->session_number]) }}"
                   class="session-nav-item text-decoration-none {{ $courseSession->id === $session->id ? 'active' : '' }}">
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            <span class="badge {{ $courseSession->id === $session->id ? 'bg-edunetra-primary text-white' : 'bg-edunetra-light text-dark' }} rounded-circle"
                                  style="width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem;">
                                {{ $courseSession->session_number }}
                            </span>
                        </div>
                        <div class="flex-grow-1">
                            <div class="fw-semibold {{ $courseSession->id === $session->id ? 'text-white' : 'text-edunetra-text' }}">
                                {{ $courseSession->title }}
                            </div>
                            <small class="{{ $courseSession->id === $session->id ? 'text-white-50' : 'text-muted' }}">
                                <i class="bi bi-clock me-1"></i>{{ $courseSession->duration_minutes }} minutes
                            </small>
                        </div>
                        @if($courseSession->id === $session->id)
                            <i class="bi bi-play-circle-fill text-white fs-5"></i>
                        @else
                            <i class="bi bi-chevron-right text-muted"></i>
                        @endif
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</div>

<script>
function toggleSidebar() {
    const sidebar = document.getElementById('sessionSidebar');
    sidebar.classList.toggle('show');
}

// Close sidebar when clicking outside on mobile
document.addEventListener('click', function(event) {
    const sidebar = document.getElementById('sessionSidebar');
    const toggleBtn = event.target.closest('[onclick="toggleSidebar()"]');

    if (window.innerWidth <= 992 && !sidebar.contains(event.target) && !toggleBtn) {
        sidebar.classList.remove('show');
    }
});

// Handle window resize
window.addEventListener('resize', function() {
    const sidebar = document.getElementById('sessionSidebar');
    if (window.innerWidth > 992) {
        sidebar.classList.remove('show');
    }
});
</script>
@endsection