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





<!-- ================================
    START BREADCRUMB AREA
================================= -->
<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">
             
              <h2 class="section__title text-white"> <a href="{{ route('dashboard') }}"> <i class="la la-chevron-left icon text-white"> </i> </a> My Books &nbsp; &nbsp; &nbsp; &nbsp;</h2>
          </div>

          <ul class="generic-list-item generic-list-item-white generic-list-item-arrow d-flex flex-wrap align-items-center">
              <li> <a href="{{ route('dashboard') }}"> Dashboard </a> </li>
              <li> My Books </li>
          </ul>

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

  </div><!-- end container -->
</section><!-- end breadcrumb-area -->
<!-- ================================
  END BREADCRUMB AREA
================================= -->









<section class="course-area pb-120px">
    <div class="container">

        <div class="section-heading text-center">

            
            
           <!-- <h2 class="section__title py-5 text-white">  MY BOOKS  </h2> -->

            <h5 class="ribbon ribbon-lg text-white mt-5"> Free Books and My Puchased E-Books </h5>
            
            {{-- <span class="section-divider"></span> --}}

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

 

    <div class="container my-5"> 

        <h4 class="my-5 pt-5 px-2 fw-bold text-white">  Free Books </h4>

        <div class="row my-5 py-2 px-2" style="min-height:30vh; background-color:#031124" >
      
             @foreach ($freeProducts as $product)

                   <!-- Read To EBook-->
                  <div class="col-lg-2 col-md-4 col-6 my-3">

                    <div class="card" style="width:150px">

                      <a  class="" href="{{ route('user.read.myproduct', $product->product_slug) }}">
                       
                         <img class="card-img-top" src="{{ asset($product->product_thumbnail) }}" alt="Card image"  style="height:150px" >

                      </a>


                    
                      <div class="card-body text-center">
                        <p class="card-title"> <a  class="text-black" href="{{ route('user.read.myproduct', $product->product_slug) }}"> E-Book </a></p>
                      </div>
                      

                    </div>






                  </div>


                  <!-- Listen To AudioBook-->

                 @if( count($product->audio) > 0 )

                 <div class="col-lg-2 col-md-4 col-6 my-3">

                  <div class="card" style="width:150px">

                    <a  class="" href="{{ route('user.listen.myproduct', $product->product_slug) }}">
                     
                       <img class="card-img-top" src="{{ asset($product->product_thumbnail) }}" alt="Card image"  style="height:150px" >

                    </a>


                
                    <div class="card-body text-center">
                      <p class="card-title"> <a  class="text-black" href="{{ route('user.listen.myproduct', $product->product_slug) }}"> AudioBook </a> </p>
                    </div>
                  
                  </div>


                 </div>
               

                 @else

                  

                 @endif

            @endforeach

        </div>


    </div>



    <div class = "container my-5">

       <div class="section-block"></div>

     </div>



     <div class="container my-5"> 

        <h4 class="my-5 pt-5 px-2 fw-bold text-white">  Purchased E-Books </h4>

        <div class="row my-5 py-4 px-2"  style="min-height:30vh; background-color:#031124">

      
                  @foreach ($purchasedProducts as $product) 

                    <div class="col-lg-2 col-md-4 col-6 my-3">

                     <div class="card" style="width:150px">
                      <a  class="text-black" href="{{ route('user.readflip.myproduct', $product->product_slug) }}">     <img class="card-img-top" src="{{ asset($product->product_thumbnail) }}" alt="Card image"  style="height:150px" > </a>
                   
                     

                        <div class="card-body text-center">
                          <p class="card-title"> <a  class="text-black" href="{{ route('user.readflip.myproduct', $product->product_slug) }}"> E-Book </a> </p>
                        </div>
  
                      </div>

                    </div>

                 @endforeach 

        </div>


    </div>



</section>








@endsection