@extends('layouts.reader')
@section('content')

    <style>
        .book-img{
            height: 400px;
        }
    </style>

    <section class="container" style="padding: 12px 10%; margin-top: 30px;">
        <h1 class="text-center">Explore Available Books</h1>
        @php
            $books = DB::table('books')->get();
        @endphp
        @foreach ($books as $book)
            <div class="row align-items-center">
                <div class="col-12 col-lg-7 text-center flex-item grid-margin book" data-aos="fade-right">
                    <img src="assets/images/landingPage/books/{{$book->img}}" alt="" class="img-fluid book-img">
                    <h3 class="py-2 font-weight-bold text-muted">&#8358;{{$book->e_price}}</h3>
                </div>
                <div class="col-12 col-lg-5 flex-item grid-margin" data-aos="fade-left">
                    <p class="py-1 m-0 text-muted">{{$book->category}}</p>
                    <h3 class="m-0">{{$book->title}}</h3>
                    <div class="col-lg-9 col-xl-8 p-0">
                        <p class="py-2 m-0 text-muted">{{$book->summary}}</p>
                        <p class="pb-2 font-weight-medium text-muted">Author: {{$book->author}} | {{$book->date_of_publication}}</p>
                    </div>
                    <a href="/mybooks/preview/{{$book->id}}"><button class="btn btn-info">Read more</button></a>
                </div>
            </div> 
        @endforeach
    </section>
   


@endsection