@extends('layouts.main')
    <!-- Start: full-screen-navbar-search -->
 @section('content')

    <!-- Start: Paralax Hero Banner -->
    <div class="bg-light border rounded border-light hero-technology jumbotron py-5 px-4 comics">
        <h1 class="hero-title pb-xl-5 text-center"><strong><span style="background-color: rgba(37, 109, 133, 0);">الكوميكس</span></strong></h1>
    </div><!-- End: Paralax Hero Banner -->
    <!-- Start: 1 Row 1 Column -->
    <div class="row m-0 m-r-15 p-3">
        <div class="col-3 ps-lg-2 pe-lg-5 me-lg-2">
            <div class="x-dropdown dropdown">
                <div class="text-start x-drop-btn" aria-expanded="false" data-bs-toggle="dropdown"><span class="me-xl-0 ms-xl-3"><a href="#all">عرض الجميع</a></span><i class="fas fa-chevron-down material-icons"></i>
                    <div class="dropdown-menu" role="menu"><a class="dropdown-item" role="presentation" href="#action">أكشن / مغامرة</a><a class="dropdown-item" role="presentation" href="#music">موسيقي / رياضة</a><a class="dropdown-item" role="presentation" href="#romance"> رومانسي / حياة يومية</a><a class="dropdown-item" role="presentation" href="#fantasy">خيال علمي / فانتازيا</a></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 pt-lg-0">
            <div class="justify-content-center h-100">
                <div class="searchbar"><input type="text" class="search_input" placeholder="عنوان ,إسم المؤلف"><a class="search_icon" href="#"><i class="fas fa-search"></i></a></div>
            </div>
        </div>
        <div class="col-3 col-lg-2">
            <div class="dropdown"><button class="btn dropdown" aria-expanded="false" data-bs-toggle="dropdown" type="button">&nbsp;تصنيف حسب<i class="fas fa-sort-amount-down me-lg-2"></i></button>
                <div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#recent">الأحدث</a><a class="dropdown-item" href="#old">الأقدم</a><a class="dropdown-item" href="#most-pobolar">الأكثر إعجاباً</a><a class="dropdown-item" href="#default">إفتراضي</a></div>
            </div>
        </div>
    </div><!-- End: 1 Row 1 Column -->
    <!-- Start: Comics -->
    <div class="container me-xxl-5 pe-xxl-4 ps-xxl-0 ms-xxl-0 mt-xl-4">
        <div class="row ms-xxl-0">
                     
                 
         @if(count($comics) > 0)
          @foreach($comics as $comicss)
            <div class="col-md-4 col-xxl-3">
                <div class="blog-card blog-card-blog">
                    <div class="blog-card-image"><a href="#"><img class="img" src="https://apptocom.com/novelflex2/public/uploads/books/{{$comicss->image}}"></a>
                        <div class="ripple-cont"></div>
                    </div>
                    <div class="blog-table">
                        <h4 class="blog-card-caption"><a href="#">{{$comicss->title}}</a></h4>
                        <p class="blog-card-description">{{$comicss->description}}</p>
                        <div class="ftr">
                            <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                        </div>
                    </div>
                </div>
            </div>
                 @endforeach
            @else
            	<h1>No Books Found</h1>
            @endif
        </div>
    </div><!-- End: Comics -->

    </nav><!-- Start: Bold BS4 Footer Big Logo -->
   @include('layouts.footer')
   @endsection