@extends('user.user_dashboard')
@section('home')





<section class="breadcrumb-area section-padding img-bg-2">
   <div class="overlay"></div>

   <div class="container">

       <div class="breadcrumb-content d-flex flex-wrap align-items-center justify-content-between">
          
           <div class="section-heading">
               <h3 class="section__title text-white"> <a href="{{ route('user.show.product', $product->product_slug) }}"> <i class="la la-chevron-left icon text-white"> </i> </a>   Read E-Book &nbsp;  &nbsp; &nbsp;  </h3>
           </div>

           <ul class="generic-list-item generic-list-item-white generic-list-item-arrow d-flex flex-wrap align-items-center"> 

              <li> Basic Reader </li>
               

    
           </ul>

       </div><!-- end breadcrumb-content -->

   </div><!-- end container -->
</section><!-- end breadcrumb-area -->





<!-- Reader Interface Tips Starts -->
<div class="container mt-5">
 
    @if($product->flip_code)
      <a href="{{ route('user.readflip.product', $product->product_slug) }}" class="btn btn-primary"> Switch To Flip Reader <i class="la la-toggle-on"></i> </a>
    @else

    @endif
    
    {{--
    <button type="button" class="btn" style="background-color:#22aa88; color:#ffff" data-toggle="collapse" data-target="#demo"> Basic Reader Guide &nbsp; <i class="la la-plus mr-1"></i> </button>
    
    <div id="demo" class="collapse">

        <ul class="p-4 text-white text-justify fw-light rounded" style="background-color:#031124">

                <li>
                  <p> <span class="fw-bold"> 1. Full Screen Mode : </span>  Click on the <span class="fw-bold"> <em> Settings  <i class="la la-cog mr-1"></i> </em> Icon </span> on the top left of the reader Interface, and then on the <span class="fw-bold"> <em> Full screen <i class="la la-expand mr-1"></i>  </em> Button </span> to enter and to exit the full screen mode.  </p>
                 </li> <br>

                <li>
                  <p> <span class="fw-bold"> 2. Light Mode / Dark Mode : </span> Click on the  <span class="fw-bold"> <em> Settings <i class="la la-cog mr-1"></i> </em> Icon </span> on the top left of the reader Interface, and then on <span class="fw-bold"> <em> Light Mode <i class="la la-sun mr-1"></i> </em> Button </span> to change reader interface theme to light mode, or on the <span class="fw-bold"> <em> Dark Mode <i class="la la-moon mr-1"></i> </em> Button </span>  to change reader interface theme to Dark Mode. </p>
                </li> <br>

                <li>
                 <p> <span class="fw-bold"> 3. Zoom or Font Adjustments : </span> Click on the  <span class="fw-bold"> <em> Dropdown <i class="la la-angle-down mr-1"></i>  </em> Icon </span> on the top center of the reader Interface to zoom in and zoom out or adjust text size as preferred.  </p>

               </li> <br>


              <li>
                <p> <span class="fw-bold"> 4. Search : </span>  Click on the <span class="fw-bold"> <em> Search <i class="la la-search mr-1"></i> </em> Button  </span> on the top left of the reader Interface, to search for word and phrases in the E-book.   </p>
              </li> <br>


              <li>
                <p>  <span class="fw-bold"> 5. Pages Navigation : </span>  Click on the <span class="fw-bold"> <em> Pages <i class="la la-book-open mr-1"></i> </em> Icon </span> on the top right of the reader Interface, to navigate to pages of the E-Book.   </p>
              </li> <br>

        </ul>
     
    </div>
    --}}

    

</div>
<!-- Reader Interface Tips Ends -->



    



  <!-- section-heading -->
  <div class="container section-heading text-center">
            
    <h4 class="pt-5 text-white">{{ $product->product_name }}   </h4>
    

  </div><!-- end section-heading -->



<!--div class="container-fluid pb-5 ml-1 mr-1"> -->
<div class="container pb-5">

      <div id="viewer"  class="w-auto shadow-lg" style="height: 550px; margin: 50px auto;"> </div>

   

</div>



<script>
  
    document.addEventListener('contextmenu', function(event) {
        event.preventDefault();
      
    });
    
</script>




@include('includes.cloud')

@endsection