@extends('layouts.admin')

@section('title', 'System Settings')

@section('content')
<div class="space-y-6 max-w-4xl mx-auto">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <h2 class="font-serif text-2xl text-[#0c2340]">System Settings</h2>
    </div>

    <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data" class="bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden">
        @csrf
        @method('PUT')
        
        <div class="p-8 space-y-8">
            <!-- General Settings -->
            <div>
                <h3 class="text-lg font-bold text-[#0c2340] mb-4 border-b border-gray-100 pb-2">General Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Site Name *</label>
                        <input type="text" name="site_name" value="{{ old('site_name', $settings['site_name'] ?? 'Tourism App') }}" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('site_name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Contact Email *</label>
                        <input type="email" name="site_email" value="{{ old('site_email', $settings['site_email'] ?? 'info@tourism.com') }}" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('site_email') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Contact Phone *</label>
                        <input type="text" name="site_phone" value="{{ old('site_phone', $settings['site_phone'] ?? '+1 234 567 8900') }}" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('site_phone') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Company Address *</label>
                        <textarea name="site_address" rows="2" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">{{ old('site_address', $settings['site_address'] ?? '123 Tourism Street, City, Country') }}</textarea>
                        @error('site_address') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Site Description</label>
                        <textarea name="site_description" rows="3" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">{{ old('site_description', $settings['site_description'] ?? 'Discover the world with our premium tourism packages.') }}</textarea>
                        @error('site_description') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>

            <!-- Branding / Site Identity -->
            <div>
                <h3 class="text-lg font-bold text-[#0c2340] mb-4 border-b border-gray-100 pb-2">Branding</h3>
                <p class="text-sm text-gray-500 mb-4">Upload your logo and favicon. These will appear across the website and admin panel. Recommended: Logo PNG/SVG with transparent background (max 2MB). Favicon: 512×512 PNG or ICO (max 1MB).</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    
                    <!-- Logo Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Site Logo</label>
                        
                        @if(isset($logoUrl) && $logoUrl)
                            <div class="mb-3 p-4 bg-gray-50 rounded-2xl border border-gray-200">
                                <p class="text-xs text-gray-500 mb-2 font-medium">Current Logo</p>
                                <img src="{{ $logoUrl }}" alt="Current Logo" class="max-h-16 w-auto object-contain bg-white rounded-lg p-2 shadow-sm border">
                                <p class="text-[10px] text-gray-400 mt-1 break-all">Stored path: {{ $settings['site_logo']['value'] ?? 'N/A' }}</p>
                            </div>
                        @endif
                        
                        <div class="flex items-center gap-3">
                            <label class="cursor-pointer inline-flex items-center px-4 py-2.5 bg-white border border-gray-300 hover:border-[#c9a84c] rounded-xl text-sm font-medium text-gray-700 transition-colors">
                                <i data-feather="upload" class="w-4 h-4 mr-2"></i>
                                <span>Choose Logo</span>
                                <input type="file" name="site_logo" id="site_logo" accept="image/png,image/jpeg,image/svg+xml,image/webp" class="hidden" onchange="previewImage(this, 'logo-preview')">
                            </label>
                            @if(isset($logoUrl) && $logoUrl)
                                <span class="text-xs text-gray-400">Uploading new file will replace current</span>
                            @endif
                        </div>
                        
                        <div id="logo-preview" class="mt-3 hidden">
                            <p class="text-xs text-gray-500 mb-1">New logo preview:</p>
                            <img class="max-h-16 w-auto object-contain bg-white rounded-lg p-2 shadow-sm border" />
                        </div>
                    </div>
                    
                    <!-- Favicon Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Favicon</label>
                        
                        @if(isset($faviconUrl) && $faviconUrl)
                            <div class="mb-3 p-4 bg-gray-50 rounded-2xl border border-gray-200 inline-block">
                                <p class="text-xs text-gray-500 mb-2 font-medium">Current Favicon</p>
                                <img src="{{ $faviconUrl }}" alt="Current Favicon" class="w-10 h-10 object-contain bg-white rounded p-1 shadow-sm border">
                                <p class="text-[10px] text-gray-400 mt-1 break-all">Stored path: {{ $settings['site_favicon']['value'] ?? 'N/A' }}</p>
                            </div>
                        @endif
                        
                        <div class="flex items-center gap-3">
                            <label class="cursor-pointer inline-flex items-center px-4 py-2.5 bg-white border border-gray-300 hover:border-[#c9a84c] rounded-xl text-sm font-medium text-gray-700 transition-colors">
                                <i data-feather="image" class="w-4 h-4 mr-2"></i>
                                <span>Choose Favicon</span>
                                <input type="file" name="site_favicon" id="site_favicon" accept="image/png,image/jpeg,image/svg+xml,image/x-icon,.ico,image/webp" class="hidden" onchange="previewImage(this, 'favicon-preview')">
                            </label>
                            @if(isset($faviconUrl) && $faviconUrl)
                                <span class="text-xs text-gray-400">Replaces current</span>
                            @endif
                        </div>
                        
                        <div id="favicon-preview" class="mt-3 hidden">
                            <p class="text-xs text-gray-500 mb-1">New favicon preview:</p>
                            <img class="w-10 h-10 object-contain bg-white rounded p-1 shadow-sm border" />
                        </div>
                    </div>
                    
                </div>

                <!-- Storage Link Diagnostic / Help -->
                <div class="mt-6 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-2xl">
                    <div class="flex items-start gap-3">
                        <i data-feather="alert-circle" class="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0"></i>
                        <div class="text-sm">
                            <p class="font-semibold text-amber-800 dark:text-amber-200 mb-1">Important: Images not appearing?</p>
                            <p class="text-amber-700 dark:text-amber-300">
                                Run this command once in your terminal (from the project root):
                            </p>
                            <code class="block mt-2 px-3 py-1.5 bg-white dark:bg-gray-900 rounded font-mono text-xs text-amber-900 dark:text-amber-100">php artisan storage:link</code>
                            <p class="text-xs mt-2 text-amber-600 dark:text-amber-400">
                                This creates the necessary link so uploaded logos/favicons can be publicly accessed.
                                On Windows this sometimes needs to be run as Administrator.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Branding / Site Identity -->
            <div>
                <h3 class="text-lg font-bold text-[#0c2340] mb-4 border-b border-gray-100 pb-2">Branding</h3>
                <p class="text-sm text-gray-500 mb-4">Upload your logo and favicon. These will appear across the website and admin panel. Recommended: Logo PNG/SVG with transparent background (max 2MB). Favicon: 512×512 PNG or ICO (max 1MB).</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    
                    <!-- Logo Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Site Logo</label>
                        
                        @if(isset($logoUrl) && $logoUrl)
                            <div class="mb-3 p-4 bg-gray-50 rounded-2xl border border-gray-200">
                                <p class="text-xs text-gray-500 mb-2 font-medium">Current Logo</p>
                                <img src="{{ $logoUrl }}" alt="Current Logo" class="max-h-16 w-auto object-contain bg-white rounded-lg p-2 shadow-sm border">
                                <p class="text-[10px] text-gray-400 mt-1 break-all">Stored path: {{ $settings['site_logo']['value'] ?? 'N/A' }}</p>
                            </div>
                        @endif
                        
                        <div class="flex items-center gap-3">
                            <label class="cursor-pointer inline-flex items-center px-4 py-2.5 bg-white border border-gray-300 hover:border-[#c9a84c] rounded-xl text-sm font-medium text-gray-700 transition-colors">
                                <i data-feather="upload" class="w-4 h-4 mr-2"></i>
                                <span>Choose Logo</span>
                                <input type="file" name="site_logo" id="site_logo" accept="image/png,image/jpeg,image/svg+xml,image/webp" class="hidden" onchange="previewImage(this, 'logo-preview')">
                            </label>
                            @if(isset($logoUrl) && $logoUrl)
                                <span class="text-xs text-gray-400">Uploading new file will replace current</span>
                            @endif
                        </div>
                        
                        <div id="logo-preview" class="mt-3 hidden">
                            <p class="text-xs text-gray-500 mb-1">New logo preview:</p>
                            <img class="max-h-16 w-auto object-contain bg-white rounded-lg p-2 shadow-sm border" />
                        </div>
                    </div>
                    
                    <!-- Favicon Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Favicon</label>
                        
                        @if(isset($faviconUrl) && $faviconUrl)
                            <div class="mb-3 p-4 bg-gray-50 rounded-2xl border border-gray-200 inline-block">
                                <p class="text-xs text-gray-500 mb-2 font-medium">Current Favicon</p>
                                <img src="{{ $faviconUrl }}" alt="Current Favicon" class="w-10 h-10 object-contain bg-white rounded p-1 shadow-sm border">
                                <p class="text-[10px] text-gray-400 mt-1 break-all">Stored path: {{ $settings['site_favicon']['value'] ?? 'N/A' }}</p>
                            </div>
                        @endif
                        
                        <div class="flex items-center gap-3">
                            <label class="cursor-pointer inline-flex items-center px-4 py-2.5 bg-white border border-gray-300 hover:border-[#c9a84c] rounded-xl text-sm font-medium text-gray-700 transition-colors">
                                <i data-feather="image" class="w-4 h-4 mr-2"></i>
                                <span>Choose Favicon</span>
                                <input type="file" name="site_favicon" id="site_favicon" accept="image/png,image/jpeg,image/svg+xml,image/x-icon,.ico,image/webp" class="hidden" onchange="previewImage(this, 'favicon-preview')">
                            </label>
                            @if(isset($faviconUrl) && $faviconUrl)
                                <span class="text-xs text-gray-400">Replaces current</span>
                            @endif
                        </div>
                        
                        <div id="favicon-preview" class="mt-3 hidden">
                            <p class="text-xs text-gray-500 mb-1">New favicon preview:</p>
                            <img class="w-10 h-10 object-contain bg-white rounded p-1 shadow-sm border" />
                        </div>
                    </div>
                    
                </div>

                <!-- Storage Link Diagnostic / Help -->
                <div class="mt-6 p-4 bg-amber-50 border border-amber-200 rounded-2xl">
                    <div class="flex items-start gap-3">
                        <i data-feather="alert-circle" class="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0"></i>
                        <div class="text-sm">
                            <p class="font-semibold text-amber-800 mb-1">Important: Images not appearing?</p>
                            <p class="text-amber-700">
                                Run this command once in your terminal (from the project root):
                            </p>
                            <code class="block mt-2 px-3 py-1.5 bg-white rounded font-mono text-xs text-amber-900">php artisan storage:link</code>
                            <p class="text-xs mt-2 text-amber-600">
                                This creates the necessary link so uploaded logos/favicons can be publicly accessed.
                                On Windows this sometimes needs to be run as Administrator.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Homepage Statistics -->
            <div>
                <h3 class="text-lg font-bold text-[#0c2340] mb-4 border-b border-gray-100 pb-2">Homepage Statistics</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Destinations Count</label>
                        <input type="text" name="stats_destinations" value="{{ old('stats_destinations', $settings['stats_destinations'] ?? '50+') }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Travelers Count</label>
                        <input type="text" name="stats_travelers" value="{{ old('stats_travelers', $settings['stats_travelers'] ?? '5000+') }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Average Rating</label>
                        <input type="text" name="stats_rating" value="{{ old('stats_rating', $settings['stats_rating'] ?? '4.9/5') }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                    </div>
                </div>
            </div>

            <!-- Online Payment Methods -->
            <div>
                <h3 class="text-lg font-bold text-[#0c2340] mb-4 border-b border-gray-100 pb-2">Online Payment Methods</h3>
                <p class="text-sm text-gray-500 mb-4">Enable or disable the payment gateways available during checkout.</p>
                
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-4 border border-gray-200 rounded-xl">
                        <div>
                            <div class="font-semibold text-[#0c2340]">Flutterwave</div>
                            <p class="text-xs text-gray-500">Accept card, bank transfer, USSD, and mobile money</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="payment_flutterwave_enabled" value="1" 
                                   {{ old('payment_flutterwave_enabled', $settings['payment_flutterwave_enabled'] ?? true) ? 'checked' : '' }} 
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-[#c9a84c] rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#c9a84c]"></div>
                        </label>
                    </div>

                    <div class="flex items-center justify-between p-4 border border-gray-200 rounded-xl">
                        <div>
                            <div class="font-semibold text-[#0c2340]">PayPal</div>
                            <p class="text-xs text-gray-500">Accept international payments via PayPal</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="payment_paypal_enabled" value="1" 
                                   {{ old('payment_paypal_enabled', $settings['payment_paypal_enabled'] ?? false) ? 'checked' : '' }} 
                                   class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-[#c9a84c] rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#c9a84c]"></div>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Social Links -->
            <div>
                <h3 class="text-lg font-bold text-[#0c2340] mb-4 border-b border-gray-100 pb-2">Social Media Links</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2"><i data-feather="facebook" class="w-4 h-4 text-[#1877F2]"></i> Facebook</label>
                        <input type="url" name="social_facebook" value="{{ old('social_facebook', $settings['social_facebook'] ?? '') }}" placeholder="https://facebook.com/..." class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('social_facebook') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2"><i data-feather="twitter" class="w-4 h-4 text-[#1DA1F2]"></i> Twitter</label>
                        <input type="url" name="social_twitter" value="{{ old('social_twitter', $settings['social_twitter'] ?? '') }}" placeholder="https://twitter.com/..." class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('social_twitter') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2"><i data-feather="instagram" class="w-4 h-4 text-[#E4405F]"></i> Instagram</label>
                        <input type="url" name="social_instagram" value="{{ old('social_instagram', $settings['social_instagram'] ?? '') }}" placeholder="https://instagram.com/..." class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-[#c9a84c] focus:border-transparent transition-all">
                        @error('social_instagram') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>
        </div>

        <div class="px-8 py-5 bg-gray-50/50 border-t border-gray-100 flex justify-end">
            <button type="submit" class="px-8 py-3 rounded-full font-bold bg-[#0c2340] text-white hover:bg-[#1a4a6e] transition-colors shadow-lg hover:shadow-xl">
                Save Settings
            </button>
        </div>
    </form>
</div>

<script>
function previewImage(input, previewContainerId) {
    const previewContainer = document.getElementById(previewContainerId);
    if (!previewContainer) return;
    
    const img = previewContainer.querySelector('img');
    if (!img) return;

    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            img.src = e.target.result;
            previewContainer.classList.remove('hidden');
            previewContainer.classList.add('block');
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection