@extends('admin.layout.main')

@section('admin')
<div class="flex flex-col h-full overflow-auto">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Site Settings</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Manage your website configuration</p>
        </div>
        <div class="flex items-center space-x-3">
            <form action="{{ route('admin.settings.reset') }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to reset all settings to default?')">
                @csrf
                <button type="submit" 
                        class="bg-yellow-500 text-white px-4 py-2 rounded-lg hover:bg-yellow-600 transition-colors flex items-center">
                    <i class="fas fa-undo mr-2"></i>
                    Reset to Default
                </button>
            </form>
            <button type="submit" 
                    form="settingsForm"
                    class="bg-[#10B981] text-white px-4 py-2 rounded-lg hover:bg-[#0da271] transition-colors flex items-center">
                <i class="fas fa-save mr-2"></i>
                Save Settings
            </button>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if (session('success'))
        <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 px-4 py-3 rounded-lg mb-6 flex items-center justify-between">
            <div class="flex items-center">
                <i class="fas fa-check-circle mr-2"></i>
                {{ session('success') }}
            </div>
            <button type="button" class="text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100" onclick="this.parentElement.remove()">
                <i class="fas fa-times"></i>
            </button>
        </div>
    @endif

    @if (session('error'))
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg mb-6 flex items-center justify-between">
            <div class="flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i>
                {{ session('error') }}
            </div>
            <button type="button" class="text-red-700 dark:text-red-300 hover:text-red-900 dark:hover:text-red-100" onclick="this.parentElement.remove()">
                <i class="fas fa-times"></i>
            </button>
        </div>
    @endif

    <!-- Settings Form -->
    <form id="settingsForm" method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data" class="space-y-8">
        @csrf
        
        <!-- Tab Navigation -->
        <div class="border-b border-gray-200 dark:border-gray-700">
            <nav class="-mb-px flex space-x-8 overflow-x-auto" id="settingsTabs">
                @foreach($groups as $groupKey => $group)
                    <button type="button" 
                            class="tab-btn py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap {{ $loop->first ? 'border-[#10B981] text-[#10B981]' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600' }}"
                            data-tab="{{ $groupKey }}">
                        <i class="{{ $group['icon'] }} mr-2"></i>
                        {{ $group['title'] }}
                    </button>
                @endforeach
            </nav>
        </div>

        <!-- Tab Content -->
        <div id="tabContent">
            @foreach($groups as $groupKey => $group)
                <div class="tab-pane {{ $loop->first ? '' : 'hidden' }}" id="{{ $groupKey }}Tab">
                    <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
                            <i class="{{ $group['icon'] }} mr-2 text-blue-500"></i>
                            {{ $group['title'] }}
                        </h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            @foreach($group['settings'] as $key => $field)
                                <div class="{{ $field['type'] == 'textarea' ? 'md:col-span-2' : '' }}">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        {{ $field['label'] }}
                                        @if($field['type'] == 'image')
                                            <span class="text-xs text-gray-500 dark:text-gray-400">(Recommended: 200x60px)</span>
                                        @endif
                                    </label>
                                    
                                    @if($field['type'] == 'textarea')
                                        <textarea name="{{ $key }}" 
                                                  rows="4"
                                                  class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                                                  placeholder="Enter {{ strtolower($field['label']) }}">{{ old($key, $settings[$key] ?? '') }}</textarea>
                                    @elseif($field['type'] == 'image')
                                        <div class="space-y-4">
                                            <!-- Current Logo -->
                                            @if(isset($settings['company_logo']) && $settings['company_logo'])
                                                <div class="flex items-center space-x-4 mb-4">
                                                    <img src="{{ asset('storage/' . $settings['company_logo']) }}" 
                                                         alt="Current Logo" 
                                                         class="h-12 object-contain border border-gray-200 dark:border-gray-700 rounded-lg">
                                                    <div>
                                                        <p class="text-sm text-gray-600 dark:text-gray-400">Current Logo</p>
                                                        <button type="button" 
                                                                onclick="document.getElementById('deleteLogoForm').submit()"
                                                                class="text-sm text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 mt-1">
                                                            <i class="fas fa-trash mr-1"></i> Remove Logo
                                                        </button>
                                                    </div>
                                                </div>
                                            @endif
                                            
                                            <!-- Logo Upload -->
                                            <input type="file" 
                                                   name="company_logo"
                                                   accept="image/*"
                                                   class="block w-full text-sm text-gray-500 dark:text-gray-400
                                                          file:mr-4 file:py-2.5 file:px-4 
                                                          file:rounded-lg file:border-0 
                                                          file:text-sm file:font-semibold 
                                                          file:bg-blue-50 dark:file:bg-blue-900/30 
                                                          file:text-blue-700 dark:file:text-blue-300 
                                                          hover:file:bg-blue-100 dark:hover:file:bg-blue-900/50
                                                          cursor-pointer
                                                          bg-white dark:bg-gray-800
                                                          border border-gray-300 dark:border-gray-600
                                                          rounded-lg
                                                          transition-colors">
                                        </div>
                                    @else
                                        <input type="{{ $field['type'] }}" 
                                               name="{{ $key }}"
                                               value="{{ old($key, $settings[$key] ?? '') }}"
                                               class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                                               placeholder="Enter {{ strtolower($field['label']) }}">
                                    @endif
                                    
                                    @if($field['type'] == 'url')
                                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                            Include https:// in the URL
                                        </p>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </form>

    <!-- Preview Section -->
    <div class="mt-8 bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
            <i class="fas fa-eye mr-2 text-purple-500"></i>
            Settings Preview
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Company Info Preview -->
            <div class="space-y-3">
                <h4 class="font-medium text-gray-900 dark:text-white">Company Information</h4>
                <div class="text-sm text-gray-600 dark:text-gray-400">
                    <p><strong>Name:</strong> {{ $settings['company_name'] ?? 'Not set' }}</p>
                    <p><strong>Phone:</strong> {{ $settings['company_phone'] ?? 'Not set' }}</p>
                    <p><strong>Email:</strong> {{ $settings['company_email'] ?? 'Not set' }}</p>
                    <p><strong>Hours:</strong> {{ $settings['working_hours'] ?? 'Not set' }}</p>
                </div>
            </div>
            

            
            <!-- Stats Preview -->
            <div class="space-y-3">
                <h4 class="font-medium text-gray-900 dark:text-white">Company Stats</h4>
                <div class="text-sm text-gray-600 dark:text-gray-400">
                    <p><strong>Clients:</strong> {{ $settings['total_clients'] ?? 'Not set' }}</p>
                    <p><strong>Revenue:</strong> {{ $settings['revenue_generated'] ?? 'Not set' }}</p>
                </div>
            </div>
        </div>
        
        <!-- Footer Preview -->
        <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
            <h4 class="font-medium text-gray-900 dark:text-white mb-2">Footer Preview</h4>
            <div class="text-sm text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
                <p class="mb-2">{{ $settings['footer_text'] ?? 'Footer text not set' }}</p>
                <p class="text-gray-500 dark:text-gray-500 text-xs">{{ $settings['copyright_text'] ?? 'Copyright text not set' }}</p>
            </div>
        </div>
    </div>
