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

@push('styles')
    <style>
        .settings-card {
            border: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        .settings-group {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .settings-group h6 {
            color: #495057;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e9ecef;
        }

        .form-help-text {
            font-size: 12px;
            color: #6c757d;
            margin-top: 5px;
        }

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

        .setting-item {
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #007bff;
        }

        .setting-item.setting-updated {
            border-left-color: #28a745;
            background: #f8fff9;
        }

        .setting-tabs .nav-link {
            border-radius: 8px 8px 0 0;
        }

        .setting-tabs .nav-link.active {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }

        .reset-button {
            position: relative;
        }

        .unsaved-indicator {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 10px;
            height: 10px;
            background: #dc3545;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }

            100% {
                opacity: 1;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Plugin Header -->
    <div class="plugin-header">
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold mb-2">{{ $pluginData['title'] ?? $pluginName }} Settings</h1>
                <p class="mb-0 text-white">Configure plugin settings and preferences</p>
            </div>
            <div>
                <span class="bg-white text-gray-800 text-sm px-3 py-1 rounded">v{{ $pluginData['version'] ?? '1.0.0' }}</span>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <div class="lg:col-span-3">
            <!-- Settings Form -->
            <form id="plugin-settings-form" method="POST" action="{{ route('admin.plugins.update-settings', $plugin) }}">
                @csrf
                @method('PUT')

                <!-- Settings Tabs -->
                @if (isset($settingsConfig['groups']) && count($settingsConfig['groups']) > 1)
                    <div class="border-b border-gray-200 mb-4">
                        <nav class="flex space-x-8 setting-tabs" id="settingsTabs">
                            @foreach ($settingsConfig['groups'] as $groupKey => $group)
                                <button class="py-2 px-1 {{ $loop->first ? 'border-b-2 border-blue-500 text-blue-600' : 'border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }} font-medium text-sm nav-link {{ $loop->first ? 'active' : '' }}" id="{{ $groupKey }}-tab"
                                    data-bs-toggle="tab" data-bs-target="#{{ $groupKey }}" type="button"
                                    role="tab">
                                    {{ $group['title'] ?? ucfirst($groupKey) }}
                                </button>
                            @endforeach
                        </nav>
                    </div>

                    <!-- Tab Content -->
                    <div id="settingsTabsContent">
                        @foreach ($settingsConfig['groups'] as $groupKey => $group)
                            <div class="{{ $loop->first ? 'block' : 'hidden' }}" id="{{ $groupKey }}"
                                role="tabpanel">
                                <div class="settings-card">
                                    <div class="px-6 py-4">
                                        @if (isset($group['description']))
                                            <p class="text-gray-500 mb-4">{{ $group['description'] }}</p>
                                        @endif

                                        @foreach ($group['fields'] as $fieldKey => $field)
                                            @include('backend::plugins.partials.setting-field', [
                                                'fieldKey' => $fieldKey,
                                                'field' => $field,
                                                'value' => $settings[$fieldKey] ?? ($field['default'] ?? ''),
                                                'pluginName' => $pluginName,
                                            ])
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <!-- Single Group Settings -->
                    <div class="settings-card">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h5 class="text-lg font-semibold mb-0">Plugin Configuration</h5>
                        </div>
                        <div class="px-6 py-4">
                            @if (isset($settingsConfig['fields']))
                                @foreach ($settingsConfig['fields'] as $fieldKey => $field)
                                    @include('backend::plugins.partials.setting-field', [
                                        'fieldKey' => $fieldKey,
                                        'field' => $field,
                                        'value' => $settings[$fieldKey] ?? ($field['default'] ?? ''),
                                        'pluginName' => $pluginName,
                                    ])
                                @endforeach
                            @else
                                <div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded">
                                    <i class="fas fa-info-circle"></i>
                                    This plugin does not have any configurable settings.
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                <!-- Save Actions -->
                @if (isset($settingsConfig['fields']) || isset($settingsConfig['groups']))
                    <div class="settings-card mt-4">
                        <div class="px-6 py-4">
                            <div class="flex justify-between items-center">
                                <div class="flex space-x-2">
                                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition duration-200 relative" id="save-settings-btn">
                                        <i class="fas fa-save"></i> Save Settings
                                        <span class="unsaved-indicator hidden absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-pulse"></span>
                                    </button>
                                    <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded transition duration-200" id="reset-settings-btn">
                                        <i class="fas fa-undo"></i> Reset to Defaults
                                    </button>
                                </div>
                                <div>
                                    <small class="text-gray-500" id="last-saved">
                                        Last saved: {{ $lastUpdated ? $lastUpdated->format('M d, Y H:i') : 'Never' }}
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </form>
        </div>

        <div>
            <!-- Plugin Info -->
            <div class="settings-card mb-4">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h6 class="text-base font-semibold mb-0">Plugin Information</h6>
                </div>
                <div class="px-6 py-4">
                    <dl class="grid grid-cols-3 gap-2">
                        <dt class="text-sm font-medium text-gray-500">Status:</dt>
                        <dd class="text-sm text-gray-900 col-span-2">
                            @if ($pluginData['is_active'] ?? false)
                                <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['author']))
                            <dt class="text-sm font-medium text-gray-500">Author:</dt>
                            <dd class="text-sm text-gray-900 col-span-2">
                                {{ is_array($pluginData['author']) ? $pluginData['author']['name'] : $pluginData['author'] }}
                            </dd>
                        @endif
                    </dl>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="settings-card mb-4">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h6 class="text-base font-semibold mb-0">Quick Actions</h6>
                </div>
                <div class="px-6 py-4">
                    <div class="space-y-2">
                        <a href="{{ route('admin.plugins.show', $plugin) }}" class="w-full border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-medium py-2 px-4 rounded text-sm transition duration-200 inline-block text-center">
                            <i class="fas fa-eye"></i> View Details
                        </a>
                        @if ($pluginData['is_active'] ?? false)
                            <button class="w-full border border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-white font-medium py-2 px-4 rounded text-sm transition duration-200" onclick="togglePlugin('deactivate')">
                                <i class="fas fa-pause"></i> Deactivate
                            </button>
                        @else
                            <button class="w-full border border-green-500 text-green-500 hover:bg-green-500 hover:text-white font-medium py-2 px-4 rounded text-sm transition duration-200" onclick="togglePlugin('activate')">
                                <i class="fas fa-play"></i> Activate
                            </button>
                        @endif
                        <button class="w-full border border-gray-500 text-gray-500 hover:bg-gray-500 hover:text-white font-medium py-2 px-4 rounded text-sm transition duration-200" onclick="clearCache()">
                            <i class="fas fa-trash"></i> Clear Cache
                        </button>
                    </div>
                </div>
            </div>

            <!-- Settings Help -->
            @if (isset($settingsConfig['help']))
                <div class="settings-card">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h6 class="text-base font-semibold mb-0">Help & Documentation</h6>
                    </div>
                    <div class="px-6 py-4">
                        <p>{{ $settingsConfig['help']['description'] ?? 'Configure the plugin settings according to your needs.' }}
                        </p>

                        @if (isset($settingsConfig['help']['links']))
                            <h6 class="text-base font-medium mb-2">Helpful Links:</h6>
                            <ul class="space-y-2">
                                @foreach ($settingsConfig['help']['links'] as $link)
                                    <li>
                                        <a href="{{ $link['url'] }}" target="_blank" class="text-blue-600 hover:text-blue-500 no-underline">
                                            <i class="fas fa-external-link-alt"></i> {{ $link['title'] }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            let originalFormData = $('#plugin-settings-form').serialize();
            let hasUnsavedChanges = false;

            // 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', 'active');
                            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', 'active');
                        
                        // 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');
                        }
                    });
                });
            });

            // Track form changes
            $('#plugin-settings-form input, #plugin-settings-form select, #plugin-settings-form textarea').on(
                'change input',
                function() {
                    const currentFormData = $('#plugin-settings-form').serialize();
                    hasUnsavedChanges = currentFormData !== originalFormData;

                    if (hasUnsavedChanges) {
                        $('.unsaved-indicator').removeClass('hidden');
                    } else {
                        $('.unsaved-indicator').addClass('hidden');
                    }
                });

            // Form submission
            $('#plugin-settings-form').on('submit', function(e) {
                e.preventDefault();

                const $submitBtn = $('#save-settings-btn');
                const originalText = $submitBtn.html();
                $submitBtn.html('<i class="fas fa-spinner fa-spin"></i> Saving...').prop('disabled', true);

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'PUT',
                    data: $(this).serialize(),
                    success: function(response) {
                        if (response.success) {
                            toastr.success('Settings saved successfully!');
                            originalFormData = $('#plugin-settings-form').serialize();
                            hasUnsavedChanges = false;
                            $('.unsaved-indicator').addClass('hidden');
                            $('#last-saved').text('Last saved: ' + new Date().toLocaleString());
                        } else {
                            toastr.error(response.message || 'Failed to save settings');
                        }
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON;
                        if (response && response.errors) {
                            $.each(response.errors, function(field, messages) {
                                toastr.error(messages[0]);
                            });
                        } else {
                            toastr.error('Failed to save settings');
                        }
                    },
                    complete: function() {
                        $submitBtn.html(originalText).prop('disabled', false);
                    }
                });
            });

            // Reset settings
            $('#reset-settings-btn').on('click', function() {
                if (confirm('Are you sure you want to reset all settings to their default values?')) {
                    $.ajax({
                        url: '{{ route('admin.plugins.update-settings', $plugin) }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success('Settings reset to defaults');
                                location.reload();
                            } else {
                                toastr.error(response.message || 'Failed to reset settings');
                            }
                        },
                        error: function() {
                            toastr.error('Failed to reset settings');
                        }
                    });
                }
            });

            // Warn about unsaved changes
            window.addEventListener('beforeunload', function(e) {
                if (hasUnsavedChanges) {
                    e.preventDefault();
                    e.returnValue = 'You have unsaved changes. Are you sure you want to leave?';
                }
            });

            // Image upload preview
            $('input[type="file"]').on('change', function() {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $(this).siblings('.image-preview').attr('src', e.target.result).show();
                    }.bind(this);
                    reader.readAsDataURL(file);
                }
            });
        });

        function togglePlugin(action) {
            if (hasUnsavedChanges && !confirm('You have unsaved changes. Continue anyway?')) {
                return;
            }

            $.ajax({
                url: `{{ route('admin.plugins.index') }}/{{ $plugin }}/${action}`,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        setTimeout(() => location.reload(), 1500);
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function() {
                    toastr.error('Operation failed');
                }
            });
        }

        function clearCache() {
            $.ajax({
                url: '{{ route('admin.plugins.clear-cache') }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    plugin: '{{ $plugin }}'
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success('Plugin cache cleared');
                    }
                },
                error: function() {
                    toastr.error('Failed to clear cache');
                }
            });
        }
    </script>
@endpush