@extends('layouts.site')

@section('title', 'Avis clients - JavaPax')
@section('meta_description', 'Découvrez les avis et témoignages de nos vacanciers sur JavaPax, appartement de location au Moulleau à Arcachon, à deux pas de la plage et du Bassin.')

@php
    function jp_stars($n) {
        $n = (int) round($n);
        return str_repeat('★', $n).str_repeat('☆', max(0, 5 - $n));
    }
@endphp

@section('content')
    <div class="text-center mb-10">
        <h1 class="text-3xl md:text-4xl font-bold text-stone-900">Avis de nos vacanciers</h1>

        @if(!empty($reviews['rating']))
            <div class="mt-4 inline-flex items-center gap-3 bg-white rounded-2xl shadow-sm px-6 py-4">
                <span class="text-4xl font-bold text-stone-900">{{ number_format($reviews['rating'], 1, ',', '') }}</span>
                <div class="text-left">
                    <div class="text-amber-500 text-lg leading-none">{{ jp_stars($reviews['rating']) }}</div>
                    <div class="text-sm text-stone-500 mt-1">{{ $reviews['total'] ?? 0 }} avis Google</div>
                </div>
            </div>
        @endif
    </div>

    @if(empty($reviews['configured']))
        {{-- Avis Google pas encore connectés : on n'affiche rien (pas de message technique) --}}
    @elseif(!empty($reviews['error']))
        <div class="max-w-xl mx-auto bg-red-50 border border-red-200 text-red-700 rounded-xl px-5 py-4 text-sm">
            Impossible de charger les avis pour le moment ({{ $reviews['error'] }}).
        </div>
    @elseif(empty($reviews['reviews']))
        <p class="text-center text-stone-500">Aucun avis à afficher pour le moment.</p>
    @else
        <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            @foreach($reviews['reviews'] as $rev)
                <div class="bg-white rounded-2xl shadow-sm p-6 flex flex-col">
                    <div class="flex items-center gap-3 mb-3">
                        @if($rev['photo'])
                            <img src="{{ $rev['photo'] }}" alt="" class="w-10 h-10 rounded-full object-cover">
                        @else
                            <div class="w-10 h-10 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center font-semibold">
                                {{ mb_substr($rev['author'], 0, 1) }}
                            </div>
                        @endif
                        <div>
                            <div class="font-semibold text-stone-900 leading-tight">{{ $rev['author'] }}</div>
                            <div class="text-xs text-stone-400">{{ $rev['time'] }}</div>
                        </div>
                    </div>
                    <div class="text-amber-500 mb-2">{{ jp_stars($rev['rating']) }}</div>
                    <p class="text-sm text-stone-600 leading-relaxed">{{ $rev['text'] }}</p>
                </div>
            @endforeach
        </div>

        @if(!empty($reviews['url']))
            <div class="text-center mt-10">
                <a href="{{ $reviews['url'] }}" target="_blank" rel="noopener"
                   class="inline-block bg-teal-600 hover:bg-teal-700 text-white font-semibold px-6 py-3 rounded-full shadow">
                    Voir tous les avis sur Google
                </a>
            </div>
        @endif
    @endif

    {{-- Laissez votre avis --}}
    <div class="mt-16 max-w-4xl mx-auto">
        <div class="bg-gradient-to-r from-navy to-sea text-white rounded-3xl p-8 md:p-10 grid md:grid-cols-2 gap-8 items-center">
            <div>
                <h2 class="text-2xl md:text-3xl font-bold">Vous avez séjourné chez nous ?</h2>
                <p class="mt-3 text-white/90">Votre avis nous aide énormément et guide les futurs vacanciers. Laissez-nous quelques mots sur Google - ça ne prend qu'une minute. Merci ! 🙏</p>
                @php($reviewUrl = config('javapax.google_review_url'))
                @if($reviewUrl)
                    <a href="{{ $reviewUrl }}" target="_blank" rel="noopener"
                       class="inline-flex items-center gap-2 mt-6 bg-white text-navy font-semibold px-6 py-3.5 rounded-full hover:bg-stone-100 transition">
                        <span class="text-amber-500">★</span> Laisser un avis sur Google
                    </a>
                @endif
            </div>
            <div class="flex justify-center">
                @if(file_exists(public_path('img/avis-google-qr.png')))
                    {{-- 1) Image fournie --}}
                    <div class="bg-white rounded-2xl p-4 shadow-lg text-center">
                        <img src="{{ asset('img/avis-google-qr.png') }}" alt="QR code avis Google JavaPax" class="w-44 h-44 object-contain">
                        <p class="text-navy text-xs font-medium mt-2">Scannez pour laisser un avis</p>
                    </div>
                @elseif($reviewUrl)
                    {{-- 2) QR généré côté navigateur, aux couleurs JavaPax --}}
                    <div class="bg-white rounded-2xl p-4 shadow-lg text-center">
                        <div id="avis-qr" data-url="{{ $reviewUrl }}" class="w-44 h-44 mx-auto flex items-center justify-center"></div>
                        <p class="text-navy text-xs font-medium mt-2">Scannez pour laisser un avis</p>
                    </div>
                    @push('scripts')
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
                    <script>
                    (function () {
                        var el = document.getElementById('avis-qr');
                        if (el && window.QRCode) {
                            new QRCode(el, {
                                text: el.dataset.url,
                                width: 176, height: 176,
                                colorDark: '#14384a', colorLight: '#ffffff',
                                correctLevel: QRCode.CorrectLevel.M
                            });
                        }
                    })();
                    </script>
                    @endpush
                @else
                    <div class="bg-white/10 border border-dashed border-white/40 rounded-2xl p-8 text-center text-white/70 text-sm">
                        Le QR code d'avis Google s'affichera ici.
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection