@extends('layouts.main')

@section('title', 'Settings')

@section('content')
    <!-- start page content -->
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card">
                <div class="block-heading-panel d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="heading-avatar">
                            <i class="bx bx-cog"></i>
                        </div>
                        <div class="block-heading">
                            <h3>Settings</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-shield-check"></i>
                                System Configuration
                            </h5>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-primary" id="testConnectionBtn">
                            <i class="bx bx-wifi"></i> Test Connection
                        </button>
                    </div>
                </div>

                <!-- Settings Tabs -->
                <ul class="nav nav-tabs" id="settingsTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="fabric-tab" data-bs-toggle="tab" data-bs-target="#fabric" type="button" role="tab" aria-controls="fabric" aria-selected="true">
                            <i class="bx bx-cloud"></i> Microsoft Fabric
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="email-tab" data-bs-toggle="tab" data-bs-target="#email" type="button" role="tab" aria-controls="email" aria-selected="false">
                            <i class="bx bx-envelope"></i> Email Settings
                        </button>
                    </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content" id="settingsTabContent">
                    <!-- Fabric Settings Tab -->
                    <div class="tab-pane fade show active" id="fabric" role="tabpanel" aria-labelledby="fabric-tab">
                        <div class="p-4">
                            <!-- Warning Notice -->
                            <div class="alert alert-warning d-flex align-items-center" role="alert">
                                <i class="bx bx-error-circle me-3 fs-4"></i>
                                <div>
                                    <strong>Important:</strong> Changing these values will reset all fabric workspaces and items for all companies. 
                                    Users will need to reload their workspace data after this change.
                                </div>
                            </div>

                            <form id="fabricSettingsForm">
                                @csrf
                                
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="fabric_client_id" class="form-label">
                                            <i class="bx bx-key"></i> Client ID <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control" id="fabric_client_id" name="fabric_client_id" 
                                               value="{{ $fabricSettings['client_id'] }}" required>
                                        <small class="text-muted">Microsoft Fabric Application Client ID</small>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="fabric_tenant_id" class="form-label">
                                            <i class="bx bx-building"></i> Tenant ID <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control" id="fabric_tenant_id" name="fabric_tenant_id" 
                                               value="{{ $fabricSettings['tenant_id'] }}" required>
                                        <small class="text-muted">Microsoft Azure Tenant ID</small>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label for="fabric_client_secret" class="form-label">
                                            <i class="bx bx-lock"></i> Client Secret <span class="text-danger">*</span>
                                        </label>
                                        <div class="input-group">
                                            <input type="password" class="form-control" id="fabric_client_secret" name="fabric_client_secret" 
                                                   value="{{ $fabricSettings['client_secret'] }}" required>
                                            <button class="btn btn-outline-secondary" type="button" id="toggleClientSecret">
                                                <i class="bx bx-show"></i>
                                            </button>
                                        </div>
                                        <small class="text-muted">Microsoft Fabric Application Client Secret (encrypted in database)</small>
                                    </div>
                                </div>

                                <div class="row mb-3 d-none">
                                    <div class="col-md-12">
                                        <label for="metrics_workspace_id" class="form-label">
                                            <i class="bx bx-bar-chart"></i> Metrics Workspace ID
                                        </label>
                                        <input type="text" class="form-control" id="metrics_workspace_id" name="metrics_workspace_id"
                                               value="{{ $fabricSettings['metrics_workspace_id'] ?? '' }}" placeholder="Enter Metrics Workspace ID">
                                        <small class="text-muted">Microsoft Fabric Workspace ID for capacity metrics</small>
                                    </div>
                                </div>

                                <div class="row mb-3 d-none">
                                    <div class="col-md-12">
                                        <label for="capacity_id" class="form-label">
                                            <i class="bx bx-server"></i> Capacity ID
                                        </label>
                                        <input type="text" class="form-control" id="capacity_id" name="capacity_id"
                                               value="{{ $fabricSettings['capacity_id'] ?? '' }}" placeholder="Enter Fabric Capacity ID">
                                        <small class="text-muted">Microsoft Fabric Capacity ID for capacity management and monitoring</small>
                                    </div>
                                </div>

                                <!-- Security Information -->
                                <div class="alert alert-info d-flex align-items-center" role="alert">
                                    <i class="bx bx-info-circle me-3 fs-4"></i>
                                    <div>
                                        <strong>Security Note:</strong> All values are encrypted before being stored in the database. 
                                        Only super-admin users can view and modify these settings.
                                    </div>
                                </div>

                                <div class="d-flex gap-2">
                                    <button type="submit" class="btn btn-primary" id="saveFabricBtn">
                                        <i class="bx bx-save"></i> Save Settings
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" id="resetFormBtn">
                                        <i class="bx bx-reset"></i> Reset
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Email Settings Tab -->
                    <div class="tab-pane fade" id="email" role="tabpanel" aria-labelledby="email-tab">
                        <div class="p-4">
                            <form id="emailSettingsForm">
                                @csrf
                                
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label for="support_email" class="form-label">
                                            <i class="bx bx-envelope"></i> Support Email Address <span class="text-danger">*</span>
                                        </label>
                                        <input type="email" class="form-control" id="support_email" name="support_email" 
                                               value="{{ $emailSettings['support_email'] }}" required>
                                        <small class="text-muted">Email address used for all "Contact Support" links throughout the application</small>
                                    </div>
                                </div>

                                <!-- Information -->
                                <div class="alert alert-info d-flex align-items-center" role="alert">
                                    <i class="bx bx-info-circle me-3 fs-4"></i>
                                    <div>
                                        <strong>Note:</strong> This email address will be used for all support contact links across the application. 
                                        Changes will take effect immediately for all users.
                                    </div>
                                </div>

                                <div class="d-flex gap-2">
                                    <button type="submit" class="btn btn-primary" id="saveEmailBtn">
                                        <i class="bx bx-save"></i> Save Settings
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" id="resetEmailFormBtn">
                                        <i class="bx bx-reset"></i> Reset
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end page content -->
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fabricForm = document.getElementById('fabricSettingsForm');
    const saveFabricBtn = document.getElementById('saveFabricBtn');
    const testConnectionBtn = document.getElementById('testConnectionBtn');
    const toggleClientSecret = document.getElementById('toggleClientSecret');
    const clientSecretInput = document.getElementById('fabric_client_secret');
    const resetFormBtn = document.getElementById('resetFormBtn');

    // Toggle client secret visibility
    toggleClientSecret.addEventListener('click', function() {
        const type = clientSecretInput.getAttribute('type') === 'password' ? 'text' : 'password';
        clientSecretInput.setAttribute('type', type);
        
        const icon = this.querySelector('i');
        if (type === 'text') {
            icon.className = 'bx bx-hide';
        } else {
            icon.className = 'bx bx-show';
        }
    });

    // Reset form to original values
    resetFormBtn.addEventListener('click', function() {
        bootbox.confirm({
            title: 'Reset Form',
            message: 'Are you sure you want to reset the form to original values?',
            buttons: {
                confirm: {
                    label: '<i class="bx bx-check"></i> Yes, Reset',
                    className: 'btn-primary'
                },
                cancel: {
                    label: '<i class="bx bx-x"></i> Cancel',
                    className: 'btn-secondary'
                }
            },
            callback: function (result) {
                if (result) {
                    fabricForm.reset();
                    showAlert('info', 'Form has been reset to original values.');
                }
            }
        });
    });

    // Handle fabric settings form submission
    fabricForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Set loading state
        const originalBtnText = saveFabricBtn.innerHTML;
        saveFabricBtn.innerHTML = '<i class="bx bx-loader bx-spin"></i> Saving...';
        saveFabricBtn.disabled = true;

        // Get form data
        const formData = new FormData(this);
        
        // Convert to JSON
        const data = Object.fromEntries(formData);

        fetch('{{ route("settings.fabric.update") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            // Reset button state
            saveFabricBtn.innerHTML = originalBtnText;
            saveFabricBtn.disabled = false;

            if (data.success) {
                // Show success message
                showAlert('success', data.message);
                
                // If values changed, show additional notification
                if (data.values_changed) {
                    setTimeout(() => {
                        showAlert('info', 'All workspace data will be refreshed on next access.');
                    }, 2000);
                }
            } else {
                showAlert('danger', data.message || 'Error updating settings');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            // Reset button state
            saveFabricBtn.innerHTML = originalBtnText;
            saveFabricBtn.disabled = false;
            showAlert('danger', 'Network error occurred');
        });
    });

    // Test fabric connection
    testConnectionBtn.addEventListener('click', function() {
        // Set loading state
        const originalBtnText = this.innerHTML;
        this.innerHTML = '<i class="bx bx-loader bx-spin"></i> Testing...';
        this.disabled = true;

        fetch('{{ route("settings.fabric.test") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            // Reset button state
            this.innerHTML = originalBtnText;
            this.disabled = false;

            if (data.success) {
                showAlert('success', data.message);
            } else {
                showAlert('danger', data.message || 'Connection test failed');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            // Reset button state
            this.innerHTML = originalBtnText;
            this.disabled = false;
            showAlert('danger', 'Network error occurred during connection test');
        });
    });

    // Utility function to show alerts
    function showAlert(type, message) {
        // Remove existing alerts
        const existingAlerts = document.querySelectorAll('.alert-floating');
        existingAlerts.forEach(alert => alert.remove());

        // Create new alert
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show alert-floating`;
        alertDiv.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
        alertDiv.innerHTML = `
            <strong>${type === 'success' ? 'Success!' : type === 'danger' ? 'Error!' : 'Info!'}</strong> ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        `;

        document.body.appendChild(alertDiv);

        // Auto-remove after 5 seconds
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    }

    // Email Settings Form Handling
    const emailForm = document.getElementById('emailSettingsForm');
    const saveEmailBtn = document.getElementById('saveEmailBtn');
    const resetEmailFormBtn = document.getElementById('resetEmailFormBtn');

    // Reset email form to original values
    resetEmailFormBtn.addEventListener('click', function() {
        bootbox.confirm({
            title: 'Reset Form',
            message: 'Are you sure you want to reset the email form to original values?',
            buttons: {
                confirm: {
                    label: '<i class="bx bx-check"></i> Yes, Reset',
                    className: 'btn-primary'
                },
                cancel: {
                    label: '<i class="bx bx-x"></i> Cancel',
                    className: 'btn-secondary'
                }
            },
            callback: function (result) {
                if (result) {
                    emailForm.reset();
                    showAlert('info', 'Email form has been reset to original values.');
                }
            }
        });
    });

    // Handle email settings form submission
    emailForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Set loading state
        const originalBtnText = saveEmailBtn.innerHTML;
        saveEmailBtn.innerHTML = '<i class="bx bx-loader bx-spin"></i> Saving...';
        saveEmailBtn.disabled = true;

        // Get form data
        const formData = new FormData(this);
        
        // Convert to JSON
        const data = Object.fromEntries(formData);

        fetch('{{ route("settings.email.update") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
            } else {
                showAlert('danger', data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('danger', 'An error occurred while saving settings.');
        })
        .finally(() => {
            // Reset button state
            saveEmailBtn.innerHTML = originalBtnText;
            saveEmailBtn.disabled = false;
        });
    });
});
</script>
@endsection