@extends('inculdes.main')
@section('content')
    <div class="container-fluid mt-5 wow fadeInUp" data-wow-delay="0.1s"
        style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
        <div class="container ">
            <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
                <h5 class="fw-bold text-primary text-uppercase">{{ $type }} TESTIMONIAL</h5>
                <h1 class="mb-0">What Our Clients Say About Our CPA Services</h1>
            </div>
            <div class="row g-5">
                <div class="col-lg-8">
                    <div class="row">
                        @foreach ($testimonials as $key => $testimonial)
                            <div class="col-md-4">
                                <div class="card testimonial-item bg-light my-4 pt-3 text-center">
                                    <img src="{{ asset($testimonial->image) }}" class="card-img-top " alt="{{ $testimonial->name }}"
                                        style="width: 126px; height: 120px; margin: auto; border-radius:50%">
                                    <div class="card-body" style="min-height: 305px">
                                        <h5 class="card-title fw-bold">{{ $testimonial->name }}</h5>
                                        <small class="text-uppercase r-stars"
                                            style="--rating: {{ $testimonial->rating }};"></small>
                                        <small class="text-uppercase d-block fw-bold">{{ $testimonial->date }}</small>
                                        <p class="card-text">
                                        <div class="short-description-{{ $key + 1 }}">
                                            {!! substr($testimonial->description, 0, 80) !!}

                                        </div>
                                        @if (strlen($testimonial->description) > 80)
                                            <div class="full-description-{{ $key + 1 }}" style="display: none;">
                                                {!! $testimonial->description !!}
                                            </div>
                                            <a href="javascript:;" class="read-more-button-{{ $key + 1 }}"
                                                onclick="toggleDescription({{ $key + 1 }})">Read More</a>
                                        @endif
                                        </p>
                                        @if ($testimonial->social_type)
                                            <a class="ms-1" target="_blank" href="{{ $testimonial->link }}"><img
                                                    style="height: 62px; width:60px "
                                                    src="{{ asset('assets/sk/icons/' . $testimonial->social_type . '.png') }}"
                                                    alt="{{ $testimonial->social_type }}"></a>
                                        @endif
                                    </div>
                                </div>
                                

                            </div>
                        @endforeach
                    </div>

                </div>
                <div class="col-lg-4">

                    <div class="mb-5 wow slideInUp" data-wow-delay="0.1s"
                        style="visibility: visible; animation-delay: 0.1s; animation-name: slideInUp;">
                        <div class="section-title-1 section-title-sm position-relative pb-3 mb-4">
                            <h3 class="mb-0">Popular Platforms</h3>
                        </div>
                        <div class="d-flex flex-column justify-content-start">
                            @foreach ($social_types as $key => $item)
                                <a class="h6 fw-bold  {{ @$type == $item->social_type ? 'bg-primary' : 'bg-light' }} rounded py-3 px-4 d-flex align-items-center justify-content-between mb-2"
                                    href="{{ route('testimonials', ['type' => $item->social_type]) }}"><span
                                        class="text-capitalize">{{ $item->social_type }} ({{ $item->count }}) </span>
                                    <small class="text-uppercase r-stars"
                                        style="--rating: {{ number_format($item->avg_rating, 2) }};"></small>
                                    <small class="text-uppercase ">{{ number_format($item->avg_rating, 2) }}</small>
                                    {{-- <small class="text-uppercase " > Total {{ $item->count }}</small> --}}
                                    <i class="bi bi-arrow-right ms-3"></i>

                                </a>
                            @endforeach


                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    @include('inculdes.contact_form')
    <script>
        function toggleDescription(key) {
            var shortDescription = document.querySelector('.short-description-' + key);
            var fullDescription = document.querySelector('.full-description-' + key);
            var readMoreButton = document.querySelector('.read-more-button-' + key);

            if (fullDescription.style.display === 'none') {
                shortDescription.style.display = 'none';
                fullDescription.style.display = 'block';
                readMoreButton.textContent = 'Read Less';
            } else {
                shortDescription.style.display = 'block';
                fullDescription.style.display = 'none';
                readMoreButton.textContent = 'Read More';
            }
        }
    </script>
@endsection