@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Plugin Details')

@push('styles')
    <style>
        .plugin-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
            padding: 30px;
            margin-bottom: 30px;
        }

        .plugin-icon {
            width: 80px;
            height: 80px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 32px;
            font-weight: bold;
        }

        .plugin-status-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 14px;
            padding: 8px 16px;
        }

        .feature-badge {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            color: #495057;
            padding: 6px 12px;
            border-radius: 20px;
            margin: 4px;
            display: inline-block;
            font-size: 12px;
        }

        .info-card {
            border: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        .info-card .card-header {
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            font-weight: 600;
        }

        .admin-page-item {
            background: #f8f9fa;
            border-left: 4px solid #007bff;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 0 8px 8px 0;
        }

        .dependency-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            margin-bottom: 8px;
        }

        .dependency-met {
            border-left: 4px solid #28a745;
        }

        .dependency-unmet {
            border-left: 4px solid #dc3545;
        }

        .screenshot-thumbnail {
            max-width: 100%;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: transform 0.2s;
        }

        .screenshot-thumbnail:hover {
            transform: scale(1.05);
        }

        .action-buttons .btn {
            margin: 5px;
        }
    </style>
@endpush

@section('content')
    <!-- Plugin Header -->
    <div class="plugin-header relative">
        @if ($isActive)
            <span class="absolute top-5 right-5 bg-green-500 text-white text-sm px-4 py-2 rounded plugin-status-badge">Active</span>
        @else
            <span class="absolute top-5 right-5 bg-gray-500 text-white text-sm px-4 py-2 rounded plugin-status-badge">Inactive</span>
        @endif

        <div class="flex items-center">
            <div class="plugin-icon mr-4">
                {{ strtoupper(substr($pluginData['title'] ?? $pluginData['name'], 0, 2)) }}
            </div>
            <div class="ms-4">
                <h1 class="mb-2">{{ $pluginData['title'] ?? $pluginData['name'] }}</h1>
                <p class="mb-1 text-white">{{ $pluginData['description'] ?? 'No description available.' }}</p>
                <div class="flex items-center">
                    <span class="bg-white text-gray-800 text-sm px-3 py-1 rounded mr-2">v{{ $pluginData['version'] ?? '1.0.0' }}</span>
                    @if (isset($pluginData['author']))
                        <span class="text-white">
                            by
                            @if (is_array($pluginData['author']))
                                @if (isset($pluginData['author']['url']))
                                    <a href="{{ $pluginData['author']['url'] }}" target="_blank" class="text-white">
                                        {{ $pluginData['author']['name'] ?? 'Unknown' }}
                                    </a>
                                @else
                                    {{ $pluginData['author']['name'] ?? 'Unknown' }}
                                @endif
                            @else
                                {{ $pluginData['author'] }}
                            @endif
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation Tabs -->
    <div class="border-b border-gray-200 mb-4">
        <nav class="flex space-x-8" id="pluginTabs">
            <button class="py-2 px-1 border-b-2 border-blue-500 font-medium text-sm text-blue-600" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">Overview</button>
            <button class="py-2 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab">Details</button>
            <button class="py-2 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" id="admin-pages-tab" data-bs-toggle="tab" data-bs-target="#admin-pages" type="button" role="tab">Admin Pages</button>
            @if (isset($pluginData['settings']['has_settings']) && $pluginData['settings']['has_settings'])
                <button class="py-2 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab">Settings</button>
            @endif
            <button class="py-2 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300" id="actions-tab" data-bs-toggle="tab" data-bs-target="#actions" type="button" role="tab">Actions</button>
        </nav>
    </div>

    <!-- Tab Content -->
    <div id="pluginTabsContent">
        <!-- Overview Tab -->
        <div class="block" id="overview" role="tabpanel">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="md:col-span-2">
                    <!-- Description -->
                    <div class="info-card mb-4">
                        <div class="card-header px-6 py-4 border-b border-gray-200">
                            <h5 class="mb-0 text-lg font-semibold">Description</h5>
                        </div>
                        <div class="px-6 py-4">
                            <p>{{ $pluginData['description'] ?? 'No description available.' }}</p>
                        </div>
                    </div>

                    <!-- Features -->
                    @if (isset($pluginData['features']) && is_array($pluginData['features']))
                        <div class="info-card mb-4">
                            <div class="card-header px-6 py-4 border-b border-gray-200">
                                <h5 class="mb-0 text-lg font-semibold">Features</h5>
                            </div>
                            <div class="px-6 py-4">
                                @foreach ($pluginData['features'] as $feature)
                                    <span class="feature-badge">{{ $feature }}</span>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Screenshots -->
                    @if (isset($pluginData['screenshots']) && is_array($pluginData['screenshots']))
                        <div class="info-card mb-4">
                            <div class="card-header px-6 py-4 border-b border-gray-200">
                                <h5 class="mb-0 text-lg font-semibold">Screenshots</h5>
                            </div>
                            <div class="px-6 py-4">
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    @foreach ($pluginData['screenshots'] as $screenshot)
                                        <div class="mb-3">
                                            <img src="{{ asset('plugins/' . $pluginData['name'] . '/' . $screenshot) }}"
                                                class="screenshot-thumbnail" alt="Plugin Screenshot" data-bs-toggle="modal"
                                                data-bs-target="#screenshotModal">
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                <div>
                    <!-- Quick Info -->
                    <div class="info-card mb-4">
                        <div class="card-header px-6 py-4 border-b border-gray-200">
                            <h5 class="mb-0 text-lg font-semibold">Plugin Information</h5>
                        </div>
                        <div class="px-6 py-4">
                            <dl class="grid grid-cols-3 gap-4">
                                <dt class="text-sm font-medium text-gray-500">Status:</dt>
                                <dd class="text-sm text-gray-900 col-span-2">
                                    @if ($isActive)
                                        <span class="bg-green-100 text-green-800 text-xs px-2.5 py-0.5 rounded-full font-medium">Active</span>
                                    @else
                                        <span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-0.5 rounded-full font-medium">Inactive</span>
                                    @endif
                                </dd>

                                <dt class="text-sm font-medium text-gray-500">Version:</dt>
                                <dd class="text-sm text-gray-900 col-span-2">{{ $pluginData['version'] ?? '1.0.0' }}</dd>

                                @if (isset($pluginData['license']))
                                    <dt class="text-sm font-medium text-gray-500">License:</dt>
                                    <dd class="text-sm text-gray-900 col-span-2">{{ $pluginData['license'] }}</dd>
                                @endif

                                @if (isset($pluginData['homepage']))
                                    <dt class="text-sm font-medium text-gray-500">Homepage:</dt>
                                    <dd class="text-sm text-gray-900 col-span-2">
                                        <a href="{{ $pluginData['homepage'] }}" target="_blank" class="text-blue-600 hover:text-blue-500">Visit</a>
                                    </dd>
                                @endif

                                @if (isset($pluginData['repository']))
                                    <dt class="text-sm font-medium text-gray-500">Repository:</dt>
                                    <dd class="text-sm text-gray-900 col-span-2">
                                        <a href="{{ $pluginData['repository']['url'] ?? '#' }}" target="_blank" class="text-blue-600 hover:text-blue-500">View</a>
                                    </dd>
                                @endif

                                @if (isset($pluginData['support']))
                                    <dt class="text-sm font-medium text-gray-500">Support:</dt>
                                    <dd class="text-sm text-gray-900 col-span-2">
                                        @if (isset($pluginData['support']['email']))
                                            <a href="mailto:{{ $pluginData['support']['email'] }}" class="text-blue-600 hover:text-blue-500">Email</a>
                                        @endif
                                        @if (isset($pluginData['support']['docs']))
                                            <br><a href="{{ $pluginData['support']['docs'] }}"
                                                target="_blank" class="text-blue-600 hover:text-blue-500">Documentation</a>
                                        @endif
                                    </dd>
                                @endif
                            </dl>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="info-card">
                        <div class="card-header px-6 py-4 border-b border-gray-200">
                            <h5 class="mb-0 text-lg font-semibold">Quick Actions</h5>
                        </div>
                        <div class="px-6 py-4 action-buttons flex justify-between gap-2">
                            @if ($isActive)
                                <button class="btn btn-outline-warning btn-sm"
                                    onclick="togglePlugin('{{ $pluginData['name'] }}', 'deactivate')">
                                    <i class="fas fa-pause"></i> Deactivate
                                </button>
                                @if (isset($pluginData['settings']['has_settings']) && $pluginData['settings']['has_settings'])
                                    <a href="{{ route('admin.plugins.settings', $pluginData['name']) }}"
                                        class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-cog"></i> Settings
                                    </a>
                                @endif
                            @else
                                <button class="btn btn-outline-success btn-sm"
                                    onclick="togglePlugin('{{ $pluginData['name'] }}', 'activate')">
                                    <i class="fas fa-play"></i> Activate
                                </button>
                            @endif

                            <button class="btn btn-outline-secondary btn-sm"
                                onclick="performAction('{{ $pluginData['name'] }}', 'install')">
                                <i class="fas fa-download"></i> Install
                            </button>

                            <button class="btn btn-outline-danger btn-sm"
                                onclick="performAction('{{ $pluginData['name'] }}', 'uninstall')">
                                <i class="fas fa-trash"></i> Uninstall
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Details Tab -->
        <div class="hidden" id="details" role="tabpanel">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <!-- Requirements -->
                    @if (isset($pluginData['requires']))
                        <div class="info-card mb-4">
                            <div class="card-header px-6 py-4 border-b border-gray-200">
                                <h5 class="mb-0 text-lg font-semibold">System Requirements</h5>
                            </div>
                            <div class="px-6 py-4">
                                @foreach ($pluginData['requires'] as $requirement => $version)
                                    <div class="dependency-item dependency-met">
                                        <div>
                                            <strong>{{ ucfirst($requirement) }}:</strong> {{ $version }}
                                        </div>
                                        <span class="bg-green-100 text-green-800 text-xs px-2.5 py-0.5 rounded-full font-medium">✓</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Dependencies -->
                    @if (isset($pluginData['dependencies']))
                        <div class="info-card mb-4">
                            <div class="card-header px-6 py-4 border-b border-gray-200">
                                <h5 class="mb-0 text-lg font-semibold">Dependencies</h5>
                            </div>
                            <div class="px-6 py-4">
                                @if (empty($pluginData['dependencies']['plugins']) && empty($pluginData['dependencies']['packages']))
                                    <p class="text-gray-500">No dependencies required.</p>
                                @else
                                    @if (!empty($pluginData['dependencies']['plugins']))
                                        <h6 class="text-base font-medium mb-2">Plugin Dependencies:</h6>
                                        @foreach ($pluginData['dependencies']['plugins'] as $plugin)
                                            <div class="dependency-item dependency-met">
                                                <div>{{ $plugin }}</div>
                                                <span class="bg-green-100 text-green-800 text-xs px-2.5 py-0.5 rounded-full font-medium">✓</span>
                                            </div>
                                        @endforeach
                                    @endif

                                    @if (!empty($pluginData['dependencies']['packages']))
                                        <h6 class="text-base font-medium mb-2 mt-3">Package Dependencies:</h6>
                                        @foreach ($pluginData['dependencies']['packages'] as $package)
                                            <div class="dependency-item dependency-met">
                                                <div>{{ $package }}</div>
                                                <span class="bg-green-100 text-green-800 text-xs px-2.5 py-0.5 rounded-full font-medium">✓</span>
                                            </div>
                                        @endforeach
                                    @endif
                                @endif
                            </div>
                        </div>
                    @endif
                </div>

                <div>
                    <!-- Permissions -->
                    @if (isset($pluginData['permissions']) && is_array($pluginData['permissions']))
                        <div class="info-card mb-4">
                            <div class="card-header px-6 py-4 border-b border-gray-200">
                                <h5 class="mb-0 text-lg font-semibold">Required Permissions</h5>
                            </div>
                            <div class="px-6 py-4">
                                @foreach ($pluginData['permissions'] as $permission)
                                    <div class="flex justify-between items-center mb-2">
                                        <span>{{ str_replace('_', ' ', ucfirst($permission)) }}</span>
                                        <span class="bg-blue-100 text-blue-800 text-xs px-2.5 py-0.5 rounded-full font-medium">{{ $permission }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Installation Info -->
                    @if (isset($pluginData['installation']))
                        <div class="info-card mb-4">
                            <div class="card-header px-6 py-4 border-b border-gray-200">
                                <h5 class="mb-0 text-lg font-semibold">Installation Information</h5>
                            </div>
                            <div class="px-6 py-4">
                                <dl class="grid grid-cols-2 gap-4">
                                    @if (isset($pluginData['installation']['requires_migration']))
                                        <dt class="text-sm font-medium text-gray-500">Migrations:</dt>
                                        <dd class="text-sm text-gray-900">
                                            @if ($pluginData['installation']['requires_migration'])
                                                <span class="bg-yellow-100 text-yellow-800 text-xs px-2.5 py-0.5 rounded-full font-medium">Required</span>
                                            @else
                                                <span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-0.5 rounded-full font-medium">Not Required</span>
                                            @endif
                                        </dd>
                                    @endif

                                    @if (isset($pluginData['installation']['requires_seeding']))
                                        <dt class="text-sm font-medium text-gray-500">Seeding:</dt>
                                        <dd class="text-sm text-gray-900">
                                            @if ($pluginData['installation']['requires_seeding'])
                                                <span class="bg-yellow-100 text-yellow-800 text-xs px-2.5 py-0.5 rounded-full font-medium">Required</span>
                                            @else
                                                <span class="bg-gray-100 text-gray-800 text-xs px-2.5 py-0.5 rounded-full font-medium">Not Required</span>
                                            @endif
                                        </dd>
                                    @endif
                                </dl>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Admin Pages Tab -->
        <div class="hidden" id="admin-pages" role="tabpanel">
            <div class="info-card">
                <div class="card-header px-6 py-4 border-b border-gray-200">
                    <h5 class="mb-0 text-lg font-semibold">Registered Admin Pages</h5>
                </div>
                <div class="px-6 py-4">
                    @if (!empty($adminPages))
                        @foreach ($adminPages as $slug => $page)
                            <div class="admin-page-item">
                                <div class="flex justify-between items-center">
                                    <div>
                                        <h6 class="mb-1 text-base font-medium">{{ $page['title'] }}</h6>
                                        <p class="mb-0 text-gray-500">
                                            <strong>Slug:</strong> {{ $slug }} |
                                            <strong>Capability:</strong> {{ $page['capability'] }} |
                                            <strong>Position:</strong> {{ $page['position'] ?? 'default' }}
                                        </p>
                                    </div>
                                    @if (isset($page['url']))
                                        <a href="{{ $page['url'] }}" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-1 px-3 rounded text-sm transition duration-200">Visit</a>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p class="text-gray-500">This plugin has not registered any admin pages.</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Settings Tab -->
        @if (isset($pluginData['settings']['has_settings']) && $pluginData['settings']['has_settings'])
            <div class="hidden" id="settings" role="tabpanel">
                <div class="info-card">
                    <div class="card-header px-6 py-4 border-b border-gray-200">
                        <h5 class="mb-0 text-lg font-semibold">Plugin Settings</h5>
                    </div>
                    <div class="px-6 py-4">
                        <div class="flex justify-between items-center">
                            <p>Configure this plugin's settings and preferences.</p>
                            <a href="{{ route('admin.plugins.settings', $pluginData['name']) }}" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded transition duration-200">
                                <i class="fas fa-cog"></i> Manage Settings
                            </a>
                        </div>

                        @if (!empty($settings))
                            <hr class="my-4">
                            <h6 class="text-base font-medium mb-2">Current Settings:</h6>
                            <pre class="bg-gray-100 p-3 rounded overflow-x-auto text-sm">{{ json_encode($settings, JSON_PRETTY_PRINT) }}</pre>
                        @endif
                    </div>
                </div>
            </div>
        @endif

        <!-- Actions Tab -->
        <div class="hidden" id="actions" role="tabpanel">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <div class="info-card">
                        <div class="card-header px-6 py-4 border-b border-gray-200">
                            <h5 class="mb-0 text-lg font-semibold">Plugin Actions</h5>
                        </div>
                        <div class="px-6 py-4 bg-gray-400">
                            <div class="space-y-2">
                                @if ($isActive)
                                    <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-medium py-2 px-4 rounded transition duration-200"
                                        onclick="togglePlugin('{{ $pluginData['name'] }}', 'deactivate')">
                                        <i class="fas fa-pause"></i> Deactivate Plugin
                                    </button>
                                @else
                                    <button class="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded transition duration-200"
                                        onclick="togglePlugin('{{ $pluginData['name'] }}', 'activate')">
                                        <i class="fas fa-play"></i> Activate Plugin
                                    </button>
                                @endif

                                <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded transition duration-200"
                                    onclick="performAction('{{ $pluginData['name'] }}', 'install')">
                                    <i class="fas fa-download"></i> Install Plugin
                                </button>

                                <button class="w-full bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded transition duration-200" onclick="getPluginInfo('{{ $pluginData['name'] }}')">
                                    <i class="fas fa-info-circle"></i> Get Plugin Info
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="info-card border-red-200">
                        <div class="card-header px-6 py-4 border-b border-gray-200 bg-red-500 text-white">
                            <h5 class="mb-0 text-lg font-semibold">Dangerous Actions</h5>
                        </div>
                        <div class="px-6 py-4 bg-gray-400">
                            <div class="space-y-2">
                                <button class="w-full bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded transition duration-200"
                                    onclick="performAction('{{ $pluginData['name'] }}', 'uninstall')">
                                    <i class="fas fa-trash"></i> Uninstall Plugin
                                </button>

                                <button class="w-full bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded transition duration-200"
                                    onclick="performAction('{{ $pluginData['name'] }}', 'delete')">
                                    <i class="fas fa-times"></i> Delete Plugin
                                </button>
                            </div>

                            <div class="bg-yellow-50 border border-yellow-200 rounded-md p-4 mt-3">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm text-yellow-700">These actions cannot be undone. Use with caution.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Back Button -->
    <div class="mt-6">
        <a href="{{ route('admin.plugins.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded transition duration-200">
            <i class="fas fa-arrow-left"></i> Back to Plugins
        </a>
    </div>

    <!-- Screenshot Modal -->
    <div class="fixed inset-0 flex items-center justify-center z-50 hidden" id="screenshotModal">
        <div class="fixed inset-0 bg-black opacity-50"></div>
        <div class="bg-white rounded-lg shadow-lg max-w-4xl w-full mx-4 z-10">
            <div class="flex justify-between items-center px-6 py-4 border-b border-gray-200">
                <h5 class="text-lg font-semibold">Plugin Screenshot</h5>
                <button type="button" class="text-gray-400 hover:text-gray-600" data-bs-dismiss="modal">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="p-6 text-center">
                <img src="" class="max-w-full h-auto" id="modal-screenshot">
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function togglePlugin(plugin, action) {
            const btn = event.target;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
            btn.disabled = true;

            $.ajax({
                url: `{{ route('admin.plugins.index') }}/${plugin}/${action}`,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        location.reload();
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    const response = xhr.responseJSON;
                    toastr.error(response ? response.message : 'An error occurred');
                },
                complete: function() {
                    btn.innerHTML = originalText;
                    btn.disabled = false;
                }
            });
        }

        function performAction(plugin, action) {
            let confirmMessage = '';

            switch (action) {
                case 'uninstall':
                    confirmMessage = 'Are you sure you want to uninstall this plugin? This will remove all plugin data.';
                    break;
                case 'delete':
                    confirmMessage = 'Are you sure you want to delete this plugin? This action cannot be undone.';
                    break;
                default:
                    confirmMessage = `Are you sure you want to ${action} this plugin?`;
            }

            if (action === 'uninstall' || action === 'delete') {
                if (!confirm(confirmMessage)) {
                    return;
                }
            }

            const btn = event.target;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
            btn.disabled = true;

            let url = `{{ route('admin.plugins.index') }}/${plugin}/${action}`;
            let method = 'POST';

            if (action === 'delete') {
                method = 'DELETE';
                url = `{{ route('admin.plugins.index') }}/${plugin}`;
            }

            $.ajax({
                url: url,
                type: method,
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        if (action === 'delete') {
                            window.location.href = '{{ route('admin.plugins.index') }}';
                        } else {
                            location.reload();
                        }
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    const response = xhr.responseJSON;
                    toastr.error(response ? response.message : 'An error occurred');
                },
                complete: function() {
                    btn.innerHTML = originalText;
                    btn.disabled = false;
                }
            });
        }

        function getPluginInfo(plugin) {
            $.ajax({
                url: `{{ route('admin.plugins.api-info', '') }}/${plugin}`,
                type: 'GET',
                success: function(response) {
                    if (response.success) {
                        const info = JSON.stringify(response.data, null, 2);
                        alert('Plugin Information:\n\n' + info);
                    }
                },
                error: function() {
                    toastr.error('Failed to get plugin information');
                }
            });
        }

        // Screenshot modal
        $('.screenshot-thumbnail').on('click', function() {
            const src = $(this).attr('src');
            $('#modal-screenshot').attr('src', src);
        });

        // Tab functionality
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('[data-bs-toggle="tab"]');
            const tabPanes = document.querySelectorAll('[role="tabpanel"]');

            tabs.forEach(tab => {
                tab.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // Remove active class from all tabs
                    tabs.forEach(t => {
                        t.classList.remove('border-blue-500', 'text-blue-600');
                        t.classList.add('border-transparent', 'text-gray-500');
                    });
                    
                    // Add active class to clicked tab
                    this.classList.remove('border-transparent', 'text-gray-500');
                    this.classList.add('border-blue-500', 'text-blue-600');
                    
                    // Hide all tab panes
                    tabPanes.forEach(pane => {
                        pane.classList.add('hidden');
                        pane.classList.remove('block');
                    });
                    
                    // Show target tab pane
                    const target = document.querySelector(this.getAttribute('data-bs-target'));
                    if (target) {
                        target.classList.remove('hidden');
                        target.classList.add('block');
                    }
                });
            });

            // Modal functionality
            const modal = document.getElementById('screenshotModal');
            const modalImage = document.getElementById('modal-screenshot');
            const closeBtn = modal.querySelector('[data-bs-dismiss="modal"]');
            
            document.querySelectorAll('.screenshot-thumbnail').forEach(img => {
                img.addEventListener('click', function() {
                    modalImage.src = this.src;
                    modal.classList.remove('hidden');
                });
            });
            
            closeBtn.addEventListener('click', function() {
                modal.classList.add('hidden');
            });
            
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    modal.classList.add('hidden');
                }
            });
        });
    </script>
@endpush