@extends('layouts.main')

  @section('content')
    <!-- Start: Paralax Hero Banner -->
    <div class="bg-light border rounded border-light hero-technology jumbotron py-5 px-4 manhwa">
        <h1 class="hero-title pb-xl-5 text-center"><strong>المانهوا</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="#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-lg-6 pt-lg-0">
            <div class="justify-content-center h-100">
                 <form action="{{ route('search') }}" method="GET">
                <div class="searchbar"><input type="text" name="title" class="search_input" placeholder="عنوان ,إسم المؤلف" >
               <a class="search_icon" type="submit" >
                   <i class="fas fa-search">
                       </i>
              
                </a>
                </div>
           
                  </form>
            </div>
   
            
        </form>
        </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($manhwa) > 0)
          @foreach($manhwa as $manhwas)
            <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/{{$manhwas->image}}">
                        </a>
                        <div class="ripple-cont"></div>
                    </div>
                    <div class="blog-table">
                        <h4 class="blog-card-caption">
                            <a href="#">
                                {{$manhwas->title}}
                            </a>
                        </h4>
                        <p class="blog-card-description">
                            {{$manhwas->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 -->
   
@include('layouts.footer')
@endsection