@extends('layouts.main')
@section('content')
    <!-- Start: full-screen-navbar-search -->
    <h1 class="text-center big-head">إبحث عن مؤلف</h1>
    <div class="row authors-saerch">
        <div class="col-xl-2 ps-lg-2 pe-lg-5 me-lg-2">
            <div class="x-dropdown dropdown">
                <div class="text-start x-drop-btn text-center" aria-expanded="false" data-bs-toggle="dropdown"><span class="ms-xxl-3 ms-4"><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="#novels">الروايات</a><a class="dropdown-item" role="presentation" href="#manga">المانجا</a><a class="dropdown-item" role="presentation" href="#comics">الكومكس</a><a class="dropdown-item" role="presentation" href="#manhwa">المانهوا</a></div>
                </div>
            </div>
        </div>
        <div class="col pt-lg-0 ms-xl-5">
            <div class="justify-content-center h-100">
                <div class="searchbar me-xl-2 ms-xl-5 ps-xl-5"><input type="text" class="search_input" placeholder="إسم المؤلف"><a class="search_icon" href="#"><i class="fas fa-search"></i></a></div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-4">
            
           @if(count($all_author) > 0)
          @foreach($all_author as $all_authors)
            <div class="col">
                
                <div class="card radius-15">
                    <div class="card-body text-center">
                        <div class="p-4 border radius-15">
                            <div class="profile-header-container">
                                <div class="profile-header-img pb-lg-3 pt-lg-3">
                                    
                                    <img class="rounded-circle shadow img-circle" src="https://apptocom.com/novelflex2/public/uploads/books/{{$all_authors->profile_photo}}">
                                    
                            
                                    <div class="rank-label-container"><span class="label label-default rank-label" style="border-style: solid;"><span style="color: rgb(255, 255, 255);">level 2</span></span></div>
                                </div>
                            </div>
                            <h5 class="mb-0 mt-5 mt-lg-4 mt-md-0 mb-md-4"><strong>{{$all_authors->username}}</strong><br></h5>
                            <p class="mb-3 mt-lg-4 pb-lg-0 mb-md-2">{{$all_authors->description}}<br></p><a href="#">#Manga</a>
                            <hr><!-- Start: Countdown -->
                            <div class="d-flex justify-content-center countdown" data-count="2022/12/31">
                                <!-- Start: Days -->
                                <div class="pb-xl-0 mb-xl-0">
                                    <!-- Start: Label -->
                                    <h4><strong>المؤلفات</strong></h4><!-- End: Label -->
                                    <!-- Start: Value -->
                                    <h3>{{$all_authors->totalBooks}}</h3><!-- End: Value -->
                                </div><!-- End: Days -->
                                <!-- Start: Minutes -->
                                <div class="me-xl-3 mb-xl-0 pb-xl-0"></div><!-- End: Minutes -->
                                <!-- Start: Seconds -->
                                <div class="mb-xl-0 pb-xl-0">
                                    <!-- Start: Label -->
                                    <h4><strong>المتابعين</strong></h4><!-- End: Label -->
                                    <!-- Start: Value -->
                                    <h3>{{$all_authors->followers}}</h3><!-- End: Value -->
                                </div><!-- End: Seconds -->
                            </div><!-- End: Countdown -->
                            <div class="d-grid"><a class="btn radius-15 butt" role="button" href="#">اشترك</a></div>
                        </div>
                    </div>
                </div>
                
                   
         
            </div>
         
                    @endforeach
            @else
            	<h1>No Books Found</h1>
            @endif
        </div>
    </div><!-- Start: Bold BS4 Footer Big Logo -->
    
        @include('layouts.footer')

  @endsection