</div>

<!-- Delete Logo Form -->
<form id="deleteLogoForm" action="{{ route('admin.settings.delete-logo') }}" method="POST" class="hidden">
    @csrf
    @method('DELETE')
</form>

<style>
    .tab-btn {
        transition: all 0.2s ease;
    }
    
    .tab-btn:hover {
        border-color: #d1d5db;
    }
    
    .tab-pane {
        animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    textarea {
        resize: vertical;
        min-height: 100px;
    }
    
    input[type="file"]::-webkit-file-upload-button {
        background: linear-gradient(to right, #3b82f6, #8b5cf6);
        border: none;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    input[type="file"]::-webkit-file-upload-button:hover {
        background: linear-gradient(to right, #2563eb, #7c3aed);
    }
</style>

<script>
    // Tab functionality
    document.addEventListener('DOMContentLoaded', function() {
        const tabBtns = document.querySelectorAll('.tab-btn');
        const tabPanes = document.querySelectorAll('.tab-pane');
        
        tabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const tabId = this.getAttribute('data-tab');
                
                // Update active tab button
                tabBtns.forEach(tab => {
                    tab.classList.remove('border-[#10B981]', 'text-[#10B981]');
                    tab.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
                });
                
                this.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
                this.classList.add('border-[#10B981]', 'text-[#10B981]');
                
                // Show active tab content
                tabPanes.forEach(pane => {
                    pane.classList.add('hidden');
                });
                
                document.getElementById(tabId + 'Tab').classList.remove('hidden');
            });
        });
        
        // Image preview for logo
        const logoInput = document.querySelector('input[name="company_logo"]');
        if (logoInput) {
            logoInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        // You can add image preview functionality here
                        console.log('New logo selected:', file.name);
                    }
                    reader.readAsDataURL(file);
                }
            });
        }
        
        // Auto-save notification
        const form = document.getElementById('settingsForm');
        let saveTimeout;
        
        form.addEventListener('input', function() {
            clearTimeout(saveTimeout);
            
            // Show auto-save indicator
            const saveBtn = document.querySelector('button[form="settingsForm"]');
            const originalText = saveBtn.innerHTML;
            saveBtn.innerHTML = '<i class="fas fa-sync-alt fa-spin mr-2"></i> Saving...';
            saveBtn.disabled = true;
            
            saveTimeout = setTimeout(() => {
                saveBtn.innerHTML = originalText;
                saveBtn.disabled = false;
                
                // Show saved notification
                const notification = document.createElement('div');
                notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50';
                notification.innerHTML = '<i class="fas fa-check mr-2"></i> Changes saved locally';
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    notification.remove();
                }, 2000);
            }, 1000);
        });
    });
</script>
@endsection