<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 Job Opening
            </h2>
            <p class="text-sm text-gray-500 mt-2">
                Create and publish a new career opportunity
            </p>
        </div>

        <a href="/console/job-openings"
            class="text-sm px-4 py-2 rounded-full border border-gray-300
                  bg-white hover:bg-black hover:text-white transition">
            ← Back to Job Openings
        </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">

            <!-- JOB 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 mb-2">
                    Job Title
                </label>
                <input wire:model.defer="title" type="text" placeholder="Enter job 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>

            <!-- EXPERIENCE -->
            <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 mb-2">
                    Experience Required
                </label>
                <input wire:model.defer="experience" type="text" placeholder="e.g. 1-4 yrs"
                    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>

            <!-- RESPONSIBILITIES -->
            <div
                class="bg-white rounded-2xl border border-gray-200 shadow-sm
                        hover:shadow-md transition overflow-hidden">
                <div class="p-5">
                    <label class="block font-medium text-black mb-2">
                        Job Responsibilities
                    </label>
                    <textarea wire:model.defer="responsibilities"
                        class="w-full min-h-[220px] rounded-xl border border-gray-300
                               px-4 py-3 text-base focus:ring-2 focus:ring-black/20"
                        placeholder="Describe key responsibilities..."></textarea>
                </div>
            </div>

        </div>

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

            <!-- LOCATION -->
            <div
                class="bg-white rounded-2xl border border-gray-200 shadow-sm
                        hover:shadow-md transition p-6">
                <label class="block font-medium text-black mb-2">
                    Job Location
                </label>
                <input wire:model.defer="location" type="text" placeholder="e.g. Goregaon (East)"
                    class="w-full rounded-xl border border-gray-300
                           px-3 py-2 focus:ring-2 focus:ring-black/20">
            </div>

            <!-- SKILLS -->
            <div
                class="bg-white rounded-2xl border border-gray-200 shadow-sm
                        hover:shadow-md transition p-6">
                <label class="block font-medium text-black mb-2">
                    Required Skills
                </label>
                <textarea wire:model.defer="skills"
                    class="w-full min-h-[140px] rounded-xl border border-gray-300
                           px-3 py-2 focus:ring-2 focus:ring-black/20"
                    placeholder="e.g. Photoshop, Illustrator, CorelDraw"></textarea>
            </div>

            <!-- PUBLISH -->
            <div
                class="bg-white rounded-2xl border border-gray-200 shadow-sm
                        hover:shadow-md transition p-6 space-y-4">

                <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">Active</option>
                    <option value="0">Inactive</option>
                </select>

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

        </div>

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