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

    <!-- Start: Hero Parallax -->
    <section class="parallax">
        <div class="parallax-background">
            <div class="container h-100">
                <div class="row h-100">
                    <div class="col-md-6 col-lg-6 text-center text-md-start d-flex d-sm-flex d-md-flex justify-content-center align-items-center justify-content-md-start align-items-md-center justify-content-xl-center">
                        <div class="text-end">
                            
                            @foreach($slider as $sliders)
                            <h1 class="text-uppercase fw-bold me-lg-0 ps-lg-5 ms-lg-5">{{$sliders['title']}}</h1>
                            <p class="my-3">{{$sliders->description}}</p><a class="btn btn-primary btn-lg align-items-center action-button w-50" role="button" href="signup.html">اشترك</a>
                                @endforeach
                                
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- End: Hero Parallax -->
    <div class="row ps-0 ms-0 pe-0 me-0 ps-md-5 pe-md-5">
        <div class="col-xl-8 col-xxl-8">
            <div>
                <ul class="nav nav-tabs tab-list" role="tablist">
                    <li class="nav-item" role="presentation"><a class="nav-link active" role="tab" data-bs-toggle="tab" href="#tab-1">مانجا<br></a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" href="#tab-2">روايات</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" href="#tab-3">مانهوا</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" role="tab" data-bs-toggle="tab" href="#tab-4">كومكس</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" role="tabpanel" id="tab-1">
                        <!-- Start: Animation Cards -->
                        <div class="row space-rows">
                            
                         @if(count($recently_books1) > 0)
                         @foreach($recently_books1 as $recently_book1)
 
                            <div class="col-md-5 col-lg-4 col-xl-4 col-xxl-4">
                                <div class="card cards-shadown cards-hover rounded-1" data-aos="flip-left" data-aos-duration="950">
                                    <div class="card-header first"></div>
                                    <div class="card-body">
                                        <h6>{{$recently_book1->title}}</h6>
                                        <p class="card-text sub-text-color"><i class="far fa-clock ms-2"></i>2m ago</p>
                                    </div>
                                </div>
                            </div>
                             @endforeach
                             @else
                       	<h1>No Books Found</h1>
                        @endif
           
                        </div><!-- End: Animation Cards -->
                    </div>
                    <div class="tab-pane" role="tabpanel" id="tab-2">
                        <!-- Start: Animation Cards -->
                        <div class="row space-rows">
                            
                         @if(count($recently_books2) > 0)
                         @foreach($recently_books2 as $recently_book2)
 
                            <div class="col-md-5 col-lg-4 col-xl-4 col-xxl-4">
                                <div class="card cards-shadown cards-hover rounded-1" data-aos="flip-left" data-aos-duration="950">
                                    <div class="card-header first"></div>
                                    <div class="card-body">
                                        <h6>{{$recently_book2->title}}</h6>
                                        <p class="card-text sub-text-color"><i class="far fa-clock ms-2"></i>2m ago</p>
                                    </div>
                                </div>
                            </div>
                         @endforeach
                         @else
                       	<h1>No Books Found</h1>
                        @endif
           
                           
                        </div><!-- End: Animation Cards -->
                    </div>
                    <div class="tab-pane" role="tabpanel" id="tab-3">
                        <!-- Start: Animation Cards -->
                        <div class="row space-rows">
                            
                                    
                         @if(count($recently_books3) > 0)
                         @foreach($recently_books3 as $recently_book3)
 
                            <div class="col-md-5 col-lg-4 col-xl-4 col-xxl-4">
                                <div class="card cards-shadown cards-hover rounded-1" data-aos="flip-left" data-aos-duration="950">
                                    <div class="card-header first"></div>
                                    <div class="card-body">
                                        <h6>Est aliquam aliquam</h6>
                                        <p class="card-text sub-text-color"><i class="far fa-clock ms-2"></i>2m ago</p>
                                    </div>
                                </div>
                            </div>
                             @endforeach
                             @else
                       	<h1>No Books Found</h1>
                        @endif
             
                        </div><!-- End: Animation Cards -->
                    </div>
                    <div class="tab-pane" role="tabpanel" id="tab-4">
                        <!-- Start: Animation Cards -->
                        <div class="row space-rows">
                         @if(count($recently_books4) > 0)
                         @foreach($recently_books4 as $recently_book4)
 
                            <div class="col-md-5 col-lg-4 col-xl-4 col-xxl-4">
                                <div class="card cards-shadown cards-hover" data-aos="flip-left" data-aos-duration="950">
                                    <div class="card-header first"></div>
                                    <div class="card-body">
                                        <h6>{{$recently_book4->title}}</h6>
                                        <p class="card-text sub-text-color"><i class="far fa-clock ms-2"></i>2m ago</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        @else
                       	<h1>No Books Found</h1>
                        @endif
                        </div><!-- End: Animation Cards -->
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <aside>
                <h1>أحدث الكتابات</h1>
                <hr class="hr-index"><!-- Start: aside1 -->
                @if(count($recently_books) > 0)
                @foreach($recently_books as $recently_book)
                <div class="card mb-3">
                    <div class="row g-0">
                        <div class="col-md-4">
                            
                             <img class="img-fluid" src="https://apptocom.com/novelflex2/public/uploads/books/{{$recently_book->image}}">
                            </div>
                        <div class="col-md-8">
                            <div class="card-body mt-0 pb-2 pt-2">
                                <h5 class="card-title"><bold>{{$recently_book->title;}}</bold>
                                </h5>
                                <p class="card-text" style="font-weight: normal;">
                                    {{$recently_book->description;}}
                                <br>
                                </p>
                                <a href="#">
                                 {{$recently_book->cate_title}}#
                                </a>
                            </div>
                        </div>
                    </div>
                </div><!-- End: aside1 -->
              @endforeach
            @else
            	<h1>No Books Found</h1>
            @endif
            </aside>
        </div>
    </div><!-- Start: feature -->
    <div class="row pe-0 me-0 ps-md-5 pe-md-5 pt-xxl-4 row-back-index">
        <div class="col-xl-8 col-xxl-8">
            <h2 class="mb-xxl-2"><span style="color: rgb(246, 246, 246);">بطل الإسبوع</span></h2><!-- Start: Material Card -->
            <div class="card">
                <div class="card-image"><img class="img-fluid" src="{{ asset('public/img/champion.png')}}" width="100%" height="100%"></div>
                <div class="card-content">
                    <h4 class="mb-xxl-3">عنوان الرواية</h4>
                    <p class="mb-xxl-2">In at iaculis lorem. Praesent tempor dictum tellus ut molestie. Sed sed <br>ullamcorper lorem, id faucibus odio. Duis eu nisl ut ligula cursus <br>molestie at at dolor. Nulla est justo, pellentesque vel lectus eget, <br>fermentum varius dui. Morbi faucibus quam sed efficitur interdum. <br>Suspendisse in pretium magna.<br></p>
                    <p class="card-text sub-text-color"><i class="far fa-clock ms-2"></i>2m ago</p>
                </div>
            </div><!-- End: Material Card -->
        </div>
        <div class="col pt-xxl-1">
            <aside>
                <h2 class="mb-xxl-0"><span style="color: rgb(246, 246, 246);">الأكثر إعجاباً</span></h2><!-- Start: Animation Cards -->
                <div class="row space-rows me-xxl-0 ms-xxl-0 mb-xxl-0 pt-xxl-0 mt-xxl-0">
                 @if(count($likes) > 0)
                @foreach($likes as $like)
                    <div class="col-xxl-6 mt-xxl-0 pt-xxl-0 pe-xxl-0 ms-xxl-0">
                        <div class="card cards-shadown cards-hover">
                            <div class="card-header"></div>
                            <div class="card-body">
                                <h6>{{$like->title}}</h6>
                            </div>
                        </div>
                    </div>
                    
                          @endforeach
            @else
            	<h1>No Books Found</h1>
            @endif
           
                </div><!-- End: Animation Cards -->
            </aside>
        </div>
    </div><!-- End: feature -->
    <h1 class="me-xxl-5 ps-xxl-5 ms-xxl-5 pe-xxl-4 big-head"><strong>الأفضل في الروايات</strong></h1><!-- Start: Novel -->
    <div class="container me-xxl-5 pe-xxl-4 ps-xxl-0 ms-xxl-0">
        <div class="row ms-xxl-0">
            
              @if(count($recently_books1) > 0)
                @foreach($recently_books1 as $recently_book1)
            <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/{{$recently_book1->image}}">
                        </a>
                        <div class="ripple-cont"></div>
                    </div>
                    <div class="blog-table">
                        <h4 class="blog-card-caption"><a href="#">
                                    {{$recently_book1->title;}}

                        </a></h4>
                        <p class="blog-card-description">
                              {{$recently_book1->description;}}
                        </p>
                        <div class="ftr">
                         <div class="stats"><i class="far fa-clock"></i><span> {{ $recently_book1->created_at->diffForHumans();
                         
                         
                         }} </span></div>
                        </div>
                    </div>
                </div>
            </div>
         @endforeach
            @else
            	<h1>No Books Found</h1>
            @endif
        </div>
    </div><!-- End: Novel -->
    <h1 class="me-xxl-5 ps-xxl-5 ms-xxl-5 pe-xxl-4">الأفضل في المانجا<br></h1><!-- Start: manga -->
    <div class="container me-xxl-5 pe-xxl-4 ps-xxl-0 ms-xxl-0">
        <div class="row ms-xxl-0">
            
               @if(count($recently_books2) > 0)
                @foreach($recently_books2 as $recently_book2)
            <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/{{$recently_book2->image}}">
                        </a>
                        <div class="ripple-cont"></div>
                    </div>
                    <div class="blog-table">
                        <h4 class="blog-card-caption"><a href="#">{{$recently_book2->title;}}</a></h4>
                        <p class="blog-card-description">{{$recently_book2->description;}}</p>
                        <div class="ftr">
                            <div class="stats"><i class="far fa-clock"></i><span> {{ $recently_book2->created_at->diffForHumans();
                         
                         
                         }}</span></div>
                        </div>
                    </div>
                </div>
            </div>
            
                   @endforeach
            @else
            	<h1>No Books Found</h1>
            @endif
   
        </div>
    </div><!-- End: manga -->
    <h1 class="me-xxl-5 ps-xxl-5 ms-xxl-5 pe-xxl-4">الأفضل في كومكس<br></h1><!-- Start: comics -->
    <div class="container me-xxl-5 pe-xxl-4 ps-xxl-0 ms-xxl-0">
        <div class="row ms-xxl-0">
            
                @if(count($recently_books3) > 0)
                @foreach($recently_books3 as $recently_book3)
            <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/{{$recently_book3->image}}">
                        </a>
                        <div class="ripple-cont"></div>
                    </div>
                    <div class="blog-table">
                        <h4 class="blog-card-caption"><a href="#">{{$recently_book3->title;}}</a></h4>
                        <p class="blog-card-description">{{$recently_book3->description;}}</p>
                        <div class="ftr">
                            <div class="stats"><i class="far fa-clock"></i><span> {{ $recently_book3->created_at->diffForHumans();}} 
                            </span></div>
                        </div>
                    </div>
                </div>
            </div>
                           @endforeach
            @else
            	<h1>No Books Found</h1>
            @endif
   
        
        </div>
    </div><!-- End: comics -->
    <h1 class="me-xxl-5 ps-xxl-5 ms-xxl-5 pe-xxl-4">الأفضل في المانهوا<br></h1><!-- Start: manhoua -->
    <div class="container me-xxl-5 pe-xxl-4 ps-xxl-0 ms-xxl-0">
        <div class="row ms-xxl-0">
            
         @if(count($recently_books4) > 0)
          @foreach($recently_books4 as $recently_book4)
            <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/{{$recently_book4->image}}">
                    </a>
                        <div class="ripple-cont"></div>
                    </div>
                    <div class="blog-table">
                        <h4 class="blog-card-caption"><a href="#">{{$recently_book4->title;}}</a></h4>
                        <p class="blog-card-description">
                            {{$recently_book4->description;}}
                        </p>
                        <div class="ftr">
                            <div class="stats"><i class="far fa-clock"></i><span> {{ $recently_book4->created_at->diffForHumans();}}  </span></div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @else
            	<h1>No Books Found</h1>
            @endif
   
   
        </div>
    </div><!-- End: manhoua -->
    <!-- Start: Banner Color -->
    <section class="py-4 py-xl-5">
        <div class="container me-xxl-5 pe-xxl-4 ps-xxl-2">
            <div class="text-white border-0 border-primary d-flex flex-column justify-content-between flex-lg-row border rounded p-4 p-md-5">
                <div>
                    <h2 class="fw-bold mb-2">إشترك معنا وكن مؤلفاً مشهوراً</h2>
                </div>
                <div class="my-2"><a class="btn btn-primary fs-5 py-2 px-4" role="button" href="#">اشترك</a></div>
            </div>
        </div>
    </section><!-- End: Banner Color -->
    
    @include('layouts.footer')

  @endsection