@extends('layouts.app')

@section('content')
    <!-- product Start  -->
    <section>
        <div class="container mt-3">
            <div class="row bg-white p-lg-4 p-3">
                <div class="col-lg-9 col-md-9 col-12 row">
                    <div class="col-lg-4 col-md-4 col-12">
                        <img src="assets/images/products/1.jpg" alt="" class="panzoom__content col-12" style="max-width: 300px;"/>
                    </div>
                    <div class="col-lg-8 col-md-8 col-12 ps-lg-5">
                        <h5 class="product-title">{{ $books->title }}</h5>
                        <div class="text-lg-start text center">
                            <div>
                                <small class="text-danger">
                                    <span class="text-secondary">লেখক : </span>
                                    @foreach($books->writers as $writer)
                                        {{ $writer->name }}
                                    @endforeach
                                </small>
                            </div>
                            <div>
                                <small class="text-danger">
                                    <span class="text-secondary">প্রকাশনী  : </span> {{ $books->publisher->name }}
                                </small>
                            </div>
                            <div>
                                <small class="text-danger">
                                    <span class="text-secondary">বিষয়   : </span> {{ $books->subject->name }}
                                </small>
                            </div>
                            <div>
                                <small class="text-secondary">
                                    পৃষ্ঠা : 698, কভার : পেপার ব্যাক, সংস্করণ : 10th Edition, 2023
                                </small>
                            </div>
                            <p class="font-14 text-secondary my-3">
                                {{ $books->description }}
                            </p>
                            <div class="d-flex mt-4 flex-lg-row flex-column">
                                <div class="d-flex">
                                    <span><h4 class="text-danger ms-3 ">500 ৳</h4></span>
                                </div>
                            </div>
                            <div class="mt-3">
                                <a href="cart.html" class="btn btn-danger me-3 mb-2 px-4 py-3 font-15">
                                    অর্ডার করুন
                                </a>
                                <button class="btn btn-warning me-3 mb-2 px-4 py-3 font-15"  data-bs-toggle="modal" data-bs-target="#read_more">
                                    একটু পড়ে দেখুন
                                </button>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-12 mb-3">
                                    <img src="assets/images/others/banner.webp" alt="" class="img-fluid">
                                </div>
                                <div class="col-lg-6 col-md-6 col-12 mb-3">
                                    <img src="assets/images/others/banner.webp" alt="" class="img-fluid">
                                </div>
                                <div class="col-lg-6 col-md-6 col-12 mb-3">
                                    <img src="assets/images/others/banner.webp" alt="" class="img-fluid">
                                </div>
                                <div class="col-lg-6 col-md-6 col-12 mb-3">
                                    <img src="assets/images/others/banner.webp" alt="" class="img-fluid">
                                </div>
                            </div>
                            <div class="mt-3">
                                <a href="#" class="text-danger text-decoration-none review_submit_show">
                                    <i class="fa fa-edit"></i>
                                    আপনার রিভিউটি লিখুন
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="review_box d-none">
                            <h5 class="bold-7">রিভিউ এবং রেটিং</h5>
                            <p class="font-12 text-danger">
                                আপনিই প্রথম মতামত দিন -
                            </p>
                            <p class="font-12 text-secondary">
                                Your email address will not be published. Required fields are marked <span class="text-danger">*</span>
                            </p>
                            <p class="font-12 text-secondary">
                                Your rating
                            </p>
                            <div class="rating-widget">
                                <div class='rating-stars text-center'>
                                    <ul id='stars'>
                                        <li class='star' title='Poor' data-value='1'>
                                            <i class='fa fa-star fa-fw'></i>
                                        </li>
                                        <li class='star' title='Fair' data-value='2'>
                                            <i class='fa fa-star fa-fw'></i>
                                        </li>
                                        <li class='star' title='Good' data-value='3'>
                                            <i class='fa fa-star fa-fw'></i>
                                        </li>
                                        <li class='star' title='Excellent' data-value='4'>
                                            <i class='fa fa-star fa-fw'></i>
                                        </li>
                                        <li class='star' title='WOW!!!' data-value='5'>
                                            <i class='fa fa-star fa-fw'></i>
                                        </li>
                                    </ul>
                                </div>
                                <input type="hidden" id="ratingValue" name="ratingValue">
                            </div>
                            <div class="mb-3">
                                <div class="mb-3">
                                    <label for="">Your review *</label>
                                    <textarea class="form-control shadow-none rounded-0" name="" id="" rows="3"></textarea>
                                </div>
                                <div class="mb-3 col-lg-6 col-12">
                                    <label for="">Name *</label>
                                    <input type="text" class="form-control rounded-0 shadow-none">
                                </div>
                                <div class="mb-3 col-lg-6 col-12">
                                    <label for="">Email *</label>
                                    <input type="text" class="form-control rounded-0 shadow-none">
                                </div>
                                <div class="mb-3">
                                    <button class="btn btn-danger rounded-0">সাবমিট</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-12">
                    <div class="border p-2">
                        <h4 class="text-secondary">আরো দেখুন…</h4>
                    </div>
                    <div class="border p-2 border-top-0">
                        <div class="d-flex gap-2">
                            <div class="image col-4">
                                <img src="assets/images/products/product.webp" alt="" class="img-fluid">
                            </div>
                            <div class="text-area pt-2 flex-fill">
                                <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">বানান নিয়ে নানান কথা</p>
                                <p class="book-author mb-2 p-0 font-14 text-secondary">ডা. সায়মা সাজ্জাদ</p>
                                <p class="m-0 p-0 p-price"><del class="text-muted">TK.135 </del><span class="ps-2 text-danger">TK.116</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="border p-2 border-top-0">
                        <div class="d-flex gap-2">
                            <div class="image col-4">
                                <img src="assets/images/products/product.webp" alt="" class="img-fluid">
                            </div>
                            <div class="text-area pt-2 flex-fill">
                                <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">বানান নিয়ে নানান কথা</p>
                                <p class="book-author mb-2 p-0 font-14 text-secondary">ডা. সায়মা সাজ্জাদ</p>
                                <p class="m-0 p-0 p-price"><del class="text-muted">TK.135 </del><span class="ps-2 text-danger">TK.116</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="border p-2 border-top-0">
                        <div class="d-flex gap-2">
                            <div class="image col-4">
                                <img src="assets/images/products/product.webp" alt="" class="img-fluid">
                            </div>
                            <div class="text-area pt-2 flex-fill">
                                <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">বানান নিয়ে নানান কথা</p>
                                <p class="book-author mb-2 p-0 font-14 text-secondary">ডা. সায়মা সাজ্জাদ</p>
                                <p class="m-0 p-0 p-price"><del class="text-muted">TK.135 </del><span class="ps-2 text-danger">TK.116</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="border p-2 border-top-0">
                        <div class="d-flex gap-2">
                            <div class="image col-4">
                                <img src="assets/images/products/product.webp" alt="" class="img-fluid">
                            </div>
                            <div class="text-area pt-2 flex-fill">
                                <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">বানান নিয়ে নানান কথা</p>
                                <p class="book-author mb-2 p-0 font-14 text-secondary">ডা. সায়মা সাজ্জাদ</p>
                                <p class="m-0 p-0 p-price"><del class="text-muted">TK.135 </del><span class="ps-2 text-danger">TK.116</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="border p-2 border-top-0">
                        <div class="d-flex gap-2">
                            <div class="image col-4">
                                <img src="assets/images/products/product.webp" alt="" class="img-fluid">
                            </div>
                            <div class="text-area pt-2 flex-fill">
                                <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">বানান নিয়ে নানান কথা</p>
                                <p class="book-author mb-2 p-0 font-14 text-secondary">ডা. সায়মা সাজ্জাদ</p>
                                <p class="m-0 p-0 p-price"><del class="text-muted">TK.135 </del><span class="ps-2 text-danger">TK.116</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="border p-2 border-top-0">
                        <div class="d-flex gap-2">
                            <div class="image col-4">
                                <img src="assets/images/products/product.webp" alt="" class="img-fluid">
                            </div>
                            <div class="text-area pt-2 flex-fill">
                                <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">বানান নিয়ে নানান কথা</p>
                                <p class="book-author mb-2 p-0 font-14 text-secondary">ডা. সায়মা সাজ্জাদ</p>
                                <p class="m-0 p-0 p-price"><del class="text-muted">TK.135 </del><span class="ps-2 text-danger">TK.116</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="border p-2 border-top-0">
                        <div class="d-flex gap-2">
                            <div class="image col-4">
                                <img src="assets/images/products/product.webp" alt="" class="img-fluid">
                            </div>
                            <div class="text-area pt-2 flex-fill">
                                <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">বানান নিয়ে নানান কথা</p>
                                <p class="book-author mb-2 p-0 font-14 text-secondary">ডা. সায়মা সাজ্জাদ</p>
                                <p class="m-0 p-0 p-price"><del class="text-muted">TK.135 </del><span class="ps-2 text-danger">TK.116</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Button trigger modal -->

    <!-- Modal -->
    <div class="modal fade" id="read_more" tabindex="-1" role="dialog" aria-labelledby="modalTitleId" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-fullscreen" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitleId">
                        Modal title
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">Body</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Close
                    </button>
                    <button type="button" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>

    <!-- product End -->
@endsection