<div class="ml-[280px] min-h-screen p-8 max-w-6xl bg-[#faf7f3]">

    <!-- HEADER -->
    <div class="flex justify-between items-center mb-10">
        <div>
            <h2 class="text-3xl font-semibold tracking-tight text-gray-900">
                Add Blog
            </h2>
            <p class="text-sm text-gray-500 mt-2">
                Create and publish a premium blog article
            </p>
        </div>

        <a href="/console/blogs"
           class="text-sm px-4 py-2 rounded-full border border-gray-300
                  bg-white hover:bg-black hover:text-white transition">
            ← Back to Blogs
        </a>
    </div>

    <form wire:submit.prevent="save"
          class="grid grid-cols-1 lg:grid-cols-3 gap-8">

        <!-- LEFT COLUMN -->
        <div class="lg:col-span-2 space-y-8">

            <!-- BLOG TITLE -->
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6
                        hover:shadow-md transition">
                <label class="block font-medium  text-black-800 mb-2">
                    Blog Title
                </label>
                <input
                    wire:model.defer="title"
                    type="text"
                    placeholder="Enter a compelling blog title..."
                    class="w-full rounded-xl border border-gray-300
                           px-4 py-3 text-base
                           focus:ring-2 focus:ring-black/20
                           focus:border-black transition"
                >
            </div>

            <!-- BLOG CONTENT -->
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm
                        hover:shadow-md transition overflow-hidden"
                 wire:ignore>

                <!-- TOP BAR -->
                <div class="flex justify-between items-center px-5 py-3
                            bg-gradient-to-r from-gray-50 to-white border-b">
                    <div>
                        <p class="text-sm font-medium text-gray-800">
                            Blog Content
                        </p>
                        <p class="text-xs text-gray-400">
                            Visual editor with HTML support
                        </p>
                    </div>
                </div>

              
                <!-- EDITOR AREA -->
                <div class="p-5" wire:ignore>

                    <textarea id="editor" class="w-full min-h-[320px]">
                        <?php echo $content ?? ''; ?>

                    </textarea>
                    
                </div>

            </div>

        </div>

        <!-- RIGHT COLUMN -->
        <div class="space-y-8">

            <!-- HERO IMAGE -->
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm
                        hover:shadow-md transition p-6">
                <p class="text-sm font-medium mb-1">
                    Hero Image (Front Page)
                </p>
                <p class="text-xs text-gray-400 mb-4">
                    Wide image recommended
                </p>

                <label
                    class="relative h-44 w-full rounded-2xl border-2 border-dashed
                           border-gray-300 bg-gray-50
                           hover:border-black hover:bg-white
                           transition flex flex-col items-center justify-center gap-2
                           cursor-pointer">

                    <input type="file" wire:model="hero_image" class="hidden">

                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($hero_image): ?>
                        <img src="<?php echo e($hero_image->temporaryUrl()); ?>"
                             class="absolute inset-0 w-full h-full
                                    object-contain rounded-2xl p-2">
                    <?php else: ?>
                        <svg class="w-8 h-8 text-gray-400" fill="none"
                             stroke="currentColor" stroke-width="1.5"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M12 16v-8m0 0L8 12m4-4l4 4M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1"/>
                        </svg>
                        <span class="text-sm text-gray-600">
                            Upload hero image
                        </span>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </label>
            </div>

            <!-- FEATURED IMAGE -->
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm
                        hover:shadow-md transition p-6">
                <p class="text-sm font-medium mb-1">
                    Featured Image (Inner Page)
                </p>
                <p class="text-xs text-gray-400 mb-4">
                    Used inside the blog
                </p>

                <label
                    class="relative h-44 w-full rounded-2xl border-2 border-dashed
                           border-gray-300 bg-gray-50
                           hover:border-black hover:bg-white
                           transition flex flex-col items-center justify-center gap-2
                           cursor-pointer">

                    <input type="file" wire:model="image" class="hidden">

                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($image): ?>
                        <img src="<?php echo e($image->temporaryUrl()); ?>"
                             class="absolute inset-0 w-full h-full
                                    object-cover rounded-2xl">
                    <?php else: ?>
                        <svg class="w-8 h-8 text-gray-400" fill="none"
                             stroke="currentColor" stroke-width="1.5"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M12 16v-8m0 0L8 12m4-4l4 4M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1"/>
                        </svg>
                        <span class="text-sm text-gray-600">
                            Upload featured image
                        </span>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </label>
            </div>

            <!-- PUBLISH -->
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm
                        hover:shadow-md transition p-6 space-y-4">
                <input
                    wire:model.defer="publish_date"
                    type="date"
                    class="w-full rounded-xl border border-gray-300
                           px-3 py-2 focus:ring-2 focus:ring-black/20">

                <select
                    wire:model.defer="status"
                    class="w-full rounded-xl border border-gray-300
                           px-3 py-2 focus:ring-2 focus:ring-black/20">
                    <option value="1">Published</option>
                    <option value="0">Draft</option>
                </select>

                <button
                    class="w-full py-3 rounded-xl
                           bg-black text-white font-semibold
                           hover:bg-gray-900 transition">
                    Publish Blog
                </button>
            </div>

        </div>

    </form>
</div>
<?php /**PATH /home/eggfirst/public_html/video.eggfirst.com/resources/views/livewire/admin/blogs/blog-create.blade.php ENDPATH**/ ?>