@extends('layouts.app')

@section('title', 'Weather Alert Notification Preferences')

@section('header')
<div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold">🔔 Notification Preferences</h1>
                <p class="text-blue-100 mt-1">Configure your weather alert settings and preferences</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('analytics.weather-correlation') }}" class="bg-white/20 backdrop-blur-sm px-4 py-2 rounded-lg text-white hover:bg-white/30 transition-colors">
                    📊 Weather Dashboard
                </a>
                <a href="{{ route('analytics.dashboard') }}" class="bg-white/20 backdrop-blur-sm px-4 py-2 rounded-lg text-white hover:bg-white/30 transition-colors">
                    📈 Analytics
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    
    @if (session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6 flex items-center">
            <span class="text-green-500 mr-2">✅</span>
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6 flex items-center">
            <span class="text-red-500 mr-2">❌</span>
            {{ session('error') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
            <div class="flex items-center mb-2">
                <span class="text-red-500 mr-2">⚠️</span>
                <strong>Please fix the following errors:</strong>
            </div>
            <ul class="list-disc list-inside">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('notifications.preferences.update') }}" method="POST" class="space-y-8">
        @csrf
        @method('PUT')

        <!-- Alert Types Section -->
        <div class="bg-white shadow-lg rounded-lg overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-bold text-gray-900 flex items-center">
                    🌡️ Weather Alert Types
                    <span class="ml-2 text-sm font-normal text-gray-600">Choose which weather events trigger notifications</span>
                </h2>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                
                <div class="space-y-4">
                    <div class="flex items-center">
                        <input type="checkbox" id="frost_alerts" name="frost_alerts" value="1" 
                               {{ $preferences->frost_alerts ? 'checked' : '' }}
                               class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                        <label for="frost_alerts" class="ml-3 text-sm">
                            <span class="font-medium text-gray-900">❄️ Frost Alerts</span>
                            <span class="block text-gray-600">35-38°F temperature warnings</span>
                        </label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" id="freeze_alerts" name="freeze_alerts" value="1" 
                               {{ $preferences->freeze_alerts ? 'checked' : '' }}
                               class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                        <label for="freeze_alerts" class="ml-3 text-sm">
                            <span class="font-medium text-gray-900">🧊 Freeze Alerts</span>
                            <span class="block text-gray-600">32°F and below critical warnings</span>
                        </label>
                    </div>
                </div>

                <div class="space-y-4">
                    <div class="flex items-center">
                        <input type="checkbox" id="extreme_weather_alerts" name="extreme_weather_alerts" value="1" 
                               {{ $preferences->extreme_weather_alerts ? 'checked' : '' }}
                               class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                        <label for="extreme_weather_alerts" class="ml-3 text-sm">
                            <span class="font-medium text-gray-900">🔥 Extreme Weather</span>
                            <span class="block text-gray-600">Heat waves and severe conditions</span>
                        </label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" id="wind_alerts" name="wind_alerts" value="1" 
                               {{ $preferences->wind_alerts ? 'checked' : '' }}
                               class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                        <label for="wind_alerts" class="ml-3 text-sm">
                            <span class="font-medium text-gray-900">💨 High Wind Alerts</span>
                            <span class="block text-gray-600">30+ mph wind warnings</span>
                        </label>
                    </div>
                </div>

                <div class="space-y-4">
                    <div class="flex items-center">
                        <input type="checkbox" id="rain_alerts" name="rain_alerts" value="1" 
                               {{ $preferences->rain_alerts ? 'checked' : '' }}
                               class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                        <label for="rain_alerts" class="ml-3 text-sm">
                            <span class="font-medium text-gray-900">🌧️ Heavy Rain Alerts</span>
                            <span class="block text-gray-600">1+ inch per hour rainfall</span>
                        </label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" id="general_alerts" name="general_alerts" value="1" 
                               {{ $preferences->general_alerts ? 'checked' : '' }}
                               class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                        <label for="general_alerts" class="ml-3 text-sm">
                            <span class="font-medium text-gray-900">📢 General Alerts</span>
                            <span class="block text-gray-600">Miscellaneous weather notices</span>
                        </label>
                    </div>
                </div>

            </div>
        </div>

        <!-- Communication Channels Section -->
        <div class="bg-white shadow-lg rounded-lg overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-bold text-gray-900 flex items-center">
                    📱 Notification Channels
                    <span class="ml-2 text-sm font-normal text-gray-600">How you want to receive alerts</span>
                </h2>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                
                <div class="flex items-center">
                    <input type="checkbox" id="email_alerts" name="email_alerts" value="1" 
                           {{ $preferences->email_alerts ? 'checked' : '' }}
                           class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                    <label for="email_alerts" class="ml-3 text-sm">
                        <span class="font-medium text-gray-900">📧 Email Notifications</span>
                        <span class="block text-gray-600">Detailed alert emails</span>
                    </label>
                </div>

                <div class="flex items-center">
                    <input type="checkbox" id="in_app_alerts" name="in_app_alerts" value="1" 
                           {{ $preferences->in_app_alerts ? 'checked' : '' }}
                           class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                    <label for="in_app_alerts" class="ml-3 text-sm">
                        <span class="font-medium text-gray-900">🔔 In-App Notifications</span>
                        <span class="block text-gray-600">Dashboard alerts</span>
                    </label>
                </div>

                <div class="flex items-center">
                    <input type="checkbox" id="sms_alerts" name="sms_alerts" value="1" 
                           {{ $preferences->sms_alerts ? 'checked' : '' }}
                           class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                    <label for="sms_alerts" class="ml-3 text-sm">
                        <span class="font-medium text-gray-900">💬 SMS Alerts</span>
                        <span class="block text-gray-600">Text message notifications</span>
                    </label>
                </div>

            </div>
        </div>

        <!-- Timing and Control Section -->
        <div class="bg-white shadow-lg rounded-lg overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-bold text-gray-900 flex items-center">
                    ⏰ Alert Timing & Control
                    <span class="ml-2 text-sm font-normal text-gray-600">When and how often to send alerts</span>
                </h2>
            </div>
            <div class="p-6 space-y-6">
                
                <!-- Quiet Hours -->
                <div>
                    <div class="flex items-center mb-4">
                        <input type="checkbox" id="quiet_hours_enabled" name="quiet_hours_enabled" value="1" 
                               {{ $preferences->quiet_hours_enabled ? 'checked' : '' }}
                               class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                               onchange="toggleQuietHours(this)">
                        <label for="quiet_hours_enabled" class="ml-3 text-sm font-medium text-gray-900">
                            🌙 Enable Quiet Hours
                        </label>
                    </div>
                    
                    <div id="quiet-hours-section" class="grid grid-cols-1 md:grid-cols-2 gap-4 ml-8 {{ $preferences->quiet_hours_enabled ? '' : 'hidden' }}">
                        <div>
                            <label for="quiet_hours_start" class="block text-sm font-medium text-gray-700 mb-1">Start Time</label>
                            <input type="time" id="quiet_hours_start" name="quiet_hours_start" 
                                   value="{{ $preferences->quiet_hours_start ? $preferences->quiet_hours_start->format('H:i') : '' }}"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div>
                            <label for="quiet_hours_end" class="block text-sm font-medium text-gray-700 mb-1">End Time</label>
                            <input type="time" id="quiet_hours_end" name="quiet_hours_end" 
                                   value="{{ $preferences->quiet_hours_end ? $preferences->quiet_hours_end->format('H:i') : '' }}"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>
                </div>

                <!-- Alert Control Settings -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                    <div>
                        <label for="alert_cooldown_minutes" class="block text-sm font-medium text-gray-700 mb-1">Alert Cooldown (minutes)</label>
                        <input type="number" id="alert_cooldown_minutes" name="alert_cooldown_minutes" 
                               value="{{ $preferences->alert_cooldown_minutes }}" min="5" max="1440"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                        <p class="text-xs text-gray-600 mt-1">Minimum time between similar alerts</p>
                    </div>

                    <div>
                        <label for="max_daily_alerts" class="block text-sm font-medium text-gray-700 mb-1">Max Daily Alerts</label>
                        <input type="number" id="max_daily_alerts" name="max_daily_alerts" 
                               value="{{ $preferences->max_daily_alerts }}" min="1" max="50"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                        <p class="text-xs text-gray-600 mt-1">Maximum alerts per day</p>
                    </div>

                    <div>
                        <label for="alert_radius_miles" class="block text-sm font-medium text-gray-700 mb-1">Alert Radius (miles)</label>
                        <input type="number" id="alert_radius_miles" name="alert_radius_miles" 
                               value="{{ $preferences->alert_radius_miles }}" min="1" max="50" step="0.1"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                        <p class="text-xs text-gray-600 mt-1">Geographic range for alerts</p>
                    </div>

                </div>

                <!-- Boolean Settings -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                    <div class="flex items-center">
                        <input type="checkbox" id="duplicate_suppression" name="duplicate_suppression" value="1" 
                               {{ $preferences->duplicate_suppression ? 'checked' : '' }}
                               class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                        <label for="duplicate_suppression" class="ml-3 text-sm">
                            <span class="font-medium text-gray-900">🚫 Duplicate Suppression</span>
                            <span class="block text-gray-600">Prevent repeated similar alerts</span>
                        </label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" id="urgent_override_quiet_hours" name="urgent_override_quiet_hours" value="1" 
                               {{ $preferences->urgent_override_quiet_hours ? 'checked' : '' }}
                               class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                        <label for="urgent_override_quiet_hours" class="ml-3 text-sm">
                            <span class="font-medium text-gray-900">🚨 Urgent Override</span>
                            <span class="block text-gray-600">Send critical alerts during quiet hours</span>
                        </label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" id="weekend_alerts" name="weekend_alerts" value="1" 
                               {{ $preferences->weekend_alerts ? 'checked' : '' }}
                               class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                        <label for="weekend_alerts" class="ml-3 text-sm">
                            <span class="font-medium text-gray-900">📅 Weekend Alerts</span>
                            <span class="block text-gray-600">Receive alerts on weekends</span>
                        </label>
                    </div>

                </div>

            </div>
        </div>

        <!-- Custom Thresholds Section -->
        <div class="bg-white shadow-lg rounded-lg overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-bold text-gray-900 flex items-center">
                    🎯 Custom Alert Thresholds
                    <span class="ml-2 text-sm font-normal text-gray-600">Override default warning temperatures and conditions</span>
                </h2>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                
                <div>
                    <label for="custom_frost_threshold" class="block text-sm font-medium text-gray-700 mb-1">Frost Threshold (°F)</label>
                    <input type="number" id="custom_frost_threshold" name="custom_frost_threshold" 
                           value="{{ $preferences->custom_frost_threshold }}" 
                           min="20" max="40" step="0.1" placeholder="36.0"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                    <p class="text-xs text-gray-600 mt-1">Default: 36°F</p>
                </div>

                <div>
                    <label for="custom_heat_threshold" class="block text-sm font-medium text-gray-700 mb-1">Heat Threshold (°F)</label>
                    <input type="number" id="custom_heat_threshold" name="custom_heat_threshold" 
                           value="{{ $preferences->custom_heat_threshold }}" 
                           min="80" max="120" step="0.1" placeholder="95.0"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                    <p class="text-xs text-gray-600 mt-1">Default: 95°F</p>
                </div>

                <div>
                    <label for="custom_wind_threshold" class="block text-sm font-medium text-gray-700 mb-1">Wind Threshold (mph)</label>
                    <input type="number" id="custom_wind_threshold" name="custom_wind_threshold" 
                           value="{{ $preferences->custom_wind_threshold }}" 
                           min="15" max="80" step="0.1" placeholder="30.0"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                    <p class="text-xs text-gray-600 mt-1">Default: 30 mph</p>
                </div>

                <div>
                    <label for="custom_rain_threshold" class="block text-sm font-medium text-gray-700 mb-1">Rain Threshold (in/hr)</label>
                    <input type="number" id="custom_rain_threshold" name="custom_rain_threshold" 
                           value="{{ $preferences->custom_rain_threshold }}" 
                           min="0.1" max="5" step="0.01" placeholder="1.0"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                    <p class="text-xs text-gray-600 mt-1">Default: 1.0 in/hr</p>
                </div>

            </div>
        </div>

        <!-- Notification Content Section -->
        <div class="bg-white shadow-lg rounded-lg overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-bold text-gray-900 flex items-center">
                    📄 Notification Content
                    <span class="ml-2 text-sm font-normal text-gray-600">Customize what information is included in alerts</span>
                </h2>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                
                <div class="flex items-center">
                    <input type="checkbox" id="show_recommendations" name="show_recommendations" value="1" 
                           {{ $preferences->show_recommendations ? 'checked' : '' }}
                           class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                    <label for="show_recommendations" class="ml-3 text-sm">
                        <span class="font-medium text-gray-900">💡 Show Recommendations</span>
                        <span class="block text-gray-600">Include protective action suggestions</span>
                    </label>
                </div>

                <div class="flex items-center">
                    <input type="checkbox" id="show_plant_impacts" name="show_plant_impacts" value="1" 
                           {{ $preferences->show_plant_impacts ? 'checked' : '' }}
                           class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                    <label for="show_plant_impacts" class="ml-3 text-sm">
                        <span class="font-medium text-gray-900">🌱 Show Plant Impacts</span>
                        <span class="block text-gray-600">Include effects on blackberry plants</span>
                    </label>
                </div>

                <div class="flex items-center">
                    <input type="checkbox" id="detailed_notifications" name="detailed_notifications" value="1" 
                           {{ $preferences->detailed_notifications ? 'checked' : '' }}
                           class="h-5 w-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                    <label for="detailed_notifications" class="ml-3 text-sm">
                        <span class="font-medium text-gray-900">📊 Detailed Notifications</span>
                        <span class="block text-gray-600">Include technical weather data</span>
                    </label>
                </div>

            </div>
        </div>

        <!-- Severity Levels -->
        <div class="bg-white shadow-lg rounded-lg overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-bold text-gray-900 flex items-center">
                    ⚠️ Alert Severity Levels
                    <span class="ml-2 text-sm font-normal text-gray-600">Choose which severity levels to receive</span>
                </h2>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                
                <div class="flex items-center">
                    <input type="checkbox" id="severity_severe" name="severity_levels[]" value="severe" 
                           {{ in_array('severe', $preferences->severity_levels ?? ['severe', 'moderate']) ? 'checked' : '' }}
                           class="h-5 w-5 text-red-600 rounded border-gray-300 focus:ring-red-500">
                    <label for="severity_severe" class="ml-3 text-sm">
                        <span class="font-medium text-red-900">🚨 Severe</span>
                        <span class="block text-gray-600">Critical conditions requiring immediate action</span>
                    </label>
                </div>

                <div class="flex items-center">
                    <input type="checkbox" id="severity_moderate" name="severity_levels[]" value="moderate" 
                           {{ in_array('moderate', $preferences->severity_levels ?? ['severe', 'moderate']) ? 'checked' : '' }}
                           class="h-5 w-5 text-orange-600 rounded border-gray-300 focus:ring-orange-500">
                    <label for="severity_moderate" class="ml-3 text-sm">
                        <span class="font-medium text-orange-900">⚠️ Moderate</span>
                        <span class="block text-gray-600">Potentially hazardous conditions</span>
                    </label>
                </div>

                <div class="flex items-center">
                    <input type="checkbox" id="severity_low" name="severity_levels[]" value="low" 
                           {{ in_array('low', $preferences->severity_levels ?? []) ? 'checked' : '' }}
                           class="h-5 w-5 text-yellow-600 rounded border-gray-300 focus:ring-yellow-500">
                    <label for="severity_low" class="ml-3 text-sm">
                        <span class="font-medium text-yellow-900">💡 Low</span>
                        <span class="block text-gray-600">Advisory conditions to monitor</span>
                    </label>
                </div>

            </div>
        </div>

        <!-- Action Buttons -->
        <div class="bg-white shadow-lg rounded-lg overflow-hidden">
            <div class="p-6 flex flex-wrap gap-4 justify-between items-center">
                
                <div class="flex flex-wrap gap-3">
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center">
                        💾 Save Preferences
                    </button>
                    
                    <button type="button" onclick="resetToDefaults()" 
                            class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center">
                        🔄 Reset to Defaults
                    </button>
                </div>

                <div class="flex flex-wrap gap-3">
                    <button type="button" onclick="testNotification('frost')" 
                            class="bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded font-medium transition-colors text-sm">
                        🧪 Test Frost Alert
                    </button>
                    
                    <button type="button" onclick="testNotification('freeze')" 
                            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-medium transition-colors text-sm">
                        🧪 Test Freeze Alert
                    </button>
                    
                    <a href="{{ route('notifications.preferences.export') }}" 
                       class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded font-medium transition-colors text-sm inline-block">
                        📤 Export Settings
                    </a>
                </div>

            </div>
        </div>

    </form>

</div>

<script>
function toggleQuietHours(checkbox) {
    const section = document.getElementById('quiet-hours-section');
    if (checkbox.checked) {
        section.classList.remove('hidden');
    } else {
        section.classList.add('hidden');
    }
}

function resetToDefaults() {
    if (confirm('Are you sure you want to reset all notification preferences to default values? This action cannot be undone.')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route("notifications.preferences.reset") }}';
        
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;
        
        form.appendChild(csrfInput);
        document.body.appendChild(form);
        form.submit();
    }
}

function testNotification(alertType) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '{{ route("notifications.test") }}';
    
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const csrfInput = document.createElement('input');
    csrfInput.type = 'hidden';
    csrfInput.name = '_token';
    csrfInput.value = csrfToken;
    
    const alertTypeInput = document.createElement('input');
    alertTypeInput.type = 'hidden';
    alertTypeInput.name = 'alert_type';
    alertTypeInput.value = alertType;
    
    form.appendChild(csrfInput);
    form.appendChild(alertTypeInput);
    document.body.appendChild(form);
    form.submit();
}

// Initialize quiet hours visibility on page load
document.addEventListener('DOMContentLoaded', function() {
    const quietHoursCheckbox = document.getElementById('quiet_hours_enabled');
    if (quietHoursCheckbox) {
        toggleQuietHours(quietHoursCheckbox);
    }
});
</script>

@endsection