@extends('layouts.admin')
@section('title', 'Edit Content')
@section('page-title', 'Edit Content')
@section('page-subtitle', 'Update 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)]">Edit Content</h2>
                <p class="text-sm text-[var(--text-secondary)] font-mono">{{ $frontendContent->key }}</p>
            </div>
        </div>

        <form id="updateForm" action="{{ route('admin.frontend-content.update', $frontendContent) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-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)]">
                        @foreach($sections as $key => $name)
                            <option value="{{ $key }}" {{ $frontendContent->section === $key ? 'selected' : '' }}>{{ $name }}</option>
                        @endforeach
                    </select>
                </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 
                        class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] font-mono">
                </div>
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Content Type *</label>
                <select name="type" required class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    <option value="text" {{ $frontendContent->type === 'text' ? 'selected' : '' }}>Text</option>
                    <option value="textarea" {{ $frontendContent->type === 'textarea' ? 'selected' : '' }}>Textarea</option>
                    <option value="image" {{ $frontendContent->type === 'image' ? 'selected' : '' }}>Image</option>
                    <option value="url" {{ $frontendContent->type === 'url' ? 'selected' : '' }}>URL</option>
                    <option value="number" {{ $frontendContent->type === 'number' ? 'selected' : '' }}>Number</option>
                </select>
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Content Value</label>
                <textarea name="value" rows="4" class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">{{ old('value', $frontendContent->value) }}</textarea>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-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)]">
                </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="w-5 h-5">
                        <span class="text-[var(--text-primary)]">Active</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-3 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                    Cancel
                </a>
                <button type="submit" class="px-6 py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700">
                    Update Content
                </button>
            </div>
        </form>
    </div>
</div>
@endsection