@extends('user.layouts.v_template')
@section('style')
    <style>
        /* From Uiverse.io by alexruix */
        .card {

            position: relative;

            overflow: hidden;

            background: rgb(196, 224, 255);

            border-radius: 24px;

            padding: 28px;

            border: 1px solid #e5e7eb;

            transition: 0.35s ease;

            box-shadow:
                0 10px 25px rgba(0, 0, 0, 0.06);

            height: 100%;
        }

        .card:hover {

            transform:
                translateY(-8px);

            box-shadow:
                0 20px 40px rgba(37, 99, 235, 0.15);

            border-color:
                #bfdbfe;
        }

        /*
                |------------------------------------------------------------------
                | BACKGROUND EFFECT
                |------------------------------------------------------------------
                */

        .card::before {

            content: '';

            position: absolute;

            width: 180px;

            height: 180px;

            background:
                rgba(37, 99, 235, 0.05);

            border-radius: 50%;

            top: -90px;

            right: -70px;

            transition: 0.4s;
        }

        .card:hover::before {

            transform: scale(1.15);
        }

        /*
                |------------------------------------------------------------------
                | ICON
                |------------------------------------------------------------------
                */

        .materi-icon {

            width: 70px;

            height: 70px;

            border-radius: 20px;

            background:
                linear-gradient(135deg,
                    #2563eb,
                    #1d4ed8);

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 30px;

            color: white;

            margin-bottom: 20px;

            box-shadow:
                0 10px 20px rgba(37, 99, 235, 0.25);
        }

        /*
                |------------------------------------------------------------------
                | CATEGORY
                |------------------------------------------------------------------
                */

        .materi-category {

            display: inline-block;

            padding: 7px 14px;

            border-radius: 999px;

            background: #dbeafe;

            color: #1d4ed8;

            font-size: 12px;

            font-weight: 700;

            margin-bottom: 18px;
        }

        /*
                |------------------------------------------------------------------
                | TITLE
                |------------------------------------------------------------------
                */

        .materi-title {

            font-size: 22px;

            font-weight: 700;

            color: #111827;

            margin-bottom: 15px;

            line-height: 1.5;
        }

        /*
                |------------------------------------------------------------------
                | DESC
                |------------------------------------------------------------------
                */

        .materi-desc {

            color: #6b7280;

            line-height: 1.8;

            font-size: 14px;

            margin-bottom: 25px;
        }

        /*
                |------------------------------------------------------------------
                | BUTTON
                |------------------------------------------------------------------
                */

        .btn-materi {

            border: none;

            background:
                linear-gradient(135deg,
                    #2563eb,
                    #1d4ed8);

            color: white;

            padding: 12px 18px;

            border-radius: 14px;

            font-size: 14px;

            font-weight: 600;

            transition: 0.3s;

            text-decoration: none;

            display: inline-block;
        }

        .btn-materi:hover {

            transform: scale(1.05);

            color: white;

            box-shadow:
                0 10px 20px rgba(37, 99, 235, 0.25);
        }    
    </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 ($materi 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="card">

                                <div class="materi-icon">
                                    📘
                                </div>

                                <div class="materi-category">
                                    {{ $item->category->nama_kategori }}
                                </div>

                                <div class="materi-title">
                                    {{ $item->judul }}
                                </div>

                                <div class="materi-desc">
                                    {{ Str::limit($item->deskripsi, 50) }}
                                </div>

                                <a href="{{ URL::to('/materi/view/' . $item->id) }}" class="btn-materi">
                                    Baca Materi →
                                </a>

                            </div>
                        </div>
                    @endforeach
                </div><!-- END ROW -->
            </div>
        </div><!-- END CONTAINER -->
    </section>
    <!-- END PORTFOLIO -->

@endsection
@section('script')
    <script>
    </script>
@endsection