@extends('layouts.admin')

@section('title', 'Create Post')
@section('header', 'Create Post')
@section('styles')
<style>
.media-modal .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.media-modal .aspect-square { aspect-ratio: 1; }
.media-modal img { object-fit: cover; width: 100%; height: 100%; }
</style>
@endsection

@section('content')
<a href="{{ route('admin.blog.posts.index') }}" class="inline-flex items-center text-gray-600 hover:text-gray-800 mb-4">
    <i class="fas fa-arrow-left mr-2"></i> Back
</a>

<form method="POST" action="{{ route('admin.blog.posts.store') }}" enctype="multipart/form-data" class="bg-white rounded-lg shadow-sm p-6">
    @csrf
    @if($errors->any())
    <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl">
        <div class="flex items-center gap-2 mb-2">
            <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <strong class="text-red-700">Please fix the following errors:</strong>
        </div>
        <ul class="list-disc list-inside text-sm text-red-600 space-y-1">
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Title *</label>
            <input type="text" name="title" value="{{ old('title') }}" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none {{ $errors->has('title') ? 'is-invalid border-red-500' : '' }}">
            @error('title')
            <p class="text-red-500 text-sm mt-1 validation-error">{{ $message }}</p>
            @enderror
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Slug *</label>
            <input type="text" name="slug" value="{{ old('slug') }}" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none {{ $errors->has('slug') ? 'is-invalid border-red-500' : '' }}">
            @error('slug')
            <p class="text-red-500 text-sm mt-1 validation-error">{{ $message }}</p>
            @enderror
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
            <select name="category_id" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none {{ $errors->has('category_id') ? 'is-invalid border-red-500' : '' }}">
                <option value="">Select category</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                @endforeach
            </select>
            @error('category_id')
            <p class="text-red-500 text-sm mt-1 validation-error">{{ $message }}</p>
            @enderror
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
            <select name="status" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none {{ $errors->has('status') ? 'is-invalid border-red-500' : '' }}">
                <option value="draft" {{ old('status', 'draft') === 'draft' ? 'selected' : '' }}>Draft</option>
                <option value="published" {{ old('status') === 'published' ? 'selected' : '' }}>Published</option>
            </select>
            @error('status')
            <p class="text-red-500 text-sm mt-1 validation-error">{{ $message }}</p>
            @enderror
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Related Doctor</label>
            <select name="doctor_id" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none {{ $errors->has('doctor_id') ? 'is-invalid border-red-500' : '' }}">
                <option value="">Select doctor (optional)</option>
                @foreach(\App\Models\Doctor::where('status', 'active')->orderBy('name')->get() as $doctor)
                    <option value="{{ $doctor->id }}" {{ old('doctor_id') == $doctor->id ? 'selected' : '' }}>{{ $doctor->name }}</option>
                @endforeach
            </select>
            @error('doctor_id')
            <p class="text-red-500 text-sm mt-1 validation-error">{{ $message }}</p>
            @enderror
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Related Hospital</label>
            <select name="hospital_id" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none {{ $errors->has('hospital_id') ? 'is-invalid border-red-500' : '' }}">
                <option value="">Select hospital (optional)</option>
                @foreach(\App\Models\Hospital::where('status', 'active')->orderBy('name')->get() as $hospital)
                    <option value="{{ $hospital->id }}" {{ old('hospital_id') == $hospital->id ? 'selected' : '' }}>{{ $hospital->name }}</option>
                @endforeach
            </select>
            @error('hospital_id')
            <p class="text-red-500 text-sm mt-1 validation-error">{{ $message }}</p>
            @enderror
        </div>
        <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-1">Featured Image</label>
            <input type="hidden" name="image" id="selectedImagePath" value="{{ old('image') }}">
            <div class="flex items-center gap-4">
                <img id="imagePreview" src="{{ old('image') ? asset('storage/' . old('image')) : 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%2394a3b8\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\'/%3E%3C/svg%3E' }}" class="w-24 h-24 rounded-lg object-cover border-2 border-gray-200 bg-gray-100">
                <div class="flex gap-2">
                    <button type="button" onclick="openMediaPicker()" class="px-3 py-2 bg-gray-100 text-gray-700 text-sm rounded-lg hover:bg-gray-200">
                        <i class="fas fa-images mr-1"></i>Media Library
                    </button>
                </div>
            </div>
            @error('image')
            <p class="text-red-500 text-sm mt-1 validation-error">{{ $message }}</p>
            @enderror
        </div>
        <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-2">Tags</label>
            <div class="flex flex-wrap gap-3">
                @foreach($tags as $tag)
                    <label class="flex items-center gap-2">
                        <input type="checkbox" name="tag_ids[]" value="{{ $tag->id }}" {{ in_array($tag->id, old('tag_ids', [])) ? 'checked' : '' }} class="w-4 h-4 text-blue-600 rounded">
                        <span class="text-sm text-gray-600">{{ $tag->name }}</span>
                    </label>
                @endforeach
            </div>
            @error('tag_ids')
            <p class="text-red-500 text-sm mt-1 validation-error">{{ $message }}</p>
            @enderror
        </div>
    </div>
    <div class="mt-6">
        <label class="block text-sm font-medium text-gray-700 mb-1">Excerpt</label>
        <textarea name="excerpt" rows="2" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none {{ $errors->has('excerpt') ? 'is-invalid border-red-500' : '' }}">{{ old('excerpt') }}</textarea>
        @error('excerpt')
        <p class="text-red-500 text-sm mt-1 validation-error">{{ $message }}</p>
        @enderror
    </div>
    <div class="mt-6">
        <label class="block text-sm font-medium text-gray-700 mb-1">Content</label>
        <textarea name="content" rows="6" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none {{ $errors->has('content') ? 'is-invalid border-red-500' : '' }}">{{ old('content') }}</textarea>
        @error('content')
        <p class="text-red-500 text-sm mt-1 validation-error">{{ $message }}</p>
        @enderror
    </div>

    <div class="mt-6 bg-gray-50 rounded-lg p-4">
        <h3 class="text-sm font-semibold text-gray-700 mb-4">SEO Settings</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">SEO Title</label>
                <input type="text" name="seo_title" value="{{ old('seo_title') }}" class="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Keywords</label>
                <input type="text" name="seo_keywords" value="{{ old('seo_keywords') }}" placeholder="keyword1, keyword2" class="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
            </div>
            <div class="md:col-span-2">
                <label class="block text-xs font-medium text-gray-500 mb-1">SEO Description</label>
                <textarea name="seo_description" rows="2" class="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">{{ old('seo_description') }}</textarea>
            </div>
        </div>
    </div>

    <div class="mt-6">
        <button type="submit" class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
            <i class="fas fa-save mr-2"></i>Create Post
        </button>
    </div>
