Edit Component - Admin Dashboard

Component Name Component name cannot be changed after creation.

Display Name *

Version *

Active

Description

Controller Code (Optional) PHP code for the component controller.

Routes Code (Optional) Route definitions for the component.

Views (Optional - JSON)

{
    "index.blade.php": "@extends('layouts.app')\n\n@section('title', 'Plugin Marketplace - Matomo Tools')\n\n@section('content')\n<div class=\"row\">\n  \n  <div class=\"col-12 mb-4\">\n    <div class=\"card\">\n      <div class=\"card-header d-flex align-items-center justify-content-between\">\n        <h5 class=\"card-title mb-0\">Plugin Marketplace<\/h5>\n        <div class=\"d-flex gap-2\">\n          <div class=\"input-group\" style=\"width: 300px;\">\n            <input type=\"text\" id=\"pluginSearch\" placeholder=\"Search plugins...\" class=\"form-control\">\n            <span class=\"input-group-text\"><i class=\"fas fa-search\"><\/i><\/span>\n          <\/div>\n          <select id=\"categoryFilter\" class=\"form-select\" style=\"width: 150px;\">\n            <option value=\"all\">All Categories<\/option>\n            <option value=\"analytics\">Analytics<\/option>\n            <option value=\"ecommerce\">E-commerce<\/option>\n            <option value=\"privacy\">Privacy<\/option>\n            <option value=\"customization\">Customization<\/option>\n          <\/select>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n  \n\n  \n  <div class=\"col-lg-4 col-md-6 mb-4\">\n    <div class=\"card h-100 plugin-card\">\n      <div class=\"card-header d-flex align-items-center justify-content-between\">\n        <h6 class=\"card-title mb-0\">Advanced Analytics Dashboard<\/h6>\n        <div class=\"d-flex gap-1\">\n          <span class=\"badge bg-warning\">Premium<\/span>\n          <span class=\"badge bg-success\">$49.99<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"plugin-screenshot position-relative\">\n        <div class=\"screenshot-placeholder d-flex align-items-center justify-content-center\" style=\"height: 150px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 0.5rem; margin: 1rem;\">\n          <div class=\"text-center text-white\">\n            <i class=\"fas fa-chart-line mb-2\" style=\"font-size: 2rem;\"><\/i>\n            <div class=\"small\">Advanced Analytics Dashboard<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"screenshot-overlay position-absolute top-0 end-0 m-2\">\n          <button class=\"btn btn-sm btn-light shadow-sm\" onclick=\"previewScreenshot('advanced-analytics')\">\n            <i class=\"fas fa-eye me-1\"><\/i> Preview\n          <\/button>\n        <\/div>\n      <\/div>\n              <div class=\"card-body\">\n                <div class=\"d-flex align-items-start mb-3\">\n                  <div class=\"avatar avatar-lg me-3\">\n                    <span class=\"avatar-initial bg-label-primary rounded\">\n                      <i class=\"fas fa-chart-line\"><\/i>\n                    <\/span>\n                  <\/div>\n                  <div class=\"flex-grow-1\">\n                    <h5 class=\"card-title mb-1\">Advanced Analytics Dashboard<\/h5>\n                    <p class=\"text-muted small mb-2\">Custom analytics with advanced visualizations<\/p>\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <span class=\"badge bg-warning me-2\">Premium<\/span>\n                      <span class=\"text-muted small\">v2.1.0<\/span>\n                      <span class=\"badge bg-success ms-2\">$49.99<\/span>\n                    <\/div>\n                  <\/div>\n                <\/div>\n                <p class=\"card-text text-muted small\">Create stunning analytics dashboards with custom widgets, real-time data, and interactive charts for better business insights.<\/p>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <div class=\"d-flex gap-1\">\n                    <button class=\"btn btn-sm btn-primary\" onclick=\"purchasePlugin('advanced-analytics')\">\n                      <i class=\"fas fa-shopping-cart me-1\"><\/i> Purchase\n                    <\/button>\n                    <button class=\"btn btn-sm btn-outline-info\" onclick=\"previewScreenshot('advanced-analytics')\">\n                      <i class=\"fas fa-eye me-1\"><\/i> Preview\n                    <\/button>\n                  <\/div>\n                  <small class=\"text-muted\">By CustomDev<\/small>\n                <\/div>\n              <\/div>\n    <\/div>\n  <\/div>\n  \n\n  \n  <div class=\"col-lg-4 col-md-6 mb-4\">\n    <div class=\"card h-100 plugin-card\">\n      <div class=\"card-header d-flex align-items-center justify-content-between\">\n        <h6 class=\"card-title mb-0\">Social Media Tracker<\/h6>\n        <div class=\"d-flex gap-1\">\n          <span class=\"badge bg-info\">Free<\/span>\n          <span class=\"badge bg-secondary\">v1.5.2<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"plugin-screenshot position-relative\">\n        <div class=\"screenshot-placeholder d-flex align-items-center justify-content-center\" style=\"height: 150px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 0.5rem; margin: 1rem;\">\n          <div class=\"text-center text-white\">\n            <i class=\"fas fa-share-alt mb-2\" style=\"font-size: 2rem;\"><\/i>\n            <div class=\"small\">Social Media Tracker<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"screenshot-overlay position-absolute top-0 end-0 m-2\">\n          <button class=\"btn btn-sm btn-light shadow-sm\" onclick=\"previewScreenshot('social-tracker')\">\n            <i class=\"fas fa-eye me-1\"><\/i> Preview\n          <\/button>\n        <\/div>\n      <\/div>\n              <div class=\"card-body\">\n                <div class=\"d-flex align-items-start mb-3\">\n                  <div class=\"avatar avatar-lg me-3\">\n                    <span class=\"avatar-initial bg-label-success rounded\">\n                      <i class=\"fas fa-share-alt\"><\/i>\n                    <\/span>\n                  <\/div>\n                  <div class=\"flex-grow-1\">\n                    <h5 class=\"card-title mb-1\">Social Media Tracker<\/h5>\n                    <p class=\"text-muted small mb-2\">Track social media engagement and reach<\/p>\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <span class=\"badge bg-success me-2\">Free<\/span>\n                      <span class=\"text-muted small\">v1.5.2<\/span>\n                    <\/div>\n                  <\/div>\n                <\/div>\n                <p class=\"card-text text-muted small\">Monitor your social media performance across all platforms with detailed engagement metrics and audience insights.<\/p>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <div class=\"d-flex gap-1\">\n                    <button class=\"btn btn-sm btn-success\" onclick=\"downloadPlugin('social-tracker')\">\n                      <i class=\"fas fa-download me-1\"><\/i> Download\n                    <\/button>\n                    <button class=\"btn btn-sm btn-outline-info\" onclick=\"previewScreenshot('social-tracker')\">\n                      <i class=\"fas fa-eye me-1\"><\/i> Preview\n                    <\/button>\n                  <\/div>\n                  <small class=\"text-muted\">By SocialDev<\/small>\n                <\/div>\n              <\/div>\n    <\/div>\n  <\/div>\n  \n\n  \n  <div class=\"col-lg-4 col-md-6 mb-4\">\n    <div class=\"card h-100 plugin-card\">\n      <div class=\"card-header d-flex align-items-center justify-content-between\">\n        <h6 class=\"card-title mb-0\">E-commerce Insights Pro<\/h6>\n        <div class=\"d-flex gap-1\">\n          <span class=\"badge bg-warning\">Premium<\/span>\n          <span class=\"badge bg-success\">$79.99<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"plugin-screenshot position-relative\">\n        <div class=\"screenshot-placeholder d-flex align-items-center justify-content-center\" style=\"height: 150px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 0.5rem; margin: 1rem;\">\n          <div class=\"text-center text-white\">\n            <i class=\"fas fa-shopping-cart mb-2\" style=\"font-size: 2rem;\"><\/i>\n            <div class=\"small\">E-commerce Insights Pro<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"screenshot-overlay position-absolute top-0 end-0 m-2\">\n          <button class=\"btn btn-sm btn-light shadow-sm\" onclick=\"previewScreenshot('ecommerce-insights')\">\n            <i class=\"fas fa-eye me-1\"><\/i> Preview\n          <\/button>\n        <\/div>\n      <\/div>\n              <div class=\"card-body\">\n                <div class=\"d-flex align-items-start mb-3\">\n                  <div class=\"avatar avatar-lg me-3\">\n                    <span class=\"avatar-initial bg-label-warning rounded\">\n                      <i class=\"fas fa-shopping-cart\"><\/i>\n                    <\/span>\n                  <\/div>\n                  <div class=\"flex-grow-1\">\n                    <h5 class=\"card-title mb-1\">E-commerce Insights Pro<\/h5>\n                    <p class=\"text-muted small mb-2\">Advanced e-commerce analytics and reporting<\/p>\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <span class=\"badge bg-warning me-2\">Premium<\/span>\n                      <span class=\"text-muted small\">v3.0.1<\/span>\n                      <span class=\"badge bg-success ms-2\">$79.99<\/span>\n                    <\/div>\n                  <\/div>\n                <\/div>\n                <p class=\"card-text text-muted small\">Get deep insights into your e-commerce performance with conversion funnels, product analytics, and customer journey tracking.<\/p>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <div class=\"d-flex gap-1\">\n                    <button class=\"btn btn-sm btn-primary\" onclick=\"purchasePlugin('ecommerce-insights')\">\n                      <i class=\"fas fa-shopping-cart me-1\"><\/i> Purchase\n                    <\/button>\n                    <button class=\"btn btn-sm btn-outline-info\" onclick=\"previewScreenshot('ecommerce-insights')\">\n                      <i class=\"fas fa-eye me-1\"><\/i> Preview\n                    <\/button>\n                  <\/div>\n                  <small class=\"text-muted\">By EcommercePro<\/small>\n                <\/div>\n              <\/div>\n    <\/div>\n  <\/div>\n  \n\n  \n  <div class=\"col-lg-4 col-md-6 mb-4\">\n    <div class=\"card h-100 plugin-card\">\n      <div class=\"card-header d-flex align-items-center justify-content-between\">\n        <h6 class=\"card-title mb-0\">Heatmap Visualizer<\/h6>\n        <div class=\"d-flex gap-1\">\n          <span class=\"badge bg-info\">Free<\/span>\n          <span class=\"badge bg-secondary\">v1.2.0<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"plugin-screenshot position-relative\">\n        <div class=\"screenshot-placeholder d-flex align-items-center justify-content-center\" style=\"height: 150px; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 0.5rem; margin: 1rem;\">\n          <div class=\"text-center text-white\">\n            <i class=\"fas fa-fire mb-2\" style=\"font-size: 2rem;\"><\/i>\n            <div class=\"small\">Heatmap Visualizer<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"screenshot-overlay position-absolute top-0 end-0 m-2\">\n          <button class=\"btn btn-sm btn-light shadow-sm\" onclick=\"previewScreenshot('heatmap-visualizer')\">\n            <i class=\"fas fa-eye me-1\"><\/i> Preview\n          <\/button>\n        <\/div>\n      <\/div>\n              <div class=\"card-body\">\n                <div class=\"d-flex align-items-start mb-3\">\n                  <div class=\"avatar avatar-lg me-3\">\n                    <span class=\"avatar-initial bg-label-info rounded\">\n                      <i class=\"fas fa-fire\"><\/i>\n                    <\/span>\n                  <\/div>\n                  <div class=\"flex-grow-1\">\n                    <h5 class=\"card-title mb-1\">Heatmap Visualizer<\/h5>\n                    <p class=\"text-muted small mb-2\">Visualize user behavior with heatmaps<\/p>\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <span class=\"badge bg-success me-2\">Free<\/span>\n                      <span class=\"text-muted small\">v1.2.0<\/span>\n                    <\/div>\n                  <\/div>\n                <\/div>\n                <p class=\"card-text text-muted small\">Create interactive heatmaps to visualize where users click, scroll, and interact on your website for better UX insights.<\/p>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <div class=\"d-flex gap-1\">\n                    <button class=\"btn btn-sm btn-success\" onclick=\"downloadPlugin('heatmap-visualizer')\">\n                      <i class=\"fas fa-download me-1\"><\/i> Download\n                    <\/button>\n                    <button class=\"btn btn-sm btn-outline-info\" onclick=\"previewScreenshot('heatmap-visualizer')\">\n                      <i class=\"fas fa-eye me-1\"><\/i> Preview\n                    <\/button>\n                  <\/div>\n                  <small class=\"text-muted\">By UXDev<\/small>\n                <\/div>\n              <\/div>\n    <\/div>\n  <\/div>\n  \n\n  \n  <div class=\"col-lg-4 col-md-6 mb-4\">\n    <div class=\"card h-100 plugin-card\">\n      <div class=\"card-header d-flex align-items-center justify-content-between\">\n        <h6 class=\"card-title mb-0\">AI Insights Engine<\/h6>\n        <div class=\"d-flex gap-1\">\n          <span class=\"badge bg-warning\">Premium<\/span>\n          <span class=\"badge bg-success\">$199.99<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"plugin-screenshot position-relative\">\n        <div class=\"screenshot-placeholder d-flex align-items-center justify-content-center\" style=\"height: 150px; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); border-radius: 0.5rem; margin: 1rem;\">\n          <div class=\"text-center text-dark\">\n            <i class=\"fas fa-robot mb-2\" style=\"font-size: 2rem;\"><\/i>\n            <div class=\"small\">AI Insights Engine<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"screenshot-overlay position-absolute top-0 end-0 m-2\">\n          <button class=\"btn btn-sm btn-light shadow-sm\" onclick=\"previewScreenshot('ai-insights')\">\n            <i class=\"fas fa-eye me-1\"><\/i> Preview\n          <\/button>\n        <\/div>\n      <\/div>\n              <div class=\"card-body\">\n                <div class=\"d-flex align-items-start mb-3\">\n                  <div class=\"avatar avatar-lg me-3\">\n                    <span class=\"avatar-initial bg-label-danger rounded\">\n                      <i class=\"fas fa-brain\"><\/i>\n                    <\/span>\n                  <\/div>\n                  <div class=\"flex-grow-1\">\n                    <h5 class=\"card-title mb-1\">AI Insights Engine<\/h5>\n                    <p class=\"text-muted small mb-2\">AI-powered analytics and predictions<\/p>\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <span class=\"badge bg-warning me-2\">Premium<\/span>\n                      <span class=\"text-muted small\">v1.0.0<\/span>\n                      <span class=\"badge bg-success ms-2\">$199.99<\/span>\n                    <\/div>\n                  <\/div>\n                <\/div>\n                <p class=\"card-text text-muted small\">Leverage artificial intelligence to get predictive analytics, automated insights, and intelligent recommendations for your business.<\/p>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <div class=\"d-flex gap-1\">\n                    <button class=\"btn btn-sm btn-primary\" onclick=\"purchasePlugin('ai-insights')\">\n                      <i class=\"fas fa-shopping-cart me-1\"><\/i> Purchase\n                    <\/button>\n                    <button class=\"btn btn-sm btn-outline-info\" onclick=\"previewScreenshot('ai-insights')\">\n                      <i class=\"fas fa-eye me-1\"><\/i> Preview\n                    <\/button>\n                  <\/div>\n                  <small class=\"text-muted\">By AI Solutions<\/small>\n                <\/div>\n              <\/div>\n    <\/div>\n  <\/div>\n  \n\n  \n  <div class=\"col-lg-4 col-md-6 mb-4\">\n    <div class=\"card h-100 plugin-card\">\n      <div class=\"card-header d-flex align-items-center justify-content-between\">\n        <h6 class=\"card-title mb-0\">Form Analytics<\/h6>\n        <div class=\"d-flex gap-1\">\n          <span class=\"badge bg-info\">Free<\/span>\n          <span class=\"badge bg-secondary\">v2.3.1<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"plugin-screenshot position-relative\">\n        <div class=\"screenshot-placeholder d-flex align-items-center justify-content-center\" style=\"height: 150px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); border-radius: 0.5rem; margin: 1rem;\">\n          <div class=\"text-center text-dark\">\n            <i class=\"fas fa-wpforms mb-2\" style=\"font-size: 2rem;\"><\/i>\n            <div class=\"small\">Form Analytics<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"screenshot-overlay position-absolute top-0 end-0 m-2\">\n          <button class=\"btn btn-sm btn-light shadow-sm\" onclick=\"previewScreenshot('form-analytics')\">\n            <i class=\"fas fa-eye me-1\"><\/i> Preview\n          <\/button>\n        <\/div>\n      <\/div>\n              <div class=\"card-body\">\n                <div class=\"d-flex align-items-start mb-3\">\n                  <div class=\"avatar avatar-lg me-3\">\n                    <span class=\"avatar-initial bg-label-secondary rounded\">\n                      <i class=\"fas fa-wpforms\"><\/i>\n                    <\/span>\n                  <\/div>\n                  <div class=\"flex-grow-1\">\n                    <h5 class=\"card-title mb-1\">Form Analytics<\/h5>\n                    <p class=\"text-muted small mb-2\">Track form performance and conversions<\/p>\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <span class=\"badge bg-success me-2\">Free<\/span>\n                      <span class=\"text-muted small\">v2.3.1<\/span>\n                    <\/div>\n                  <\/div>\n                <\/div>\n                <p class=\"card-text text-muted small\">Analyze form performance, track conversion rates, identify drop-off points, and optimize your forms for better results.<\/p>\n                <div class=\"d-flex justify-content-between align-items-center\">\n                  <div class=\"d-flex gap-1\">\n                    <button class=\"btn btn-sm btn-success\" onclick=\"downloadPlugin('form-analytics')\">\n                      <i class=\"fas fa-download me-1\"><\/i> Download\n                    <\/button>\n                    <button class=\"btn btn-sm btn-outline-info\" onclick=\"previewScreenshot('form-analytics')\">\n                      <i class=\"fas fa-eye me-1\"><\/i> Preview\n                    <\/button>\n                  <\/div>\n                  <small class=\"text-muted\">By FormDev<\/small>\n                <\/div>\n              <\/div>\n    <\/div>\n  <\/div>\n  \n<\/div>\n@endsection\n\n@section('styles')\n<style>\n.plugin-card {\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n    border: 1px solid var(--border-color);\n}\n\n.plugin-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(0,0,0,0.15);\n}\n\n.plugin-screenshot {\n    position: relative;\n    overflow: hidden;\n}\n\n.screenshot-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0,0,0,0.7);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.plugin-screenshot:hover .screenshot-overlay {\n    opacity: 1;\n}\n\n.plugin-screenshot img {\n    transition: transform 0.3s ease;\n}\n\n.plugin-screenshot:hover img {\n    transform: scale(1.05);\n}\n\n.price-badge {\n    font-size: 0.8rem;\n    font-weight: 600;\n}\n\n.preview-modal .modal-dialog {\n    max-width: 90vw;\n    max-height: 90vh;\n}\n\n.preview-modal .modal-body {\n    padding: 0;\n}\n\n.preview-modal img {\n    width: 100%;\n    height: auto;\n    max-height: 80vh;\n    object-fit: contain;\n}\n<\/style>\n@endsection\n\n@section('scripts')\n<script>\n\/\/ Plugin search functionality\ndocument.getElementById('pluginSearch').addEventListener('input', function(e) {\n    const searchTerm = e.target.value.toLowerCase();\n    const pluginCards = document.querySelectorAll('#pluginsGrid .card');\n    \n    pluginCards.forEach(card => {\n        const pluginName = card.querySelector('.card-title').textContent.toLowerCase();\n        const pluginDescription = card.querySelector('.card-text').textContent.toLowerCase();\n        \n        if (pluginName.includes(searchTerm) || pluginDescription.includes(searchTerm)) {\n            card.closest('.col-lg-4').style.display = 'block';\n        } else {\n            card.closest('.col-lg-4').style.display = 'none';\n        }\n    });\n});\n\n\/\/ Category filter functionality\ndocument.getElementById('categoryFilter').addEventListener('change', function(e) {\n    const selectedCategory = e.target.value;\n    const pluginCards = document.querySelectorAll('#pluginsGrid .card');\n    \n    pluginCards.forEach(card => {\n        if (selectedCategory === 'all') {\n            card.closest('.col-lg-4').style.display = 'block';\n        } else {\n            \/\/ This is a simplified filter - in a real app, you'd have category data\n            card.closest('.col-lg-4').style.display = 'block';\n        }\n    });\n});\n\n\/\/ Screenshot preview functionality\nfunction previewScreenshot(pluginId) {\n    \/\/ Create modal for screenshot preview\n    const modalHtml = `\n        <div class=\"modal fade preview-modal\" id=\"screenshotModal\" tabindex=\"-1\" aria-labelledby=\"screenshotModalLabel\" aria-hidden=\"true\">\n            <div class=\"modal-dialog modal-xl\">\n                <div class=\"modal-content\">\n                    <div class=\"modal-header\">\n                        <h5 class=\"modal-title\" id=\"screenshotModalLabel\">Plugin Screenshot Preview<\/h5>\n                        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><\/button>\n                    <\/div>\n                    <div class=\"modal-body\">\n                        <img src=\"https:\/\/via.placeholder.com\/1200x800\/1a1a1a\/ffffff?text=Full+Screenshot+Preview\" alt=\"Plugin Screenshot\" class=\"img-fluid\">\n                    <\/div>\n                    <div class=\"modal-footer\">\n                        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    `;\n    \n    \/\/ Remove existing modal if any\n    const existingModal = document.getElementById('screenshotModal');\n    if (existingModal) {\n        existingModal.remove();\n    }\n    \n    \/\/ Add modal to body\n    document.body.insertAdjacentHTML('beforeend', modalHtml);\n    \n    \/\/ Show modal\n    const modal = new bootstrap.Modal(document.getElementById('screenshotModal'));\n    modal.show();\n    \n    \/\/ Clean up modal when hidden\n    document.getElementById('screenshotModal').addEventListener('hidden.bs.modal', function() {\n        this.remove();\n    });\n}\n\n\/\/ Purchase plugin functionality\nfunction purchasePlugin(pluginId) {\n    \/\/ In a real app, this would redirect to payment processor\n    const pluginName = document.querySelector(`[onclick=\"purchasePlugin('${pluginId}')\"]`).closest('.card').querySelector('.card-title').textContent;\n    \n    if (confirm(`Are you sure you want to purchase \"${pluginName}\"?`)) {\n        \/\/ Simulate purchase process\n        const button = document.querySelector(`[onclick=\"purchasePlugin('${pluginId}')\"]`);\n        const originalText = button.innerHTML;\n        \n        button.innerHTML = '<i class=\"fas fa-spinner fa-spin me-1\"><\/i> Processing...';\n        button.disabled = true;\n        \n        setTimeout(() => {\n            button.innerHTML = '<i class=\"fas fa-check me-1\"><\/i> Purchased';\n            button.className = 'btn btn-sm btn-success';\n            \n            \/\/ Show success message\n            showNotification('Plugin purchased successfully!', 'success');\n            \n            \/\/ Reset button after 3 seconds\n            setTimeout(() => {\n                button.innerHTML = originalText;\n                button.className = 'btn btn-sm btn-primary';\n                button.disabled = false;\n            }, 3000);\n        }, 2000);\n    }\n}\n\n\/\/ Download plugin functionality\nfunction downloadPlugin(pluginId) {\n    \/\/ In a real app, this would trigger actual download\n    const pluginName = document.querySelector(`[onclick=\"downloadPlugin('${pluginId}')\"]`).closest('.card').querySelector('.card-title').textContent;\n    \n    if (confirm(`Download \"${pluginName}\"?`)) {\n        \/\/ Simulate download process\n        const button = document.querySelector(`[onclick=\"downloadPlugin('${pluginId}')\"]`);\n        const originalText = button.innerHTML;\n        \n        button.innerHTML = '<i class=\"fas fa-spinner fa-spin me-1\"><\/i> Downloading...';\n        button.disabled = true;\n        \n        setTimeout(() => {\n            button.innerHTML = '<i class=\"fas fa-check me-1\"><\/i> Downloaded';\n            button.className = 'btn btn-sm btn-success';\n            \n            \/\/ Show success message\n            showNotification('Plugin downloaded successfully!', 'success');\n            \n            \/\/ Reset button after 3 seconds\n            setTimeout(() => {\n                button.innerHTML = originalText;\n                button.className = 'btn btn-sm btn-success';\n                button.disabled = false;\n            }, 3000);\n        }, 2000);\n    }\n}\n\n\/\/ Notification system\nfunction showNotification(message, type = 'info') {\n    const notification = document.createElement('div');\n    notification.className = `alert alert-${type} alert-dismissible fade show position-fixed`;\n    notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';\n    notification.innerHTML = `\n        ${message}\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"><\/button>\n    `;\n    \n    document.body.appendChild(notification);\n    \n    \/\/ Auto remove after 5 seconds\n    setTimeout(() => {\n        if (notification.parentNode) {\n            notification.remove();\n        }\n    }, 5000);\n}\n\n\/\/ Plugin action handlers\ndocument.addEventListener('click', function(e) {\n    if (e.target.textContent === 'Configure') {\n        \/\/ Handle configure action\n        console.log('Configure plugin clicked');\n        showNotification('Configuration panel would open here', 'info');\n    } else if (e.target.textContent === 'Activate') {\n        \/\/ Handle activate action\n        console.log('Activate plugin clicked');\n        e.target.textContent = 'Active';\n        e.target.className = 'btn btn-sm btn-outline-secondary';\n        e.target.nextElementSibling.textContent = 'Deactivate';\n        showNotification('Plugin activated successfully!', 'success');\n    } else if (e.target.textContent === 'Deactivate') {\n        \/\/ Handle deactivate action\n        console.log('Deactivate plugin clicked');\n        e.target.textContent = 'Activate';\n        e.target.className = 'btn btn-sm btn-outline-success';\n        e.target.nextElementSibling.textContent = 'Info';\n        showNotification('Plugin deactivated successfully!', 'info');\n    } else if (e.target.textContent === 'Info') {\n        \/\/ Handle info action\n        console.log('Info plugin clicked');\n        showNotification('Plugin information would be displayed here', 'info');\n    }\n});\n<\/script>\n@endsection\n"
}

JSON object with view file paths or inline content.

Assets (Optional - JSON) JSON array of asset file paths.