@extends('crm.layouts.app')

@section('title', 'Google Reviews')

@section('content')
@if(!isset($isConnected) || !$isConnected)
    <!-- Empty State: Not Connected -->
    <div class="text-center py-12">
        <svg class="mx-auto size-24 text-gray-400" viewBox="0 0 24 24" fill="none">
            <rect width="24" height="24" rx="4" fill="#4285F4"/>
            <path d="M12 11.5C13.1 11.5 14 10.6 14 9.5C14 8.4 13.1 7.5 12 7.5C10.9 7.5 10 8.4 10 9.5C10 10.6 10.9 11.5 12 11.5ZM12 13C10.3 13 7 13.9 7 15.5V16.5H17V15.5C17 13.9 13.7 13 12 13Z" fill="white"/>
        </svg>
        <h3 class="mt-6 text-lg font-semibold text-gray-900">Connect Google My Business</h3>
        <p class="mt-2 text-sm text-gray-500 max-w-md mx-auto">You need to connect your Google My Business account to view and manage your reviews.</p>
        <div class="mt-8">
            <a href="{{ route('crm.settings.index', ['tab' => 'integrations']) }}" class="inline-flex items-center rounded-md bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                <svg class="size-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM6.75 9.25a.75.75 0 0 0 0 1.5h4.59l-2.1 1.95a.75.75 0 0 0 1.02 1.1l3.5-3.25a.75.75 0 0 0 0-1.1l-3.5-3.25a.75.75 0 1 0-1.02 1.1l2.1 1.95H6.75Z" clip-rule="evenodd" />
                </svg>
                Go to Settings to Connect
            </a>
        </div>
        <div class="mt-8 text-sm text-gray-500">
            <p class="font-medium text-gray-700 mb-3">What you'll be able to do:</p>
            <ul class="text-left max-w-md mx-auto space-y-2">
                <li class="flex items-start">
                    <svg class="size-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                    </svg>
                    View all your Google reviews in one place
                </li>
                <li class="flex items-start">
                    <svg class="size-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                    </svg>
                    Respond to reviews directly from the CRM
                </li>
                <li class="flex items-start">
                    <svg class="size-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                    </svg>
                    Track your average rating and response rate
                </li>
                <li class="flex items-start">
                    <svg class="size-5 text-green-500 mr-2 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                    </svg>
                    Export reviews for reporting
                </li>
            </ul>
        </div>
    </div>
@else
<!-- Page Header -->
<div class="sm:flex sm:items-center sm:justify-between">
    <div class="min-w-0 flex-1">
        <h1 class="text-2xl font-semibold text-gray-900">Google Reviews</h1>
        <p class="mt-2 text-sm text-gray-700">Monitor and respond to your Google My Business reviews</p>
    </div>
    <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
        <button type="button" onclick="syncReviews()" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
            <svg class="size-4 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
            </svg>
            Sync Reviews
        </button>
    </div>
</div>

