@extends('user.layouts.v_template')
@section('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>
@endsection

@section('content')
    @if(session('error'))

        <div class="alert alert-danger">

            {{ session('error') }}

        </div>

    @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>
                        @foreach ($kategori as $item)
                            @if ($item->nama_kategori == "-")
                        @else
                        <li class="filter" data-filter=".{{ $item->nama_kategori }}">{{ $item->nama_kategori }}</li>
                        @endif
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="portfolio-grid container-fluid">
                <div class="row justify-content-center">
                    <!-- From Uiverse.io by alexruix -->

                    @foreach ($kasus as $item)
                        <div
                            class="col-lg-4 col-md-6 col-sm-12 mb-4 portfolio-item mix {{ $item->category->nama_kategori }} seo">
                            <div class="custom-card"
                                style="background-image: url({{ asset('uploads/case-study/' . $item->gambar) }}) !important">
                                <div class="card-details">
                                    <p class="text-title">{{ $item->title }}</p>
                                </div>

                                <button class="card-button btn-case" data-id="{{ $item->id }}">Kerjakan Kasus</button>
                            </div>
                        </div>
                    @endforeach
                </div><!-- END ROW -->
            </div>
        </div><!-- END CONTAINER -->
    </section>
    <!-- END PORTFOLIO -->

@endsection
@section('script')
<script>
    $(document).ready(function() {
        $('.btn-case').click(function() {
            var id = $(this).data('id');
            window.location.href = '/quiz/' + id;
        });
    });
</script>
@endsection