@extends('user.layout.default')

@section('content')

<div class="navabar1">
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <h6 class="dashbod_title">Read Chatavirsity</h6>
            @include('user.inc.navbar')
        </div>
    </nav>
</div>

<div class="stucture">
    <section class="Section-one-blog section-one-blog-readmore">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <!-- boxes-dashboard start -->
                    <div class="boxes-dashboard">
                        <!-- box-1 -->
                        <div class="box-1-dashboard box-1-blog-readmore box-1-chatavirsity-readmore">
                            <div class="left-side">
                                <div class="img-1-blogreadmore-left-container">
                                    <img src="{{asset('assets/images/chatavirsity/chatavirsity-img-02.png')}}" alt="" class="img-fluid">
                                    <label class="price">${{$data->price}}</label>
                                </div>
                                <p>“{{$data->description}}”</p>

                                <button class="btn-buy">Buy now <i class="fa-solid fa-angle-right"></i></button>
                            </div>
                            <div class="right-side">
                                <h3>
                                    {{$data->title}}
                                </h3>

                                <p>“{{$data->description}}”</p>

                                <p>{{$data->description}}</p>

                                <p>{{$data->description}}</p>

                                <p>{{$data->description}}</p>

                                <p>{{$data->description}}</p>

                                <!-- Slick slider for images -->
                                <div class="testimonial-area">
                                    <div class="container-1">
                                        <div class="text-center">
                                            <h5 class="other-blog-title">Other Blogs</h5>
                                        </div>
                                        <div class="testimonial-slider-active margin-top-30 justify-content-center">
                                            @foreach ($chatavirsity_data as $chatavirsityData)

                                            <div class="col-5 wow fadeInUp" data-wow-delay='.2s'>
                                                <div class="single-testi">
                                                    <div class="row">
                                                        <div class="col-12 col-xl-12 col-lg-12 col-md-12 text-center">
                                                            <div class="cards-blog">
                                                                <div class="card">
                                                                    <div class="blog-img position-relative">
                                                                        <img src="{{asset('assets/images/blog/blog-img-01.png')}}" class="card-img-top" alt="blog-img">
                                                                        <label class="price">${{$chatavirsityData->price}}</label>
                                                                    </div>
                                                                    <div class="card-body">
                                                                        <p class="card-text">{{$chatavirsityData->title}}</p>

                                                                        <p>{{$chatavirsityData->description}}</p>

                                                                        <div class="read-more-card-btn-container">
                                                                            <a href="{{ route('readChatavirsity', ['id' => base64_encode($data->id)])}}" class="btn-read-more">Read More</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            @endforeach
                                        </div>
                                    </div>
                                </div>


                                <!-- Slick slider for images -->
                            </div>
                        </div>
                        <!-- End -->
                    </div>
                    <!-- boxes-dashboard End -->
                </div>
            </div>
        </div>
    </section>
</div>

@endsection