<!-- Review Stats -->
<div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
    <div class="overflow-hidden rounded-lg bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-500">Average Rating</p>
                <p class="mt-1 text-2xl font-semibold text-yellow-600">{{ $stats['average_rating'] }}</p>
            </div>
            <div class="p-3 bg-yellow-100 rounded-full">
                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-yellow-600">
                    <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" />
                </svg>
            </div>
        </div>
    </div>

    <div class="overflow-hidden rounded-lg bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-500">Total Reviews</p>
                <p class="mt-1 text-2xl font-semibold text-indigo-600">{{ $stats['total_reviews'] }}</p>
            </div>
            <div class="p-3 bg-indigo-100 rounded-full">
                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-indigo-600">
                    <path fill-rule="evenodd" d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902.848.137 1.705.248 2.57.331v3.443a.75.75 0 0 0 1.28.53l3.58-3.579a.78.78 0 0 1 .527-.224 41.202 41.202 0 0 0 5.183-.5c1.437-.232 2.43-1.49 2.43-2.903V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0 0 10 2Zm0 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM8 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
                </svg>
            </div>
        </div>
    </div>

    <div class="overflow-hidden rounded-lg bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-500">Response Rate</p>
                <p class="mt-1 text-2xl font-semibold text-green-600">{{ $stats['response_rate'] }}%</p>
            </div>
            <div class="p-3 bg-green-100 rounded-full">
                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-green-600">
                    <path fill-rule="evenodd" d="M3.43 2.524A41.29 41.29 0 0 1 10 2c2.236 0 4.43.18 6.57.524 1.437.231 2.43 1.49 2.43 2.902v5.148c0 1.413-.993 2.67-2.43 2.902a41.202 41.202 0 0 1-5.183.501.78.78 0 0 0-.528.224l-3.579 3.58A.75.75 0 0 1 6 17.25v-3.443a41.033 41.033 0 0 1-2.569-.33C1.993 13.244 1 11.986 1 10.573V5.426c0-1.413.993-2.67 2.43-2.902Z" clip-rule="evenodd" />
                </svg>
            </div>
        </div>
    </div>

    <div class="overflow-hidden rounded-lg bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-500">Positive Reviews</p>
                <p class="mt-1 text-2xl font-semibold text-purple-600">{{ $stats['positive_reviews'] }}%</p>
            </div>
            <div class="p-3 bg-purple-100 rounded-full">
                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-purple-600">
                    <path d="M1 8.25a1.25 1.25 0 1 1 2.5 0v7.5a1.25 1.25 0 1 1-2.5 0v-7.5ZM11 3V1.7c0-.268.14-.526.395-.607A2 2 0 0 1 14 3c0 .995-.182 1.948-.514 2.826-.204.54.166 1.174.744 1.174h2.52c1.243 0 2.261 1.01 2.146 2.247a23.864 23.864 0 0 1-1.341 5.974C17.153 16.323 16.072 17 14.9 17h-3.192a3 3 0 0 1-1.341-.317l-2.734-1.366A3 3 0 0 0 6.292 15H5V8h.963c.685 0 1.258-.483 1.612-1.068a4.011 4.011 0 0 1 2.166-1.73c.432-.143.853-.386 1.011-.814.16-.432.248-.9.248-1.388Z" />
                </svg>
            </div>
        </div>
    </div>
</div>

<!-- Rating Distribution -->
<div class="mt-8 overflow-hidden rounded-lg bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 p-6">
    <h2 class="text-base font-semibold text-gray-900 mb-4">Rating Distribution</h2>
    <div class="space-y-3">
        @foreach($ratingDistribution as $rating => $data)
            <div class="flex items-center gap-x-4">
                <div class="w-16 text-sm font-medium text-gray-700">{{ $rating }} stars</div>
                <div class="flex-1">
                    <div class="bg-gray-200 rounded-full h-3">
                        <div class="bg-yellow-500 h-3 rounded-full transition-all" style="width: {{ $data['percentage'] }}%"></div>
                    </div>
                </div>
                <div class="w-24 text-sm text-gray-600 text-right">{{ $data['count'] }} ({{ $data['percentage'] }}%)</div>
            </div>
        @endforeach
    </div>
</div>

