@extends('layouts.app')

@section('title', "Avis clients - Maisons CBI")

@section('seo-description')
@if ($average)Avis clients Maisons CBI : {{ str_replace('.', ',', $average) }}/5 sur {{ $ratedCount }} avis recueillis par Opinion System auprès de familles ayant fait construire leur maison en Bretagne et Pays de la Loire.@endif
@endsection

@section('bodyClass', 'page-contact')

@section('content')

<!--Inner Heading Start-->
<div class="innerHeading">
    <div class="container">
        <h1>Avis clients</h1>
    </div>
</div>
<!--Inner Heading End-->
<div class="innercontent">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="text-center"><span class="red">Vous avez un projet de construction de maison ?</span><br><br>Nos conseillers restent disponibles pour vous accompagner.<br>Contactez-nous au <a class="yellow" href="tel:0299725990" title="02 99 72 59 90">02 99 72 59 90</a> ou directement sur notre page <a class="yellow" href="{{ route('contact') }}" title="Contactez-nous">contact</a></h3><br><br>
                <p>Retrouvez les retours d’expérience de familles ayant fait construire avec Maisons CBI : leurs impressions, leurs défis, leur satisfaction. Ces témoignages authentiques illustrent notre engagement à vos côtés, du projet à la remise des clés.</p>
            </div>
        </div>

        @if ($average)
        <div class="reviews-summary">
            <div class="reviews-summary-score">
                <span class="reviews-summary-average">{{ str_replace('.', ',', number_format($average, 1)) }}</span>
                @include('page.partials.stars', ['note' => $average, 'class' => 'reviews-stars-lg'])
                <span class="reviews-summary-count">{{ $ratedCount }} avis clients</span>
            </div>
            <ul class="reviews-summary-bars">
                @foreach ($distribution as $stars => $count)
                <li>
                    <span class="reviews-bar-label">{{ $stars }}</span>
                    <span class="reviews-bar"><span style="width: {{ $ratedCount ? round($count * 100 / $ratedCount) : 0 }}%"></span></span>
                    <span class="reviews-bar-count">{{ $count }}</span>
                </li>
                @endforeach
            </ul>
            <p class="reviews-summary-source">Avis recueillis et contrôlés par Opinion System auprès de nos clients, à l’issue de leur construction.</p>
        </div>
        @endif

        <ul class="row reviews-list">
            @foreach ($contents as $review)
            <li class="col-lg-4 col-md-6">
                <article class="reviews-card" id="avis-{{ $review['slug'] }}">
                    <header class="reviews-card-head">
                        <span class="reviews-avatar" aria-hidden="true">{{ $review['initial'] }}</span>
                        <div>
                            <p class="reviews-author">{{ $review['author'] }}</p>
                            <p class="reviews-meta">{{ $review['city'] }}@if ($review['year']) · maison livrée en {{ $review['year'] }}@endif</p>
                        </div>
                    </header>
                    @if ($review['note'] !== null)
                        @include('page.partials.stars', ['note' => $review['note']])
                    @endif
                    <div class="reviews-text">{!! $review['text'] !!}</div>
                    <button type="button" class="reviews-more" hidden>Lire la suite</button>
                </article>
            </li>
            @endforeach
        </ul>
    </div>
</div>

@endsection

@section('extraJs')
<script>
    (function () {
        var cards = document.querySelectorAll('.reviews-card');
        for (var i = 0; i < cards.length; i++) {
            (function (card) {
                var text = card.querySelector('.reviews-text');
                var button = card.querySelector('.reviews-more');
                if (text.scrollHeight <= text.clientHeight + 2) {
                    return;
                }
                button.hidden = false;
                button.addEventListener('click', function () {
                    var open = card.classList.toggle('is-open');
                    button.textContent = open ? 'Réduire' : 'Lire la suite';
                });
            })(cards[i]);
        }

        // Ancienne page détail d'un avis : on met la carte en évidence
        if (location.hash.indexOf('#avis-') === 0) {
            var target = document.getElementById(location.hash.slice(1));
            if (target) {
                target.classList.add('is-open', 'is-target');
                var more = target.querySelector('.reviews-more');
                if (more) { more.textContent = 'Réduire'; }
            }
        }
    })();
</script>
@endsection