@extends('layouts.main')
    <!-- Start: full-screen-navbar-search -->
    <section>
        <div id="myOverlay-2" class="overlay"><span class="closebtn" onclick="closeSearch()" title="Close Overlay">X</span>
            <div class="overlay-content">
                <form action="/#"><button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button><input class="form-control" type="text" placeholder="بحث .." name="Search"></form>
            </div>
        </div>
        <nav class="navbar navbar-light navbar-expand-md">
            <div class="container-fluid"><a class="navbar-brand" href="#" data-bs-target="index.html"><img class="img-fluid" src="assets/img/NoPath_2.png"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navcol-1">
                    <ul class="navbar-nav mx-auto"></ul>
                    <ul class="navbar-nav mx-auto"></ul>
                    <ul class="navbar-nav mx-auto"></ul>
                    <ul class="navbar-nav justify-content-between ms-lg-4">
                        <li class="nav-item"><a class="nav-link active" href="index.html"><span style="color: rgb(0, 0, 0);">الرئيسية</span><br></a></li>
                        <li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown">الأقسام</a>
                            <div class="dropdown-menu text-end"><a class="dropdown-item" href="{{route('novel')}}">روايات</a><a class="dropdown-item" href="manga.html">مانجا</a><a class="dropdown-item" href="comics.html">كومكس</a><a class="dropdown-item" href="manhwa.html">المانهوا</a></div>
                        </li>
                        <li class="nav-item"><a class="nav-link" href="authors.html"><span style="color: rgb(0, 0, 0);">المؤلفين</span><br></a></li>
                        <li class="nav-item"><a class="nav-link" href="about.html"><span style="color: rgb(0, 0, 0);">من نحن</span><br></a></li>
                    </ul><button class="btn openBtn" onclick="openSearch()"><i class="fa fa-search"></i></button>
                    <div class="dropdown justify-content-between ms-4 me-3"><a class="dropdown-toggle co" aria-expanded="false" data-bs-toggle="dropdown">اللغة<i class="fas fa-globe pe-lg-3 ms-lg-1"></i></a>
                        <div class="dropdown-menu text-end"><a class="dropdown-item"><a class="btn btn-primary btn-lg text-start button-menu" role="button"><img class="me-lg-2 ms-lg-2 w-25" src="assets/img/united-arab-emirates.png">العربية</a></a><a class="dropdown-item pe-lg-0 ps-lg-0"><a class="btn btn-primary btn-lg text-start button-menu" role="button"><img class="ms-lg-2 me-lg-2 w-25" src="assets/img/united-kingdom.png" style="max-width: 24px;">الانجليزية</a></a></div>
                    </div><!-- Start: Actions -->
                    <p class="ms-auto navbar-text actions mt-xl-0 pt-xl-0 pb-xl-0 mb-xl-0"> <a class="btn btn-light action-button" role="button" href="signup.html"><span style="color: rgb(255, 255, 255);">اشترك</span></a></p><!-- End: Actions -->
                </div>
            </div>
        </nav>
    </section><!-- End: full-screen-navbar-search -->
    <!-- Start: Paralax Hero Banner -->
    <div class="bg-light border rounded border-light hero-technology jumbotron py-5 px-4 novel">
        <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">
                 <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 mb-5">
            
                 
         @if(count($all_books) > 0)
          @foreach($all_books as $all_book)
            <div class="col-md-4 col-xxl-3 mt-4">
                <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/{{$all_book->image}}">
                        <div class="ripple-cont"></div>
                    </div>
                    <div class="blog-table">
                        <h4 class="blog-card-caption"><a href="#">{{$all_book->title}}</a></h4>
                        <p class="blog-card-description">{{$all_book->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 -->
    <br>

    @include('layouts.footer')