@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 == $letters->first()->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($initial_letter_books)
                    	@foreach($initial_letter_books as $initial_letter_book)
                        @if($initial_letter_book->is_published)
                        <div class="let_tab_book">
                            <a href="/show-book/{{$initial_letter_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') }}/{{$initial_letter_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>{!!$initial_letter_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="{{$initial_letter_book->id}}" target="_blank" href="/books/pdfs/{{$initial_letter_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="{{$initial_letter_book->id}}" class="read-book" href="/show-book/{{$initial_letter_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="{{$initial_letter_book->id}}" class="share-book" rel="nofollow" href="http://www.facebook.com/sharer.php?u={{$protocol}}{{$hostName}}/show-book/{{$initial_letter_book->id}}&title={{$initial_letter_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="{{$initial_letter_book->id}}" class="share-book" rel="nofollow" href="https://twitter.com/share?url={{$protocol}}{{$hostName}}/show-book/{{$initial_letter_book->id}}&text={{$initial_letter_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="{{$initial_letter_book->id}}" class="share-book" rel="nofollow" href="https://plus.google.com/share?url={{$protocol}}{{$hostName}}/show-book/{{$initial_letter_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/{{$initial_letter_book->id}}" book-id="{{$initial_letter_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