@extends('layouts.main')

@section('content')


    <!-- Start: full-screen-navbar-search -->

    <!-- Start: profile-card -->
    <div class="profile-card">
        <div class="profile-back"></div>
        <img class="rounded-circle img-fluid border border-5 border-white profile-pic" src="https://apptocom.com/novelflex2/public/uploads/profile_photos/{{$profiles->profile_photo}}">
        <h3 class="profile-name">{{$profiles->username}}</h3><button class="btn btn-light btn-lg disabled border rounded-pill border-1 border-dark pt-lg-2 mt-lg-4" type="button" disabled=""><strong><span style="color: rgb(32, 33, 36);">Reader</span></strong></button>
    </div><!-- End: profile-card -->
    <section class="carousel slide" data-ride="carousel" id="postsCarousel">
        <div class="container">
            <div class="row">
                <div class="col text-right mb-4"><a class="btn btn-light next" role="button" href="" title="more"><i class="fa fa-chevron-right fa-lg"></i></a><a class="btn btn-light prev" role="button" href="" title="go back"><i class="fa fa-chevron-left fa-lg"></i></a></div>
                <div class="col text-start">
                    <h2>Following</h2>
                </div>
            </div>
        </div>
        <div class="container p-t-0 m-t-2 carousel-inner">
            

            <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-4 row-equal carousel-item active m-t-0">

                 @if(count($following) > 0)
                  @foreach($following as $follow)
                <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/{{$follow->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>{{$follow->username}}</strong><br>
                                </h5>
                                <p class="mb-3 mt-lg-4 pb-lg-0 mb-md-2">{{$follow->description}}<br></p>
                                <hr><a href="#">#Manga</a>
                                <hr>
                                <div class="d-flex justify-content-center countdown" data-count="2022/12/31">
                                    <div class="pb-xl-0 mb-xl-0">
                                        <h4><strong>المؤلفات</strong></h4>
                                        <h3>{{$followers}}</h3>
                                    </div>
                                    <div class="me-xl-3 mb-xl-0 pb-xl-0"></div>
                                    <div class="mb-xl-0 pb-xl-0">
                                        <h4><strong>المتابعين</strong></h4>
                                        <h3>{{$followers}}</h3>
                                    </div>
                                </div>
                                <div class="d-grid"><a class="btn radius-15 profile-butt" role="button" href="#">إلغاء الإشتراك</a></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                @endforeach
             @else
            	<h1>No Books Found</h1>
            @endif
            </div>
        </div>
    </section>
    <div class="container mb-xl-3 mt-xl-5">
        <hr>
    </div>
    <section class="carousel slide" data-ride="carousel" id="postsCarousel-1">
        <div class="container">
            <div class="row">
                <div class="col text-right mb-4"><a class="btn btn-light next" role="button" href="" title="more"><i class="fa fa-chevron-right fa-lg"></i></a><a class="btn btn-light prev" role="button" href="" title="go back"><i class="fa fa-chevron-left fa-lg"></i></a></div>
                <div class="col text-start">
                    <h2>Continue Reading</h2>
                </div>
            </div>
        </div>
        <div class="container p-t-0 m-t-2 carousel-inner">
            <div class="row row-cols-xl-4 row-col-1 row-col-lg-2 row-equal carousel-item m-t-0">
                <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="assets/img/card1.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <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="assets/img/card2.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <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="assets/img/card3.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <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="assets/img/card4.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-4 row-equal carousel-item m-t-0">
                <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="assets/img/card1.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <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="assets/img/card2.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <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="assets/img/card3.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <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="assets/img/card4.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-4 row-equal carousel-item m-t-0">
                <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="assets/img/card1.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <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="assets/img/card2.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <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="assets/img/card3.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <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="assets/img/card4.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row row-cols-1 row-cols-lg-2 row-cols-xl-4 row-equal carousel-item active m-t-0">
                <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="assets/img/card1.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <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="assets/img/card2.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <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="assets/img/card3.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <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="assets/img/card4.png"></a>
                            <div class="ripple-cont"></div>
                        </div>
                        <div class="blog-table">
                            <h4 class="blog-card-caption"><a href="#">عنوان الرواية</a></h4>
                            <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                            <div class="ftr">
                                <div class="stats"><i class="far fa-clock"></i><span> 2min </span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- Start: Bold BS4 Footer Big Logo -->
  @endsection