@extends('Layouts_user.index')

<style>
    .section-toggle i {
        transition: transform 0.3s ease;
    }
    .section-toggle[aria-expanded="true"] i {
        transform: rotate(180deg);
    }
    .module-card {
        transition: all 0.3s ease;
        border: 1px solid #e9ecef !important;
        position: relative;
    }
    .module-card:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }
    .module-card.module-completed {
        background: linear-gradient(45deg, #f8f9fa 0%, #e8f5e8 100%);
        border-color: #28a745 !important;
    }
    .module-card.loading::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    .progress {
      width: 100%;
      height: 20px;
      background-color: #e0e0e0;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    }

    .progress-bar {
      height: 100%;
      width: 50%; /* ubah sesuai progress (0–100%) */
      background-color: #007bff;
      text-align: center;
      line-height: 20px;
      color: white;
      font-weight: bold;
      transition: width 0.4s ease;
    }

    /* variasi warna */
    .bg-success { background-color: #28a745; }
    .bg-info    { background-color: #17a2b8; }
    .bg-warning { background-color: #ffc107; color: #000; }
    .bg-danger  { background-color: #dc3545; }

    .iframe-content {
  height: auto;
}

.iframe-content iframe {
  width: 100%;
  height: 65vh;           /* tinggi relatif layar */
  max-height: 500px;      /* jangan lebih tinggi dari 500px */
  min-height: 250px;      /* biar tidak terlalu kecil */
  border: 2px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Mode mobile: bikin lebih pendek */
@media (max-width: 768px) {
  .iframe-content iframe {
    height: 40vh;         /* 40% tinggi layar */
    max-height: 300px;    /* batas maksimum lebih kecil */
  }
}

.breadcrumb, ol {
    margin-bottom: 0px !important;
}


    </style>

@section('title', 'Materi Course')

@section('content')
<div class="container-fluid px-4">
    <!-- Header -->
    <!-- <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">{{ !empty($course) ? $course->fullname : 'Materi Course' }}</h6>
                            <p class="text-muted mb-0 fs-15">
                                <i class="fas fa-layer-group me-2"></i>
                                {{ count($sections) }} Section • {{ $totalModules }} Modul
                            </p>
                        </div>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="toggleAllSections()">
                                <i class="fas fa-expand-arrows-alt me-1"></i>
                                Expand All
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="refreshContent()">
                                <i class="fas fa-refresh me-1"></i>
                                Refresh
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb fs-15 fs-md-6 fs-sm-5" style="padding-left:0px !important;background-color: unset !important">
    <li class="breadcrumb-item">
      <a href="#">
        <i class="fas fa-home me-2"></i>Portal
      </a>
    </li>
    <li class="breadcrumb-item"><a href="#">Pelatihan Saya</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{  isset($course) ? $course->fullname : 'Course' }}</li>
  </ol>
</nav>

 <!-- Progress Bar -->
    @if($totalModules > 0)
        <div class="row g-0">
            <div class="col-12">
                <div class="card border-0 shadow-sm" >
                    <div class="card-body" style="padding: 0.8rem !important">
                        <div class="progress mb-2" style="height: 8px;">
                            <div class="progress-bar bg-success" 
                                 role="progressbar" 
                                 style="width: 0%" 
                                 id="learning-progress">
                            </div>
                        </div>
                        <div class="d-flex justify-content-between text-muted small">
                            <span id="completed-modules">0 dari {{ $totalModules }} modul selesai</span>
                            <span id="progress-percentage">0%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

<div class="row mb-8" style="margin-top: -20px;">
  <!-- Kolom Iframe -->
  <div class="col-sm-12 col-md-12 col-lg-7 order-1 order-lg-2">
    <div class="d-flex justify-content-end gap-2">
    <button id="btn-cek-progress" onclick="cekProgress()" class="btn btn-sm btn-warning rounded fs-15 mb-3"><span class="loader "></span><i class="fas fa-star me-2"></i> Rating</button>
    <button id="btn-cek-progress" onclick="cekProgress()" class="btn btn-sm btn-primary rounded fs-15 mb-3"><span class="loader "></span><i class="fas fa-download me-2"></i> Sertifikat</button>
    </div>
    <div class="iframe-wrapper" style="position:relative;">
  <!-- Preloader -->
  <div id="iframe-preloader" style="position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;display:flex;justify-content:center;align-items:center;z-index:10;border-radius: 12px;">
   <span class="text-primary"> Loading... </span>
  </div>

    <div class="iframe-content">
  <iframe id="iframe-content"
    allowfullscreen
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    src="{{ isset($sections[0]['modules'][0]['url']) ? $sections[0]['modules'][0]['url'] : '' }}">
  </iframe>
</div>
</div>

    <h4 class="mt-3">{{  isset($course) ? $course->fullname : '' }}</h4>
  </div>

  <!-- Kolom Konten + Tab -->
  <div class="col-sm-12 col-md-12 col-lg-5 order-2 order-lg-1 mt-lg-0">
    <!-- Tabs -->
    <ul class="nav nav-tabs" id="contentTabs" role="tablist" style="margin-top: 20px;margin-bottom: -20px">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="konten-tab" data-bs-toggle="tab" data-bs-target="#konten" type="button" role="tab" style="font-size: 0.75rem !important;">
          Konten
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="deskripsi-tab" data-bs-toggle="tab" data-bs-target="#deskripsi" type="button" role="tab" style="font-size: 0.75rem !important;">
          Deskripsi
        </button>
      </li>
    </ul>

    <!-- Isi Tab -->
    <div class="tab-content p-3 border rounded-top rounded-bottom shadow-sm bg-white" id="contentTabsContent">
      <div class="tab-pane fade show active" id="konten" role="tabpanel" style="max-height:70vh; overflow-y:auto;">
         @forelse($sections as $index => $section)
                <div class="card mb-3 section-card" data-section-id="{{ $section['id'] }}">
                    <!-- Section Header -->
                    <div class="card-header bg-white border-0 py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <button class="btn btn-link p-0 me-3 section-toggle" 
                                        data-bs-toggle="collapse" 
                                        data-bs-target="#section-{{ $section['id'] }}"
                                        aria-expanded="{{ $index === 0 ? 'true' : 'false' }}">
                                    <i class="fas fa-chevron-down transition-transform"></i>
                                </button>
                                <div>
                                    <h6 class="mb-1 fs-16">
                                        @if($section['section_number'] > 0)
                                            <span class="badge bg-primary me-2">{{ $section['section_number'] }}</span>
                                        @endif
                                        {{ $section['name'] }}
                                    </h6>
                                    @if($section['summary'])
                                        <p class="text-muted mb-0 small">{{ strip_tags($section['summary']) }}</p>
                                    @endif
                                </div>
                            </div>
                            <div class="text-end">
                                <span class="badge bg-light text-dark">
                                    {{ $section['module_count'] }} Modul
                                </span>
                                @if(!$section['visible'])
                                    <span class="badge bg-warning">
                                        <i class="fas fa-eye-slash me-1"></i>Tersembunyi
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Section Content -->
                    <div class="collapse {{ $index === 0 ? 'show' : '' }}" id="section-{{ $section['id'] }}">
                        <div class="card-body pt-0 pb-1">
                            @forelse($section['modules'] as $module)
                                <div class="module-item mb-3 p-3 rounded border module-card" 
                                     data-module-id="{{ $module['id'] }}"
                                     data-module-type="{{ $module['type'] }}">
                                    <div class="d-flex align-items-start">
                                        <!-- Module Icon -->
                                        <div class="me-3">
                                            <div class="module-icon">
                                                @if($module['icon'])
                                                    <img src="{{ $module['icon'] }}" alt="{{ $module['type'] }}" 
                                                         class="img-fluid" style="width: 24px; height: 24px;">
                                                @else
                                                    <i class="fas fa-file-alt text-primary"></i>
                                                @endif
                                            </div>
                                        </div>

                                        <!-- Module Content -->
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                <div>
                                                    <h6 class="mb-1 fs-14">
                                                        <a href="#" onclick="openModule('{{ $module['url'] }}', {{ $courseId }}, {{ $module['id'] }})" 
                                                           class="text-decoration-none module-link">
                                                            {{ $module['name'] }}
                                                            <i class="fas fa-external-link-alt ms-1 small text-muted"></i>
                                                        </a>
                                                    </h6>
                                                    <div class="d-flex align-items-center text-muted small">
                                                        <span class="module-type-badge badge bg-light text-dark me-2">
                                                            {{ $module['type_display'] }}
                                                        </span>
                                                        @if($module['download_content'])
                                                            <!-- <span class="badge bg-success me-2">
                                                                <i class="fas fa-download me-1"></i>Download
                                                            </span> -->
                                                        @endif
                                                        @if(!$module['visible'])
                                                            <span class="badge bg-warning me-2">
                                                                <i class="fas fa-eye-slash me-1"></i>Tersembunyi
                                                            </span>
                                                        @endif
                                                    </div>
                                                </div>

                                                <!-- Completion Status -->
                                                @if($module['has_completion'])
                                                    <div class="completion-status" data-module-id="{{ $module['id'] }}">
                                                        @if($module['is_completed'])
                                                            <span class="badge bg-success completion-badge">
                                                                <i class="fas fa-check-circle me-1"></i>Selesai
                                                            </span>
                                                        @else
                                                            <span class="badge bg-secondary completion-badge">
                                                                <i class="fas fa-clock me-1"></i>Belum Selesai
                                                            </span>
                                                        @endif
                                                    </div>
                                                @endif
                                            </div>

                                            <!-- Module Actions -->
                                            <div class="module-actions">
                                                <!-- <button class="btn btn-sm btn-outline-primary me-2" 
                                                        onclick="openModule('{{ $module['url'] }}', {{ $courseId }}, {{ $module['id'] }})">
                                                    <i class="fas fa-play me-1"></i>Buka
                                                </button> -->
                                                @if($module['download_content'])
                                                    <!-- <button class="btn btn-sm btn-outline-success me-2" 
                                                            onclick="downloadModule('{{ $module['id'] }}')">
                                                        <i class="fas fa-download me-1"></i>Download
                                                    </button> -->
                                                @endif
                                                @if($module['has_completion'] && !$module['is_completed'])
                                                    <!-- <button class="btn btn-sm btn-outline-warning mark-complete-btn" 
                                                            onclick="markModuleComplete({{ $courseId }}, {{ $module['id'] }})"
                                                            data-module-id="{{ $module['id'] }}">
                                                        <i class="fas fa-check me-1"></i>Tandai Selesai
                                                    </button> -->
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="text-center text-muted py-2 fs-14">
                                    <i class="fas fa-inbox fa-2x mb-3"></i>
                                    <p>Belum ada modul di section ini</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center text-muted py-5">
                    <i class="fas fa-folder-open fa-3x mb-3"></i>
                    <h4>Belum Ada Konten</h4>
                    <p>Course ini belum memiliki section atau modul</p>
                </div>
            @endforelse
      </div>
      <div class="tab-pane fade" id="deskripsi" role="tabpanel">
        <p>Ini adalah isi tab Deskripsi.</p>
      </div>
    </div>
  </div>
</div>

    <!-- Course Sections -->
    

   
</div>

@push('styles')
<style>
    .section-toggle i {
        transition: transform 0.3s ease;
    }
    .section-toggle[aria-expanded="true"] i {
        transform: rotate(180deg);
    }
    .module-card {
        transition: all 0.3s ease;
        border: 1px solid #e9ecef !important;
    }
    .module-card:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }
    .module-link:hover {
        text-decoration: underline !important;
    }
    .module-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        border-radius: 8px;
    }
    .section-card {
        border: none !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .section-card:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
</style>
@endpush

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Global variables
const COURSE_ID = {{ $courseId }};
const CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

// Setup AJAX headers
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': CSRF_TOKEN,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
});

document.addEventListener('DOMContentLoaded', function() {
    $('#iframe-preloader').hide();
    $('.completion-badge').removeClass('bg-success bg-warning').addClass('bg-secondary').html('Loading ...');

    calculateProgress();
    
    // Auto-refresh quiz completion status setiap 30 detik
    setInterval(refreshQuizCompletionStatus, 30000);
    
    // Setup module link click handlers
    setupModuleLinkHandlers();
    refreshAllCompletionStatus();
});

function setupModuleLinkHandlers() {
    $('.module-link').off('click').on('click', function(e) {
        e.preventDefault();
        const url = $(this).attr('href');
        const moduleId = $(this).closest('.module-card').data('module-id');
        
        // Track module access
        trackModuleAccess(COURSE_ID, moduleId);
        
        // Open module in new tab
        // window.open(url, '_blank');
        
        // Check completion after a delay
        setTimeout(() => {
            checkModuleCompletion(COURSE_ID, moduleId);
        }, 2000);
    });
}

function openModule(url, courseId, moduleId) {
    // Show loading state
    showLoadingState(`module-${moduleId}`);
    
    // Track module access
    trackModuleAccess(courseId, moduleId);

    let previousModuleId = null;
    const currentModule = $(`.module-card[data-module-id=${moduleId}]`);
    const allModules = $('.module-card'); // Ambil semua module-card di halaman
    const currentIndex = allModules.index(currentModule);

    if (currentIndex > 0) {
        const previousModule = allModules.eq(currentIndex - 1);
        previousModuleId = previousModule.data('module-id');

        openIframeModule(courseId, previousModuleId, url);
        
    }else{
        $('#iframe-preloader').show();
        setTimeout(function() {
            $('#iframe-preloader').hide();
        }, 1500);
        $("#iframe-content").attr("src", url);
    }

    
    
    
    
    // Check completion status after user likely interacted with content
    setTimeout(() => {
        checkModuleCompletion(courseId, moduleId);
    }, 3000);
}

function markModuleComplete(courseId, moduleId) {
    const button = $(`.mark-complete-btn[data-module-id="${moduleId}"]`);
    
    // Show loading state
    button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Memproses...');
    
    $.ajax({
        url: `{{ url('/api/course') }}/${courseId}/module/${moduleId}/complete`,
        method: 'POST',
        success: function(response) {
            if (response.success) {
                // Update completion status in UI
                updateModuleCompletionUI(moduleId, true);
                
                // Show success message
                showNotification('success', 'Modul berhasil ditandai selesai!');
                
                // Update progress
                calculateProgress();
                
                // Hide the button
                button.fadeOut();
            } else {
                showNotification('error', response.message || 'Gagal menandai modul selesai');
                button.prop('disabled', false).html('<i class="fas fa-check me-1"></i>Tandai Selesai');
            }
        },
        error: function(xhr) {
            console.error('Error marking module complete:', xhr);
            showNotification('error', 'Terjadi kesalahan saat menandai modul selesai');
            button.prop('disabled', false).html('<i class="fas fa-check me-1"></i>Tandai Selesai');
        }
    });
}

function trackModuleAccess(courseId, moduleId) {
    $.ajax({
        url: `{{ url('/api/course') }}/${courseId}/module/${moduleId}/access`,
        method: 'POST',
        data: JSON.stringify({
            timestamp: new Date().toISOString(),
            user_agent: navigator.userAgent
        }),
        success: function(response) {
            if (response.success && response.data) {
                // Update UI jika status completion berubah
                updateModuleCompletionUI(moduleId, response.data.is_completed);
                calculateProgress();
            }
        },
        error: function(xhr) {
            console.log('Error tracking module access:', xhr);
        }
    });
}

function checkModuleCompletion(courseId, moduleId) {
    $.ajax({
        url: `{{ url('/api/course') }}/${courseId}/module/${moduleId}/completion`,
        method: 'GET',
        beforeSend: function() {
            // contoh: tambahin loader di module tertentu
            // $(`.completion-status[data-module-id="${moduleId}"]`).find('.completion-badge').removeClass('bg-success bg-warning')
            // .addClass('bg-secondary')
            // .html('Loading ...');
        },
        success: function(response) {
            if (response.success && response.data) {
                updateModuleCompletionUI(moduleId, response.data.is_completed);
                calculateProgress();
            }
        },
        error: function(xhr) {
            console.log('Error checking module completion:', xhr);
        }
    });
}

function openIframeModule(courseId, moduleId, url) {
    $.ajax({
        url: `{{ url('/api/course') }}/${courseId}/module/${moduleId}/completion`,
        method: 'GET',
        beforeSend: function() {
            $('#iframe-preloader').show();
        },
        success: function(response) {
            // alert(0)
           
            if (response.success && response.data) {
                if(response.data.is_completed == 0){
                    $('#iframe-preloader').hide();
                    alert('Modul sebelumnya belum selesai!')
                }else{
                    // Open module
                    $("#iframe-content").attr("src", url);
                    setTimeout(function() {
                        $('#iframe-preloader').hide();
                    }, 1500);
                }
            }
        },
        error: function(xhr) {
            $('#iframe-preloader').hide();
            console.log('Error checking module completion:', xhr);
        }
    });
}

function updateModuleCompletionUI(moduleId, isCompleted) {
    const completionStatus = $(`.completion-status[data-module-id="${moduleId}"]`);
    const completionBadge = completionStatus.find('.completion-badge');
    const markCompleteBtn = $(`.mark-complete-btn[data-module-id="${moduleId}"]`);
    
    if (isCompleted) {
        // Update badge to complete
        completionBadge.removeClass('bg-secondary bg-warning')
            .addClass('bg-success')
            .html('<i class="fas fa-check-circle me-1"></i>Selesai');
            
        // Hide mark complete button
        markCompleteBtn.fadeOut();
        
        // Add completed class to module card
        $(`.module-card[data-module-id="${moduleId}"]`).addClass('module-completed');
    } else {
        // Update badge to not completed
        completionBadge.removeClass('bg-success bg-warning')
            .addClass('bg-secondary')
            .html('<i class="fas fa-clock me-1"></i>Belum Selesai');
            
        // Show mark complete button if hidden
        markCompleteBtn.show();
        
        // Remove completed class
        $(`.module-card[data-module-id="${moduleId}"]`).removeClass('module-completed');
    }
}

function refreshQuizCompletionStatus() {
    $('.module-card[data-module-id]').each(function() {
        const moduleId = $(this).data('module-id');
        const moduleType = $(this).data('module-type');

        if (moduleType === "quiz") {
            checkModuleCompletion(COURSE_ID, moduleId);
        }
    });
}

function refreshAllCompletionStatus() {
    $('.module-card[data-module-id]').each(function() {
        const moduleId = $(this).data('module-id');

        checkModuleCompletion(COURSE_ID, moduleId);
        
    });
}

function refreshContent() {
    showGlobalLoading(true);
    location.reload();
    
}

function toggleAllSections() {
    const collapses = document.querySelectorAll('[id^="section-"]');
    const button = event.target.closest('button');
    const isExpanding = button.textContent.includes('Expand');
    
    collapses.forEach(collapse => {
        if (isExpanding) {
            collapse.classList.add('show');
        } else {
            collapse.classList.remove('show');
        }
    });
    
    button.innerHTML = isExpanding 
        ? '<i class="fas fa-compress-arrows-alt me-1"></i>Collapse All'
        : '<i class="fas fa-expand-arrows-alt me-1"></i>Expand All';
}

function downloadModule(moduleId) {
    showNotification('info', 'Memulai download...');
    // Implementasi download jika diperlukan
    console.log('Downloading module:', moduleId);
}

function calculateProgress() {
    const completedModules = $('.completion-badge.bg-success').length;
    const totalModules = {{ $totalModules }};
    const percentage = totalModules > 0 ? Math.round((completedModules / totalModules) * 100) : 0;
    
    // Animate progress bar
    $('#learning-progress').animate({
        width: percentage + '%'
    }, 10);
    
    $('#completed-modules').text(`${completedModules} dari ${totalModules} modul selesai`);
    $('#progress-percentage').text(percentage + '%');
    
    // Change progress bar color based on percentage
    const progressBar = $('#learning-progress');
    progressBar.removeClass('bg-danger bg-warning bg-success');
    
    if (percentage < 30) {
        progressBar.addClass('bg-danger');
    } else if (percentage < 70) {
        progressBar.addClass('bg-warning');
    } else {
        progressBar.addClass('bg-success');
    }
}

function showLoadingState(elementId) {
    $(`#${elementId}`).addClass('loading');
}

function hideLoadingState(elementId) {
    $(`#${elementId}`).removeClass('loading');
}

function showGlobalLoading(show) {
    if (show) {
        $('#preloader').show();
    } else {
         $('#preloader').hide();
    }
}

function showNotification(type, message) {
    const alertClass = {
        'success': 'alert-success',
        'error': 'alert-danger',
        'warning': 'alert-warning',
        'info': 'alert-info'
    }[type] || 'alert-info';
    
    const icon = {
        'success': 'fa-check-circle',
        'error': 'fa-exclamation-circle',
        'warning': 'fa-exclamation-triangle',
        'info': 'fa-info-circle'
    }[type] || 'fa-info-circle';
    
    const notification = $(`
        <div class="alert ${alertClass} alert-dismissible fade show notification-alert" role="alert">
            <i class="fas ${icon} me-2"></i>${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `);
    
    $('.container-fluid').prepend(notification);
    
    // Auto dismiss after 5 seconds
    setTimeout(() => {
        notification.alert('close');
    }, 5000);
}

// Handle AJAX errors globally
$(document).ajaxError(function(event, xhr, settings) {
    if (xhr.status === 401) {
        showNotification('error', 'Session telah berakhir. Silakan login kembali.');
        setTimeout(() => {
            window.location.href = '/login';
        }, 2000);
    } else if (xhr.status === 500) {
        showNotification('error', 'Terjadi kesalahan server. Silakan coba lagi.');
    }
});
</script>
@endsection