@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">Create New Brand Setting</h3>
                        <a href="{{ route('admin.brand.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Brand Settings
                        </a>
                    </div>
                </div>

                <form method="POST" action="{{ route('admin.brand.store') }}">
                    @csrf
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="key">Setting Key <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('key') is-invalid @enderror" 
                                           id="key" name="key" value="{{ old('key') }}" required>
                                    <small class="form-text text-muted">Unique identifier (e.g., 'site_name', 'primary_color')</small>
                                    @error('key')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="label">Display Label <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('label') is-invalid @enderror" 
                                           id="label" name="label" value="{{ old('label') }}" required>
                                    <small class="form-text text-muted">Human-readable name for this setting</small>
                                    @error('label')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="type">Setting Type <span class="text-danger">*</span></label>
                                    <select class="form-control @error('type') is-invalid @enderror" id="type" name="type" required>
                                        <option value="">Select Type</option>
                                        <option value="text" {{ old('type') === 'text' ? 'selected' : '' }}>Text</option>
                                        <option value="email" {{ old('type') === 'email' ? 'selected' : '' }}>Email</option>
                                        <option value="url" {{ old('type') === 'url' ? 'selected' : '' }}>URL</option>
                                        <option value="color" {{ old('type') === 'color' ? 'selected' : '' }}>Color</option>
                                        <option value="boolean" {{ old('type') === 'boolean' ? 'selected' : '' }}>Boolean (Yes/No)</option>
                                        <option value="image" {{ old('type') === 'image' ? 'selected' : '' }}>Image URL</option>
                                        <option value="json" {{ old('type') === 'json' ? 'selected' : '' }}>JSON Data</option>
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="category">Category <span class="text-danger">*</span></label>
                                    <select class="form-control @error('category') is-invalid @enderror" id="category" name="category" required>
                                        <option value="">Select Category</option>
                                        <option value="general" {{ old('category') === 'general' ? 'selected' : '' }}>General</option>
                                        <option value="branding" {{ old('category') === 'branding' ? 'selected' : '' }}>Branding</option>
                                        <option value="contact" {{ old('category') === 'contact' ? 'selected' : '' }}>Contact</option>
                                        <option value="seo" {{ old('category') === 'seo' ? 'selected' : '' }}>SEO</option>
                                        <option value="social" {{ old('category') === 'social' ? 'selected' : '' }}>Social Media</option>
                                    </select>
                                    @error('category')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="value">Setting Value <span class="text-danger">*</span></label>
                                    <div id="value-input-container">
                                        <input type="text" class="form-control @error('value') is-invalid @enderror" 
                                               id="value" name="value" value="{{ old('value') }}" required>
                                    </div>
                                    @error('value')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="description">Description</label>
                                    <textarea class="form-control @error('description') is-invalid @enderror" 
                                              id="description" name="description" rows="3">{{ old('description') }}</textarea>
                                    <small class="form-text text-muted">Optional description explaining what this setting controls</small>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="sort_order">Sort Order</label>
                                    <input type="number" class="form-control @error('sort_order') is-invalid @enderror" 
                                           id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}" min="0">
                                    <small class="form-text text-muted">Order within category (0 = first)</small>
                                    @error('sort_order')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-check mt-4">
                                        <input type="hidden" name="is_public" value="0">
                                        <input type="checkbox" class="form-check-input" id="is_public" name="is_public" 
                                               value="1" {{ old('is_public') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_public">
                                            Public Setting
                                        </label>
                                    </div>
                                    <small class="form-text text-muted">Public settings are visible on frontend pages</small>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            <strong>Setting Types Guide:</strong>
                            <ul class="mb-0 mt-2">
                                <li><strong>Text:</strong> Simple text input (site name, tagline, etc.)</li>
                                <li><strong>Email:</strong> Email address with validation</li>
                                <li><strong>URL:</strong> Website URL with validation</li>
                                <li><strong>Color:</strong> Color picker for brand colors</li>
                                <li><strong>Boolean:</strong> Yes/No toggle switches</li>
                                <li><strong>Image:</strong> Image URL or file upload</li>
                                <li><strong>JSON:</strong> Complex data structures</li>
                            </ul>
                        </div>
                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Create Setting
                        </button>
                        <a href="{{ route('admin.brand.index') }}" class="btn btn-secondary">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const typeSelect = document.getElementById('type');
    const valueContainer = document.getElementById('value-input-container');
    const originalInput = document.getElementById('value');
    
    typeSelect.addEventListener('change', function() {
        updateValueInput(this.value);
    });
    
    function updateValueInput(type) {
        const currentValue = originalInput.value;
        let newInput;
        
        switch(type) {
            case 'email':
                newInput = `<input type="email" class="form-control" id="value" name="value" value="${currentValue}" required>`;
                break;
            case 'url':
                newInput = `<input type="url" class="form-control" id="value" name="value" value="${currentValue}" required>`;
                break;
            case 'color':
                newInput = `
                    <div class="input-group">
                        <input type="color" class="form-control" id="value" name="value" value="${currentValue || '#000000'}" required style="height: 40px;">
                        <div class="input-group-append">
                            <input type="text" class="form-control" value="${currentValue || '#000000'}" readonly>
                        </div>
                    </div>`;
                break;
            case 'boolean':
                newInput = `
                    <div class="custom-control custom-switch">
                        <input type="hidden" name="value" value="0">
                        <input type="checkbox" class="custom-control-input" id="value" name="value" value="1" ${currentValue === '1' ? 'checked' : ''}>
                        <label class="custom-control-label" for="value">Enabled</label>
                    </div>`;
                break;
            case 'json':
                newInput = `<textarea class="form-control" id="value" name="value" rows="4" required>${currentValue}</textarea>
                           <small class="form-text text-muted">Enter valid JSON data</small>`;
                break;
            default:
                newInput = `<input type="text" class="form-control" id="value" name="value" value="${currentValue}" required>`;
        }
        
        valueContainer.innerHTML = newInput;
        
        // Re-attach color input synchronization if needed
        if (type === 'color') {
            const colorInput = valueContainer.querySelector('input[type="color"]');
            const textInput = valueContainer.querySelector('input[type="text"]');
            
            colorInput.addEventListener('input', function() {
                textInput.value = this.value;
            });
            
            textInput.addEventListener('input', function() {
                if (/^#[0-9A-F]{6}$/i.test(this.value)) {
                    colorInput.value = this.value;
                }
            });
        }
    }
});
</script>
@endsection