@extends('layouts.app')

@section('content')


<div class="layout-wrapper layout-content-navbar">
    <div class="layout-container">
      <!-- Menu -->

      @include('users.includes.sidebar')
      <!-- / Menu -->

      <!-- Layout container -->
      <div class="layout-page">
        <!-- Navbar -->

        @include('users.includes.header')

        <!-- / Navbar -->

        <!-- Content wrapper -->
        <div class="content-wrapper">
            <!-- Content -->
            {{-- @dd($contents) --}}
            <div class="container-xxl flex-grow-1 container-p-y">
              <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Home /</span> Quizzes</h4>

              <!-- Examples -->
              <div class="row mb-5">
                @if(!empty($quiz) && $quiz->count())
                {{-- @dd($content) --}}
                    @php $sn=1;   @endphp
                    <div class="row mb-5">
                        @foreach($quiz as $key => $value)
                    
                            <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="row g-0">
                                <div class="col-md-4">
                                    <img class="card-img card-img-left" height="100%" src="{{asset('users/img/quiz.jpeg')}}" alt="Card image" />
                                </div>
                                <div class="col-md-8">
                                    <div class="card-body">
                                    <h5 class="card-title"><a href="{{url('user/quiz/'.$value->id)}}">{{$value->title}}</a></h5>
                                    <p class="card-text">
                                        {{$value->question}}
                                    </p>
                                    <p class="card-text"><small class="text-muted">Posted {{$value->created_at->diffForHumans()}}</small></p>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                        @endforeach
                    </div>
                @endif
                
              </div>
              <!-- Examples -->

             
              <!--/ Card layout -->
            </div>
            <!-- / Content -->

            <!-- Footer -->
            @include('users.includes.footer')
            <!-- / Footer -->

            <div class="content-backdrop fade"></div>
        </div>
        <!-- Content wrapper -->
      </div>
      <!-- / Layout page -->
    </div>

    <!-- Overlay -->
    <div class="layout-overlay layout-menu-toggle"></div>
</div>
@endsection