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

@section('content')
<form method="POST" action="{{ route('admin.posts.update', $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-gray-700 mb-2">Title</label>
            <input type="text" name="title" value="{{ old('title', $post->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 }}" {{ $post->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" {{ $post->category === 'energy' ? 'selected' : '' }}>Energy</option>
                <option value="it" {{ $post->category === 'it' ? 'selected' : '' }}>IT</option>
                <option value="electronics" {{ $post->category === 'electronics' ? 'selected' : '' }}>Electronics</option>
                <option value="news" {{ $post->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" {{ $post->is_published ? 'checked' : '' }} class="rounded text-accent focus:ring-accent">
                <span class="text-gray-700">Published</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', $post->content) }}</textarea>
    </div>

    @if($post->media_path)
    <div class="bg-gray-50 p-4 rounded-lg">
        <p class="text-sm text-gray-600 mb-2">Current media:</p>
        @if($post->type === 'video')
        <video controls class="w-full max-w-md rounded">
            <source src="{{ asset('storage/' . $post->media_path) }}">
        </video>
        @else
        <img src="{{ asset('storage/' . $post->media_path) }}" class="w-full max-w-md rounded">
        @endif
    </div>
    @endif

    @if($post->thumbnail_path)
    <div class="bg-gray-50 p-4 rounded-lg">
        <p class="text-sm text-gray-600 mb-2">Current thumbnail:</p>
        <img src="{{ asset('storage/' . $post->thumbnail_path) }}" class="w-48 rounded">
    </div>
    @endif

    <div id="media-fields">
        <div id="image-field" class="{{ $post->type !== 'image' ? 'hidden' : '' }}">
            <label class="block text-sm font-medium text-gray-700 mb-2">Replace 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="{{ $post->type !== 'video' ? 'hidden' : '' }}">
            <label class="block text-sm font-medium text-gray-700 mb-2">Replace 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="{{ !in_array($post->type, ['image', 'video']) ? 'hidden' : '' }}">
        <label class="block text-sm font-medium text-gray-700 mb-2">Replace 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">Update</button>
        <a href="{{ route('admin.posts.index') }}" class="px-6 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400">Cancel</a>
    </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');
    }
}
</script>
@endsection