<?php
    $showLevels = $settings?->show_levels ?? true;
    $showDocs = ($settings?->show_documents ?? true) && $documents->isNotEmpty();
    $levelsCol = $showDocs ? 'col-lg-8' : 'col-lg-12';
    $docsCol = $showLevels ? 'col-lg-4' : 'col-lg-12';
?>
<?php if($showLevels || $showDocs): ?>
<section class="section <?php echo e($sectionBg ?? ''); ?>" id="niveles">
    <div class="container">
        <div class="row g-4">
            <?php if($showLevels): ?>
            <div class="<?php echo e($levelsCol); ?>">
                <div class="levels-panel">
                <div class="mb-4" data-aos="fade-up">
                    <span class="badge-pill">Niveles Educativos</span>
                    <h2 class="section-title mt-2 mb-0"><?php echo $settings?->levels_title ?: 'Una formacion para cada etapa'; ?></h2>
                    <?php if($settings?->levels_subtitle): ?>
                        <p class="text-muted mb-0 mt-2"><?php echo $settings->levels_subtitle; ?></p>
                    <?php endif; ?>
                </div>

                <?php if($levels->isNotEmpty()): ?>
                    <div class="levels-slider-wrapper">
                        <button type="button" class="levels-slider-btn prev" data-bs-target="#levelsCarousel" data-bs-slide="prev" aria-label="Anterior"><i class="bi bi-chevron-left"></i></button>
                        <div id="levelsCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000">
                            <div class="carousel-inner" id="levelsCarouselInner"></div>
                        </div>
                        <button type="button" class="levels-slider-btn next" data-bs-target="#levelsCarousel" data-bs-slide="next" aria-label="Siguiente"><i class="bi bi-chevron-right"></i></button>
                    </div>
                    <div id="levelsCardsSource" class="d-none">
                        <?php $__currentLoopData = $levels; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $level): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="level-card-src">
                                <div class="card card-hover h-100 shadow-sm level-card">
                                    <div class="level-img-wrapper">
                                        <?php if($level->image): ?>
                                            <img src="<?php echo e(image_url($level->image)); ?>" class="card-img-cover" alt="<?php echo e($level->name); ?>">
                                        <?php endif; ?>
                                        <?php if($level->image2): ?>
                                            <div class="level-avatar">
                                                <img src="<?php echo e(image_url($level->image2)); ?>" alt="<?php echo e($level->name); ?>">
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                    <div class="card-body p-4" style="<?php echo e($level->image2 ? 'padding-top: 72px;' : ''); ?>">
                                        <h5 class="fw-bold"><?php echo e($level->name); ?></h5>
                                        <p class="text-muted small mb-3"><?php echo Str::limit(strip_tags($level->description ?? ''), 90); ?></p>
                                        <a href="<?php echo e(route('levels.show', $level->slug)); ?>" class="fw-bold text-primary-brand">
                                            Ver mas <i class="bi bi-arrow-right"></i>
                                        </a>
                                    </div>
                                    <a href="<?php echo e(route('levels.show', $level->slug)); ?>" class="level-overlay" aria-label="Ver <?php echo e($level->name); ?>">
                                        <i class="bi bi-hand-index"></i>
                                    </a>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                <?php endif; ?>
                </div>
            </div>
            <?php endif; ?>

            <?php if($showDocs): ?>
            <div class="<?php echo e($docsCol); ?>">
                <div class="documents-panel" data-aos="fade-up">
                    <div class="documents-panel-header">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <i class="bi bi-folder2-open" style="font-size:1.4rem;"></i>
                            <span class="panel-title" style="font-size:1rem;"><?php echo $settings?->documents_title ?: 'Publicaciones y Documentos'; ?></span>
                        </div>
                        <?php if($settings?->documents_subtitle): ?>
                            <p class="panel-subtitle"><?php echo $settings->documents_subtitle; ?></p>
                        <?php endif; ?>
                    </div>
                    <div class="documents-panel-body">
                        <?php $__currentLoopData = $documents->take(5); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $document): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="doc-row">
                                <div class="doc-icon" style="width:42px;height:42px;min-width:42px;font-size:1.2rem;border-radius:10px;background:<?php echo e(file_color($document->file_type)); ?>1a;color:<?php echo e(file_color($document->file_type)); ?>;">
                                    <i class="bi <?php echo e(file_icon($document->file_type)); ?>"></i>
                                </div>
                                <div class="flex-grow-1" style="min-width:0;">
                                    <div class="doc-title text-truncate"><?php echo e($document->title); ?></div>
                                    <small class="text-muted doc-date"><?php echo e($document->published_at?->format('d M Y')); ?></small>
                                </div>
                                <a href="<?php echo e(image_url($document->file)); ?>" download class="btn btn-sm btn-outline-primary" style="padding:4px 9px;flex-shrink:0;" title="Descargar">
                                    <i class="bi bi-download"></i>
                                </a>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                    <div class="documents-panel-footer">
                        <a href="<?php echo e(route('documents.index')); ?>" class="btn btn-brand w-100">
                            <i class="bi bi-folder2-open me-1"></i> Ver todos los documentos
                        </a>
                    </div>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php $__env->startPush('scripts'); ?>
<script>
(function () {
    var source = document.getElementById('levelsCardsSource');
    var inner = document.getElementById('levelsCarouselInner');
    if (!source || !inner) return;

    var cards = Array.prototype.slice.call(source.querySelectorAll('.level-card-src'));
    var currentPer = 0;

    function perSlide() {
        if (window.innerWidth < 576) return 1;
        if (window.innerWidth < 992) return 2;
        return 3;
    }

    function build() {
        var per = perSlide();
        if (per === currentPer && inner.children.length) return;
        currentPer = per;

        var colClass = per === 1 ? 'col-12' : (per === 2 ? 'col-sm-6' : 'col-md-4');

        var arr = cards.slice();
        var rem = arr.length % per;
        if (rem !== 0) {
            for (var i = 0; i < per - rem; i++) {
                arr.push(cards[i % cards.length]);
            }
        }

        inner.innerHTML = '';
        for (var g = 0; g < arr.length; g += per) {
            var item = document.createElement('div');
            item.className = 'carousel-item' + (g === 0 ? ' active' : '');
            var row = document.createElement('div');
            row.className = 'row g-3';
            for (var k = g; k < g + per; k++) {
                var col = document.createElement('div');
                col.className = colClass;
                col.appendChild(arr[k].cloneNode(true));
                row.appendChild(col);
            }
            item.appendChild(row);
            inner.appendChild(item);
        }
    }

    build();
    window.addEventListener('resize', function () {
        clearTimeout(window.__lvlT);
        window.__lvlT = setTimeout(build, 150);
    });
})();
</script>
<?php $__env->stopPush(); ?>
<?php /**PATH /Applications/XAMPP/xamppfiles/htdocs/PROYECTOS/LARAVEL/paginaweb/resources/views/partials/home/levels.blade.php ENDPATH**/ ?>