@extends('frontend.layouts.app')
@section('content')
<div class="site-section pt-0" data-aos="fade">
    <div class="container-fluid">
        <div class="row p-0 ">
            <div class="col-md-12 banner-container">
                <img class="image w-100 h-100" src="{{ asset('storage') }}/front/images/big-images/slide2.webp" class="img-fluid" alt="">
            </div>
        </div>
        <div class="row pt-5 pb-5 pr-5">
            <div class="col-sm-5 pt-5 pr-5">
                <div class="thumb-wrapper">
                    <div class="img-box text-center">
                        <img class="image w-75" src="{{ asset('storage/'.$book_details->book_image) }}" class="img-fluid" alt="">
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                <div class="thumb-wrapper p-5">
                    <div class="img-box text-left ">
                        <h2 class="text-danger">{{ $book_details->book_name }}</h2>
                        <p>By. <span class="text-danger">{{ $book_details->author_name }}</span></p>
                        <p class="text-mute" style="text-align: justify;">{{ $book_details->short_description }}</p>
                        <p><span class="text-danger mr-3">NUMBER OF CHAPTERS:</span> {{ count($book_details->ChapterVideo) }}</p>
                        {{-- <p><span class="text-danger mr-3">AUTHOR:</span> {{ $book_details->author_name }}</p> --}}
                        {{-- <p><span class="text-danger mr-3">PUBLISHED:</span> 2013</p>
                        <p><span class="text-danger mr-3">PUBLISHER:</span> A G testroni co. ltd. --}}
                        <p><span class="text-danger mr-3">PRICE:</span>{{ $book_details->bookPrice[0]->currency->symbol . '' . $book_details->bookPrice[0]->book_price }}</p>
                        <form action="{{ route('cart', $book_details->slug) }}" method="post">
                            @csrf
                            @method('patch')
                            <p><button type="submit" class="btn btn-danger btn-md">BUY IT NOW</button></p>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                </div>
                <div class="col-md-7">
                   <div class="faq-wrap">
                    <h4 class="mb-20 h4 text-danger">Chapters</h4>
                    <div id="accordion">
                        @php
                            $chapters = $book_details->ChapterVideo->groupBy('chapter_number');
                            // dd($book_details->ChapterVideo->groupBy('chapter_number'));
                            function slugify($string)
                            {
                                return strtolower(trim(preg_replace('/[^A-Za-z0-9-]+/', '-', $string), '-'));
                            }
                            $count = 0;
                        @endphp
                        @foreach ($chapters as $key => $chapter)
                       
                            <div class="card">
                                <div class="card-header">
                                    <button class="btn btn-block {{ $count != 0 ? 'collapsed' : '' }}"
                                        data-toggle="collapse" data-target="#text{{ slugify($key) }}">
                                        Chapter {{ $key }}
                                    </button>
                                </div>
                                <div id="text{{ slugify($key) }}" class="collapse {{ $count == 0 ? 'show' : '' }}"
                                    data-parent="#accordion">
                                    @foreach ($chapter as $chapter_video)
                                        <div class="card-body">
                                            <a href="javascript:void(0);"><i
                                                    class="icon-copy fa fa-play-circle fa-lg text-danger"
                                                    aria-hidden="true"></i> <b>{{ $chapter_video->chapter_name }}</b></a>
                                            @if($count==0)
                                                <div class="mt-5 border shadow">
                                                   
                                                    
                                                    
                                                    <iframe loading="lazy" title="{{ $key }}"
                                                        src="{{ $chapter_video->video_book_link }}"
                                                        width="900" height="450" frameborder="0"
                                                        allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""
                                                        ></iframe>
                                                </div>
                                            @endif
                                        </div>
                                        <hr>
                                    @endforeach
                                </div>
                            </div>
                            @php $count++ @endphp
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 mt-4">
            <div class="recomended">
                <h5>Related Books</h5>
                <hr>
            </div>
            <div class="books-related">
                <div class="container tending-container mt-5">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="" class="carousel slide" data-ride="carousel" data-interval="0">
                                <div class="carousel-inner">
                                    <div class="item carousel-item active">
                                        <div class="row">
                                            @foreach($related_books as $book)
                                             <div class="col-sm-2">
                                                <div class="thumb-wrapper">
                                                    <div class="img-box">
                                                        <img class="image" src="{{ asset('storage/'.$book->book_image) }}" class="img-fluid" alt="">
                                                        <div class="desc-details w-100 text-center mt-2">
                                                            <p class="mb-0">{{ $book->book_name }}</p>
                                                            <span>By</span>
                                                            <sub>{{ $book->author_name }}</sub>
                                                            <p class="text-danger mb-0">{{ $book->bookPrice[0]->currency->symbol . '' . $book->bookPrice[0]->book_price }}</p>
                                                           <form action="{{ route('cart', $book->slug) }}" method="post">
                                                                @csrf
                                                                @method('patch')
                                                                <p><button type="submit" class="btn btn-danger btn-md">Buy Now</button></p>
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <div class="thumb-content text-center">
                                                        <p></p>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection