@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">Edit Brand Settings</h3>
                        <div>
                            <a href="{{ route('admin.brand.preview') }}" class="btn btn-info" target="_blank">
                                <i class="fas fa-eye"></i> Preview
                            </a>
                            <a href="{{ route('admin.brand.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to Brand Settings
                            </a>
                        </div>
                    </div>
                </div>

                <form method="POST" action="{{ route('admin.brand.update') }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    
                    <div class="card-body">
                        @if($settings->count() > 0)
                            @foreach($settings as $category => $categorySettings)
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h5 class="mb-0">
                                            <i class="fas fa-{{ 
                                                $category === 'general' ? 'info-circle' : 
                                                ($category === 'branding' ? 'palette' : 
                                                ($category === 'contact' ? 'address-book' : 
                                                ($category === 'seo' ? 'search' : 'cog'))) 
                                            }}"></i>
                                            {{ ucfirst($category) }} Settings
                                        </h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            @foreach($categorySettings as $setting)
                                                <div class="col-md-6 mb-3">
                                                    <div class="form-group">
                                                        <label for="setting_{{ $setting->id }}">
                                                            {{ $setting->label }}
                                                            @if($setting->is_public)
                                                                <span class="badge badge-success badge-sm">Public</span>
                                                            @endif
                                                        </label>
                                                        
                                                        @if($setting->type === 'text' || $setting->type === 'email' || $setting->type === 'url')
                                                            <input type="{{ $setting->type === 'email' ? 'email' : ($setting->type === 'url' ? 'url' : 'text') }}" 
                                                                   class="form-control" 
                                                                   id="setting_{{ $setting->id }}" 
                                                                   name="settings[{{ $setting->id }}][value]" 
                                                                   value="{{ old('settings.'.$setting->id.'.value', $setting->value) }}">
                                                        @elseif($setting->type === 'color')
                                                            <div class="input-group">
                                                                <input type="color" 
                                                                       class="form-control" 
                                                                       id="setting_{{ $setting->id }}" 
                                                                       name="settings[{{ $setting->id }}][value]" 
                                                                       value="{{ old('settings.'.$setting->id.'.value', $setting->value) }}"
                                                                       style="height: 40px;">
                                                                <div class="input-group-append">
                                                                    <input type="text" 
                                                                           class="form-control" 
                                                                           value="{{ old('settings.'.$setting->id.'.value', $setting->value) }}"
                                                                           readonly>
                                                                </div>
                                                            </div>
                                                        @elseif($setting->type === 'boolean')
                                                            <div class="custom-control custom-switch">
                                                                <input type="hidden" name="settings[{{ $setting->id }}][value]" value="0">
                                                                <input type="checkbox" 
                                                                       class="custom-control-input" 
                                                                       id="setting_{{ $setting->id }}" 
                                                                       name="settings[{{ $setting->id }}][value]" 
                                                                       value="1"
                                                                       {{ old('settings.'.$setting->id.'.value', $setting->typed_value) ? 'checked' : '' }}>
                                                                <label class="custom-control-label" for="setting_{{ $setting->id }}">
                                                                    {{ $setting->typed_value ? 'Enabled' : 'Disabled' }}
                                                                </label>
                                                            </div>
                                                        @elseif($setting->type === 'image')
                                                            <div>
                                                                @if($setting->value)
                                                                    <div class="mb-2">
                                                                        <img src="{{ $setting->value }}" alt="{{ $setting->label }}" 
                                                                             style="max-width: 150px; max-height: 100px;" class="img-thumbnail">
                                                                        <div class="mt-1">
                                                                            <small class="text-muted">Current: {{ basename($setting->value) }}</small>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                                <input type="file" 
                                                                       class="form-control-file" 
                                                                       id="image_{{ $setting->id }}" 
                                                                       name="image_{{ $setting->id }}" 
                                                                       accept="image/*">
                                                                <input type="hidden" 
                                                                       name="settings[{{ $setting->id }}][value]" 
                                                                       value="{{ $setting->value }}">
                                                                <small class="form-text text-muted">
                                                                    Upload a new image to replace the current one
                                                                </small>
                                                            </div>
                                                        @else
                                                            <textarea class="form-control" 
                                                                      id="setting_{{ $setting->id }}" 
                                                                      name="settings[{{ $setting->id }}][value]" 
                                                                      rows="3">{{ old('settings.'.$setting->id.'.value', $setting->value) }}</textarea>
                                                        @endif

                                                        @if($setting->description)
                                                            <small class="form-text text-muted">{{ $setting->description }}</small>
                                                        @endif

                                                        <!-- Hidden fields for other setting properties -->
                                                        <input type="hidden" name="settings[{{ $setting->id }}][label]" value="{{ $setting->label }}">
                                                        <input type="hidden" name="settings[{{ $setting->id }}][description]" value="{{ $setting->description }}">
                                                        <input type="hidden" name="settings[{{ $setting->id }}][sort_order]" value="{{ $setting->sort_order }}">
                                                        
                                                        <!-- Public visibility toggle -->
                                                        <div class="mt-2">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="hidden" name="settings[{{ $setting->id }}][is_public]" value="0">
                                                                <input type="checkbox" 
                                                                       class="custom-control-input" 
                                                                       id="public_{{ $setting->id }}" 
                                                                       name="settings[{{ $setting->id }}][is_public]" 
                                                                       value="1"
                                                                       {{ old('settings.'.$setting->id.'.is_public', $setting->is_public) ? 'checked' : '' }}>
                                                                <label class="custom-control-label" for="public_{{ $setting->id }}">
                                                                    <small>Show on public pages</small>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="alert alert-info text-center">
                                <h5><i class="fas fa-info-circle"></i> No Brand Settings Found</h5>
                                <p>Please seed the default settings first.</p>
                                <a href="{{ route('admin.brand.index') }}" class="btn btn-primary">
                                    <i class="fas fa-arrow-left"></i> Back to Brand Settings
                                </a>
                            </div>
                        @endif
                    </div>

                    @if($settings->count() > 0)
                        <div class="card-footer">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-save"></i> Save All Settings
                            </button>
                            <a href="{{ route('admin.brand.index') }}" class="btn btn-secondary">
                                Cancel
                            </a>
                            
                            <div class="float-right">
                                <a href="{{ route('admin.brand.preview') }}" class="btn btn-info" target="_blank">
                                    <i class="fas fa-eye"></i> Preview Changes
                                </a>
                            </div>
                        </div>
                    @endif
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Live Preview Panel -->
<div class="row mt-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    <i class="fas fa-eye"></i> Live Preview
                    <small class="text-muted">- Changes will appear here as you type</small>
                </h5>
            </div>
            <div class="card-body">
                <div id="live-preview">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="preview-section p-3 border rounded" style="background: linear-gradient(135deg, var(--primary-color, #6A1B9A), var(--secondary-color, #388E3C));">
                                <h3 class="text-white mb-2" id="preview-site-name">{{ \App\Models\BrandSetting::get('site_name', 'Brambles and Blessings') }}</h3>
                                <p class="text-white-50 mb-0" id="preview-tagline">{{ \App\Models\BrandSetting::get('site_tagline', 'Farm Management Excellence') }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="preview-contact p-3 border rounded bg-light">
                                <h6>Contact Information</h6>
                                <div class="text-muted">
                                    <div id="preview-email">{{ \App\Models\BrandSetting::get('contact_email', 'info@example.com') }}</div>
                                    <div id="preview-phone">{{ \App\Models\BrandSetting::get('contact_phone', '(555) 123-4567') }}</div>
                                    <div id="preview-address">{{ \App\Models\BrandSetting::get('business_address', 'Booneville, AR') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Live preview functionality
    const inputs = document.querySelectorAll('input[name*="[value]"], textarea[name*="[value]"]');
    
    inputs.forEach(input => {
        input.addEventListener('input', function() {
            updateLivePreview();
        });
    });
    
    function updateLivePreview() {
        // Update site name
        const siteNameInput = document.querySelector('input[name*="site_name"][name*="[value]"]');
        if (siteNameInput) {
            document.getElementById('preview-site-name').textContent = siteNameInput.value || 'Brambles and Blessings';
        }
        
        // Update tagline
        const taglineInput = document.querySelector('input[name*="site_tagline"][name*="[value]"]');
        if (taglineInput) {
            document.getElementById('preview-tagline').textContent = taglineInput.value || 'Farm Management Excellence';
        }
        
        // Update contact info
        const emailInput = document.querySelector('input[name*="contact_email"][name*="[value]"]');
        if (emailInput) {
            document.getElementById('preview-email').textContent = emailInput.value || 'info@example.com';
        }
        
        const phoneInput = document.querySelector('input[name*="contact_phone"][name*="[value]"]');
        if (phoneInput) {
            document.getElementById('preview-phone').textContent = phoneInput.value || '(555) 123-4567';
        }
        
        const addressInput = document.querySelector('input[name*="business_address"][name*="[value]"]');
        if (addressInput) {
            document.getElementById('preview-address').textContent = addressInput.value || 'Booneville, AR';
        }
        
        // Update colors
        const primaryColorInput = document.querySelector('input[name*="primary_color"][name*="[value]"]');
        const secondaryColorInput = document.querySelector('input[name*="secondary_color"][name*="[value]"]');
        
        if (primaryColorInput && secondaryColorInput) {
            const previewSection = document.querySelector('.preview-section');
            previewSection.style.background = `linear-gradient(135deg, ${primaryColorInput.value}, ${secondaryColorInput.value})`;
        }
    }
    
    // Color input synchronization
    const colorInputs = document.querySelectorAll('input[type="color"]');
    colorInputs.forEach(colorInput => {
        const textInput = colorInput.parentNode.querySelector('input[type="text"]');
        
        colorInput.addEventListener('input', function() {
            textInput.value = this.value;
            updateLivePreview();
        });
        
        textInput.addEventListener('input', function() {
            if (/^#[0-9A-F]{6}$/i.test(this.value)) {
                colorInput.value = this.value;
                updateLivePreview();
            }
        });
    });
});
</script>

<style>
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #007bff;
    background-color: #007bff;
}

.preview-section {
    transition: background 0.3s ease;
}

#live-preview {
    position: sticky;
    top: 20px;
}
</style>
@endsection