
<?php $__env->startSection('style'); ?>
    <style>
        /* From Uiverse.io by alexruix */
        .custom-card {
            width: 100%;
            min-height: 254px;
            border-radius: 20px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            padding: 1.8rem;
            border: 2px solid #c3c6ce;
            transition: 0.5s ease-out;
            overflow: visible;
        }

        .card-details {
            color: black;
            height: 100%;
            gap: .5em;
            display: grid;
            place-content: center;
            text-align: center;
        }

        .card-button {
            transform: translate(-50%, 125%);
            width: 60%;
            border-radius: 1rem;
            border: none;
            background-color: #008bf8;
            color: #fff;
            font-size: 1rem;
            padding: .5rem 1rem;
            position: absolute;
            left: 50%;
            bottom: 0;
            opacity: 0;
            transition: 0.3s ease-out;
        }

        .text-body {
            color: rgb(134, 134, 134);
        }

        .text-title {
            font-size: 1.5em;
            font-weight: bold;
        }

        .custom-card:hover {
            border-color: #008bf8;
            box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
        }

        .custom-card:hover .card-button {
            transform: translate(-50%, 50%);
            opacity: 1;
        }
    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
    <?php if(session('error')): ?>

        <div class="alert alert-danger">

            <?php echo e(session('error')); ?>


        </div>

    <?php endif; ?>
    <!-- START SECTION TOP -->
    <section class="section-top"
        style="background-image: url(assets/img/bg/section-top.png);background-size:cover; background-position: center center;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-xs-12 text-center">
                    <div class="section-top-title">
                        <h1>Bank Kasus</h1>
                    </div>
                </div><!--- END COL -->
            </div><!--- END ROW -->
        </div><!--- END CONTAINER -->
    </section>
    <!-- END SECTION TOP -->

    <!-- START PORTFOLIO -->
    <section id="portfolio" class="portfolio_area section-padding">
        <div class="container-fluid">
            <div class="col-lg-12 text-center">
                <div class="portfolio_filter">
                    <ul>
                        <li class="active filter" data-filter="all">All</li>
                        <?php $__currentLoopData = $kategori; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li class="filter" data-filter=".<?php echo e($item->nama_kategori); ?>"><?php echo e($item->nama_kategori); ?></li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </div>
            </div>
            <div class="portfolio-grid container-fluid">
                <div class="row justify-content-center">
                    <!-- From Uiverse.io by alexruix -->

                    <?php $__currentLoopData = $kasus; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div
                            class="col-lg-4 col-md-6 col-sm-12 mb-4 portfolio-item mix <?php echo e($item->category->nama_kategori); ?> seo">
                            <div class="custom-card"
                                style="background-image: url(<?php echo e(asset('uploads/case-study/' . $item->gambar)); ?>) !important">
                                <div class="card-details">
                                    <p class="text-title"><?php echo e($item->title); ?></p>
                                </div>

                                <button class="card-button btn-case" data-id="<?php echo e($item->id); ?>">Kerjakan Kasus</button>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div><!-- END ROW -->
            </div>
        </div><!-- END CONTAINER -->
    </section>
    <!-- END PORTFOLIO -->

<?php $__env->stopSection(); ?>
<?php $__env->startSection('script'); ?>
<script>
    $(document).ready(function() {
        $('.btn-case').click(function() {
            var id = $(this).data('id');
            window.location.href = '/quiz/' + id;
        });
    });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('user.layouts.v_template', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\Yudi\WEB\project\a\project_learning\resources\views/user/kasus/index.blade.php ENDPATH**/ ?>