@extends('layouts.app')
@section('content')
<section class="pages_content">
<!-- ///////////////// loadin /////////////////////////-->
	<div class="col-xs-12 text-xs-center" id="book_loading" >
		<br><br><br><br><br><br>
	    <img src="{{url('images/home_loading.svg')}}" alt="tafsir"/>
	    <div>
	    	<h5>جاري التحميل ....</h5>
	    </div>
	    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</div>
<!-- /////////////// end-loadin //////////////////////-->
	<div class="container" id="show_book_scroll_content" style="display:none">
		<div class="row">
			@if($book != '')
			@if($book->is_published)
			<div class="col-xs-12">
				<h1 class="page_title"> <i class="flaticon-book fa-lg"></i>{{$book->title}}</h1>
				<div class="card">
					<div class="card-header book_head">
						<span><img src='{{url("/books/icons/$book->image")}}'></span>
						<div class="clearfix"></div>
					</div>

				@if($pages != '')
					<div class="rb_tools">
						<ul class="ul_clear book_read_tools pull-sm-left text-xs-center">
							<li><a href="#" id="book_menu_btn"><i class="fa fa-bars fa-2x" title="القائمة" data-toggle="tooltip" data-placement="top"></i></a></li>
							<li class="dropdown book_drop">
								<a href="#" data-toggle="dropdown">
									<i class="fa fa-bookmark-o fa-2x" title="أضف مفضلة" data-toggle="tooltip" data-placement="top"></i>
								</a>
								<div class="dropdown-menu">
									<textarea book-id="{{$book->id}}" id="bookmark" name="bookmark" class="form-control" placeholder="أضف مفضلتك" rows="1"></textarea>
									<button id="add-bookmark" class="btn btn-success btn-sm center-block" type="button" data-toggle="modal">إضافة</button>
								</div><!--end dropdown-menu-->
							</li><!--end dropdown book_drop-->
							<li class="dropdown book_drop">
								<a href="#" data-toggle="dropdown">
									<i class="fa fa-edit fa-2x" title="اضف ملاحظة" data-toggle="tooltip" data-placement="top"></i>
								</a>
								<div class="dropdown-menu">                                
									<textarea book-id="{{$book->id}}" id="note" class="form-control" placeholder="أضف ملاحظتك" rows="1"></textarea>
									<button id="add-note" class="btn btn-success btn-sm center-block" type="button" data-toggle="modal" >إضافة</button>
								</div><!--end dropdown-menu-->
							</li>
							<li class="dropdown book_drop" id="book_drop">
								<a href="#" data-toggle="dropdown">
									<i class="fa fa-list-alt fa-2x" title="الملاحظات المحفوظة" data-toggle="tooltip" data-placement="top"></i>
								</a>
								<div class="dropdown-menu" id="notes_tab">
									<ul class="nav nav-tabs" role="tablist">
										<li class="nav-item" id="tabBookMarks">
											<a class="nav-link active" data-toggle="tab" href="#bookmark_tabs" role="tab">المفضلة</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" data-toggle="tab" href="#notes_tabs" role="tab">الملاحظات</a>
										</li>
									</ul>
									<div class="tab-content">
										<div class="tab-pane active" id="bookmark_tabs" role="tabpanel">
											@if ($bookmarks_exist == '')
												<p class="alert alert-danger">سجل دخولك لعرض مفضلاتك.</p>
											@elseif ($bookmarks_exist == 'no')
												<p id="no_bookmarks" class="alert alert-danger">لم تحفظ اي مفضلات بعد.</p>
											@else
												@foreach($bookmarks_exist as $bookmark)
													<div class="notes_list" bookmark-id="{{$bookmark->id}}">
														<a href="#" bookmark-id="{{$bookmark->id}}" class="delete-bookmark"><i class="fa fa-trash-o"></i></a>
														<a href="#" bookmark-id="{{$bookmark->id}}" class="edit-bookmark"><i class="fa fa-edit"></i></a>
														<h4>{{$bookmark->text}}</h4>
													</div><!--end notes_list-->
												@endforeach
											@endif
											<!--end notes_list-->
										</div><!--end tab-pane-->

										<div class="tab-pane" id="notes_tabs" role="tabpanel">
											@if ($notes_exist == '')
												<p class="alert alert-danger">سجل دخولك لعرض ملحوظاتك.</p>
											@elseif ($notes_exist == 'no')
												<p id="no_notes" class="alert alert-danger">لم تحفظ اي ملحوظات بعد.</p>
											@else
												@foreach($notes_exist as $note)
													<div class="notes_list" note-id="{{$note->id}}">
														<a href="#" note-id="{{$note->id}}" class="delete-note"><i class="fa fa-trash-o"></i></a>
														<a href="#" note-id="{{$note->id}}" class="edit-note"><i class="fa fa-edit"></i></a>
														<h4>{{$note->text}}</h4>
													</div><!--end notes_list-->
												@endforeach
											@endif
										</div><!--end tab-pane-->
									</div><!--end tab-content-->
								</div><!--end dropdown-menu-->
							</li>
							<li><a book-id="{{$book->id}}" class="print_book" href="/books/pdfs/{{$book->pdf}}" target="_blank"><i class="flaticon-paper fa-2x" title="طباعة" data-toggle="tooltip" data-placement="top"></i></a></li>
							<li>
								<a book-id="{{$book->id}}" class="read-book" href="{{url("/show-book/$book->id")}}"><i class="flaticon-fashion fa-2x" title="" data-toggle="tooltip" data-placement="top" data-original-title="قراءة الموضوع بطريقه الصور"></i></a>
							</li>
							<li  class="dropdown book_drop">
								<a name="share-button" href="" data-toggle="dropdown"> <i class="flaticon-connection fa-2x" title="مشاركة" data-toggle="tooltip" data-placement="top"></i></a>
								<div class="dropdown-menu">
									<!-- AddToAny BEGIN -->
									<div class="a2a_kit a2a_kit_size_32 a2a_default_style" style="width:210px;">
										<a book-id="{{$book->id}}" class="share-book a2a_dd" href="https://www.addtoany.com/share"></a>
										<a book-id="{{$book->id}}" class="share-book a2a_button_facebook"></a>
										<a book-id="{{$book->id}}" class="share-book a2a_button_twitter"></a>
										<a book-id="{{$book->id}}" class="share-book a2a_button_google_plus"></a>
									</div>
									<script async src="https://static.addtoany.com/menu/page.js"></script>
									<!-- AddToAny END -->
								</div>
							</li>
							<li><a book-id="{{$book->id}}" class="download-book" href="/download/{{$book->id}}"><i class="flaticon-arrows fa-2x" title="تحميل" data-toggle="tooltip" data-placement="top"></i></a></li>

						</ul>
						
						<div class="clearfix"></div>
					</div><!--end rb_tools-->

					<div class="bb-custom-wrapper b_menu_show" >
						<div class="sidebar_menu">
							<ul class="navigation" id="TOCList">
								@foreach($tocs as $toc)
									<li class="b_scroll" ><a href="#toc-{{$toc->page_order}}" >{{$toc->title}}</a></li>
								@endforeach
							</ul>		
						</div><!--end sidebar_menu-->
						<article id="bookText" class="book_article">
							{!!$pages!!}
						</article>
						
					</div><!--bb-custom-wrapper-->
				</div><!--end card-->
				@else
				<div class="alert alert-danger no-margin">لا يوجد محتوى لهذا الموضوع .. أضف صفحات أولاً</div>
				@endif

				<hr/>
				<div id="seperateTest">
				<h1 class="page_title"> <i class="flaticon-book fa-lg"></i>   موضوعات ذات صلة   </h1>
				<div class="row">
					@if($books_in_topic != '')
					@foreach ($books_in_topic as $book_topic)
					@if ($book_topic->id != $book->id)
					@if($book_topic->is_published)
					<div class="col-md-4 col-xs-12">
						<div class="book_block">
							<a href="/show-book/{{$book_topic->id}}">
								<div class="row">
									<div class="col-lg-4 col-md-12 col-sm-6 col-xs-12 text-xs-center">
										<div class="block_img">
											<img src="{{url('/books/icons') }}/{{$book_topic->image}}" alt=""/>
										</div>
									</div><!--end col-xs-12-->
									<div class="col-lg-8 col-md-12 col-sm-6 col-xs-12">
										<div class="block_content text-muted">
											<font color="#0EAE90">{!!str_limit($book_topic->title, $limit = 30, $end = ' ... ') !!}</font>
											<p>{!!str_limit($book_topic->description, $limit = 30, $end = ' ... ') !!}</p>
										</div>
									</div><!--end col-xs-12-->
								</div><!--end row-->
							</a>
						</div><!--end book_box-->
					</div><!--end col-xs-12-->
					@endif
					@endif
					@endforeach
					@else
					<div class="col-lg-8 col-md-12 col-sm-6 col-xs-12">
						<p class="alert alert-danger">لا توجد موضوعات تحت هذا الموضوع الرئيسي.</p>
					</div>
					@endif
				</div><!--end row-->
				<hr/>
				{{-- comments are here --}}
				{{-- change this --}}
				@include('Comment.add-comment')
				@include('Comment.list-comments')

			</div><!--end col-xs-12-->
			</div>
			<div class="clearfix"></div>
			@else
			<div class="alert alert-danger no-margin">هذا الموضوع غير منشور بعد</div>
			@endif
			@else
			<div class="alert alert-danger no-margin">هذا الموضوع غير موجود</div>
			@endif
		</div><!--end row-->
	</div><!--end container-->

	<div class="modal fade in" id="warning_modal" tabindex="-1" role="dialog" aria-hidden="true" >
  		<div class="modal-dialog">
    		<div class="modal-content">
        		<div class="modal-body text-xs-center">
            		<h4 class="alert alert-danger">عفوا، ليست لديك صلاحية لتنفيذ طلبك.</h4>
            		<a href="{{ url('/register') }}" class="btn btn-info-outline">حساب جديد</a>
            		<a href="{{ url('/login') }}" class="btn btn-success-outline">تسجيل الدخول</a>
       			 </div><!--modal-body-->
    		</div><!--modal-content-->
  		</div><!--modal-dialog-->
	</div>

	<div class="modal fade in empty_comment" tabindex="-1" role="dialog" aria-hidden="true" >
  		<div class="modal-dialog">
    		<div class="modal-content">
        		<div class="modal-body text-xs-center">
            		<h4 class="alert alert-danger">لا يمكنك إضافة تعليق فارغ.</h4>
       			 </div><!--modal-body-->
       			<div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
			    </div>
    		</div><!--modal-content-->
  		</div><!--modal-dialog-->
	</div>

	<div class="modal fade in" id="empty_note" tabindex="-1" role="dialog" aria-hidden="true" >
  		<div class="modal-dialog">
    		<div class="modal-content">
        		<div class="modal-body text-xs-center">
            		<h4 class="alert alert-danger">لا يمكنك إدخال ملاحظة فارغة.</h4>
       			 </div><!--modal-body-->
       			<div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
			    </div>
    		</div><!--modal-content-->
  		</div><!--modal-dialog-->
	</div>

	<div class="modal fade in" id="empty_bookmark" tabindex="-1" role="dialog" aria-hidden="true" >
  		<div class="modal-dialog">
    		<div class="modal-content">
        		<div class="modal-body text-xs-center">
            		<h4 class="alert alert-danger">لا يمكنك إدخال مفضلة فارغة.</h4>
       			 </div><!--modal-body-->
       			<div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
			    </div>
    		</div><!--modal-content-->
  		</div><!--modal-dialog-->
	</div>

	<div class="modal fade" id="edit_note" tabindex="-1" role="dialog" aria-labelledby="edit_note_title" aria-hidden="true">
	    <div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
				    <span aria-hidden="true">&times;</span>
				  </button>
				  <h4 class="modal-title" id="edit_note_title">تعديل ملاحظة</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="note_body" class="form-control-label">الملاحظة الجديدة:</label>
							<textarea class="form-control" id="note_body"></textarea>
						</div>
					</form>
				</div>
				<div class="modal-footer">
				  <button type="button" id="save_note" class="btn btn-primary">حفظ التعديل</button>
				  <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
				</div>
			</div>
	    </div>
  </div>

  <div class="modal fade" id="edit_bookmark" tabindex="-1" role="dialog" aria-labelledby="edit_bookmark_title" aria-hidden="true">
	    <div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
				    <span aria-hidden="true">&times;</span>
				  </button>
				  <h4 class="modal-title" id="edit_bookmark_title">تعديل مفضلة</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="bookmark_body" class="form-control-label">المفضلة الجديدة:</label>
							<textarea class="form-control" id="bookmark_body"></textarea>
						</div>
					</form>
				</div>
				<div class="modal-footer">
				  <button type="button" id="save_bookmark" class="btn btn-primary">حفظ التعديل</button>
				  <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
				</div>
			</div>
	    </div>
	</div>
</section><!--end pages_content -->
@endsection