<!-- Reviews List -->
@if($reviews->count() > 0)
    <div class="mt-8 space-y-6">
        @foreach($reviews as $review)
            <div class="overflow-hidden rounded-lg bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 p-6">
                <div class="flex items-start justify-between mb-4">
                    <div class="flex items-center gap-x-4">
                        <div class="size-10 flex-shrink-0 rounded-full bg-indigo-100 flex items-center justify-center ring-1 ring-inset ring-indigo-700/10">
                            <span class="text-sm font-medium text-indigo-700">
                                {{ substr($review->reviewer_name ?? 'A', 0, 1) }}
                            </span>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-900">{{ $review->reviewer_name ?? 'Anonymous' }}</h3>
                            <p class="text-sm text-gray-500">{{ $review->review_date->format('M d, Y') }}</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-x-1">
                        @for($i = 1; $i <= 5; $i++)
                            <svg class="size-5 {{ $i <= $review->rating ? 'text-yellow-500' : 'text-gray-300' }}" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" />
                            </svg>
                        @endfor
                    </div>
                </div>

                @if($review->review_text)
                    <p class="text-gray-700 mb-4">{{ $review->review_text }}</p>
                @endif

                <div class="flex items-center justify-between border-t border-gray-200 pt-4">
                    <div class="text-sm text-gray-500">
                        Posted on Google My Business
                    </div>
                    <div class="flex items-center gap-x-2">
                        @if(!$review->studio_response)
                            <button type="button" onclick="openResponseModal({{ $review->id }})" class="inline-flex items-center rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                                <svg class="size-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M3.43 2.524A41.29 41.29 0 0 1 10 2c2.236 0 4.43.18 6.57.524 1.437.231 2.43 1.49 2.43 2.902v5.148c0 1.413-.993 2.67-2.43 2.902a41.202 41.202 0 0 1-5.183.501.78.78 0 0 0-.528.224l-3.579 3.58A.75.75 0 0 1 6 17.25v-3.443a41.033 41.033 0 0 1-2.569-.33C1.993 13.244 1 11.986 1 10.573V5.426c0-1.413.993-2.67-2.43-2.902Z" clip-rule="evenodd" />
                                </svg>
                                Respond
                            </button>
                        @endif
                        <a href="https://www.google.com/maps" target="_blank" class="inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                            <svg class="size-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z" />
                                <path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z" />
                            </svg>
                            View on Google
                        </a>
                    </div>
                </div>

                @if($review->studio_response)
                    <div class="mt-4 pl-4 border-l-4 border-indigo-500 bg-indigo-50 p-4 rounded-md">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-x-2">
                                <svg class="size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M3.43 2.524A41.29 41.29 0 0 1 10 2c2.236 0 4.43.18 6.57.524 1.437.231 2.43 1.49 2.43 2.902v5.148c0 1.413-.993 2.67-2.43 2.902a41.202 41.202 0 0 1-5.183.501.78.78 0 0 0-.528.224l-3.579 3.58A.75.75 0 0 1 6 17.25v-3.443a41.033 41.033 0 0 1-2.569-.33C1.993 13.244 1 11.986 1 10.573V5.426c0-1.413.993-2.67 2.43-2.902Z" clip-rule="evenodd" />
                                </svg>
                                <span class="text-sm font-semibold text-indigo-900">Your Response</span>
                                <span class="text-xs text-indigo-700">{{ $review->responded_at->format('M d, Y') }}</span>
                            </div>
                            <button type="button" onclick="editResponse({{ $review->id }})" class="text-sm text-indigo-600 hover:text-indigo-700">
                                Edit
                            </button>
                        </div>
                        <p class="text-indigo-800">{{ $review->studio_response }}</p>
                    </div>
                @endif
            </div>
        @endforeach
    </div>

    <!-- Pagination -->
    @if($reviews->hasPages())
        <nav class="mt-8 flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
            <div class="-mt-px flex w-0 flex-1">
                @if($reviews->onFirstPage())
                    <span class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-300">
                        <svg viewBox="0 0 20 20" fill="currentColor" class="mr-3 size-5 text-gray-300">
                            <path d="M18 10a.75.75 0 0 1-.75.75H4.66l2.1 1.95a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 1 1 1.02 1.1l-2.1 1.95h12.59A.75.75 0 0 1 18 10Z" clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                        Previous
                    </span>
                @else
                    <a href="{{ $reviews->previousPageUrl() }}" class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
                        <svg viewBox="0 0 20 20" fill="currentColor" class="mr-3 size-5 text-gray-400">
                            <path d="M18 10a.75.75 0 0 1-.75.75H4.66l2.1 1.95a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 1 1 1.02 1.1l-2.1 1.95h12.59A.75.75 0 0 1 18 10Z" clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                        Previous
                    </a>
                @endif
            </div>
            <div class="hidden md:-mt-px md:flex">
                @foreach($reviews->getUrlRange(1, $reviews->lastPage()) as $page => $url)
                    @if($page == $reviews->currentPage())
                        <span class="inline-flex items-center border-t-2 border-indigo-500 px-4 pt-4 text-sm font-medium text-indigo-600">{{ $page }}</span>
                    @else
                        <a href="{{ $url }}" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">{{ $page }}</a>
                    @endif
                @endforeach
            </div>
            <div class="-mt-px flex w-0 flex-1 justify-end">
                @if($reviews->hasMorePages())
                    <a href="{{ $reviews->nextPageUrl() }}" class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
                        Next
                        <svg viewBox="0 0 20 20" fill="currentColor" class="ml-3 size-5 text-gray-400">
                            <path d="M2 10a.75.75 0 0 1 .75-.75h12.59l-2.1-1.95a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.1-1.95H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                    </a>
                @else
                    <span class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-300">
                        Next
                        <svg viewBox="0 0 20 20" fill="currentColor" class="ml-3 size-5 text-gray-300">
                            <path d="M2 10a.75.75 0 0 1 .75-.75h12.59l-2.1-1.95a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.1-1.95H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                    </span>
                @endif
            </div>
        </nav>
    @endif
