<div wire:id="database-backup-settings">
    <div class="mx-4 p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">


            <div x-data="{ activeTab: 'tenant' }">
                {{-- Tabs Navigation --}}
                <div class="mb-6 border-b border-gray-200 dark:border-gray-700">
                    <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
                        <li class="me-2">
                            <button @click="activeTab = 'tenant'"
                                class="inline-block p-4 border-b-2 rounded-t-lg transition-colors duration-200"
                                :class="activeTab === 'tenant' ? 'border-indigo-600 text-indigo-600 dark:text-indigo-500 dark:border-indigo-500' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300'">
                                {{ __('webhooks::webhooks.configured_webhooks') }}
                            </button>
                        </li>
                        <li class="me-2">
                            <button @click="activeTab = 'system'"
                                class="inline-block p-4 border-b-2 rounded-t-lg transition-colors duration-200"
                                :class="activeTab === 'system' ? 'border-indigo-600 text-indigo-600 dark:text-indigo-500 dark:border-indigo-500' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300'">
                                {{ __('webhooks::webhooks.system_webhooks') }}
                            </button>
                        </li>
                    </ul>
                </div>

                {{-- Tenant Webhooks Content --}}
                <div x-show="activeTab === 'tenant'" class="space-y-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-semibold">{{ __('webhooks::webhooks.overview') }}</h3>
                            <p class="text-xs text-gray-500">{{ __('webhooks::webhooks.super_admin_visibility') }}</p>
                        </div>
                        <div class="w-64">
                            <label class="block text-xs font-medium text-gray-700">{{ __('webhooks::webhooks.restaurant') }}</label>
                            <select wire:model.live="selectedRestaurant" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
                                @foreach ($restaurants as $restaurant)
                                    <option value="{{ $restaurant['id'] }}">{{ $restaurant['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
                        <div class="p-4 rounded-lg bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200">
                            <p class="text-xs text-blue-600 font-medium">{{ __('webhooks::webhooks.webhooks') }}</p>
                            <p class="text-2xl font-bold text-blue-700">{{ $summary['webhooks'] ?? 0 }}</p>
                        </div>
                        <div class="p-4 rounded-lg bg-gradient-to-br from-gray-50 to-gray-100 border border-gray-200">
                            <p class="text-xs text-gray-600 font-medium">{{ __('webhooks::webhooks.deliveries') }}</p>
                            <p class="text-2xl font-bold text-gray-700">{{ $summary['deliveries'] ?? 0 }}</p>
                        </div>
                        <div class="p-4 rounded-lg bg-gradient-to-br from-red-50 to-red-100 border border-red-200">
                            <p class="text-xs text-red-600 font-medium">{{ __('webhooks::webhooks.failed') }}</p>
                            <p class="text-2xl font-bold text-red-700">{{ $summary['failed'] ?? 0 }}</p>
                        </div>
                        <div class="p-4 rounded-lg bg-gradient-to-br from-yellow-50 to-yellow-100 border border-yellow-200">
                            <p class="text-xs text-yellow-600 font-medium">{{ __('webhooks::webhooks.pending') }}</p>
                            <p class="text-2xl font-bold text-yellow-700">{{ $summary['pending'] ?? 0 }}</p>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg shadow border border-gray-100">
                        <div class="p-4 border-b border-gray-100 flex items-center justify-between">
                            <h3 class="font-semibold">{{ __('webhooks::webhooks.recent_deliveries') }}</h3>
                            <span class="text-xs text-gray-500">{{ __('webhooks::webhooks.latest_count', ['count' => 10]) }}</span>
                        </div>
                        <div class="p-4">
                            @if (count($deliveries) === 0)
                                <div class="text-center py-8">
                                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                                    </svg>
                                    <p class="mt-2 text-sm text-gray-600">{{ __('webhooks::webhooks.no_deliveries') }}</p>
                                </div>
                            @else
                                <div class="overflow-x-auto">
                                    <table class="min-w-full text-sm text-left">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th class="px-3 py-2 font-medium text-gray-500">{{ __('webhooks::webhooks.event') }}</th>
                                                <th class="px-3 py-2 font-medium text-gray-500">{{ __('webhooks::webhooks.status') }}</th>
                                                <th class="px-3 py-2 font-medium text-gray-500">{{ __('webhooks::webhooks.attempts') }}</th>
                                                <th class="px-3 py-2 font-medium text-gray-500">{{ __('webhooks::webhooks.response') }}</th>
                                                <th class="px-3 py-2 font-medium text-gray-500">{{ __('webhooks::webhooks.created_at') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-100">
                                            @foreach ($deliveries as $delivery)
                                                <tr class="hover:bg-gray-50">
                                                    <td class="px-3 py-2">
                                                        <span class="font-mono text-xs bg-gray-100 px-2 py-1 rounded">{{ $delivery['event'] }}</span>
                                                    </td>
                                                    <td class="px-3 py-2">
                                                        <span class="inline-flex px-2 py-1 rounded-full text-xs font-medium
                                                            @if($delivery['status'] === 'succeeded') bg-green-100 text-green-700
                                                            @elseif($delivery['status'] === 'pending') bg-yellow-100 text-yellow-700
                                                            @else bg-red-100 text-red-700 @endif">
                                                            {{ __('webhooks::webhooks.status_' . $delivery['status']) }}
                                                        </span>
                                                    </td>
                                                    <td class="px-3 py-2 text-gray-600">{{ $delivery['attempts'] }}</td>
                                                    <td class="px-3 py-2">
                                                        @if($delivery['response_code'])
                                                            <span class="font-mono text-xs {{ $delivery['response_code'] >= 200 && $delivery['response_code'] < 300 ? 'text-green-600' : 'text-red-600' }}">
                                                                {{ $delivery['response_code'] }}
                                                            </span>
                                                        @else
                                                            <span class="text-gray-400">—</span>
                                                        @endif
                                                    </td>
                                                    <td class="px-3 py-2 text-gray-500">{{ \Illuminate\Support\Carbon::parse($delivery['created_at'])->diffForHumans() }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- System Webhooks Content --}}
                <div x-show="activeTab === 'system'" style="display: none;">
                    @livewire('webhooks::super-admin.system-webhooks')
                </div>
            </div>
    </div>
</div>
