@extends('layouts.reader')
@section('content')
<style>
    .my-book{
        margin-bottom: 30px;
    }
    .book-img{
        height: 400px;
    }
</style>

<div class="container my-book">
    <div class="row col-12 align-items-center" style="margin-right: 0px;">
        <div class="col-12 text-center flex-item book" data-aos="fade-right">
            <img src="/assets/images/landingPage/books/{{$book->img}}" alt="" class="img-fluid book-img">
        </div>
    </div>
    <div class="row col-12 align-items-center">
        <div class="col-12 flex-item text-center" 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-12 p-0 text-center">
                <p class="py-2 m-0 text-muted text-center">{{$book->summary}}</p>
                <p class="pb-2 font-weight-medium text-muted">Author: {{$book->author}} | {{$book->date_of_publication}}</p>
            </div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="d-flex gap-4 justify-content-center">
            <div>
                <div class="col-12 justify-content-center">
                    <a href="/mybooks/buy/{{$book->id}}"><button class="btn btn-success">Buy Online</button></a>
                </div>
            </div>
        </div>
    </div>


</div>
@endsection