@extends('layouts.admin')
@section('title', 'Add Content')
@section('page-title', 'Add Content')
@section('page-subtitle', 'Add new frontend content')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="card-royal p-6">
        <div class="flex items-center gap-4 mb-6">
            <a href="{{ route('admin.frontend-content.index') }}" class="p-2 rounded-lg hover:bg-[var(--bg-secondary)] text-[var(--text-secondary)]">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div>
                <h2 class="font-cinzel font-semibold text-xl text-[var(--text-primary)]">Add New Content</h2>
                <p class="text-sm text-[var(--text-secondary)]">Add content to display on your website</p>
            </div>
        </div>

        <form action="{{ route('admin.frontend-content.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Section *</label>
                    <select name="section" required class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-gold-500">
                        @foreach($sections as $key => $name)
                            <option value="{{ $key }}" {{ old('section') === $key ? 'selected' : '' }}>{{ $name }}</option>
                        @endforeach
                    </select>
                    @error('section')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Content Key *</label>
                    <input type="text" name="key" value="{{ old('key') }}" required placeholder="e.g., hero_title"
                        class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-gold-500 font-mono text-sm">
                    <p class="text-xs text-[var(--text-secondary)] mt-1">Unique identifier (use snake_case)</p>
                    @error('key')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Content Type *</label>
                <select name="type" id="contentType" onchange="toggleContentFields()" required class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-gold-500">
                    <option value="text" {{ old('type') === 'text' ? 'selected' : '' }}>Text</option>
                    <option value="textarea" {{ old('type') === 'textarea' ? 'selected' : '' }}>Textarea (Long Text)</option>
                    <option value="image" {{ old('type') === 'image' ? 'selected' : '' }}>Image</option>
                    <option value="url" {{ old('type') === 'url' ? 'selected' : '' }}>URL Link</option>
                    <option value="number" {{ old('type') === 'number' ? 'selected' : '' }}>Number</option>
                </select>
                @error('type')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div id="textField">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Content Value</label>
                <input type="text" name="value" id="valueInput" value="{{ old('value') }}" placeholder="Enter text content"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-gold-500">
                @error('value')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div id="textareaField" class="hidden">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Content Value (Long Text)</label>
                <textarea name="value" id="valueTextarea" rows="5" placeholder="Enter long text content"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-gold-500">{{ old('value') }}</textarea>
                @error('value')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div id="imageField" class="hidden">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Upload Image</label>
                <input type="file" name="image" accept="image/*" id="imageInput"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-gold-500">
                <p class="text-xs text-[var(--text-secondary)] mt-1">Max size: 5MB. Accepted formats: JPG, PNG, GIF, WebP</p>
                @error('image')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div id="urlField" class="hidden">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">URL</label>
                <input type="url" name="value" id="urlInput" value="{{ old('value') }}" placeholder="https://example.com"
                    class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-gold-500">
                @error('value')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Sort Order</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" min="0"
                        class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-gold-500">
                    @error('sort_order')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center h-full pt-6">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="is_active" value="1" checked
                            class="rounded border-gold-500 text-gold-500 focus:ring-gold-500 w-5 h-5">
                        <span class="text-[var(--text-primary)]">Active (show on website)</span>
                    </label>
                </div>
            </div>

            <div class="flex justify-end gap-3 pt-4 border-t border-[var(--border-color)]">
                <a href="{{ route('admin.frontend-content.index') }}" class="px-6 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                    Cancel
                </a>
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">
                    <i class="fas fa-save mr-2"></i> Save Content
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function toggleContentFields() {
    const type = document.getElementById('contentType').value;
    const textField = document.getElementById('textField');
    const textareaField = document.getElementById('textareaField');
    const imageField = document.getElementById('imageField');
    const urlField = document.getElementById('urlField');
    const valueInput = document.getElementById('valueInput');
    const valueTextarea = document.getElementById('valueTextarea');
    const urlInput = document.getElementById('urlInput');
    const imageInput = document.getElementById('imageInput');
    
    textField.classList.add('hidden');
    textareaField.classList.add('hidden');
    imageField.classList.add('hidden');
    urlField.classList.add('hidden');
    
    valueInput.removeAttribute('required');
    urlInput.removeAttribute('required');
    
    switch(type) {
        case 'textarea':
            textareaField.classList.remove('hidden');
            break;
        case 'image':
            imageField.classList.remove('hidden');
            imageInput.setAttribute('required', 'required');
            break;
        case 'url':
            urlField.classList.remove('hidden');
            urlInput.setAttribute('required', 'required');
            break;
        case 'number':
            textField.classList.remove('hidden');
            valueInput.type = 'number';
            valueInput.placeholder = 'Enter a number';
            break;
        default:
            textField.classList.remove('hidden');
            valueInput.type = 'text';
            valueInput.placeholder = 'Enter text content';
    }
}

toggleContentFields();
</script>
@endsection