</form>

<script>
function openMediaPicker() {
    document.getElementById('mediaPickerModal').classList.remove('hidden');
    loadMedia();
}

function closeMediaPicker() {
    document.getElementById('mediaPickerModal').classList.add('hidden');
}

document.addEventListener('DOMContentLoaded', function() {
    const titleInput = document.querySelector('input[name="title"]');
    const slugInput = document.querySelector('input[name="slug"]');
    
    if (titleInput && slugInput) {
        titleInput.addEventListener('blur', function() {
            if (!slugInput.value || slugInput.dataset.autoGenerated === 'true') {
                const slug = this.value.toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-')
                    .trim();
                slugInput.value = slug;
                slugInput.dataset.autoGenerated = 'true';
            }
        });
        
        slugInput.addEventListener('input', function() {
            this.dataset.autoGenerated = 'false';
        });
    }
});

async function loadMedia() {
    try {
        const res = await fetch('/admin/media/list');
        const items = await res.json();
        window.mediaItems = items;
        const grid = document.getElementById('mediaGrid');
        grid.innerHTML = items.map(item => `
            <div onclick="selectMediaItem('${item.file_path}', '${item.file_name}')" 
                 class="aspect-square bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:ring-2 hover:ring-blue-500">
                <img src="${item.url}" class="w-full h-full object-cover">
            </div>
        `).join('');
    } catch(e) { console.error(e); }
}

function selectMediaItem(path, filename) {
    document.getElementById('selectedImagePath').value = path;
    document.getElementById('imagePreview').src = '/storage/' + path;
    closeMediaPicker();
}
</script>

<div id="mediaPickerModal" class="fixed inset-0 z-50 hidden">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="fixed inset-0 bg-black/50" onclick="closeMediaPicker()"></div>
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-3xl max-h-[80vh] overflow-hidden">
            <div class="flex items-center justify-between px-6 py-4 border-b">
                <h3 class="text-lg font-semibold">Select Media</h3>
                <button onclick="closeMediaPicker()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <div class="p-4 overflow-y-auto max-h-[60vh] media-modal">
                <div id="mediaGrid" class="grid"></div>
            </div>
            <div class="px-6 py-4 border-t flex justify-end">
                <button onclick="closeMediaPicker()" class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg">Cancel</button>
            </div>
        </div>
    </div>
</div>
@endsection