{{-- resources/views/admin/notifications/settings.blade.php --}}
@extends('admin.layouts.app')

@section('title', __('Notification Settings'))

@section('breadcrumb')
    <li class="breadcrumb-item">
        <a href="{{ route('admin.notifications.index') }}">{{ __('Notifications') }}</a>
    </li>
    <li class="breadcrumb-item active">{{ __('Settings') }}</li>
@endsection

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('Notification Settings') }}</h1>
        <p class="text-muted mb-0">{{ __('Configure your notification preferences and system alerts') }}</p>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-secondary" onclick="resetToDefaults()">
            <i class="fas fa-undo me-2"></i>
            {{ __('Reset to Defaults') }}
        </button>
        <button class="btn btn-primary-custom" onclick="saveSettings()">
            <i class="fas fa-save me-2"></i>
            {{ __('Save Settings') }}
        </button>
    </div>
@endsection

@section('content')
    <div class="row g-4">
        {{-- General Settings --}}
        <div class="col-12">
            <div class="admin-card">
                <div class="card-header-custom">
                    <h5 class="mb-0">
                        <i class="fas fa-cog text-primary me-2"></i>
                        {{ __('General Settings') }}
                    </h5>
                </div>
                <div class="card-body-custom">
                    <form id="settingsForm">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="enableNotifications" checked>
                                    <label class="form-check-label" for="enableNotifications">
                                        <strong>{{ __('Enable Notifications') }}</strong>
                                        <small
                                            class="d-block text-muted">{{ __('Turn on/off all admin notifications') }}</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="enableSounds" checked>
                                    <label class="form-check-label" for="enableSounds">
                                        <strong>{{ __('Enable Sound Alerts') }}</strong>
                                        <small
                                            class="d-block text-muted">{{ __('Play sound when new notifications arrive') }}</small>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ __('Auto-refresh Interval') }}</label>
                                <select class="form-select" id="refreshInterval">
                                    <option value="30">{{ __('Every 30 seconds') }}</option>
                                    <option value="60">{{ __('Every minute') }}</option>
                                    <option value="300">{{ __('Every 5 minutes') }}</option>
                                    <option value="600">{{ __('Every 10 minutes') }}</option>
                                    <option value="0">{{ __('Disabled') }}</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ __('Cleanup Old Notifications') }}</label>
                                <select class="form-select" id="cleanupPeriod">
                                    <option value="7">{{ __('After 7 days') }}</option>
                                    <option value="30">{{ __('After 30 days') }}</option>
                                    <option value="90">{{ __('After 90 days') }}</option>
                                    <option value="0">{{ __('Never') }}</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Notification Types --}}
        <div class="col-12">
            <div class="admin-card">
                <div class="card-header-custom">
                    <h5 class="mb-0">
                        <i class="fas fa-bell text-success me-2"></i>
                        {{ __('Notification Types') }}
                    </h5>
                </div>
                <div class="card-body-custom">
                    <p class="text-muted mb-4">{{ __('Choose which types of notifications you want to receive') }}</p>

                    <div class="row g-4">
                        {{-- Order Notifications --}}
                        <div class="col-lg-6">
                            <div class="notification-type-card p-3 border rounded">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="stats-icon bg-success me-3" style="width: 40px; height: 40px;">
                                        <i class="fas fa-shopping-cart"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-0">{{ __('Order Notifications') }}</h6>
                                        <small
                                            class="text-muted">{{ __('New orders, cancellations, payments') }}</small>
                                    </div>
                                </div>

                                <div class="notification-options">
                                    <div class="form-check form-switch mb-2">
                                        <input class="form-check-input" type="checkbox" id="newOrder" checked>
                                        <label class="form-check-label" for="newOrder">
                                            {{ __('New Order Placed') }}
                                        </label>
                                    </div>
                                    <div class="form-check form-switch mb-2">
                                        <input class="form-check-input" type="checkbox" id="orderCancelled" checked>
                                        <label class="form-check-label" for="orderCancelled">
                                            {{ __('Order Cancelled') }}
                                        </label>
                                    </div>
                                    <div class="form-check form-switch mb-2">
                                        <input class="form-check-input" type="checkbox" id="paymentReceived" checked>
                                        <label class="form-check-label" for="paymentReceived">
                                            {{ __('Payment Received') }}
                                        </label>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="orderShipped">
                                        <label class="form-check-label" for="orderShipped">
                                            {{ __('Order Shipped') }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Stock Notifications --}}
                        <div class="col-lg-6">
                            <div class="notification-type-card p-3 border rounded">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="stats-icon bg-warning me-3" style="width: 40px; height: 40px;">
                                        <i class="fas fa-boxes"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-0">{{ __('Stock Notifications') }}</h6>
                                        <small class="text-muted">{{ __('Low stock, out of stock alerts') }}</small>
                                    </div>
                                </div>

                                <div class="notification-options">
                                    <div class="form-check form-switch mb-2">
                                        <input class="form-check-input" type="checkbox" id="lowStock" checked>
                                        <label class="form-check-label" for="lowStock">
                                            {{ __('Low Stock Alert') }}
                                        </label>
                                    </div>
                                    <div class="form-check form-switch mb-2">
                                        <input class="form-check-input" type="checkbox" id="outOfStock" checked>
                                        <label class="form-check-label" for="outOfStock">
                                            {{ __('Out of Stock Alert') }}
                                        </label>
                                    </div>
                                    <div class="mb-2">
                                        <label class="form-label small">{{ __('Low Stock Threshold') }}</label>
                                        <input type="number" class="form-control form-control-sm" id="stockThreshold"
                                               value="10" min="1" max="100">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- User Notifications --}}
                        <div class="col-lg-6">
                            <div class="notification-type-card p-3 border rounded">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="stats-icon bg-info me-3" style="width: 40px; height: 40px;">
                                        <i class="fas fa-users"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-0">{{ __('User Notifications') }}</h6>
                                        <small class="text-muted">{{ __('New registrations, reviews') }}</small>
                                    </div>
                                </div>

                                <div class="notification-options">
                                    <div class="form-check form-switch mb-2">
                                        <input class="form-check-input" type="checkbox" id="newUser">
                                        <label class="form-check-label" for="newUser">
                                            {{ __('New User Registration') }}
                                        </label>
                                    </div>
                                    <div class="form-check form-switch mb-2">
                                        <input class="form-check-input" type="checkbox" id="newReview">
                                        <label class="form-check-label" for="newReview">
                                            {{ __('New Product Review') }}
                                        </label>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="contactMessage">
                                        <label class="form-check-label" for="contactMessage">
                                            {{ __('Contact Form Messages') }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- System Notifications --}}
                        <div class="col-lg-6">
                            <div class="notification-type-card p-3 border rounded">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="stats-icon bg-danger me-3" style="width: 40px; height: 40px;">
                                        <i class="fas fa-exclamation-triangle"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-0">{{ __('System Notifications') }}</h6>
                                        <small class="text-muted">{{ __('Security, errors, maintenance') }}</small>
                                    </div>
                                </div>

                                <div class="notification-options">
                                    <div class="form-check form-switch mb-2">
                                        <input class="form-check-input" type="checkbox" id="systemError" checked>
                                        <label class="form-check-label" for="systemError">
                                            {{ __('System Errors') }}
                                        </label>
                                    </div>
                                    <div class="form-check form-switch mb-2">
                                        <input class="form-check-input" type="checkbox" id="securityAlert" checked>
                                        <label class="form-check-label" for="securityAlert">
                                            {{ __('Security Alerts') }}
                                        </label>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="maintenanceAlert">
                                        <label class="form-check-label" for="maintenanceAlert">
                                            {{ __('Maintenance Reminders') }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Email Notifications --}}
        <div class="col-12">
            <div class="admin-card">
                <div class="card-header-custom">
                    <h5 class="mb-0">
                        <i class="fas fa-envelope text-info me-2"></i>
                        {{ __('Email Notifications') }}
                    </h5>
                </div>
                <div class="card-body-custom">
                    <p class="text-muted mb-4">{{ __('Configure email notifications for important events') }}</p>

                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="emailNotifications">
                                <label class="form-check-label" for="emailNotifications">
                                    <strong>{{ __('Enable Email Notifications') }}</strong>
                                    <small
                                        class="d-block text-muted">{{ __('Send important notifications via email') }}</small>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('Email Address') }}</label>
                            <input type="email" class="form-control" id="notificationEmail"
                                   value="{{ Auth::user()->email }}" placeholder="{{ __('Enter email address') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('Email Frequency') }}</label>
                            <select class="form-select" id="emailFrequency">
                                <option value="instant">{{ __('Instant (for each notification)') }}</option>
                                <option value="hourly">{{ __('Hourly Summary') }}</option>
                                <option value="daily">{{ __('Daily Summary') }}</option>
                                <option value="weekly">{{ __('Weekly Summary') }}</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('Send Email For') }}</label>
                            <div class="mt-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="emailOrders" checked>
                                    <label class="form-check-label" for="emailOrders">
                                        {{ __('Order notifications') }}
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="emailStock">
                                    <label class="form-check-label" for="emailStock">
                                        {{ __('Stock alerts') }}
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="emailSystem" checked>
                                    <label class="form-check-label" for="emailSystem">
                                        {{ __('System alerts') }}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Browser Notifications --}}
        <div class="col-12">
            <div class="admin-card">
                <div class="card-header-custom">
                    <h5 class="mb-0">
                        <i class="fas fa-globe text-primary me-2"></i>
                        {{ __('Browser Notifications') }}
                    </h5>
                </div>
                <div class="card-body-custom">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="browserNotifications">
                                <label class="form-check-label" for="browserNotifications">
                                    <strong>{{ __('Enable Browser Notifications') }}</strong>
                                    <small
                                        class="d-block text-muted">{{ __('Show desktop notifications even when tab is not active') }}</small>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <button class="btn btn-outline-primary" onclick="requestBrowserPermission()">
                                <i class="fas fa-bell me-2"></i>
                                {{ __('Request Permission') }}
                            </button>
                            <div id="permissionStatus" class="mt-2"></div>
                        </div>
                    </div>

                    <div class="alert alert-info mt-3">
                        <i class="fas fa-info-circle me-2"></i>
                        {{ __('Browser notifications require permission and work only when you have the admin panel open in your browser.') }}
                    </div>
                </div>
            </div>
        </div>

        {{-- Test Notifications --}}
        <div class="col-12">
            <div class="admin-card">
                <div class="card-header-custom">
                    <h5 class="mb-0">
                        <i class="fas fa-vial text-warning me-2"></i>
                        {{ __('Test Notifications') }}
                    </h5>
                </div>
                <div class="card-body-custom">
                    <p class="text-muted mb-4">{{ __('Test your notification settings') }}</p>

                    <div class="row g-3">
                        <div class="col-md-3">
                            <button class="btn btn-outline-success w-100" onclick="testNotification('new_order')">
                                <i class="fas fa-shopping-cart me-2"></i>
                                {{ __('Test Order Alert') }}
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-outline-warning w-100" onclick="testNotification('low_stock')">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                {{ __('Test Stock Alert') }}
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-outline-info w-100" onclick="testNotification('system')">
                                <i class="fas fa-cog me-2"></i>
                                {{ __('Test System Alert') }}
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-outline-primary w-100" onclick="testBrowserNotification()">
                                <i class="fas fa-desktop me-2"></i>
                                {{ __('Test Browser Alert') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .notification-type-card {
            transition: all 0.2s ease;
            border-color: #e5e7eb !important;
        }

        .notification-type-card:hover {
            border-color: var(--primary-color) !important;
            box-shadow: 0 2px 8px rgba(79, 70, 229, 0.1);
        }

        .notification-options {
            padding-left: 1rem;
            border-left: 2px solid #f3f4f6;
        }

        .form-check-input:checked {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .stats-icon {
            border-radius: 0.5rem;
        }
    </style>
@endpush

@push('scripts')
    <script>
        // Initialize page
        document.addEventListener('DOMContentLoaded', function () {
            loadCurrentSettings();
            checkBrowserPermission();
        });

        // Load current settings
        function loadCurrentSettings() {
            // This would load actual settings from your backend
            // For now, we'll use default values
            console.log('Loading current notification settings...');
        }

        // Save settings
        function saveSettings() {
            const settings = gatherSettings();

            // Show loading state
            const saveBtn = event.target;
            const originalText = saveBtn.innerHTML;
            saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ __("Saving...") }}';
            saveBtn.disabled = true;

            // Simulate API call
            setTimeout(() => {
                console.log('Settings to save:', settings);

                // Reset button
                saveBtn.innerHTML = originalText;
                saveBtn.disabled = false;

                // Show success message
                showToast('{{ __("Settings saved successfully!") }}', 'success');
            }, 1000);
        }

        // Gather all settings from form
        function gatherSettings() {
            return {
                general: {
                    enableNotifications: document.getElementById('enableNotifications').checked,
                    enableSounds: document.getElementById('enableSounds').checked,
                    refreshInterval: document.getElementById('refreshInterval').value,
                    cleanupPeriod: document.getElementById('cleanupPeriod').value,
                },
                notifications: {
                    newOrder: document.getElementById('newOrder').checked,
                    orderCancelled: document.getElementById('orderCancelled').checked,
                    paymentReceived: document.getElementById('paymentReceived').checked,
                    orderShipped: document.getElementById('orderShipped').checked,
                    lowStock: document.getElementById('lowStock').checked,
                    outOfStock: document.getElementById('outOfStock').checked,
                    stockThreshold: document.getElementById('stockThreshold').value,
                    newUser: document.getElementById('newUser').checked,
                    newReview: document.getElementById('newReview').checked,
                    contactMessage: document.getElementById('contactMessage').checked,
                    systemError: document.getElementById('systemError').checked,
                    securityAlert: document.getElementById('securityAlert').checked,
                    maintenanceAlert: document.getElementById('maintenanceAlert').checked,
                },
                email: {
                    enabled: document.getElementById('emailNotifications').checked,
                    address: document.getElementById('notificationEmail').value,
                    frequency: document.getElementById('emailFrequency').value,
                    orders: document.getElementById('emailOrders').checked,
                    stock: document.getElementById('emailStock').checked,
                    system: document.getElementById('emailSystem').checked,
                },
                browser: {
                    enabled: document.getElementById('browserNotifications').checked,
                }
            };
        }

        // Reset to defaults
        function resetToDefaults() {
            if (confirm('{{ __("Reset all settings to default values?") }}')) {
                // Reset general settings
                document.getElementById('enableNotifications').checked = true;
                document.getElementById('enableSounds').checked = true;
                document.getElementById('refreshInterval').value = '30';
                document.getElementById('cleanupPeriod').value = '30';

                // Reset notification types
                document.getElementById('newOrder').checked = true;
                document.getElementById('orderCancelled').checked = true;
                document.getElementById('paymentReceived').checked = true;
                document.getElementById('orderShipped').checked = false;
                document.getElementById('lowStock').checked = true;
                document.getElementById('outOfStock').checked = true;
                document.getElementById('stockThreshold').value = '10';
                document.getElementById('newUser').checked = false;
                document.getElementById('newReview').checked = false;
                document.getElementById('contactMessage').checked = false;
                document.getElementById('systemError').checked = true;
                document.getElementById('securityAlert').checked = true;
                document.getElementById('maintenanceAlert').checked = false;

                // Reset email settings
                document.getElementById('emailNotifications').checked = false;
                document.getElementById('emailFrequency').value = 'instant';
                document.getElementById('emailOrders').checked = true;
                document.getElementById('emailStock').checked = false;
                document.getElementById('emailSystem').checked = true;

                // Reset browser settings
                document.getElementById('browserNotifications').checked = false;

                showToast('{{ __("Settings reset to defaults") }}', 'success');
            }
        }

        // Test notifications
        function testNotification(type) {
            const messages = {
                'new_order': '{{ __("Test: New order received from John Doe for $150.00") }}',
                'low_stock': '{{ __("Test: iPhone 16 Pro is running low on stock (5 items left)") }}',
                'system': '{{ __("Test: System maintenance scheduled for tonight") }}'
            };

            const colors = {
                'new_order': 'success',
                'low_stock': 'warning',
                'system': 'info'
            };

            showToast(messages[type], colors[type]);
        }

        // Browser notification functions
        function checkBrowserPermission() {
            if (!('Notification' in window)) {
                document.getElementById('permissionStatus').innerHTML =
                    '<small class="text-muted">{{ __("Browser notifications not supported") }}</small>';
                return;
            }

            const permission = Notification.permission;
            let statusText = '';
            let statusClass = '';

            switch (permission) {
                case 'granted':
                    statusText = '{{ __("Permission granted") }}';
                    statusClass = 'text-success';
                    break;
                case 'denied':
                    statusText = '{{ __("Permission denied") }}';
                    statusClass = 'text-danger';
                    break;
                default:
                    statusText = '{{ __("Permission not requested") }}';
                    statusClass = 'text-muted';
            }

            document.getElementById('permissionStatus').innerHTML =
                `<small class="${statusClass}"><i class="fas fa-circle me-1"></i>${statusText}</small>`;
        }

        function requestBrowserPermission() {
            if (!('Notification' in window)) {
                showToast('{{ __("Browser notifications are not supported") }}', 'error');
                return;
            }

            Notification.requestPermission().then(permission => {
                checkBrowserPermission();
                if (permission === 'granted') {
                    showToast('{{ __("Permission granted! You can now receive browser notifications.") }}', 'success');
                } else {
                    showToast('{{ __("Permission denied. You won\'t receive browser notifications.") }}', 'warning');
                }
            });
        }

        function testBrowserNotification() {
            if (!('Notification' in window)) {
                showToast('{{ __("Browser notifications are not supported") }}', 'error');
                return;
            }

            if (Notification.permission === 'granted') {
                new Notification('{{ __("Test Notification") }}', {
                    body: '{{ __("This is a test browser notification from your admin panel.") }}',
                    icon: '/favicon.ico',
                    tag: 'test-notification'
                });
            } else if (Notification.permission !== 'denied') {
                requestBrowserPermission();
            } else {
                showToast('{{ __("Browser notifications are blocked. Please enable them in your browser settings.") }}', 'warning');
            }
        }

        // Toast notification function
        function showToast(message, type = 'info') {
            const alertClass = type === 'success' ? 'alert-success' :
                type === 'error' ? 'alert-danger' :
                    type === 'warning' ? 'alert-warning' : 'alert-info';

            const icon = type === 'success' ? 'fa-check-circle' :
                type === 'error' ? 'fa-exclamation-circle' :
                    type === 'warning' ? 'fa-exclamation-triangle' : 'fa-info-circle';

            const toast = document.createElement('div');
            toast.className = `alert ${alertClass} alert-dismissible fade show position-fixed`;
            toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            toast.innerHTML = `
            <i class="fas ${icon} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;

            document.body.appendChild(toast);
            setTimeout(() => {
                if (toast.parentNode) {
                    toast.remove();
                }
            }, 5000);
        }
    </script>
@endpush