@else
    <!-- Empty State -->
    <div class="mt-16 text-center">
        <svg class="mx-auto size-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
        </svg>
        <h3 class="mt-2 text-sm font-semibold text-gray-900">No reviews yet</h3>
        <p class="mt-1 text-sm text-gray-500">Your Google reviews will appear here once they're synced.</p>
        <div class="mt-6">
            <button type="button" onclick="syncReviews()" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                <svg class="size-4 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
                </svg>
                Sync Reviews from Google
            </button>
        </div>
    </div>
@endif
@endif

<!-- Response Modal -->
<div id="responseModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Respond to Review</h3>
            <form id="responseForm" onsubmit="submitResponse(event)">
                <div class="mb-4">
                    <label for="response" class="block text-sm font-medium text-gray-700 mb-2">Your Response</label>
                    <textarea id="response" name="response" rows="5" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" placeholder="Write a professional response to this review..." required></textarea>
                    <p class="mt-1 text-xs text-gray-500">This will be posted publicly on your Google My Business listing.</p>
                </div>
                <div class="flex justify-end gap-x-3">
                    <button type="button" onclick="closeResponseModal()" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                        Cancel
                    </button>
                    <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500">
                        Post Response
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
let currentReviewId = null;

function syncReviews() {
    const button = event.target.closest('button');
    const originalContent = button.innerHTML;
    button.disabled = true;
    button.innerHTML = '<svg class="animate-spin size-4 mr-1.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Syncing...';

    fetch('{{ route("crm.google-reviews.sync") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while syncing reviews');
    })
    .finally(() => {
        button.disabled = false;
        button.innerHTML = originalContent;
    });
}

function openResponseModal(reviewId) {
    currentReviewId = reviewId;
    document.getElementById('responseModal').classList.remove('hidden');
    document.getElementById('response').focus();
}

function closeResponseModal() {
    document.getElementById('responseModal').classList.add('hidden');
    document.getElementById('responseForm').reset();
    currentReviewId = null;
}

function submitResponse(event) {
    event.preventDefault();

    const response = document.getElementById('response').value;
    const submitButton = event.target.querySelector('button[type="submit"]');
    const originalText = submitButton.textContent;

    submitButton.disabled = true;
    submitButton.textContent = 'Posting...';

    fetch(`/crm/google-reviews/${currentReviewId}/respond`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        },
        body: JSON.stringify({ response: response })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Response posted successfully to Google!');
            closeResponseModal();
            location.reload();
        } else {
            alert('Error: ' + data.message);
            submitButton.disabled = false;
            submitButton.textContent = originalText;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while posting the response');
        submitButton.disabled = false;
        submitButton.textContent = originalText;
    });
}

function editResponse(reviewId) {
    const newResponse = prompt('Edit your response:');
    if (newResponse && newResponse.trim()) {
        fetch(`/crm/google-reviews/${reviewId}/response`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            },
            body: JSON.stringify({ response: newResponse })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Response updated successfully!');
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while updating the response');
        });
    }
}

// Close modal on escape key
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeResponseModal();
    }
});
</script>
@endpush
@endsection