@php
    $userPlan = $subscription?->plan?->name ?? 'Starter';
    $isEnterprise = $userPlan === 'Enterprise';
    $isProfessionalOrHigher = in_array($userPlan, ['Professional', 'Enterprise']);
@endphp

<div class="space-y-8">
    @if($isProfessionalOrHigher)
    <!-- Communications Section -->
    <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
        <div class="px-4 py-6 sm:p-8">
            <div class="max-w-2xl">
                <h2 class="text-base font-semibold leading-7 text-gray-900">Communications</h2>
                <p class="mt-1 text-sm leading-6 text-gray-600">Configure SMS and WhatsApp messaging for client communications.</p>
            </div>
        </div>
    </div>

    <!-- Twilio Integration -->
    <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
        <div class="px-4 py-6 sm:p-8">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <div class="flex items-center gap-x-3">
                        <div class="flex-shrink-0">
                            <svg class="h-12 w-12" viewBox="0 0 24 24" fill="none">
                                <rect width="24" height="24" rx="4" fill="#F22F46"/>
                                <text x="12" y="16" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="white" text-anchor="middle">TWILIO</text>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold leading-7 text-gray-900">Twilio</h3>
                            <p class="text-sm text-gray-500">Send SMS and WhatsApp reminders to clients</p>
                        </div>
                    </div>

                    @if($setting->twilio_sid && $setting->twilio_auth_token)
                        <!-- Connected State -->
                        <div class="mt-6">
                            <div class="rounded-md bg-green-50 p-4">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <svg class="size-5 text-green-400" 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>
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <h3 class="text-sm font-medium text-green-800">Connected</h3>
                                        <div class="mt-2 text-sm text-green-700">
                                            <p>Account SID: <strong>{{ Str::mask($setting->twilio_sid, '*', 4, -4) }}</strong></p>
                                            @if($setting->twilio_whatsapp_from)
                                                <p class="mt-1">WhatsApp Number: {{ $setting->twilio_whatsapp_from }}</p>
                                            @endif
                                            @if($setting->twilio_sms_from)
                                                <p class="mt-1">SMS Number: {{ $setting->twilio_sms_from }}</p>
                                            @endif
                                            @if($setting->twilio_connected_at)
                                                <p class="mt-1">Connected: {{ $setting->twilio_connected_at->format('M d, Y') }}</p>
                                            @endif
                                        </div>
                                        <div class="mt-4 flex gap-x-3">
                                            <button type="button" onclick="document.getElementById('twilio-form').classList.toggle('hidden')" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                                                Update Credentials
                                            </button>
                                            <form action="{{ route('crm.settings.twilio.disconnect') }}" method="POST" class="inline">
                                                @csrf
                                                <button type="submit" onclick="return confirm('Are you sure you want to disconnect Twilio? This will disable SMS and WhatsApp notifications.');" class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500">
                                                    Disconnect
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <!-- Not Connected -->
                        <div class="mt-6">
                            <div class="rounded-md bg-blue-50 p-4 ring-1 ring-blue-600/20">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <svg class="size-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <h3 class="text-sm font-medium text-blue-800">Not Connected</h3>
                                        <div class="mt-2 text-sm text-blue-700">
                                            <p>Connect your Twilio account to send automated appointment reminders via SMS and WhatsApp.</p>
                                            <ul class="mt-2 list-disc list-inside space-y-1">
                                                <li>Appointment confirmations and reminders</li>
                                                <li>WhatsApp messaging support</li>
                                                <li>Two-way SMS conversations</li>
                                                <li>Payment reminders and confirmations</li>
                                            </ul>
                                        </div>
                                        <div class="mt-4">
                                            <button type="button" onclick="document.getElementById('twilio-form').classList.toggle('hidden')" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                                                Connect Twilio
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Twilio Configuration Form (Hidden by default) -->
                    <div id="twilio-form" class="mt-6 {{ $setting->twilio_sid ? 'hidden' : '' }}">
                        <form method="POST" action="{{ route('crm.settings.twilio.save') }}" class="rounded-md bg-gray-50 p-6 ring-1 ring-gray-900/5">
                            @csrf
                            <div class="space-y-6">
                                <div>
                                    <label for="twilio_sid" class="block text-sm/6 font-medium text-gray-900">Account SID</label>
                                    <div class="mt-2">
                                        <input type="text" name="twilio_sid" id="twilio_sid" value="{{ old('twilio_sid', $setting->twilio_sid) }}" 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="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" required>
                                    </div>
                                    <p class="mt-1 text-xs text-gray-500">Found in your Twilio Console dashboard</p>
                                </div>

                                <div>
                                    <label for="twilio_auth_token" class="block text-sm/6 font-medium text-gray-900">Auth Token</label>
                                    <div class="mt-2">
                                        <input type="password" name="twilio_auth_token" id="twilio_auth_token" value="{{ old('twilio_auth_token', $setting->twilio_auth_token) }}" 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="Your auth token" required>
                                    </div>
                                    <p class="mt-1 text-xs text-gray-500">Found in your Twilio Console dashboard</p>
                                </div>

                                <div>
                                    <label for="twilio_whatsapp_from" class="block text-sm/6 font-medium text-gray-900">WhatsApp Number (Optional)</label>
                                    <div class="mt-2">
                                        <input type="text" name="twilio_whatsapp_from" id="twilio_whatsapp_from" value="{{ old('twilio_whatsapp_from', $setting->twilio_whatsapp_from) }}" 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="whatsapp:+14155238886">
                                    </div>
                                    <p class="mt-1 text-xs text-gray-500">Format: whatsapp:+1234567890</p>
                                </div>

                                <div>
                                    <label for="twilio_sms_from" class="block text-sm/6 font-medium text-gray-900">SMS Number (Optional)</label>
                                    <div class="mt-2">
                                        <input type="text" name="twilio_sms_from" id="twilio_sms_from" value="{{ old('twilio_sms_from', $setting->twilio_sms_from) }}" 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="+12345678901">
                                    </div>
                                    <p class="mt-1 text-xs text-gray-500">Format: +1234567890</p>
                                </div>

                                <div class="flex gap-x-3">
                                    <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                                        Save Credentials
                                    </button>
                                    <button type="button" onclick="document.getElementById('twilio-form').classList.add('hidden')" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                                        Cancel
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Email Marketing Section -->
    <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
        <div class="px-4 py-6 sm:p-8">
            <div class="max-w-2xl">
                <h2 class="text-base font-semibold leading-7 text-gray-900">Email Marketing</h2>
                <p class="mt-1 text-sm leading-6 text-gray-600">Sync your client list with email marketing platforms.</p>
            </div>
        </div>
    </div>

    <!-- Mailchimp Integration -->
    <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
        <div class="px-4 py-6 sm:p-8">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <div class="flex items-center gap-x-3">
                        <div class="flex-shrink-0">
                            <svg class="h-12 w-12" viewBox="0 0 24 24" fill="none">
                                <rect width="24" height="24" rx="4" fill="#FFE01B"/>
                                <text x="12" y="16" font-family="Arial, sans-serif" font-size="8" font-weight="bold" fill="#241C15" text-anchor="middle">MAILCHIMP</text>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold leading-7 text-gray-900">Mailchimp</h3>
                            <p class="text-sm text-gray-500">Sync clients to your Mailchimp audience for email campaigns</p>
                        </div>
                    </div>

                    @if($setting->mailchimp_api_key && $setting->mailchimp_audience_id)
                        <!-- Connected State -->
                        <div class="mt-6">
                            <div class="rounded-md bg-green-50 p-4">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <svg class="size-5 text-green-400" 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>
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <h3 class="text-sm font-medium text-green-800">Connected</h3>
                                        <div class="mt-2 text-sm text-green-700">
                                            <p>Server: <strong>{{ $setting->mailchimp_server_prefix }}</strong></p>
                                            <p class="mt-1">Audience ID: {{ Str::limit($setting->mailchimp_audience_id, 20) }}</p>
                                            @if($setting->mailchimp_connected_at)
                                                <p class="mt-1">Connected: {{ $setting->mailchimp_connected_at->format('M d, Y') }}</p>
                                            @endif
                                        </div>
                                        <div class="mt-4 flex gap-x-3">
                                            <button type="button" onclick="document.getElementById('mailchimp-form').classList.toggle('hidden')" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                                                Update Credentials
                                            </button>
                                            <form action="{{ route('crm.settings.mailchimp.disconnect') }}" method="POST" class="inline">
                                                @csrf
                                                <button type="submit" onclick="return confirm('Are you sure you want to disconnect Mailchimp? This will disable client list syncing.');" class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500">
                                                    Disconnect
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <!-- Not Connected -->
                        <div class="mt-6">
                            <div class="rounded-md bg-blue-50 p-4 ring-1 ring-blue-600/20">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <svg class="size-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <h3 class="text-sm font-medium text-blue-800">Not Connected</h3>
                                        <div class="mt-2 text-sm text-blue-700">
                                            <p>Connect Mailchimp to automatically sync your client list and send targeted email campaigns.</p>
                                            <ul class="mt-2 list-disc list-inside space-y-1">
                                                <li>Automatic client list sync</li>
                                                <li>Segment clients by tattoo preferences</li>
                                                <li>Send newsletters and promotions</li>
                                                <li>Track campaign performance</li>
                                            </ul>
                                        </div>
                                        <div class="mt-4">
                                            <button type="button" onclick="document.getElementById('mailchimp-form').classList.toggle('hidden')" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                                                Connect Mailchimp
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Mailchimp Configuration Form (Hidden by default) -->
                    <div id="mailchimp-form" class="mt-6 {{ $setting->mailchimp_api_key ? 'hidden' : '' }}">
                        <form method="POST" action="{{ route('crm.settings.mailchimp.save') }}" class="rounded-md bg-gray-50 p-6 ring-1 ring-gray-900/5">
                            @csrf
                            <div class="space-y-6">
                                <div>
                                    <label for="mailchimp_api_key" class="block text-sm/6 font-medium text-gray-900">API Key</label>
                                    <div class="mt-2">
                                        <input type="text" name="mailchimp_api_key" id="mailchimp_api_key" value="{{ old('mailchimp_api_key', $setting->mailchimp_api_key) }}" 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="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-usX" required>
                                    </div>
                                    <p class="mt-1 text-xs text-gray-500">Found in Account → Extras → API Keys</p>
                                </div>

                                <div>
                                    <label for="mailchimp_server_prefix" class="block text-sm/6 font-medium text-gray-900">Server Prefix</label>
                                    <div class="mt-2">
                                        <input type="text" name="mailchimp_server_prefix" id="mailchimp_server_prefix" value="{{ old('mailchimp_server_prefix', $setting->mailchimp_server_prefix) }}" 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="us1" required>
                                    </div>
                                    <p class="mt-1 text-xs text-gray-500">Last part of your API key (e.g., us1, us2, us19)</p>
                                </div>

                                <div>
                                    <label for="mailchimp_audience_id" class="block text-sm/6 font-medium text-gray-900">Audience ID</label>
                                    <div class="mt-2">
                                        <input type="text" name="mailchimp_audience_id" id="mailchimp_audience_id" value="{{ old('mailchimp_audience_id', $setting->mailchimp_audience_id) }}" 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="xxxxxxxxxx" required>
                                    </div>
                                    <p class="mt-1 text-xs text-gray-500">Found in Audience → Settings → Audience name and defaults</p>
                                </div>

                                <div class="flex gap-x-3">
                                    <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                                        Save Credentials
                                    </button>
                                    <button type="button" onclick="document.getElementById('mailchimp-form').classList.add('hidden')" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                                        Cancel
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if($isProfessionalOrHigher)
    <!-- Google My Business Integration -->
    <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
        <div class="px-4 py-6 sm:p-8">
            <div class="flex items-start justify-between">
                <div class="flex-1">
                    <div class="flex items-center gap-x-3">
                        <div class="flex-shrink-0">
                            <svg class="h-12 w-12" 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>
                        </div>
                        <div>
                            <h3 class="text-base font-semibold leading-7 text-gray-900">Google My Business</h3>
                            <p class="text-sm text-gray-500">Monitor and respond to Google reviews for your studio</p>
                        </div>
                    </div>

                    @if($setting->google_business_account_id && $setting->google_business_location_id)
                        <!-- Connected State -->
                        <div class="mt-6">
                            <div class="rounded-md bg-green-50 p-4">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <svg class="size-5 text-green-400" 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>
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <h3 class="text-sm font-medium text-green-800">Connected</h3>
                                        <div class="mt-2 text-sm text-green-700">
                                            <p>Location: <strong>{{ $setting->google_business_location_name ?? 'Unknown' }}</strong></p>
                                            <p class="mt-1">Account ID: {{ Str::limit($setting->google_business_account_id, 20) }}</p>
                                            @if($setting->google_business_connected_at)
                                                <p class="mt-1">Connected: {{ $setting->google_business_connected_at->format('M d, Y') }}</p>
                                            @endif
                                            @if($setting->google_reviews_last_sync_at)
                                                <p class="mt-1">Last Sync: {{ $setting->google_reviews_last_sync_at->diffForHumans() }}</p>
                                            @endif
                                        </div>
                                        <div class="mt-4 flex gap-x-3">
                                            <a href="{{ route('crm.google-reviews.index') }}" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                                                Manage Reviews
                                            </a>
                                            <form action="{{ route('crm.settings.google.disconnect') }}" method="POST" class="inline">
                                                @csrf
                                                <button type="submit" onclick="return confirm('Are you sure you want to disconnect Google My Business? You will no longer be able to monitor reviews.');" class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500">
                                                    Disconnect
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <!-- Not Connected -->
                        <div class="mt-6">
                            @if(!$setting->google_client_id || !$setting->google_client_secret)
                                <!-- Step 1: Enter OAuth Credentials -->
                                <div class="rounded-md bg-blue-50 p-4 ring-1 ring-blue-600/20">
                                    <div class="flex">
                                        <div class="flex-shrink-0">
                                            <svg class="size-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                                                <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
                                            </svg>
                                        </div>
                                        <div class="ml-3 flex-1">
                                            <h3 class="text-sm font-medium text-blue-800">Setup Required</h3>
                                            <div class="mt-2 text-sm text-blue-700">
                                                <p>To connect Google My Business, you need to create OAuth credentials in Google Cloud Console.</p>
                                                <div class="mt-3 bg-white/50 rounded-md p-3 text-xs space-y-1">
                                                    <p class="font-semibold">Quick Setup Steps:</p>
                                                    <ol class="list-decimal list-inside space-y-1 ml-2">
                                                        <li>Go to <a href="https://console.cloud.google.com/apis/credentials" target="_blank" class="underline text-blue-900">Google Cloud Console</a></li>
                                                        <li>Create a new OAuth 2.0 Client ID (Web application)</li>
                                                        <li>Add this redirect URL: <code class="bg-white px-1 py-0.5 rounded">{{ route('crm.settings.google.callback') }}</code></li>
                                                        <li>Enable "Google My Business API" in your project</li>
                                                        <li>Copy your Client ID and Client Secret below</li>
                                                    </ol>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <form action="{{ route('crm.settings.google.save-credentials') }}" method="POST" class="mt-4 space-y-4">
                                    @csrf
                                    <div>
                                        <label for="google_client_id" class="block text-sm font-medium text-gray-700">Google Client ID</label>
                                        <input type="text" name="google_client_id" id="google_client_id" value="{{ old('google_client_id', $setting->google_client_id) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="1234567890-abc123xyz.apps.googleusercontent.com" required>
                                    </div>
                                    <div>
                                        <label for="google_client_secret" class="block text-sm font-medium text-gray-700">Google Client Secret</label>
                                        <input type="text" name="google_client_secret" id="google_client_secret" value="{{ old('google_client_secret', $setting->google_client_secret ? '••••••••••••' : '') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="GOCSPX-xxxxxxxxxxxxxxxxxxxxx" required>
                                    </div>
                                    <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                                        Save Credentials
                                    </button>
                                </form>
                            @else
                                <!-- Step 2: Connect Account -->
                                <div class="rounded-md bg-blue-50 p-4 ring-1 ring-blue-600/20">
                                    <div class="flex">
                                        <div class="flex-shrink-0">
                                            <svg class="size-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                                                <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
                                            </svg>
                                        </div>
                                        <div class="ml-3 flex-1">
                                            <h3 class="text-sm font-medium text-blue-800">Ready to Connect</h3>
                                            <div class="mt-2 text-sm text-blue-700">
                                                <p>Your OAuth credentials are configured. Connect your Google My Business account to start managing reviews.</p>
                                                <ul class="mt-2 list-disc list-inside space-y-1">
                                                    <li>View all Google reviews in one place</li>
                                                    <li>Respond to reviews directly from the CRM</li>
                                                    <li>Get notified of new reviews instantly</li>
                                                    <li>Track your average rating over time</li>
                                                </ul>
                                            </div>
                                            <div class="mt-4 flex gap-x-3">
                                                <a href="{{ route('crm.settings.google.connect') }}" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                                                    Connect Google My Business
                                                </a>
                                                <button type="button" onclick="document.getElementById('edit-google-credentials').classList.toggle('hidden')" class="rounded-md bg-gray-100 px-3 py-2 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-200">
                                                    Update Credentials
                                                </button>
                                            </div>

                                            <!-- Edit Credentials Form (Hidden by default) -->
                                            <div id="edit-google-credentials" class="hidden mt-4 p-4 bg-white rounded-md border border-gray-200">
                                                <form action="{{ route('crm.settings.google.save-credentials') }}" method="POST" class="space-y-4">
                                                    @csrf
                                                    <div>
                                                        <label for="google_client_id_edit" class="block text-sm font-medium text-gray-700">Google Client ID</label>
                                                        <input type="text" name="google_client_id" id="google_client_id_edit" value="{{ old('google_client_id', $setting->google_client_id) }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
                                                    </div>
                                                    <div>
                                                        <label for="google_client_secret_edit" class="block text-sm font-medium text-gray-700">Google Client Secret</label>
                                                        <input type="text" name="google_client_secret" id="google_client_secret_edit" value="" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="Leave blank to keep current secret">
                                                    </div>
                                                    <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                                                        Update Credentials
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @endif

    @if($isProfessionalOrHigher)
        <!-- Integration Help -->
        <div class="bg-blue-50 shadow-sm ring-1 ring-blue-900/10 sm:rounded-xl">
        <div class="px-4 py-6 sm:p-8">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="size-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3 flex-1">
                    <h3 class="text-sm font-medium text-blue-800">Need Help?</h3>
                    <div class="mt-2 text-sm text-blue-700">
                        <p>Setting up integrations:</p>
                        <ul class="mt-2 list-disc list-inside space-y-1">
                            <li>Click "Connect" to start the OAuth authorization process</li>
                            <li>You'll be redirected to the service to authorize access</li>
                            <li>Once connected, data will automatically sync based on your settings</li>
                            <li>Visit the integration management page to configure preferences</li>
                        </ul>
                    </div>
                    <div class="mt-4">
                        <p class="text-sm text-blue-700">
                            <strong>Note:</strong> Some integrations are available on Professional and Enterprise plans only.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>