@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">
                    <h3 class="py-2 text-center font-weight-bold text-muted">&#8358;{{$book->physical_price}}</h3>
                    <p class="text-center">Hard copy</p>
                    <hr>
                    <a href="https://wa.me/2348052688575?text=I%20want%20to%20place%20an%20order%20for%20{{rawurlencode($book->title)}}" target="_blank"><button class="btn btn-default">Place Order</button></a>
                </div>
            </div>
            <div>
                <div class="col-12 justify-content-center">
                    <h3 class="py-2 text-center font-weight-bold text-muted">&#8358;{{$book->e_price}}</h3>
                    <p class="text-center">Read online</p>
                    <hr>
                    <a href="#"><button class="btn btn-success">Buy Online</button></a>
                </div>
            </div>
        </div>
    </div>


</div>
@endsection