@extends('admin.master')


@section('content')

<?php 
$tabs = [
    'Dashboard Summary' => '📊',
    'Training Videos' => '👩‍🏫',
    'Module Relationships' => '🏬',
];
?>

<div class="content">
    <div class="block">
        <ul class="nav nav-tabs nav-tabs-block js-tabs-enabled" data-toggle="tabs" role="tablist">
            <?php foreach($tabs AS $tab => $icon)  { 
                $id = str_slug($tab);
              ?>
             <li class="nav-item">
                 <a class="nav-link" data-id="{{$id}}" href="#{{$id}}" data-toggle="tab">
                    {{$icon}}
                    {{e2($tab)}}</a>
             </li> 
             <?php } ?>
             <li class="nav-item ml-auto p-1">
                <button type="button" class="btn btn-alt-danger" id="download-pdf-btn" onclick="downloadPDF()" style="display:none">
                    <i class="fa fa-file-pdf"></i> {{e2("Download PDF")}}
                </button>
             </li>
            
        </ul>
        <div class="block-content tab-content">
            <?php 
            $k = 0;
            foreach($tabs AS $tab => $icon)  { 
                $id = str_slug($tab);
              ?>
            <div class="tab-pane @if($k == 0) active @endif" id="{{$id}}" role="tabpanel">
                    @if($k == 0)
                        <div class="btn btn-outline-primary load-stats">{{e2("Load Stats")}}</div>
                    @endif
            </div>
            <?php $k++; } ?>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function downloadPDF() {
    const element = document.getElementById('dashboard-summary');
    
    // Geçici olarak scroll alanlarını genişlet
    const scrollables = $(element).find('div[style*="overflow"]');
    const originalStyles = [];

    scrollables.each(function() {
        originalStyles.push({
            element: this,
            height: this.style.height,
            overflow: this.style.overflow
        });
        $(this).css({
            'height': 'auto',
            'overflow': 'visible'
        });
    });

    const opt = {
      margin:       0.2,
      filename:     'dashboard-summary.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2, useCORS: true },
      jsPDF:        { unit: 'in', format: 'a4', orientation: 'landscape' },
      pagebreak:    { mode: ['avoid-all', 'css', 'legacy'] }
    };

    var btn = $('#download-pdf-btn');
    var originalText = btn.html();
    btn.html('<i class="fa fa-cog fa-spin"></i> Processing...');
    btn.prop('disabled', true);
    
    html2pdf().set(opt).from(element).save().then(function(){
        // Stilleri geri yükle
        originalStyles.forEach(item => {
            $(item.element).css({
                'height': item.height,
                'overflow': item.overflow
            });
        });

        btn.html(originalText);
        btn.prop('disabled', false);
    });
}

$(document).ready(function() {
    // İlk sekmeyi otomatik yükle
    $('.nav-link:eq(0)').click();
    // Tab tıklama olayı
    $('.load-stats').on('click', function() {
        $('.nav-link:eq(0)').click();
    });
    var ajaxRequest;
    $('.nav-link').off('click').on('click', function(e) {
        e.preventDefault();
        var tabId = $(this).data('id');

        if(tabId === 'dashboard-summary') {
            $('#download-pdf-btn').show();
        } else {
            $('#download-pdf-btn').hide();
        }
        
        var tabPane = $('#' + tabId);
        tabPane.html('<i class="fa fa-4x fa-cog fa-spin text-success"></i>');
        
        // Önceki ajax isteği ve service worker'ı iptal et
        if(ajaxRequest) {
            ajaxRequest.abort();
            if('serviceWorker' in navigator) {
                navigator.serviceWorker.getRegistrations().then(function(registrations) {
                    registrations.forEach(function(registration) {
                        registration.unregister();
                    });
                });
            }
        }
        
        ajaxRequest = $.ajax({
            url: `?ajax2=admin.dashboard.module.${tabId}&cache`,
            method: 'GET',
            success: function(html) {
                tabPane.html(html);
            },
            error: function(xhr, status, error) {
                if(status === 'abort') {
                    return;
                }
                console.error('Error loading tab content');
                tabPane.html('Error loading tab content');
            }
        });
    });

    // Body'e tıklandığında ajax isteği ve service worker'ı iptal et 
  
});
</script>
@endsection