@extends('site.master')
@section('main-content')

    <section class="af-hdr ">
        <div class="header-decoration position-absolute">
            <img src="{{ asset('site/img/shape_nate.svg') }}" alt="">
        </div>
        <div class="container position-relative" style="z-index: 9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class=" text-uppercase text-white fnt-fam-ser fs-2 fwc-700">




                        Testimonials</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="list-inline-item"><a class="text-white" href="{{ URL::to('/') }}"
                                    class="text-decoration-none">@lang('language.home')</a>
                            </li>

                            <li class="list-inline-item current text-danger">
                                Testimonials </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <div class="decoration-pattern pattern-one position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_1.svg') }}" alt="">
        </div>
        <div class="decoration-pattern pattern-two position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_2.svg') }}" alt="">
        </div>
    </section>
    <div class="clearfix"></div>
    <div class="container py-4">
        <div class="row" data-masonry='{"percentPosition": true }'>

            @if (isset($details) && !empty($details))
                @foreach ($details as $item)
                    <div class="col-lg-4">
                        <div class="shadow p-5 mb-3 rounded-3 bg-white bg-hover-danger text-hover-white">
                            <div class="d-flex gap-3 align-items-center">
                                <div class="img-section rounded-3 border-light border-1" style="width: 60px; height: 60px;">
                                    <img src="{{ asset($item->image ?? 'site/img/default.png') }}" alt="">
                                </div>
                                <div class="conteont-">
                                    {{ $item->title }}

                                    <div class="d-flex">
                                        @for ($i = 1; $i < $item->star_count; $i++)
                                            <i class="bi bi-star-fill fsc-8"></i>
                                        @endfor

                                    </div>
                                </div>
                            </div>

                            <div class="my-3">
                                <p class="fs-7 text-justify">{{ $item->description }}</p>
                            </div>

                            <p class="mb-0">{{ getNepaliDate($item->created_at) }}</p>
                        </div>

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


    </div>
@endsection
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"
        integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async>
    </script>
@endpush