@push("style")
<style>
.owl-carousel .owl-item .author img {
    display: initial;
    width: auto;
}
.owl-carousel .owl-item .author h6 {
    font-weight: 600;
    font-size: larger;
    text-transform: capitalize;
}
.owl-carousel .owl-stage {
    display: flex;
}

.owl-carousel .owl-item .flex-text {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: initial;
}
.testimonials-blog{
	background-image: url('{{asset("themes/default/images/homepage-background-2.jpg")}}');
    background-attachment: fixed;
    background-size: cover;
}
.btn-sky-blue{
	color: #000;
	font-weight: 600;
    background-color: #fff;
    border-color: #fff;
    box-shadow: 0px 14px 25px rgb(240 75 76 / 13%) !important;
}
.btn-sky-blue:hover{
	color: #000;
    background-color: #e0e3e2;
}
</style>
@endpush
@push("script")
<script>
var setMinHeight = function(minheight = 0,minheight_a = 0) {
  $('.testimonials-carousel').each(function(i,e){
    var oldminheight = minheight;
    var oldminheight_a = minheight_a;
    $(e).find('.flex-text').each(function(i,e){
      minheight = $(e).height() > minheight ? $(e).height() : minheight;    
    });
    $(e).find('.flex-text').css("min-height",minheight + "px");
    $(e).find('.author').each(function(i,e){
      minheight_a = $(e).height() > minheight_a ? $(e).height() : minheight_a;    
    });
    $(e).find('.author').css("min-height",minheight_a + "px");
    minheight = oldminheight;
    minheight_a = oldminheight_a;
  });
};

setMinHeight();
</script>
@endpush
@if ($testimonials && $testimonials->count() > 0)
<section class="pt-0 pb-0 mb-5 testimonials-blog" style="background-image: url('{{asset('themes/default/images/homepage-background-2.jpg')}}');">
    <div class="container">
        <div class="row justify-content-between pt-4">
            <div class="col-auto">
                <h2 class="text-white">Top Testimonials</h2>
            </div>
			<div class="col-auto">
                <a href="{{ route('fe.testimonials')}}" class="btn btn-sky-blue" target="_blank">View All..
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="owl-carousel testimonials-carousel owl-theme">
                    @foreach ($testimonials as $testimonial)
                    <div class="item">
                        <div class="testimonials-card  bg-c-yellow">
                            <!--div class="testimonials-icon">
                                <!--img src="{{asset('themes/default/images/quote.svg')}}" alt="images" class="img-fluid"-- >
                            </div-->
							<div class="row">
							<div class="align-middle m-b-25 author">
							@php 
							$user_thumbnail = asset('assets/images/user/avatar-4.jpg');
							if($testimonial->user_thumbnail!="")
								$user_thumbnail = $testimonial->user_thumbnail;
							@endphp
								<img src="{{$user_thumbnail}}" alt="user image" class="rounded-circle align-top m-r-15" style="float: left; width:100px; height:100px;">
								<div class="d-inline-block mt-5" style="float: left;">
										<h6>{{$testimonial->author}}</h6>
									@if($testimonial->designation!="")
									<p class="m-b-0">{{$testimonial->designation}}</p>
									@endif
									<span class="status active"></span>
								</div>
							</div>
							</div>
                            <p class="flex-text mb-2" style="text-align: justify;">{!! str_limit($testimonial->description, $limit = 244, $end = '...') !!}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endif