@extends('frontend.layouts.app')

@section('content')

<section style="padding-top:-350px" class="th-blog-wrapper space-top space-extra2-bottom">
    <div class="container">
        <div class="row gx-40">
            <div class="col-xxl-12 col-lg-11 col-md-12 col-sm-12" style="margin: 0 auto;">
                <div class="row">
                    <div class="col-xxl-8 col-lg-8">
                        <div class="th-blog blog-single has-post-thumbnail" style="background-color: #222E3C;">
                            <div>
                                <p class="m-0" style="color:white;">If you'd like to support us, check out our awesome products:</p>
                                <div class="mt-3 mb-1" style="display: flex;">
                                    <img src="{{ asset('/frontend/assets/images/book.svg') }}" style="width:15px; height:15px; margin-right:3px;" />
                                    <p class="m-0" style="color:white; font-weight:600;">Helps students learn about key steps</p>
                                </div>
                                <div class="mb-1" style="display: flex;">
                                    <img src="{{ asset('/frontend/assets/images/26a1.svg') }}" style="width:15px; height:15px; margin-right:3px;" />
                                    <p class="m-0" style="color:white; font-weight:600;">Ensures students learn how to provide clear instructions</p>
                                </div>
                                <div class="mb-1" style="display: flex;">
                                    <img src="{{ asset('/frontend/assets/images/2728.svg') }}" style="width:15px; height:15px; margin-right:3px;" />
                                    <p class="m-0" style="color:white; font-weight:600;">500+ Article For You</p>
                                </div>
                                <div class="mb-1" style="display: flex;">
                                    <img src="{{ asset('/frontend/assets/images/2705.svg') }}" style="width:15px; height:15px; margin-right:3px;" />
                                    <p class="m-0" style="color:white; font-weight:600;">Checklist PDF Booklet</p>
                                </div>
                                <div class="mb-1" style="display: flex;">
                                    <img src="{{ asset('/frontend/assets/images/1f9e0.svg') }}" style="width:15px; height:15px; margin-right:3px;" />
                                    <p class="m-0" style="color:white; font-weight:600;">PSA Question Bank</p>
                                </div>
                                
                                <div class="mb-1" style="display: flex;">
                                    <img src="{{ asset('/frontend/assets/images/1f489.svg') }}" style="width:15px; height:15px; margin-right:3px;" />
                                    <p class="m-0" style="color:white; font-weight:600;">Flashcard Collections | Medicine, Surgery, Anatomy</p>
                                </div>
                                
                                <p class="mt-4" style="color:white;">To be the first to know about our latest videos subscribe to our YouTube channel 🙌</p>
                            </div>
                        </div>

                        <div style="box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; background:white;" class="th-blog blog-single has-post-thumbnail">
                            @isset($details)
                            <span>{!! $details->description !!}</span>
                            @else

                            <p style="text-align:center; margin-top:40px; margin-bottom:40px">No Description Here</p>

                            @endisset
                        </div>
                    </div>

                    <div class="col-xxl-4 col-lg-4">
                        <aside  class="sidebar-area sidebar-shop">
                            

                            <div style="box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; background:white;" class="widget widget_tag_cloud">
                                <aside  class="sidebar-area" style="margin-top: 5px;">
                                    <div>
                                        <h3 style="margin-top:-25px" class="widget_title">Popular Notes 📖</h3>
                                        @foreach($rels as $rel)
                                        
                                        @isset($rel->title)
                                        @php
                                        $cleanedTitle = strip_tags($rel->title);
                                        $titleText = $cleanedTitle ? implode(' ', array_slice(explode(' ', $cleanedTitle), 0, 7)) . (str_word_count($cleanedTitle) > 6 ? '...' : '') : '';
                                        @endphp
                                        <div class="mb-3" style="display: flex;">
                                            <a href="{{route('frontend.note.details', $rel->note_subcate->id)}}" style="cursor:pointer; margin-right:10px">
                                            <img src="{{ asset('frontend/assets/images/blog/' . $rel->note_subcate->image) }}" class="mb-3" style="width: 100px; height: 90px; border-radius: 10%; margin-right: 18px;" />
                                            </a>
                                            
                                            <div>
                                            <p style="margin-bottom:1px">{{$titleText}}</p>
                                            <a style="cursor:pointer" href="{{route('frontend.note.details', $rel->note_subcate->id)}}">Read more</a>
                                            </div>
                                            
                                           
                                            
                                        </div>
                                        
                                        @endisset
                                        @endforeach
                                        
                                    </div>
                                </aside>
                            </div>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection