@extends('layouts.admin')

@section('content')
    <div class="container mx-auto p-6 max-w-7xl">
        <!-- Page Header -->
        <div class="mb-8 flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-800">Edit Category</h1>
                <p class="text-sm text-gray-500 mt-1">Update details for "{{ $category->name }}"</p>
            </div>
            <a href="{{ route('admin.categories.index') }}" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition duration-200 text-sm font-medium">Back to Categories</a>
        </div>

        <form action="{{ route('admin.categories.update', $category) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <!-- Two-Column Layout -->
            <div class="flex flex-col md:flex-row gap-6">
                <!-- Left Column: Basic Information and Media -->
                <div class="flex-1 flex flex-col gap-6">
                    <!-- Basic Information Card -->
                    <div class="bg-white shadow-lg rounded-lg p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-xl font-semibold text-gray-800">Basic Information</h2>
                            <span class="text-sm text-gray-500">Required fields are marked with *</span>
                        </div>
                        <div class="flex flex-col gap-6">
                            <!-- Name -->
                            <div class="flex flex-col gap-2">
                                <label for="name" class="text-sm font-medium text-gray-700">Name <span class="text-red-500">*</span></label>
                                <input 
                                    type="text" 
                                    id="name" 
                                    name="name" 
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200" 
                                    value="{{ old('name', $category->name) }}" 
                                    required
                                    placeholder="Enter category name"
                                >
                                @error('name')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <!-- Parent Category -->
                            <div class="flex flex-col gap-2">
                                <label for="parent_id" class="text-sm font-medium text-gray-700">Parent Category</label>
                                <select 
                                    id="parent_id" 
                                    name="parent_id" 
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200"
                                >
                                    <option value="">None</option>
                                    @foreach($categories as $cat)
                                        <option value="{{ $cat->id }}" {{ old('parent_id', $category->parent_id) == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                    @endforeach
                                </select>
                                @error('parent_id')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <!-- Description -->
                            <div class="flex flex-col gap-2">
                                <label for="description" class="text-sm font-medium text-gray-700">Description <span class="text-red-500">*</span></label>
                                <textarea 
                                    id="description" 
                                    name="description" 
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 resize-y" 
                                    rows="5" 
                                    required
                                    placeholder="Describe the category"
                                >{{ old('description', $category->description) }}</textarea>
                                @error('description')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <!-- Active and Featured Checkboxes -->
                            <div class="flex flex-col gap-4 sm:flex-row sm:gap-6">
                                <label class="flex items-center gap-2">
                                    <input 
                                        type="checkbox" 
                                        id="active" 
                                        name="active" 
                                        value="1" 
                                        class="h-5 w-5 text-blue-600 rounded focus:ring-blue-500" 
                                        {{ old('active', $category->active) ? 'checked' : '' }}
                                    >
                                    <span class="text-sm text-gray-700">Active</span>
                                </label>
                                <label class="flex items-center gap-2">
                                    <input 
                                        type="checkbox" 
                                        id="featured_item" 
                                        name="featured_item" 
                                        value="1" 
                                        class="h-5 w-5 text-green-500 focus:ring-green-500 rounded" 
                                        {{ old('featured_item', $category->featured_item) ? 'checked' : '' }}
                                    >
                                    <span class="text-sm text-gray-700">Featured</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Media Card -->
                    <div class="bg-white shadow-lg rounded-lg p-6">
                        <h2 class="text-xl font-semibold text-gray-800 mb-4">Media</h2>
                        <div class="flex flex-col gap-6">
                            <!-- Thumbnail Image -->
                            <div class="flex flex-col gap-2">
                                <label for="thumb" class="text-sm font-medium text-gray-700">Thumbnail Image</label>
                                @if($category->thumb)
                                    <div class="flex items-center gap-4 mb-2">
                                        <img src="{{ asset('storage/' . $category->thumb) }}" alt="Thumbnail" class="w-20 h-20 object-cover rounded-lg">
                                        <label class="flex items-center gap-2">
                                            <input 
                                                type="checkbox" 
                                                name="delete_thumb" 
                                                value="1" 
                                                class="h-4 w-4 text-red-600 focus:ring-red-500 rounded"
                                            >
                                            <span class="text-sm text-gray-700">Delete Thumbnail</span>
                                        </label>
                                    </div>
                                @endif
                                <input 
                                    type="file" 
                                    id="thumb" 
                                    name="thumb" 
                                    class="w-full border border-gray-300 rounded-lg p-2 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-blue-50 file:text-blue-700 file:font-medium hover:file:bg-blue-100 transition duration-200" 
                                    accept="image/*"
                                >
                                <p class="text-sm text-gray-500 mt-1">Max size: 2MB. Filenames will be sanitized (spaces and special characters replaced).</p>
                                @error('thumb')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <!-- Header Image -->
                            <div class="flex flex-col gap-2">
                                <label for="header" class="text-sm font-medium text-gray-700">Header Image</label>
                                @if($category->header)
                                    <div class="flex items-center gap-4 mb-2">
                                        <img src="{{ asset('storage/' . $category->header) }}" alt="Header" class="w-20 h-20 object-cover rounded-lg">
                                        <label class="flex items-center gap-2">
                                            <input 
                                                type="checkbox" 
                                                name="delete_header" 
                                                value="1" 
                                                class="h-4 w-4 text-red-600 focus:ring-red-500 rounded"
                                            >
                                            <span class="text-sm text-gray-700">Delete Header Image</span>
                                        </label>
                                    </div>
                                @endif
                                <input 
                                    type="file" 
                                    id="header" 
                                    name="header" 
                                    class="w-full border border-gray-300 rounded-lg p-2 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-blue-50 file:text-blue-700 file:font-medium hover:file:bg-blue-100 transition duration-200" 
                                    accept="image/*"
                                >
                                <p class="text-sm text-gray-500 mt-1">Max size: 2MB. Filenames will be sanitized (spaces and special characters replaced).</p>
                                @error('header')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <!-- Video -->
                            <div class="flex flex-col gap-2">
                                <label class="text-sm font-medium text-gray-700">Video</label>
                                @if($category->youtube || $category->video)
                                    <div class="mb-4">
                                        <p class="text-sm text-gray-600 mb-2">Current Video Preview:</p>
                                        @if($category->youtube)
                                            <iframe 
                                                class="w-full h-48 rounded-lg" 
                                                src="{{ \Illuminate\Support\Str::startsWith($category->youtube, 'https://www.youtube.com/embed/') ? $category->youtube : 'https://www.youtube.com/embed/' . \Illuminate\Support\Str::after($category->youtube, 'v=') }}" 
                                                title="Current Video" 
                                                frameborder="0" 
                                                allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                                allowfullscreen
                                            ></iframe>
                                        @else
                                            <video 
                                                class="w-full h-48 rounded-lg" 
                                                controls 
                                                preload="metadata"
                                                aria-label="Current Video"
                                            >
                                                <source src="{{ asset('storage/' . $category->video) }}" type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video>
                                        @endif
                                        <label class="flex items-center gap-2 mt-2">
                                            <input 
                                                type="checkbox" 
                                                name="delete_video" 
                                                value="1" 
                                                class="h-4 w-4 text-red-600 focus:ring-red-500 rounded"
                                            >
                                            <span class="text-sm text-gray-700">Delete Current Video</span>
                                        </label>
                                    </div>
                                @endif
                                <div class="flex gap-4 mb-4">
                                    <label class="flex items-center gap-2">
                                        <input 
                                            type="radio" 
                                            name="video_type" 
                                            value="youtube" 
                                            class="video-type h-4 w-4 text-blue-600 focus:ring-blue-500" 
                                            {{ old('video_type', $category->youtube ? 'youtube' : ($category->video ? 'local' : 'none')) === 'youtube' ? 'checked' : '' }}
                                        >
                                        <span class="text-sm text-gray-700">YouTube</span>
                                    </label>
                                    <label class="flex items-center gap-2">
                                        <input 
                                            type="radio" 
                                            name="video_type" 
                                            value="local" 
                                            class="video-type h-4 w-4 text-blue-600 focus:ring-blue-500" 
                                            {{ old('video_type', $category->video ? 'local' : 'none') === 'local' ? 'checked' : '' }}
                                        >
                                        <span class="text-sm text-gray-700">Upload</span>
                                    </label>
                                    <label class="flex items-center gap-2">
                                        <input 
                                            type="radio" 
                                            name="video_type" 
                                            value="none" 
                                            class="video-type h-4 w-4 text-blue-600 focus:ring-blue-500" 
                                            {{ old('video_type', !$category->youtube && !$category->video ? 'none' : '') === 'none' ? 'checked' : '' }}
                                        >
                                        <span class="text-sm text-gray-700">None</span>
                                    </label>
                                </div>
                                <div id="youtube-input" class="{{ old('video_type', $category->youtube ? 'youtube' : 'none') === 'youtube' ? '' : 'hidden' }}">
                                    <input 
                                        type="text" 
                                        name="youtube" 
                                        class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200" 
                                        value="{{ old('youtube', $category->youtube) }}" 
                                        placeholder="e.g., https://www.youtube.com/watch?v=VIDEO_ID"
                                    >
                                    @error('youtube')
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div id="local-video-input" class="{{ old('video_type', $category->video ? 'local' : 'none') === 'local' ? '' : 'hidden' }}">
                                    <input 
                                        type="file" 
                                        name="video" 
                                        class="w-full border border-gray-300 rounded-lg p-2 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-blue-50 file:text-blue-700 file:font-medium hover:file:bg-blue-100 transition duration-200" 
                                        accept="video/mp4"
                                    >
                                    <p class="text-sm text-gray-500 mt-1">Max size: 100MB. Filenames will be sanitized (spaces and special characters replaced).</p>
                                    @error('video')
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <!-- Additional Images -->
                            <div class="flex flex-col gap-2">
                                <label for="images" class="text-sm font-medium text-gray-700">Additional Images</label>
                                @if($category->meta && $category->meta->images && is_array($category->meta->images))
                                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-4">
                                        @foreach($category->meta->images as $index => $image)
                                            <div class="relative group" x-data="{ markedForDeletion: false }">
                                                <img 
                                                    src="{{ asset('storage/' . $image) }}" 
                                                    alt="Additional Image {{ $index + 1 }}" 
                                                    class="w-full h-24 object-cover rounded-lg"
                                                    :class="{ 'opacity-50': markedForDeletion }"
                                                >
                                                <div 
                                                    class="absolute inset-0 flex items-center justify-center text-red-600 font-semibold text-sm"
                                                    x-show="markedForDeletion"
                                                    x-cloak
                                                >
                                                    Marked for Deletion
                                                </div>
                                                <button 
                                                    type="button" 
                                                    class="absolute top-2 right-2 bg-red-600 text-white p-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
                                                    @click="if (confirm('Are you sure you want to delete this image?')) { markedForDeletion = true; $refs.deleteInput_{{ $index }}.checked = true; console.log('Marked for deletion:', '{{ $image }}'); }"
                                                    aria-label="Delete image {{ $index + 1 }}"
                                                >
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                                    </svg>
                                                </button>
                                                <input 
                                                    type="checkbox" 
                                                    name="delete_images[]" 
                                                    value="{{ $image }}" 
                                                    class="hidden" 
                                                    x-ref="deleteInput_{{ $index }}"
                                                >
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <p class="text-gray-500 text-sm mb-4">No additional images uploaded.</p>
                                @endif
                                <input 
                                    type="file" 
                                    id="images" 
                                    name="images[]" 
                                    class="w-full border border-gray-300 rounded-lg p-2 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-blue-50 file:text-blue-700 file:font-medium hover:file:bg-blue-100 transition duration-200" 
                                    accept="image/*" 
                                    multiple
                                >
                                <p class="text-sm text-gray-500 mt-1">Max 5 images, 10MB each, 100MB total. Filenames will be sanitized (spaces and special characters replaced).</p>
                                @error('images.*')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column: SEO Settings and Additional Settings -->
                <div class="flex-1 flex flex-col gap-6">
                    <!-- SEO Settings Card (Collapsible) -->
                    <div x-data="{ open: false }" class="bg-white shadow-lg rounded-lg overflow-hidden">
                        <button 
                            type="button" 
                            @click="open = !open" 
                            class="w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition duration-200"
                            aria-expanded="false"
                            x-bind:aria-expanded="open"
                        >
                            <h2 class="text-xl font-semibold text-gray-800">SEO Settings</h2>
                            <svg 
                                class="w-5 h-5 text-gray-500 transform transition-transform duration-200" 
                                x-bind:class="open ? 'rotate-180' : ''" 
                                fill="none" 
                                stroke="currentColor" 
                                viewBox="0 0 24 24"
                            >
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="open" x-transition class="p-6 flex flex-col gap-6">
                            <!-- Meta Title -->
                            <div class="flex flex-col gap-2">
                                <label for="meta_title" class="text-sm font-medium text-gray-700">Meta Title</label>
                                <input 
                                    type="text" 
                                    id="meta_title" 
                                    name="meta[title]" 
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200" 
                                    value="{{ old('meta.title', optional($category->meta)->title) }}"
                                    placeholder="Enter SEO title"
                                >
                                @error('meta.title')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <!-- Meta Description -->
                            <div class="flex flex-col gap-2">
                                <label for="meta_description" class="text-sm font-medium text-gray-700">Meta Description</label>
                                <textarea 
                                    id="meta_description" 
                                    name="meta[description]" 
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 resize-y" 
                                    rows="4"
                                    placeholder="Enter SEO description"
                                >{{ old('meta.description', optional($category->meta)->description) }}</textarea>
                                @error('meta.description')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <!-- Meta Keywords -->
                            <div class="flex flex-col gap-2">
                                <label for="meta_keywords" class="text-sm font-medium text-gray-700">Meta Keywords</label>
                                <input 
                                    type="text" 
                                    id="meta_keywords" 
                                    name="meta[keywords]" 
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200" 
                                    value="{{ old('meta.keywords', optional($category->meta)->keywords) }}"
                                    placeholder="Enter keywords (comma-separated)"
                                >
                                @error('meta.keywords')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <!-- SEO Image (Open Graph Image) -->
                            <div class="flex flex-col gap-2">
                                <label for="meta_image" class="text-sm font-medium text-gray-700">SEO Image (Open Graph Image)</label>
                                @if($category->meta && $category->meta->image)
                                    <div class="flex items-center gap-4 mb-2">
                                        <img src="{{ asset('storage/' . $category->meta->image) }}" alt="SEO Image" class="w-20 h-20 object-cover rounded-lg">
                                        <label class="flex items-center gap-2">
                                            <input 
                                                type="checkbox" 
                                                name="delete_meta_image" 
                                                value="1" 
                                                class="h-4 w-4 text-red-600 focus:ring-red-500 rounded"
                                            >
                                            <span class="text-sm text-gray-700">Delete SEO Image</span>
                                        </label>
                                    </div>
                                @endif
                                <input 
                                    type="file" 
                                    id="meta_image" 
                                    name="meta_image" 
                                    class="w-full border border-gray-300 rounded-lg p-2 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-blue-50 file:text-blue-700 file:font-medium hover:file:bg-blue-100 transition duration-200" 
                                    accept="image/*"
                                >
                                <p class="text-sm text-gray-500 mt-1">Max size: 10MB. Filenames will be sanitized (spaces and special characters replaced).</p>
                                @error('meta_image')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Additional Settings Card (Collapsible) -->
                    <div x-data="{ open: false }" class="bg-white shadow-lg rounded-lg overflow-hidden">
                        <button 
                            type="button" 
                            @click="open = !open" 
                            class="w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition duration-200"
                            aria-expanded="false"
                            x-bind:aria-expanded="open"
                        >
                            <h2 class="text-xl font-semibold text-gray-800">Additional Settings</h2>
                            <svg 
                                class="w-5 h-5 text-gray-500 transform transition-transform duration-200" 
                                x-bind:class="open ? 'rotate-180' : ''" 
                                fill="none" 
                                stroke="currentColor" 
                                viewBox="0 0 24 24"
                            >
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="open" x-transition class="p-6 flex flex-col gap-6">
                            <!-- Hours -->
                            <div class="flex flex-col gap-2">
                                <label for="hours" class="text-sm font-medium text-gray-700">Hours</label>
                                <input 
                                    type="text" 
                                    id="hours" 
                                    name="hours" 
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200" 
                                    value="{{ old('hours', $category->hours) }}"
                                    placeholder="e.g., Mon-Fri 9AM-5PM"
                                >
                                @error('hours')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <!-- Cuisine -->
                            <div class="flex flex-col gap-2">
                                <label for="cuisine" class="text-sm font-medium text-gray-700">Cuisine</label>
                                <input 
                                    type="text" 
                                    id="cuisine" 
                                    name="cuisine" 
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200" 
                                    value="{{ old('cuisine', $category->cuisine) }}"
                                    placeholder="e.g., Italian, American"
                                >
                                @error('cuisine')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <!-- Rating -->
                            <div class="flex flex-col gap-2">
                                <label for="rating" class="text-sm font-medium text-gray-700">Rating (0-5)</label>
                                <input 
                                    type="number" 
                                    id="rating" 
                                    name="rating" 
                                    step="0.1" 
                                    min="0" 
                                    max="5" 
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200" 
                                    value="{{ old('rating', $category->rating) }}"
                                    placeholder="e.g., 4.5"
                                >
                                @error('rating')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <!-- Address -->
                            <div class="flex flex-col gap-2">
                                <label for="address" class="text-sm font-medium text-gray-700">Address</label>
                                <input 
                                    type="text" 
                                    id="address" 
                                    name="address" 
                                    class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200" 
                                    value="{{ old('address', $category->address) }}"
                                    placeholder="Enter address"
                                >
                                @error('address')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex justify-end gap-4 mt-6">
                <button 
                    type="submit" 
                    class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition duration-200"
                >
                    Update Category
                </button>
                <a 
                    href="{{ route('admin.categories.index') }}" 
                    class="bg-gray-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-700 transition duration-200"
                >
                    Cancel
                </a>
            </div>
        </form>
    </div>

    <!-- JavaScript for Video Input Toggle -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const videoTypes = document.querySelectorAll('.video-type');
            const youtubeInput = document.getElementById('youtube-input');
            const localVideoInput = document.getElementById('local-video-input');

            const toggleVideoInputs = () => {
                youtubeInput.classList.add('hidden');
                localVideoInput.classList.add('hidden');
                const checkedType = document.querySelector('.video-type:checked');
                if (checkedType?.value === 'youtube') {
                    youtubeInput.classList.remove('hidden');
                } else if (checkedType?.value === 'local') {
                    localVideoInput.classList.remove('hidden');
                }
            };

            videoTypes.forEach(type => type.addEventListener('change', toggleVideoInputs));
            toggleVideoInputs();
        });
    </script>

    <!-- JavaScript for File Validation -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const thumbInput = document.querySelector('input[name="thumb"]');
            const headerInput = document.querySelector('input[name="header"]');
            const videoInput = document.querySelector('input[name="video"]');
            const imagesInput = document.querySelector('input[name="images[]"]');
            const metaImageInput = document.querySelector('input[name="meta_image"]');
            const maxImageSize = 2 * 1024 * 1024; // 2MB for thumb and header
            const maxAdditionalImageSize = 10 * 1024 * 1024; // 10MB for additional images and meta_image
            const maxVideoSize = 100 * 1024 * 1024; // 100MB for video
            const maxTotalSize = 100 * 1024 * 1024; // 100MB total for additional images
            const maxFiles = 5;

            // Validate thumbnail
            thumbInput.addEventListener('change', () => {
                const file = thumbInput.files[0];
                if (file && file.size > maxImageSize) {
                    alert(`Thumbnail "${file.name}" exceeds 2MB limit.`);
                    thumbInput.value = '';
                }
            });

            // Validate header
            headerInput.addEventListener('change', () => {
                const file = headerInput.files[0];
                if (file && file.size > maxImageSize) {
                    alert(`Header image "${file.name}" exceeds 2MB limit.`);
                    headerInput.value = '';
                }
            });

            // Validate video
            videoInput.addEventListener('change', () => {
                const file = videoInput.files[0];
                if (file && file.size > maxVideoSize) {
                    alert(`Video "${file.name}" exceeds 100MB limit.`);
                    videoInput.value = '';
                }
            });

            // Validate additional images
            imagesInput.addEventListener('change', () => {
                const files = imagesInput.files;
                let totalSize = 0;

                if (files.length > maxFiles) {
                    alert(`Maximum ${maxFiles} images allowed.`);
                    imagesInput.value = '';
                    return;
                }

                for (const file of files) {
                    totalSize += file.size;
                    if (file.size > maxAdditionalImageSize) {
                        alert(`File "${file.name}" exceeds 10MB limit.`);
                        imagesInput.value = '';
                        return;
                    }
                }

                if (totalSize > maxTotalSize) {
                    alert(`Total size (${(totalSize / 1024 / 1024).toFixed(2)}MB) exceeds 100MB limit.`);
                    imagesInput.value = '';
                }
            });

            // Validate SEO image
            metaImageInput.addEventListener('change', () => {
                const file = metaImageInput.files[0];
                if (file && file.size > maxAdditionalImageSize) {
                    alert(`SEO Image "${file.name}" exceeds 10MB limit.`);
                    metaImageInput.value = '';
                }
            });
        });
    </script>
@endsection