@extends('layouts.admin')

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

@section('breadcrumbs')
    <li class="breadcrumb-item active">Site Settings</li>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Site Settings</h1>
            <p class="text-muted">Manage website content, branding, and contact information</p>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                <i class="fas fa-cog me-2"></i>Actions
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#exportModal">
                        <i class="fas fa-download me-2"></i>Export Settings
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#importModal">
                        <i class="fas fa-upload me-2"></i>Import Settings
                    </a>
                </li>
                <li><hr class="dropdown-divider"></li>
                <li>
                    <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#resetModal">
                        <i class="fas fa-undo me-2"></i>Reset to Defaults
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="{{ route('admin.site-settings.initialize') }}">
                        <i class="fas fa-magic me-2"></i>Initialize Defaults
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Settings Form -->
    <form method="POST" action="{{ route('admin.site-settings.update') }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        
        <div class="row">
            <div class="col-lg-9">
                <!-- Settings Tabs -->
                <div class="card shadow">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs" id="settingsTabs" role="tablist">
                            @foreach($settings as $groupKey => $group)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link {{ $loop->first ? 'active' : '' }}" 
                                            id="{{ $groupKey }}-tab" 
                                            data-bs-toggle="tab" 
                                            data-bs-target="#{{ $groupKey }}" 
                                            type="button" 
                                            role="tab">
                                        @switch($groupKey)
                                            @case('header')
                                                <i class="fas fa-heading me-2"></i>
                                                @break
                                            @case('hero')
                                                <i class="fas fa-star me-2"></i>
                                                @break
                                            @case('contact')
                                                <i class="fas fa-phone me-2"></i>
                                                @break
                                            @case('footer')
                                                <i class="fas fa-code me-2"></i>
                                                @break
                                            @case('social')
                                                <i class="fas fa-share-alt me-2"></i>
                                                @break
                                            @default
                                                <i class="fas fa-cog me-2"></i>
                                        @endswitch
                                        {{ $group['label'] }}
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    
                    <div class="card-body">
                        <div class="tab-content" id="settingsTabContent">
                            @foreach($settings as $groupKey => $group)
                                <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" 
                                     id="{{ $groupKey }}" 
                                     role="tabpanel">
                                    
                                    <h5 class="mb-4 text-primary">
                                        @switch($groupKey)
                                            @case('header')
                                                <i class="fas fa-heading me-2"></i>Header & Branding Settings
                                                @break
                                            @case('hero')
                                                <i class="fas fa-star me-2"></i>Hero Section Content
                                                @break
                                            @case('contact')
                                                <i class="fas fa-phone me-2"></i>Contact Information
                                                @break
                                            @case('footer')
                                                <i class="fas fa-code me-2"></i>Footer & Developer Credits
                                                @break
                                            @case('social')
                                                <i class="fas fa-share-alt me-2"></i>Social Media Links
                                                @break
                                        @endswitch
                                    </h5>
                                    
                                    @if($group['settings']->count() > 0)
                                        <div class="row">
                                            @foreach($group['settings'] as $setting)
                                                <div class="col-md-{{ $setting->type === 'textarea' ? '12' : '6' }} mb-4">
                                                    <label for="{{ $setting->key }}" class="form-label">
                                                        <strong>{{ $setting->label }}</strong>
                                                        @if($setting->description)
                                                            <i class="fas fa-info-circle ms-1" 
                                                               data-bs-toggle="tooltip" 
                                                               title="{{ $setting->description }}"></i>
                                                        @endif
                                                    </label>
                                                    
                                                    @switch($setting->type)
                                                        @case('textarea')
                                                            <textarea class="form-control" 
                                                                      id="{{ $setting->key }}" 
                                                                      name="settings[{{ $setting->key }}]" 
                                                                      rows="3"
                                                                      placeholder="{{ $setting->description }}">{{ old('settings.' . $setting->key, $setting->value) }}</textarea>
                                                            @break
                                                            
                                                        @case('email')
                                                            <input type="email" 
                                                                   class="form-control" 
                                                                   id="{{ $setting->key }}" 
                                                                   name="settings[{{ $setting->key }}]" 
                                                                   value="{{ old('settings.' . $setting->key, $setting->value) }}"
                                                                   placeholder="{{ $setting->description }}">
                                                            @break
                                                            
                                                        @case('url')
                                                            <input type="url" 
                                                                   class="form-control" 
                                                                   id="{{ $setting->key }}" 
                                                                   name="settings[{{ $setting->key }}]" 
                                                                   value="{{ old('settings.' . $setting->key, $setting->value) }}"
                                                                   placeholder="{{ $setting->description }}">
                                                            @break
                                                            
                                                        @case('number')
                                                            <input type="number" 
                                                                   class="form-control" 
                                                                   id="{{ $setting->key }}" 
                                                                   name="settings[{{ $setting->key }}]" 
                                                                   value="{{ old('settings.' . $setting->key, $setting->value) }}"
                                                                   placeholder="{{ $setting->description }}">
                                                            @break
                                                            
                                                        @case('image')
                                                            <div class="mb-2">
                                                                @if($setting->value)
                                                                    <div class="current-image mb-2">
                                                                        <img src="{{ asset('storage/' . $setting->value) }}" 
                                                                             alt="{{ $setting->label }}" 
                                                                             class="img-thumbnail" 
                                                                             style="max-height: 100px;">
                                                                        <div class="small text-muted mt-1">Current: {{ basename($setting->value) }}</div>
                                                                    </div>
                                                                @endif
                                                                <input type="file" 
                                                                       class="form-control" 
                                                                       id="{{ $setting->key }}" 
                                                                       name="files[{{ $setting->key }}]" 
                                                                       accept="image/*">
                                                                <input type="hidden" 
                                                                       name="settings[{{ $setting->key }}]" 
                                                                       value="{{ $setting->value }}">
                                                            </div>
                                                            <div class="form-text">Upload a new image to replace the current one. Supported formats: JPG, PNG, GIF, SVG (max 2MB)</div>
                                                            @break
                                                            
                                                        @case('boolean')
                                                            <div class="form-check form-switch">
                                                                <input class="form-check-input" 
                                                                       type="checkbox" 
                                                                       id="{{ $setting->key }}" 
                                                                       name="settings[{{ $setting->key }}]" 
                                                                       value="1"
                                                                       {{ old('settings.' . $setting->key, $setting->value) ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="{{ $setting->key }}">
                                                                    {{ $setting->description }}
                                                                </label>
                                                            </div>
                                                            @break
                                                            
                                                        @default
                                                            <input type="text" 
                                                                   class="form-control" 
                                                                   id="{{ $setting->key }}" 
                                                                   name="settings[{{ $setting->key }}]" 
                                                                   value="{{ old('settings.' . $setting->key, $setting->value) }}"
                                                                   placeholder="{{ $setting->description }}">
                                                    @endswitch
                                                    
                                                    @error('settings.' . $setting->key)
                                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <div class="text-center py-4">
                                            <i class="fas fa-cog fa-3x text-gray-300 mb-3"></i>
                                            <h5 class="text-gray-600">No Settings Found</h5>
                                            <p class="text-muted">No settings are configured for this group.</p>
                                            <a href="{{ route('admin.site-settings.initialize') }}" class="btn btn-primary">
                                                <i class="fas fa-magic me-2"></i>Initialize Default Settings
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Sidebar -->
            <div class="col-lg-3">
                <!-- Save Actions -->
                <div class="card shadow mb-4">
                    <div class="card-header">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-save me-2"></i>Save Changes
                        </h6>
                    </div>
                    <div class="card-body">
                        <button type="submit" class="btn btn-primary w-100 mb-2">
                            <i class="fas fa-save me-2"></i>Update Settings
                        </button>
                        <a href="{{ route('admin.site-settings.index') }}" class="btn btn-outline-secondary w-100">
                            <i class="fas fa-times me-2"></i>Cancel Changes
                        </a>
                    </div>
                </div>
                
                <!-- Preview -->
                <div class="card shadow mb-4">
                    <div class="card-header">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-eye me-2"></i>Preview
                        </h6>
                    </div>
                    <div class="card-body">
                        <a href="{{ route('welcome') }}" target="_blank" class="btn btn-outline-info w-100">
                            <i class="fas fa-external-link-alt me-2"></i>View Website
                        </a>
                        <div class="form-text mt-2">
                            Open the website in a new tab to see your changes after saving.
                        </div>
                    </div>
                </div>
                
                <!-- Help -->
                <div class="card shadow">
                    <div class="card-header">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-question-circle me-2"></i>Help
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="small">
                            <p><strong>Header & Branding:</strong> Configure site logo, title, and subtitle displayed in the header.</p>
                            <p><strong>Hero Section:</strong> Main banner content on the homepage.</p>
                            <p><strong>Contact Information:</strong> Contact details displayed throughout the site.</p>
                            <p><strong>Footer & Credits:</strong> Developer information and credits.</p>
                            <p><strong>Social Media:</strong> Links to social media profiles.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Export Modal -->
<div class="modal fade" id="exportModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Export Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Export all site settings as a JSON file for backup or transfer purposes.</p>
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Note:</strong> Image files are not included in the export. Only settings data will be exported.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <a href="{{ route('admin.site-settings.export') }}" class="btn btn-primary">
                    <i class="fas fa-download me-2"></i>Download Export
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('admin.site-settings.import') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Import Settings</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Import site settings from a previously exported JSON file.</p>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Warning:</strong> This will overwrite existing settings with the same keys.
                    </div>
                    <div class="mb-3">
                        <label for="settings_file" class="form-label">Settings File</label>
                        <input type="file" class="form-control" id="settings_file" name="settings_file" accept=".json" required>
                        <div class="form-text">Select a JSON file exported from this system.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-upload me-2"></i>Import Settings
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Reset Modal -->
<div class="modal fade" id="resetModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reset to Defaults</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Reset all site settings to their default values.</p>
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Warning:</strong> This action cannot be undone. All current settings will be replaced with default values.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <a href="{{ route('admin.site-settings.reset') }}" class="btn btn-danger">
                    <i class="fas fa-undo me-2"></i>Reset to Defaults
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Auto-resize textareas
    document.querySelectorAll('textarea').forEach(function(textarea) {
        textarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });
        
        // Initial resize
        textarea.style.height = 'auto';
        textarea.style.height = (textarea.scrollHeight) + 'px';
    });

    // Preview image uploads
    document.querySelectorAll('input[type="file"]').forEach(function(input) {
        input.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const currentImage = input.closest('.mb-2').querySelector('.current-image img');
                    if (currentImage) {
                        currentImage.src = e.target.result;
                    }
                };
                reader.readAsDataURL(file);
            }
        });
    });
</script>
@endsection