<?php if($typeSubMenu['status'] == true): ?>
<?php ($num = 0); ?>
<div class="row">
    <div class="table-responsive">
        <table class="table" style="width: 100%">
            <tbody>
                <?php $__currentLoopData = $typeSubMenu['data']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $am): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php ($num = $num + 1); ?>
                <?php if($num % 5 == 1): ?>
                <tr>
                    <td style="width: 20%; text-align: center; border-bottom-width: 0px">
                        <div class="box" data-value="<?php echo e($am['id']); ?>">
                            <div class="box-body">
                                <a href="<?php echo e(route('knowledge.group',$am['id'])); ?>">
                                    <?php if($num % 2 == 1): ?>
                                    <div>
                                        <img class="img-square-green margin content-cover"
                                            src="<?php echo e(asset('../storage/km/icon/'.$am['cover'])); ?>" width="160"
                                            height="160" />
                                    </div>
                                    <?php else: ?>
                                    <div>
                                        <img class="img-square-orange margin content-cover"
                                            src="<?php echo e(asset('../storage/km/icon/'.$am['cover'])); ?>" width="160"
                                            height="160" />
                                    </div>
                                    <?php endif; ?>
                                </a>
                            </div>
                            <div class="box-footer" style="text-align: center">
                                <p class="margin-clear"><?php echo e($am['name']); ?></p>
                            </div>
                        </div>
                    </td>
                    <?php elseif($num % 5 == 0): ?>
                    <td style="width: 20%; text-align: center; border-bottom-width: 0px">
                        <div class="box" data-value="<?php echo e($am['id']); ?>">
                            <div class="box-body">
                                <a href="<?php echo e(route('knowledge.group',$am['id'])); ?>">
                                    <?php if($num % 2 == 1): ?>
                                    <div>
                                        <img class="img-square-green margin content-cover"
                                            src="<?php echo e(asset('../storage/km/icon/'.$am['cover'])); ?>" width="160"
                                            height="160" />
                                    </div>
                                    <?php else: ?>
                                    <div>
                                        <img class="img-square-orange margin content-cover"
                                            src="<?php echo e(asset('../storage/km/icon/'.$am['cover'])); ?>" width="160"
                                            height="160" />
                                    </div>
                                    <?php endif; ?>
                                </a>
                            </div>
                            <div class="box-footer" style="text-align: center">
                                <p class="margin-clear"><?php echo e($am['name']); ?></p>
                            </div>
                        </div>
                    </td>
                </tr>
                <?php else: ?>
                <td style="width: 20%; text-align: center; border-bottom-width: 0px">
                    <div class="box" data-value="<?php echo e($am['id']); ?>">
                        <div class="box-body">
                            <a href="<?php echo e(route('knowledge.group',$am['id'])); ?>">
                                <?php if($num % 2 == 1): ?>
                                <div>
                                    <img class="img-square-green margin content-cover"
                                        src="<?php echo e(asset('../storage/km/icon/'.$am['cover'])); ?>" width="160"
                                        height="160" />
                                </div>
                                <?php else: ?>
                                <div>
                                    <img class="img-square-orange margin content-cover"
                                        src="<?php echo e(asset('../storage/km/icon/'.$am['cover'])); ?>" width="160"
                                        height="160" />
                                </div>
                                <?php endif; ?>
                            </a>
                        </div>
                        <div class="box-footer" style="text-align: center">
                            <p class="margin-clear"><?php echo e($am['name']); ?></p>
                        </div>
                    </div>
                </td>
                <?php endif; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                <?php if((count($typeSubMenu['data']) % 5) < 5): ?> <!-- check size array-->
                    <?php for($i=count($typeSubMenu['data']) % 5; $i < 5; $i++): ?> <!-- for td null-->
                        <td style="width: 20%; text-align: center; border-bottom-width: 0px">
                        </td>
                        <?php if($i == 4): ?>
                        </tr>
                        <?php endif; ?>
                    <?php endfor; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
    
    <div class="d-flex justify-content-center">
        <?php echo $typeSubMenu['data']->links(); ?>

    </div>
</div>
<?php else: ?>
<p>ไม่พบข้อมูล</p>
<?php endif; ?>

<script>
// var box = '.box';
// $(box).on('click', function() {
//     idMenu = $(this).attr("data-value");
//     urlApi = "";
//     size = 20;
//     pageListArticle(urlApi, idMenu, size);
// })

// function pageListArticle(urlApi, idMenu, size) {
//     var form_data = new FormData();
//     form_data.append('urlApi', urlApi);
//     form_data.append('id', idMenu);
//     form_data.append('size', size);

//     $.ajax({
//         type: "post",
//         url: 'kgroup/pageListArticle',
//         data: form_data,
//         headers: {
//             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//         },
//         processData: false,
//         contentType: false,
//         cache: false,
//         success: function(html) {
//             $('#col').replaceWith(html);
//         }
//     });
// }
$('.box-body a').click(function() {
    $(".loader").show();
});

var selector = '.pageid a';
var mainMenu = $(".navbar-nav .active .nav-link").attr("data-index");
$(selector).on('click', function() {
    $(selector).removeClass('active');
    $(this).addClass('txtorange-5 active');
    urlApi = $(this).attr("data-index");
    listPage(mainMenu, urlApi);
});

function listPage(mainMenu, urlApi) {
    var form_data = new FormData();
    form_data.append('sub_level', mainMenu);
    form_data.append('url', urlApi);
    form_data.append('size', 20);

    $.ajax({
        type: "post",
        url: 'page/tableMenu',
        data: form_data,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        processData: false,
        contentType: false,
        cache: false,
        success: function(html) {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
            $('#blade').html(html);
        }
    });
}
</script><?php /**PATH /var/www/html/km-web/resources/views/subpage/tableMenu.blade.php ENDPATH**/ ?>