@extends('layouts.admin')

@section('content')
<div class="container mx-auto p-6">
    <h1 class="text-2xl font-bold mb-4 text-gray-800">Create Category</h1>
    <form action="{{ route('admin.categories.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">Name <span class="text-red-500">*</span></label>
            <input type="text" name="name" class="w-full border rounded p-2 focus:ring-blue-500 focus:border-blue-500" value="{{ old('name') }}" required>
            @error('name')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">Parent Category</label>
            <select name="parent_id" class="w-full border rounded p-2 focus:ring-blue-500 focus:border-blue-500">
                <option value="">None</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat->id }}" {{ old('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>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">Description <span class="text-red-500">*</span></label>
            <textarea name="description" class="w-full border rounded p-2 focus:ring-blue-500 focus:border-blue-500" rows="6" required>{{ old('description') }}</textarea>
            @error('description')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">Thumbnail Image <span class="text-red-500">*</span></label>
            <input type="file" name="thumb" class="w-full border rounded 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" accept="image/*" required>
            <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>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">Header Image (Optional)</label>
            <input type="file" name="header" class="w-full border rounded 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" 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>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">Video (Optional)</label>
            <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', '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', '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', 'none') === 'none' ? 'checked' : '' }} checked>
                    <span class="text-sm text-gray-700">None</span>
                </label>
            </div>
            <div id="youtube-input" class="{{ old('video_type', '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') }}" 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', 'none') === 'local' ? '' : 'hidden' }}">
                <input type="file" name="video" class="w-full border rounded 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" 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>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">Additional Images (Optional)</label>
            <input type="file" name="images[]" class="w-full border rounded 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" 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>
        <!-- Featured Item Toggle -->
        <div class="mb-4">
            <label class="flex items-center cursor-pointer">
                <div class="relative">
                    <input type="checkbox" name="featured_item" value="1" class="sr-only" {{ old('featured_item') ? 'checked' : '' }}>
                    <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner"></div>
                    <div class="dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition transform {{ old('featured_item') ? 'translate-x-full bg-blue-600' : '' }}"></div>
                </div>
                <span class="ml-3 text-sm font-medium text-gray-700">Featured Item</span>
            </label>
            @error('featured_item')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">Create Category</button>
        <a href="{{ route('admin.categories.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 ml-2">Cancel</a>
    </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 maxImageSize = 2 * 1024 * 1024; // 2MB for thumb and header
        const maxAdditionalImageSize = 10 * 1024 * 1024; // 10MB for additional images
        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 = '';
            }
        });
    });
</script>

<!-- JavaScript for Toggle Switch -->
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const toggle = document.querySelector('input[name="featured_item"]');
        const dot = toggle.nextElementSibling.nextElementSibling;

        toggle.addEventListener('change', () => {
            if (toggle.checked) {
                dot.classList.add('translate-x-full', 'bg-blue-600');
                dot.classList.remove('bg-white');
            } else {
                dot.classList.remove('translate-x-full', 'bg-blue-600');
                dot.classList.add('bg-white');
            }
        });
    });
</script>

<!-- CSS for Toggle Switch -->
<style>
    .dot {
        transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    }
</style>
@endsection