@extends('layouts.app')

@section('title', 'System Settings')
@section('subtitle', 'Manage system configuration and preferences')

@section('content')
<div class="max-w-7xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-check-circle mr-2"></i>
                {{ session('success') }}
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
            <div class="flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i>
                {{ session('error') }}
            </div>
        </div>
    @endif

    <!-- Group Navigation -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <div class="flex flex-wrap gap-2">
            @foreach($groups as $groupKey => $groupName)
                <a href="{{ route('settings.index', ['group' => $groupKey]) }}" 
                   class="px-4 py-2 rounded-lg transition-colors {{ $group === $groupKey ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                    {{ $groupName }}
                </a>
            @endforeach
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="flex flex-col sm:flex-row gap-4 mb-6">
        <a href="{{ route('settings.create') }}" class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
            <i class="fas fa-plus mr-2"></i>
            Add Setting
        </a>
        <button onclick="exportSettings()" class="inline-flex items-center px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
            <i class="fas fa-download mr-2"></i>
            Export Settings
        </button>
        <button onclick="openImportModal()" class="inline-flex items-center px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors">
            <i class="fas fa-upload mr-2"></i>
            Import Settings
        </button>
        <button onclick="resetSettings()" class="inline-flex items-center px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
            <i class="fas fa-undo mr-2"></i>
            Reset to Default
        </button>
    </div>

    <!-- Settings Form -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-blue-50">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-cog text-blue-600 mr-2"></i>
                {{ $groups[$group] ?? ucfirst($group) }} Settings
            </h3>
        </div>
        
        <form method="POST" action="{{ route('settings.bulk-update') }}" class="p-6">
            @csrf
            <input type="hidden" name="group" value="{{ $group }}">
            
            <div class="space-y-6">
                @forelse($settings as $setting)
                    <div class="border border-gray-200 rounded-lg p-4">
                        <div class="flex justify-between items-start mb-3">
                            <div class="flex-1">
                                <label class="block text-sm font-medium text-gray-900 mb-1">
                                    {{ $setting->label }}
                                    @if($setting->is_required)
                                        <span class="text-red-500">*</span>
                                    @endif
                                </label>
                                @if($setting->description)
                                    <p class="text-xs text-gray-500 mb-2">{{ $setting->description }}</p>
                                @endif
                            </div>
                            <div class="flex items-center space-x-2">
                                @if($setting->is_public)
                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                        Public
                                    </span>
                                @endif
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                                    {{ ucfirst($setting->type) }}
                                </span>
                            </div>
                        </div>
                        
                        <div class="flex items-center space-x-4">
                            <div class="flex-1">
                                @switch($setting->type)
                                    @case('textarea')
                                        <textarea name="settings[{{ $setting->key }}]" rows="3"
                                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                                  placeholder="Enter {{ strtolower($setting->label) }}...">{{ old('settings.' . $setting->key, $setting->value) }}</textarea>
                                        @break
                                    
                                    @case('number')
                                        <input type="number" name="settings[{{ $setting->key }}]" step="any"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                               value="{{ old('settings.' . $setting->key, $setting->value) }}"
                                               placeholder="Enter {{ strtolower($setting->label) }}...">
                                        @break
                                    
                                    @case('boolean')
                                        <select name="settings[{{ $setting->key }}]"
                                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                                            <option value="0" {{ old('settings.' . $setting->key, $setting->value) == '0' ? 'selected' : '' }}>No</option>
                                            <option value="1" {{ old('settings.' . $setting->key, $setting->value) == '1' ? 'selected' : '' }}>Yes</option>
                                        </select>
                                        @break
                                    
                                    @case('select')
                                        <select name="settings[{{ $setting->key }}]"
                                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                                            <option value="">Select {{ $setting->label }}</option>
                                            @if($setting->options)
                                                @foreach($setting->options as $option)
                                                    <option value="{{ $option }}" {{ old('settings.' . $setting->key, $setting->value) == $option ? 'selected' : '' }}>
                                                        {{ $option }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                        @break
                                    
                                    @case('email')
                                        <input type="email" name="settings[{{ $setting->key }}]"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                               value="{{ old('settings.' . $setting->key, $setting->value) }}"
                                               placeholder="Enter {{ strtolower($setting->label) }}...">
                                        @break
                                    
                                    @case('url')
                                        <input type="url" name="settings[{{ $setting->key }}]"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                               value="{{ old('settings.' . $setting->key, $setting->value) }}"
                                               placeholder="Enter {{ strtolower($setting->label) }}...">
                                        @break
                                    
                                    @case('date')
                                        <input type="date" name="settings[{{ $setting->key }}]"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                               value="{{ old('settings.' . $setting->key, $setting->value) }}">
                                        @break
                                    
                                    @case('time')
                                        <input type="time" name="settings[{{ $setting->key }}]"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                               value="{{ old('settings.' . $setting->key, $setting->value) }}">
                                        @break
                                    
                                    @default
                                        <input type="text" name="settings[{{ $setting->key }}]"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                                               value="{{ old('settings.' . $setting->key, $setting->value) }}"
                                               placeholder="Enter {{ strtolower($setting->label) }}...">
                                @endswitch
                            </div>
                            
                            <div class="flex space-x-2">
                                <a href="{{ route('settings.edit', $setting) }}" class="text-blue-600 hover:text-blue-900" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button type="button" onclick="deleteSetting({{ $setting->id }})" class="text-red-600 hover:text-red-900" title="Delete">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-12">
                        <i class="fas fa-cog text-4xl text-gray-300 mb-4"></i>
                        <p class="text-lg font-medium text-gray-500">No settings found for {{ $groups[$group] ?? ucfirst($group) }}</p>
                        <p class="text-sm text-gray-400">Create your first setting or switch to another group.</p>
                    </div>
                @endforelse
            </div>
            
            @if($settings->count() > 0)
                <div class="mt-8 flex justify-end">
                    <button type="submit" class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium">
                        <i class="fas fa-save mr-2"></i>
                        Save Settings
                    </button>
                </div>
            @endif
        </form>
    </div>
</div>

<!-- Import Modal -->
<div id="importModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Import Settings</h3>
            <form method="POST" action="{{ route('settings.import') }}" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="group" value="{{ $group }}">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Settings File (JSON)</label>
                    <input type="file" name="settings_file" accept=".json" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div class="flex justify-end space-x-2">
                    <button type="button" onclick="closeImportModal()" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors">
                        Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Form -->
<form id="deleteForm" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

<!-- Reset Form -->
<form id="resetForm" method="POST" style="display: none;">
    @csrf
</form>

<script>
    function exportSettings() {
        window.location.href = `{{ route('settings.export', ['group' => $group]) }}`;
    }

    function openImportModal() {
        document.getElementById('importModal').classList.remove('hidden');
    }

    function closeImportModal() {
        document.getElementById('importModal').classList.add('hidden');
    }

    function deleteSetting(settingId) {
        if (confirm('Are you sure you want to delete this setting? This action cannot be undone.')) {
            document.getElementById('deleteForm').action = `/settings/${settingId}`;
            document.getElementById('deleteForm').submit();
        }
    }

    function resetSettings() {
        if (confirm('Are you sure you want to reset all settings in this group to default values? This action cannot be undone.')) {
            document.getElementById('resetForm').action = `{{ route('settings.reset', ['group' => $group]) }}`;
            document.getElementById('resetForm').submit();
        }
    }

    // Close modal when clicking outside
    window.onclick = function(event) {
        const modal = document.getElementById('importModal');
        if (event.target === modal) {
            closeImportModal();
        }
    }
</script>
@endsection