@include('layouts.home_header')

<section class="home_content" id="home_f">
    {{--  --}}
    <div class="container">
        <div class="col-xs-12 text-xs-center" id="book_loading" style="display:none;">
            <br><br><br><br><br>
            <img src="{{url('images/home_loading.svg')}}" alt="tafsir"/>
        </div>
        <div id="change_content">
            <div class="home_books_tab">
                <div class="row">

                    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12" id="book_side">
                        <h1 class="title">المجلدات</h1>
                        <ul class="ul_clear" role="tablist">
                            @for($i=0;$i<4;$i++)
                            @if($folders[$i] != null)
                            @if($folders[$i]->is_published)
                            <li class="nav-item">
                                @if($i == 0)
                                    <a class="nav-link active" data-toggle="tab" href="#tab{{$folders[0]->id}}" role="tab">{{$folders[0]->name}} <i class="fa fa-angle-left"></i></a>
                                @else
                                <a class="nav-link" data-toggle="tab" href="#tab{{$folders[$i]->id}}" role="tab">{{$folders[$i]->name}} <i class="fa fa-angle-left"></i></a>
                                @endif
                            </li>
                            @endif
                            @endif
                            @endfor
                        </ul>
                    </div><!--end col-xs-12-->
                    <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12" >
                       <div class="tab-content" id="book_side_content" style="min-height: 134px;">
                        @if($folders[0] != null)
                        @if($folders[0]->is_published)
                        <div class="tab-pane fade in active" id="tab{{$folders[0]->id}}" role="tabpanel">
                                                      @if(!is_null($folders[0]->books()->orderBy('order_book', 'asc')->get()->first()))
                           @foreach($folders[0]->books()->orderBy('order_book', 'asc')->take(5)->get() as $book)
                           @if($book->is_published)
                                                      <div class="h_tab_book">
                              <a href="/show-book/{{$book->id}}">

                                <div class="row">
                                    <div class="col-lg-3 col-md-4 col-xs-12">
                                        <div class="book_img"><img src="{{url('books/icons') }}/{{$book->image}}" alt=""></div>
                                    </div><!--end col-lg-3 col-xs-12-->
                                    <div class="col-lg-9 col-md-8 col-xs-12">
                                        <div class="book_content text-muted line_text"><p>{!!$book->description!!}</p></div>
                                    </div><!--end col-lg-9 col-xs-12-->
                                </div><!--end row-->    
                                <div class="book_tools">
                                    <ul class="ul_clear">
                                        <li  data-toggle="tooltip" data-placement="top" title="طباعة">
                                            <a book-id="{{$book->id}}" target="_blank" href="/books/pdfs/{{$book->pdf}}" class="print_book"><i class="flaticon-paper fa-2x text-primary"></i></a>
                                        </li>

                                        <li data-toggle="tooltip" data-placement="top" title="قراءة الموضوع">
                                            <a book-id="{{$book->id}}" class="read-book" href="/show-book/{{$book->id}}"><i class="flaticon-fashion fa-2x text-primary"></i></a>
                                        </li>
                                        <li class="dropdown" data-toggle="tooltip" data-placement="top" title="مشاركة">
                                            <a name="share-button" data-toggle="dropdown" href="" book-id="{{$book->id}}"><i class="flaticon-connection fa-2x text-primary"></i></a>
                                            <div class="dropdown-menu social_share dropdown-menu-right">
                                                <ul class="ul_clear text-xs-center">
                                                    <li><a book-id="{{$book->id}}" class="share-book" rel="nofollow" href="http://www.facebook.com/sharer.php?u={{$protocol}}{{$hostName}}/show-book/{{$book->id}}&title={{$book->title}}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-facebook"></i></a></li>
                                                    <li><a book-id="{{$book->id}}" class="share-book" rel="nofollow" href="https://twitter.com/share?url={{$protocol}}{{$hostName}}/show-book/{{$book->id}}&text={{$book->title}}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-twitter"></i></a></li>
                                                    <li><a book-id="{{$book->id}}" class="share-book" rel="nofollow" href="https://plus.google.com/share?url={{$protocol}}{{$hostName}}/show-book/{{$book->id}}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-google-plus"></i></a></li>
                                                </ul>
                                            </div>
                                        </li>
                                        <li data-toggle="tooltip" data-placement="top" title="تحميل">
                                            <a href="/download/{{$book->id}}" book-id="{{$book->id}}" class="download-book"><i class="flaticon-arrows fa-2x text-primary"></i></a>
                                        </li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div><!--end book_tools-->
                            </a>

                        </div><!--end h_tab_book-->
                        @endif
                        @endforeach
                        @if($book_folder_flag == 0)
                        <p class="alert alert-danger">الموضوعات التى تحت المجلد الأول غير منشورة</p>
                        @endif
                        @else
                        <p class="alert alert-danger">لا توجد موضوعات تحت المجلد الأول</p>
                        @endif

                    </div><!--end tab-pane-->
                    @endif
                    @endif
                    @if($folders[1] != null)
                    @if($folders[1]->is_published)
                    <div class="tab-pane fade" id="tab{{$folders[1]->id}}" role="tabpanel">
                                                @if(!is_null($folders[1]->books()->orderBy('order_book', 'asc')->get()->first()))
                        @foreach($folders[1]->books()->orderBy('order_book', 'asc')->take(5)->get() as $book)
                        @if($book->is_published)
                                                <div class="h_tab_book">
                        <a href="/show-book/{{$book->id}}">
                            <div class="row">
                                <div class="col-lg-3 col-md-4 col-xs-12">
                                    <div class="book_img"><img src="{{url('books/icons') }}/{{$book->image}}" alt=""></div>
                                </div><!--end col-lg-3 col-xs-12-->
                                <div class="col-lg-9 col-md-8 col-xs-12">
                                    <div class="book_content text-muted line_text"><p>{!!$book->description!!}</p></div>
                                </div><!--end col-lg-9 col-xs-12-->
                            </div><!--end row-->                                    
                            <div class="book_tools">
                                <ul class="ul_clear">
                                    <li  data-toggle="tooltip" data-placement="top" title="طباعة">
                                        <a book-id="{{$book->id}}" target="_blank" href="/books/pdfs/{{$book->pdf}}" class="print_book"><i class="flaticon-paper fa-2x text-primary"></i></a>
                                    </li>

                                    <li data-toggle="tooltip" data-placement="top" title="قراءة الموضوع">
                                        <a book-id="{{$book->id}}" class="read-book" href="/show-book/{{$book->id}}"><i class="flaticon-fashion fa-2x text-primary"></i></a>
                                    </li>
                                    <li class="dropdown" data-toggle="tooltip" data-placement="top" title="مشاركة">
                                        <a name="share-button" data-toggle="dropdown" href="" book-id="{{$book->id}}"><i class="flaticon-connection fa-2x text-primary"></i></a>
                                        <div class="dropdown-menu social_share dropdown-menu-right">
                                            <ul class="ul_clear text-xs-center">
                                                <li><a book-id="{{$book->id}}" class="share-book" rel="nofollow" href="http://www.facebook.com/sharer.php?u={{$protocol}}{{$hostName}}/show-book/{{$book->id}}&title={{$book->title}}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-facebook"></i></a></li>
                                                <li><a book-id="{{$book->id}}" class="share-book" rel="nofollow" href="https://twitter.com/share?url={{$protocol}}{{$hostName}}/show-book/{{$book->id}}&text={{$book->title}}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-twitter"></i></a></li>
                                                <li><a book-id="{{$book->id}}" class="share-book" rel="nofollow" href="https://plus.google.com/share?url={{$protocol}}{{$hostName}}/show-book/{{$book->id}}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-google-plus"></i></a></li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li data-toggle="tooltip" data-placement="top" title="تحميل">
                                        <a href="/download/{{$book->id}}" book-id="{{$book->id}}" class="download-book"><i class="flaticon-arrows fa-2x text-primary"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div><!--end book_tools-->
                            </a>
                        </div><!--end h_tab_book-->
                        @endif
                        @endforeach
                        @if($book_folder_flag == 0)
                        <p class="alert alert-danger">الموضوعات التى تحت هذا المجلد غير منشورة</p>
                        @endif
                        @else
                        <p class="alert alert-danger">لا توجد موضوعات تحت هذا المجلد</p>
                        @endif
                    </div><!--end tab-pane-->
                    @endif
                    @endif
                    @if($folders[2] != null)
                    @if($folders[2]->is_published)
                    <div class="tab-pane fade" id="tab{{$folders[2]->id}}" role="tabpanel">
                                                @if(!is_null($folders[2]->books()->orderBy('order_book', 'asc')->take(5)->get()->first()))
                        @foreach($folders[2]->books()->orderBy('order_book', 'asc')->get() as $book)
                        @if($book->is_published)
                                                <div class="h_tab_book">
                        <a href="/show-book/{{$book->id}}">
                            <div class="row">
                                <div class="col-lg-3 col-md-4 col-xs-12">
                                    <div class="book_img"><img src="{{url('books/icons') }}/{{$book->image}}" alt=""></div>
                                </div><!--end col-lg-3 col-xs-12-->
                                <div class="col-lg-9 col-md-8 col-xs-12">
                                    <div class="book_content text-muted line_text"><p>{!!$book->description!!}</p></div>
                                </div><!--end col-lg-9 col-xs-12-->
                            </div><!--end row-->                                    
                            <div class="book_tools">
                                <ul class="ul_clear">
                                    <li  data-toggle="tooltip" data-placement="top" title="طباعة">
                                        <a book-id="{{$book->id}}" target="_blank" href="/books/pdfs/{{$book->pdf}}" class="print_book"><i class="flaticon-paper fa-2x text-primary"></i></a>
                                    </li>

                                    <li data-toggle="tooltip" data-placement="top" title="قراءة الموضوع">
                                        <a book-id="{{$book->id}}" class="read-book" href="/show-book/{{$book->id}}"><i class="flaticon-fashion fa-2x text-primary"></i></a>
                                    </li>
                                    <li class="dropdown" data-toggle="tooltip" data-placement="top" title="مشاركة">
                                        <a name="share-button" data-toggle="dropdown" href="" book-id="{{$book->id}}"><i class="flaticon-connection fa-2x text-primary"></i></a>
                                        <div class="dropdown-menu social_share dropdown-menu-right">
                                            <ul class="ul_clear text-xs-center">
                                                <li><a book-id="{{$book->id}}" class="share-book" rel="nofollow" href="http://www.facebook.com/sharer.php?u={{$protocol}}{{$hostName}}/show-book/{{$book->id}}&title={{$book->title}}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-facebook"></i></a></li>
                                                <li><a book-id="{{$book->id}}" class="share-book" rel="nofollow" href="https://twitter.com/share?url={{$protocol}}{{$hostName}}/show-book/{{$book->id}}&text={{$book->title}}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-twitter"></i></a></li>
                                                <li><a book-id="{{$book->id}}" class="share-book" rel="nofollow" href="https://plus.google.com/share?url={{$protocol}}{{$hostName}}/show-book/{{$book->id}}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-google-plus"></i></a></li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li data-toggle="tooltip" data-placement="top" title="تحميل">
                                        <a href="/download/{{$book->id}}" book-id="{{$book->id}}" class="download-book"><i class="flaticon-arrows fa-2x text-primary"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div><!--end book_tools-->
                            </a>
                        </div><!--end h_tab_book-->
                        @endif
                        @endforeach
                        @if($book_folder_flag == 0)
                        <p class="alert alert-danger">الموضوعات التى تحت هذا المجلد غير منشورة</p>
                        @endif
                        @else
                        <p class="alert alert-danger">لا توجد موضوعات تحت هذا المجلد</p>
                        @endif
                    </div><!--end tab-pane-->
                    @endif
                    @endif
                    @if($folders[3] != null)
                    @if($folders[3]->is_published)
                    <div class="tab-pane fade" id="tab{{$folders[3]->id}}" role="tabpanel">
                                                @if(!is_null($folders[3]->books()->orderBy('order_book', 'asc')->take(5)->get()->first()))
                        @foreach($folders[3]->books()->orderBy('order_book', 'asc')->get() as $book)
                        @if($book->is_published)
                                                <div class="h_tab_book">
                        <a href="/show-book/{{$book->id}}">
                            <div class="row">
                                <div class="col-lg-3 col-md-4 col-xs-12">
                                    <div class="book_img"><img src="{{url('books/icons') }}/{{$book->image}}" alt=""></div>
                                </div><!--end col-lg-3 col-xs-12-->
                                <div class="col-lg-9 col-md-8 col-xs-12">
                                    <div class="book_content text-muted line_text"><p>{!!$book->description!!}</p></div>
                                </div><!--end col-lg-9 col-xs-12-->
                            </div><!--end row-->                                    
                            <div class="book_tools">
                                <ul class="ul_clear">
                                    <li  data-toggle="tooltip" data-placement="top" title="طباعة">
                                        <a book-id="{{$book->id}}" target="_blank" href="/books/pdfs/{{$book->pdf}}" class="print_book"><i class="flaticon-paper fa-2x text-primary"></i></a>
                                    </li>

                                    <li data-toggle="tooltip" data-placement="top" title="قراءة الموضوع">
                                        <a book-id="{{$book->id}}" class="read-book" href="/show-book/{{$book->id}}"><i class="flaticon-fashion fa-2x text-primary"></i></a>
                                    </li>
                                    <li class="dropdown" data-toggle="tooltip" data-placement="top" title="مشاركة">
                                        <a name="share-button" data-toggle="dropdown" href="" book-id="{{$book->id}}"><i class="flaticon-connection fa-2x text-primary"></i></a>
                                        <div class="dropdown-menu social_share dropdown-menu-right">
                                            <ul class="ul_clear text-xs-center">
                                                <li><a book-id="{{$book->id}}" class="share-book" rel="nofollow" href="http://www.facebook.com/sharer.php?u={{$protocol}}{{$hostName}}/show-book/{{$book->id}}&title={{$book->title}}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-facebook"></i></a></li>
                                                <li><a book-id="{{$book->id}}" class="share-book" rel="nofollow" href="https://twitter.com/share?url={{$protocol}}{{$hostName}}/show-book/{{$book->id}}&text={{$book->title}}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-twitter"></i></a></li>
                                                <li><a book-id="{{$book->id}}" class="share-book" rel="nofollow" href="https://plus.google.com/share?url={{$protocol}}{{$hostName}}/show-book/{{$book->id}}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-google-plus"></i></a></li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li data-toggle="tooltip" data-placement="top" title="تحميل">
                                        <a href="/download/{{$book->id}}" book-id="{{$book->id}}" class="download-book"><i class="flaticon-arrows fa-2x text-primary"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div><!--end book_tools-->
                            </a>
                        </div><!--end h_tab_book-->
                        @endif
                        @endforeach
                        @if($book_folder_flag == 0)
                        <p class="alert alert-danger">الموضوعات التى تحت هذا المجلد غير منشورة</p>
                        @endif
                        @else
                        <p class="alert alert-danger">لا توجد موضوعات تحت هذا المجلد</p>
                        @endif
                    </div><!--end tab-pane-->
                    @endif
                    @endif

                    </div><!-- end tab-content-->
                </div><!--end col-xs-12-->
            </div><!--end row-->
        
        </div><!--end home_books_tab-->
    </div><!--end #change_content-->
</div><!--end container-->
</section>

@include('layouts.home_read')
@include('layouts.home_download')
@include('layouts.home_share')
@include('layouts.home_footer')