@extends('layouts.admin')

@section('title', 'Create New Blog Post')

@section('content')
    <h1 class="text-2xl font-bold mb-6">Create New Blog Post</h1>

    <form action="{{ route('admin.posts.store') }}" method="POST" enctype="multipart/form-data" class="bg-white p-6 rounded-lg shadow-md">
        @csrf

        <div class="mb-4">
            <label for="title" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
            <input type="text" name="title" id="title" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('title') border-red-500 @enderror" value="{{ old('title') }}" required>
            @error('title')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="excerpt" class="block text-gray-700 text-sm font-bold mb-2">Excerpt (for SEO description):</label>
            <textarea name="excerpt" id="excerpt" rows="3" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('excerpt') border-red-500 @enderror" required>{{ old('excerpt') }}</textarea>
            @error('excerpt')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="content" class="block text-gray-700 text-sm font-bold mb-2">Content:</label>
            <textarea name="content" id="content" rows="10" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('content') border-red-500 @enderror" required>{{ old('content') }}</textarea>
            @error('content')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="published_at" class="block text-gray-700 text-sm font-bold mb-2">Publish Date (optional):</label>
            <input type="datetime-local" name="published_at" id="published_at" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('published_at') border-red-500 @enderror" value="{{ old('published_at') }}">
            @error('published_at')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="featured_image" class="block text-gray-700 text-sm font-bold mb-2">Featured Image:</label>
            <input type="file" name="featured_image" id="featured_image" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('featured_image') border-red-500 @enderror">
            @error('featured_image')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="tags" class="block text-gray-700 text-sm font-bold mb-2">Tags:</label>
            <select name="tags[]" id="tags" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('tags') border-red-500 @enderror" multiple>
                @foreach($tags as $tag)
                    <option value="{{ $tag->id }}" {{ in_array($tag->id, old('tags', [])) ? 'selected' : '' }}>{{ $tag->name }}</option>
                @endforeach
            </select>
            @error('tags')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="projects" class="block text-gray-700 text-sm font-bold mb-2">Related Projects:</label>
            <select name="projects[]" id="projects" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('projects') border-red-500 @enderror" multiple>
                @foreach($projects as $project)
                    <option value="{{ $project->id }}" {{ in_array($project->id, old('projects', [])) ? 'selected' : '' }}>{{ $project->title }}</option>
                @endforeach
            </select>
            @error('projects')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="services" class="block text-gray-700 text-sm font-bold mb-2">Related Services:</label>
            <select name="services[]" id="services" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('services') border-red-500 @enderror" multiple>
                @foreach($services as $service)
                    <option value="{{ $service->id }}" {{ in_array($service->id, old('services', [])) ? 'selected' : '' }}>{{ $service->title }}</option>
                @endforeach
            </select>
            @error('services')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <h2 class="text-xl font-bold mb-4 mt-6">SEO & Open Graph Settings</h2>

        <div class="mb-4">
            <label for="meta_title" class="block text-gray-700 text-sm font-bold mb-2">Meta Title:</label>
            <input type="text" name="meta_title" id="meta_title" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('meta_title') border-red-500 @enderror" value="{{ old('meta_title') }}">
            @error('meta_title')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="meta_description" class="block text-gray-700 text-sm font-bold mb-2">Meta Description:</label>
            <textarea name="meta_description" id="meta_description" rows="3" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('meta_description') border-red-500 @enderror">{{ old('meta_description') }}</textarea>
            @error('meta_description')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="meta_keywords" class="block text-gray-700 text-sm font-bold mb-2">Meta Keywords (comma-separated):</label>
            <input type="text" name="meta_keywords" id="meta_keywords" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('meta_keywords') border-red-500 @enderror" value="{{ old('meta_keywords') }}">
            @error('meta_keywords')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="canonical_url" class="block text-gray-700 text-sm font-bold mb-2">Canonical URL:</label>
            <input type="url" name="canonical_url" id="canonical_url" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('canonical_url') border-red-500 @enderror" value="{{ old('canonical_url') }}">
            @error('canonical_url')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="og_title" class="block text-gray-700 text-sm font-bold mb-2">Open Graph Title:</label>
            <input type="text" name="og_title" id="og_title" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('og_title') border-red-500 @enderror" value="{{ old('og_title') }}">
            @error('og_title')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="og_description" class="block text-gray-700 text-sm font-bold mb-2">Open Graph Description:</label>
            <textarea name="og_description" id="og_description" rows="3" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('og_description') border-red-500 @enderror">{{ old('og_description') }}</textarea>
            @error('og_description')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="og_image" class="block text-gray-700 text-sm font-bold mb-2">Open Graph Image:</label>
            <input type="file" name="og_image" id="og_image" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('og_image') border-red-500 @enderror">
            @error('og_image')
                <p class="text-red-500 text-xs italic mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="flex items-center justify-between">
            <button type="submit" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                Create Post
            </button>
            <a href="{{ route('admin.blogs.index') }}" class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800">
                Cancel
            </a>
        </div>

        <div class="flex items-center justify-between">
            <button type="submit" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                Create Post
            </button>
            <a href="{{ route('admin.blogs.index') }}" class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800">
                Cancel
            </a>
        </div>
    </form>
@endsection