@extends('layouts.admin')
@section('title', 'Create Post')
@section('header', 'Create Post')

@section('content')
<form method="POST" action="{{ route('admin.posts.store') }}" 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-gray-700 mb-2">Title</label>
            <input type="text" name="title" value="{{ old('title') }}" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-accent" required>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Post Type</label>
            <div class="flex gap-4">
                @foreach(['image', 'video', 'article'] as $type)
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="type" value="{{ $type }}" {{ old('type') === $type ? 'checked' : '' }} class="post-type-radio" onchange="toggleMediaFields()">
                    <span class="text-gray-700">{{ ucfirst($type) }}</span>
                </label>
                @endforeach
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
            <select name="category" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-accent" required>
                <option value="">Select Category</option>
                <option value="energy" {{ old('category') === 'energy' ? 'selected' : '' }}>Energy</option>
                <option value="it" {{ old('category') === 'it' ? 'selected' : '' }}>IT</option>
                <option value="electronics" {{ old('category') === 'electronics' ? 'selected' : '' }}>Electronics</option>
                <option value="news" {{ old('category') === 'news' ? 'selected' : '' }}>News</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" name="is_published" value="1" {{ old('is_published') ? 'checked' : '' }} class="rounded text-accent focus:ring-accent">
                <span class="text-gray-700">Publish immediately</span>
            </label>
        </div>
    </div>

    <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">Content</label>
        <textarea name="content" rows="6" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-accent">{{ old('content') }}</textarea>
    </div>

    <div id="media-fields" class="hidden">
        <div id="image-field" class="hidden">
            <label class="block text-sm font-medium text-gray-700 mb-2">Image (jpg, png, webp - max 10MB)</label>
            <input type="file" name="media" accept="image/jpeg,image/png,image/webp" class="w-full border rounded-lg p-2">
        </div>
        <div id="video-field" class="hidden">
            <label class="block text-sm font-medium text-gray-700 mb-2">Video (mp4, mov - max 200MB)</label>
            <input type="file" name="video" accept="video/mp4,video/quicktime,video/webm" class="w-full border rounded-lg p-2">
        </div>
    </div>

    <div id="thumbnail-field" class="hidden">
        <label class="block text-sm font-medium text-gray-700 mb-2">Thumbnail (jpg, png, webp - max 5MB)</label>
        <input type="file" name="thumbnail" accept="image/jpeg,image/png,image/webp" class="w-full border rounded-lg p-2">
    </div>

    <div class="flex gap-4">
        <button type="submit" class="px-6 py-2 bg-accent text-primary font-semibold rounded-lg hover:bg-primary-100">Save Draft</button>
        <button type="submit" name="is_published" value="1" class="px-6 py-2 bg-primary text-white font-semibold rounded-lg hover:bg-primary-700">Publish</button>
    </div>
</form>

<script>
function toggleMediaFields() {
    const type = document.querySelector('input[name="type"]:checked')?.value;
    const mediaFields = document.getElementById('media-fields');
    const imageField = document.getElementById('image-field');
    const videoField = document.getElementById('video-field');
    const thumbnailField = document.getElementById('thumbnail-field');

    if (type === 'image' || type === 'video') {
        mediaFields.classList.remove('hidden');
        thumbnailField.classList.remove('hidden');
        if (type === 'image') {
            imageField.classList.remove('hidden');
            videoField.classList.add('hidden');
        } else {
            imageField.classList.add('hidden');
            videoField.classList.remove('hidden');
        }
    } else {
        mediaFields.classList.add('hidden');
        thumbnailField.classList.add('hidden');
        imageField.classList.add('hidden');
        videoField.classList.add('hidden');
    }
}

document.addEventListener('DOMContentLoaded', toggleMediaFields);
</script>
@endsection