@extends('layouts.frontend_master')

@section('content')

<section class="bg-light">
    <!-- Google Reviews -->
    <div class="container py-5 px-3 bg-light">
        <div class="row align-items-center justify-content-between">
            <div class="col-xl-9 text-center text-xl-start mb-3 mb-xl-0">
                <p class="text-dark fs-1 fw-medium font-family-Onest m-0">Our Google Review</p>
            </div>
            @if (!empty($site_setting) && !empty($site_setting->google_link))
                <div class="col-xl-3">
                    <a href="{{ $site_setting->google_link }}" target="_blank" style="text-decoration: none">
                        <div class="px-3 py-2 bg-white rounded-3 d-flex align-items-center gap-2" style="cursor: pointer;">
                            <img src="{{ asset('assets_moondrop/images/logo/Google.png') }}" alt="Google Icon" />
                            <p class="text-dark fs-6 fw-medium font-family-Onest m-0">See all Google Reviews</p>
                        </div>
                    </a>
                </div>
            @endif
        </div>

        <div class="row g-4 my-3">
            @foreach ($google_reviews as $key => $review)
                @php
                    $googleModal = 'googleReviews' . $key;
                    $words = explode(' ', strip_tags($review->review));
                    $shortReview = count($words) > 20 ? implode(' ', array_slice($words, 0, 20)) . '...' : $review->review;
                @endphp

                <div class="col-md-6 col-lg-4">
                    <div class="px-3 py-3 bg-white rounded-4 border-1 border-gray-700 d-flex flex-column h-100"
                        style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#{{ $googleModal }}">

                        <!-- Review Text -->
                        <div class="mb-3 flex-grow-1">
                            <p class="text-dark fs-6 fw-medium font-family-Onest m-0">
                                {!! $shortReview !!}
                                @if(count($words) > 20)
                                    <span class="text-primary fw-semibold">Read more</span>
                                @endif
                            </p>
                        </div>

                        <div class="border-1 border-gray-700 mb-3"></div>

                        <!-- Footer: Profile + Stars + Brand -->
                        <div class="d-flex align-items-center justify-content-between mt-auto">
                            <div class="d-flex align-items-center gap-3">
                                <img src="{{ $review->feature_image->getPath() }}" class="rounded-5" alt="User" height="50" width="50" />
                                <div>
                                    <p class="text-dark fs-6 fw-semibold font-family-Onest mb-1">{{ $review->name }}</p>
                                    <div class="text-warning d-flex gap-1">
                                        @for ($i = 1; $i <= 5; $i++)
                                            @if ($i <= floor($review->rating))
                                                <i class="fas fa-star"></i>
                                            @elseif ($i - 0.5 == $review->rating)
                                                <i class="fas fa-star-half-alt"></i>
                                            @else
                                                <i class="far fa-star"></i>
                                            @endif
                                        @endfor
                                    </div>
                                </div>
                            </div>

                            <div class="p-2 bg-white rounded-4 d-flex justify-content-center align-items-center">
                                <img src="{{ asset('assets_moondrop/images/logo/Google.png') }}" alt="Brand" />
                            </div>
                        </div>
                    </div>

                    <!-- Modal -->
                    @include('web._partials.review-modal', [
                        'review' => $review,
                        'modalId' => $googleModal,
                    ])
                </div>
            @endforeach
        </div>
    </div>

    <!-- TripAdvisor Reviews -->
    @if (!empty($tripadvisor_reviews) && $tripadvisor_reviews->count() > 0)
        <div class="container py-5 px-3 bg-light">
            <div class="row align-items-center justify-content-between">
                <div class="col-xl-9 text-center text-xl-start mb-3 mb-xl-0">
                    <p class="text-dark fs-1 fw-medium font-family-Onest m-0">Our Tripadvisor Review</p>
                </div>
                @if (!empty($site_setting) && !empty($site_setting->tripadvisor_link))
                    <div class="col-xl-3">
                        <a href="{{ $site_setting->tripadvisor_link }}" target="_blank" style="text-decoration: none">
                            <div class="px-3 py-2 bg-white rounded-3 d-flex align-items-center gap-2" style="cursor: pointer;">
                                <img src="{{ asset('assets_moondrop/images/logo/tripadv.png') }}" alt="TripAdvisor Icon" />
                                <p class="text-dark fs-6 fw-medium font-family-Onest m-0">See all Tripadvisor Reviews</p>
                            </div>
                        </a>
                    </div>
                @endif
            </div>

            <div class="row g-4 my-3">
                @foreach ($tripadvisor_reviews as $keys => $tripReview)
                    @php
                        $modalId = 'tripAdvisorReview' . $keys;
                        $words = explode(' ', strip_tags($tripReview->review));
                        $shortReview = count($words) > 20 ? implode(' ', array_slice($words, 0, 20)) . '...' : $tripReview->review;
                    @endphp

                    <div class="col-md-6 col-lg-4">
                        <div class="px-3 py-3 bg-white rounded-4 border-1 border-gray-700 d-flex flex-column h-100"
                             style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#{{ $modalId }}">

                            <!-- Review Text -->
                            <div class="mb-3 flex-grow-1">
                                <p class="text-dark fs-6 fw-medium font-family-Onest m-0">
                                    {!! $shortReview !!}
                                    @if(count($words) > 20)
                                        <span class="text-primary fw-semibold">Read more</span>
                                    @endif
                                </p>
                            </div>

                            <div class="border-1 border-gray-700 mb-3"></div>

                            <!-- Footer: Profile + Stars + Brand -->
                            <div class="d-flex align-items-center justify-content-between mt-auto">
                                <div class="d-flex align-items-center gap-3">
                                    <img src="{{ $tripReview->feature_image->getPath() }}" class="rounded-5" alt="User" height="50" width="50" />
                                    <div>
                                        <p class="text-dark fs-6 fw-semibold font-family-Onest mb-1">{{ $tripReview->name }}</p>
                                        <div class="text-warning d-flex gap-1">
                                            @for ($i = 1; $i <= 5; $i++)
                                                @if ($i <= floor($tripReview->rating))
                                                    <i class="fas fa-star"></i>
                                                @elseif ($i - 0.5 == $tripReview->rating)
                                                    <i class="fas fa-star-half-alt"></i>
                                                @else
                                                    <i class="far fa-star"></i>
                                                @endif
                                            @endfor
                                        </div>
                                    </div>
                                </div>

                                <div class="p-2 bg-white rounded-4 d-flex justify-content-center align-items-center">
                                    <img src="{{ asset('assets_moondrop/images/logo/tripadv.png') }}" alt="Brand" />
                                </div>
                            </div>
                        </div>

                        <!-- Modal -->
                        @include('web._partials.review-modal', [
                            'review' => $tripReview,
                            'modalId' => $modalId,
                        ])
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</section>

@endsection