@extends('layouts.session')

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

@section('content')
<div class="session-layout">
    <!-- Top Header Bar -->
    <div class="session-topbar">
        <div class="d-flex align-items-center">
            <div class="logo me-4">Edunetra</div>
            <div class="course-title">{{ $course->title }}</div>
        </div>
        
        <div class="user-info">
            <a href="{{ route('courses.show', $course->slug) }}" class="btn btn-sm btn-outline-light me-2">
                <i class="bi bi-arrow-left me-1"></i>Back to Course
            </a>
            <button class="btn btn-sm btn-outline-light d-md-none" onclick="toggleSidebar()">
                <i class="bi bi-list"></i>
            </button>
            <div class="dropdown">
                <button class="btn btn-sm btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <i class="bi bi-person-circle me-1"></i>{{ auth()->user()->name }}
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="{{ route('dashboard') }}">
                        <i class="bi bi-house me-2"></i>Dashboard
                    </a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="{{ route('logout') }}"
                           onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                        <i class="bi bi-box-arrow-right me-2"></i>Logout
                    </a></li>
                </ul>
            </div>
            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                @csrf
            </form>
        </div>
    </div>

    <!-- Main Content -->
    <div class="session-main">
        <!-- Video/Content Area -->
        <div class="session-content">
            <div class="main-content-area">
                <!-- Session Header -->
                <div class="mb-4">
                    <h2 class="fw-bold text-edunetra-text mb-2">{{ $session->title }}</h2>
                    <p class="text-muted">{{ $session->description }}</p>
                </div>

                @if($session->materials && count($session->materials) > 0)
                    @php
                        $videoMaterial = collect($session->materials)->firstWhere('type', 'video');
                        $textMaterial = collect($session->materials)->firstWhere('type', 'text');
                        $fileMaterial = collect($session->materials)->firstWhere('type', 'file');
                        $audioMaterial = collect($session->materials)->firstWhere('type', 'audio');
                    @endphp

                    @if($videoMaterial)
                        <!-- Video Content -->
                        <div class="video-container">
                            <video controls class="video-player">
                                <source src="{{ $videoMaterial['content'] }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    @elseif($textMaterial)
                        <!-- Text Content -->
                        <div class="text-content-area">
                            <h4 class="fw-bold mb-3 text-edunetra-primary">{{ $textMaterial['title'] ?? 'Content' }}</h4>
                            <div class="content-text">
                                {!! nl2br(e($textMaterial['content'])) !!}
                            </div>
                        </div>
                    @elseif($fileMaterial)
                        <!-- File Preview -->
                        <div class="file-preview-area">
                            <div class="d-flex align-items-center mb-3">
                                <i class="bi bi-file-earmark-text fs-3 text-edunetra-primary me-3"></i>
                                <div>
                                    <h4 class="fw-bold mb-1">{{ $fileMaterial['title'] ?? 'Document' }}</h4>
                                    <p class="text-muted mb-0">Click to view or download the document</p>
                                </div>
                            </div>

                            @php
                                $fileExtension = pathinfo($fileMaterial['content'], PATHINFO_EXTENSION);
                            @endphp

                            @if(in_array(strtolower($fileExtension), ['pdf']))
                                <!-- PDF Preview -->
                                <div class="pdf-preview mb-3">
                                    <iframe src="{{ $fileMaterial['content'] }}"
                                            width="100%"
                                            height="600"
                                            style="border: 1px solid #e5e7eb; border-radius: 8px;">
                                    </iframe>
                                </div>
                            @elseif(in_array(strtolower($fileExtension), ['jpg', 'jpeg', 'png', 'gif', 'webp']))
                                <!-- Image Preview -->
                                <div class="image-preview mb-3">
                                    <img src="{{ $fileMaterial['content'] }}"
                                         alt="{{ $fileMaterial['title'] ?? 'Image' }}"
                                         class="img-fluid rounded"
                                         style="max-height: 500px;">
                                </div>
                            @else
                                <!-- Generic File -->
                                <div class="generic-file-preview text-center py-5">
                                    <i class="bi bi-file-earmark display-1 text-muted mb-3"></i>
                                    <p class="text-muted">Preview not available for this file type</p>
                                </div>
                            @endif

                            <div class="file-actions">
                                <a href="{{ $fileMaterial['content'] }}" target="_blank" class="btn btn-edunetra me-2">
                                    <i class="bi bi-eye me-1"></i>View File
                                </a>
                                <a href="{{ $fileMaterial['content'] }}" download class="btn btn-outline-secondary">
                                    <i class="bi bi-download me-1"></i>Download
                                </a>
                            </div>
                        </div>
                    @elseif($audioMaterial)
                        <!-- Audio Content -->
                        <div class="text-content-area">
                            <h4 class="fw-bold mb-3 text-edunetra-primary">{{ $audioMaterial['title'] ?? 'Audio Content' }}</h4>
                            <audio controls class="w-100 mb-3">
                                <source src="{{ $audioMaterial['content'] }}" type="audio/mpeg">
                                Your browser does not support the audio element.
                            </audio>
                        </div>
                    @endif
                @else
                    <!-- No materials - show session content -->
                    <div class="text-content-area">
                        <h4 class="fw-bold mb-3 text-edunetra-primary">Session Content</h4>
                        <div class="content-text">
                            {!! $session->content !!}
                        </div>
                    </div>
                @endif

                <!-- Additional Content Tabs -->
                <div class="content-tabs">
                    <ul class="nav nav-tabs border-0" id="contentTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes" type="button" role="tab">
                                <i class="bi bi-journal-text me-1"></i>Notes
                            </button>
                        </li>
                        @if($session->materials && count($session->materials) > 1)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="resources-tab" data-bs-toggle="tab" data-bs-target="#resources" type="button" role="tab">
                                    <i class="bi bi-folder me-1"></i>All Resources
                                </button>
                            </li>
                        @endif
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="info-tab" data-bs-toggle="tab" data-bs-target="#info" type="button" role="tab">
                                <i class="bi bi-info-circle me-1"></i>Session Info
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content mt-3" id="contentTabsContent">
                        <div class="tab-pane fade show active" id="notes" role="tabpanel">
                            <div class="session-notes">
                                <h5 class="fw-bold mb-3">Session Notes</h5>
                                {!! $session->content !!}
                            </div>
                        </div>

                        @if($session->materials && count($session->materials) > 1)
                            <div class="tab-pane fade" id="resources" role="tabpanel">
                                <h5 class="fw-bold mb-3">All Resources</h5>
                                <div class="row g-3">
                                    @foreach($session->materials as $material)
                                        <div class="col-md-6">
                                            <div class="material-card">
                                                <div class="material-header">
                                                    <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'] ?? ucfirst($material['type']) . ' Material' }}
                                                </div>
                                                <div class="material-body">
                                                    @if($material['type'] === 'video')
                                                        <p class="text-muted mb-2">Video content (displayed above)</p>
                                                    @elseif($material['type'] === 'audio')
                                                        <audio controls class="w-100 mb-2">
                                                            <source src="{{ $material['content'] }}" type="audio/mpeg">
                                                        </audio>
                                                    @elseif($material['type'] === 'file')
                                                        <div class="d-flex gap-2">
                                                            <a href="{{ $material['content'] }}" target="_blank" class="btn btn-edunetra btn-sm">
                                                                <i class="bi bi-eye me-1"></i>View
                                                            </a>
                                                            <a href="{{ $material['content'] }}" download class="btn btn-outline-secondary btn-sm">
                                                                <i class="bi bi-download me-1"></i>Download
                                                            </a>
                                                        </div>
                                                    @elseif($material['type'] === 'link')
                                                        <a href="{{ $material['content'] }}" target="_blank" class="btn btn-edunetra btn-sm">
                                                            <i class="bi bi-box-arrow-up-right me-1"></i>Open Link
                                                        </a>
                                                    @else
                                                        <div class="text-content">
                                                            <p class="text-muted mb-2">Text content (displayed above)</p>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <div class="tab-pane fade" id="info" role="tabpanel">
                            <h5 class="fw-bold mb-3">Session Information</h5>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="info-card">
                                        <div class="d-flex align-items-center mb-2">
                                            <i class="bi bi-clock text-edunetra-primary me-2"></i>
                                            <strong>Duration</strong>
                                        </div>
                                        <p class="mb-0">{{ $session->duration_minutes }} minutes</p>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-card">
                                        <div class="d-flex align-items-center mb-2">
                                            <i class="bi bi-hash text-edunetra-primary me-2"></i>
                                            <strong>Session Number</strong>
                                        </div>
                                        <p class="mb-0">{{ $session->session_number }}</p>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="info-card">
                                        <div class="d-flex align-items-center mb-2">
                                            <i class="bi bi-folder text-edunetra-primary me-2"></i>
                                            <strong>Materials</strong>
                                        </div>
                                        <p class="mb-0">
                                            @if($session->materials && count($session->materials) > 0)
                                                {{ count($session->materials) }} material(s) available
                                            @else
                                                No additional materials
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="session-sidebar" id="sessionSidebar">
            <!-- Sidebar Header -->
            <div class="sidebar-header">
                <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: 50px; height: 50px;">
                        <i class="bi bi-person text-white fs-5"></i>
                    </div>
                    <div>
                        <div class="fw-bold text-edunetra-text">{{ $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="progress-container">
                        <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-bar-custom">
                            <div class="progress-fill" style="width: {{ $progress }}%"></div>
                        </div>
                    </div>
                @endauth
            </div>
            
            <!-- Session List -->
            <div class="sidebar-content">
                <div class="px-3 py-2">
                    <h6 class="fw-bold text-edunetra-text mb-3">Course Content</h6>
                </div>
                
                @foreach($course->sessions->sortBy('session_number') as $courseSession)
                    <a href="{{ route('courses.session', [$course->slug, $courseSession->session_number]) }}" 
                       class="session-item {{ $courseSession->id === $session->id ? 'active' : '' }}">
                        <div class="session-number">
                            {{ $courseSession->session_number }}
                        </div>
                        <div class="session-info">
                            <div class="session-title">{{ $courseSession->title }}</div>
                            <div class="session-duration">
                                <i class="bi bi-clock me-1"></i>{{ $courseSession->duration_minutes }} min
                            </div>
                        </div>
                        <div class="session-icon">
                            @if($courseSession->id === $session->id)
                                <i class="bi bi-play-circle-fill"></i>
                            @else
                                <i class="bi bi-play-circle"></i>
                            @endif
                        </div>
                    </a>
                @endforeach
            </div>
        </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 <= 768 && !sidebar.contains(event.target) && !toggleBtn) {
        sidebar.classList.remove('show');
    }
});

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

// Auto-play video when available
document.addEventListener('DOMContentLoaded', function() {
    const video = document.querySelector('.video-player');
    if (video) {
        video.addEventListener('loadedmetadata', function() {
            // Video is ready to play
            console.log('Video loaded and ready');
        });
    }
});
</script>
@endsection