@extends('layouts.app')
@section('content')
<section class="pages_content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="page_title"> <i class="fa fa-th "></i>الأحرف</h1>
            </div><!--end col-xs-12-->
            <div class="clearfix"></div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <ul class="ul_clear letters_tab" role="tablist">
                	@foreach($letters as $letter)
                    @if($letter->id == $id)
                        <li class="nav-item">
                            <a class="nav-link active"  href="/show-letters/{{$letter->id}}" role="tab">{{$letter->letter}}</a>
                        </li>
                    @else
                    <li class="nav-item">
                        <a class="nav-link"  href="/show-letters/{{$letter->id}}" role="tab">{{$letter->letter}}</a>
                    </li>
                    @endif
                    @endforeach
                </ul>
            </div><!--end col-xs-12-->
            <div class="col-xl-10 col-lg-9 col-md-8 col-sm-8 col-xs-12">
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="tab1" role="tabpanel">
                    	@if($books)
                    	@foreach($books as $book)
                        @if($book->is_published)
                            <div class="let_tab_book">
                                <a href="/show-book/{{$book->id}}">
                                    <div class="row">
                                        <div class="col-lg-3  col-xs-12">
                                            <div class="book_img text-xs-center"><img src="{{url('/books/icons') }}/{{$book->image}}" alt=""/></div>
                                        </div><!--end col-lg-3 col-xs-12-->
                                        <div class="col-lg-9  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-->      
                                </a>                             
                                <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=""><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-->
                            </div><!--end h_tab_book-->
                        @endif
                        @endforeach
                        @else
                        <div class="alert alert-danger no-margin">لا يوجد موضوعات في هذا الحرف</div>
                        @endif
                    </div><!--end tab-pane-->
                </div><!--end tab-content-->
            </div><!--end col-xs-12-->
        </div><!--end row-->
    </div><!--end container-->
</section><!--end pages_content -->
@endsection