@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 manga">
        <h1 class="hero-title pb-xl-5"></h1>
    </div><!-- End: Paralax Hero Banner -->
    <!-- Start: 1 Row 1 Column -->
    <div class="row m-0 m-r-0 p-1">
        <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><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="#kodomo">كومودو</a><a class="dropdown-item" role="presentation" href="#shonen">شونين</a><a class="dropdown-item" role="presentation" href="#shojo">شوجو</a><a class="dropdown-item" role="presentation" href="#seinen">سينين</a><a class="dropdown-item" role="presentation" href="#sijin">سيجين</a></div>
                </div>
            </div>
        </div>
        <div class="col 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">
            <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: Manga -->
    <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($manga) > 0)
          @foreach($manga as $mangas)
            <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/{{$mangas->image}}"></a>
                        <div class="ripple-cont"></div>
                    </div>
                    <div class="blog-table">
                        <h4 class="blog-card-caption"><a href="#">{{$mangas->title}}</a></h4>
                        <p class="blog-card-description">{{$mangas->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: Manga -->

@include('layouts.footer')
 @endsection