@extends('customer.layouts.app')
@section('content')
    <div class="main-container">
        <div class="pd-ltr-20 xs-pd-20-10">
            <div class="min-height-200px">
                <div class="page-header">
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="title">
                                <h4>My Books</h4>
                            </div>
                            <nav aria-label="breadcrumb" role="navigation">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Chapters</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>

                <div class="faq-wrap">
                    <h4 class="mb-20 h4 text-blue">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>
                                            <div class="mt-5 border shadow">
                                                <!--{!! $chapter_video->chapter_video_link !!}-->
                                                <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>
                                        </div>
                                        <hr>
                                    @endforeach
                                </div>
                            </div>
                            @php $count++ @endphp
                        @endforeach
                    </div>
                </div>
            </div>
            @include('customer.layouts.footer')
        </div>
    </div>
@endsection