@extends('layouts.admin')
@section('title', 'Edit Template')
@section('page-title', 'Edit Template')
@section('page-subtitle', 'Update global content template')

@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.global') }}" 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)]">Edit Template</h2>
                <p class="text-sm text-[var(--text-secondary)] font-mono">{{ $frontendContent->key }}</p>
            </div>
        </div>

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

            <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 }}" {{ $frontendContent->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', $frontendContent->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">
                    @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" {{ $frontendContent->type === 'text' ? 'selected' : '' }}>Text</option>
                    <option value="textarea" {{ $frontendContent->type === 'textarea' ? 'selected' : '' }}>Textarea (Long Text)</option>
                    <option value="image" {{ $frontendContent->type === 'image' ? 'selected' : '' }}>Image</option>
                    <option value="url" {{ $frontendContent->type === 'url' ? 'selected' : '' }}>URL Link</option>
                    <option value="number" {{ $frontendContent->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', $frontendContent->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', $frontendContent->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 New Image</label>
                @if($frontendContent->value)
                    <div class="mb-3">
                        <p class="text-sm text-[var(--text-secondary)] mb-2">Current Image:</p>
                        <img src="{{ asset('storage/' . $frontendContent->value) }}" class="w-48 h-32 object-cover rounded-lg border border-[var(--border-color)]">
                    </div>
                @endif
                <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">Leave empty to keep current image. Max size: 5MB</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', $frontendContent->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', $frontendContent->sort_order) }}" 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" {{ $frontendContent->is_active ? '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.global') }}" 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> Update Template
                </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');
    
    textField.classList.add('hidden');
    textareaField.classList.add('hidden');
    imageField.classList.add('hidden');
    urlField.classList.add('hidden');
    
    urlInput.removeAttribute('required');
    
    switch(type) {
        case 'textarea':
            textareaField.classList.remove('hidden');
            break;
        case 'image':
            imageField.classList.remove('hidden');
            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