@extends('layouts.user.user-layout')
@section('dashboard-content')

    <!-- Header Area -->
    <div class="header-area" id="headerArea">
      <div class="container">
        <!-- Header Content -->
        <div class="header-content header-style-five position-relative d-flex align-items-center justify-content-between">
          <!-- Back Button -->
          <div class="back-button"><a href="javascript:history.back()">
              <svg class="bi bi-arrow-left-short" width="32" height="32" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"></path>
              </svg></a></div>
          <!-- Page Title -->
          <div class="page-heading">
            <h6 class="mb-0">Materi Pelajaran</h6>
          </div>
          <!-- Navbar Toggler -->
          <div class="navbar--toggler" id="affanNavbarToggler" data-bs-toggle="offcanvas" data-bs-target="#affanOffcanvas" aria-controls="affanOffcanvas"><span class="d-block"></span><span class="d-block"></span><span class="d-block"></span></div>
        </div>
      </div>
    </div>
    <!-- # Sidenav Left -->
    <!-- menu -->
    @include('layouts.user.template-part.menu')
    <div class="page-content-wrapper py-3">
      <!-- Pagination-->
      <div class="shop-pagination pb-3">
        <div class="container">
          <div class="card">
            <div class="card-body p-2">
              <div class="d-flex align-items-center justify-content-between"><small class="ms-1">1 Mata Pelajaran</small>
                
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Top Products-->
      <div class="top-products-area product-list-wrap">
        <div class="container ">
          <div class="row g-3">
            <!-- Single Top Product Card-->
            @foreach($listmateri as $item)
            <div class="col-12 ">
              <div class="card single-product-card">
                <div class="card-body">
                  <div class="d-flex align-items-center">
                    <div class="card-side-img">
                      <!-- Product Thumbnail--><a class="product-thumbnail d-block" href="#">
                      <img src="{{ asset('assets/admin/images/' . $item->gambar) }}" alt="">

                        <!-- Badge--><span class="badge bg-primary">