<?php $__env->startSection('content'); ?>
    <div class="w-full md:min-h-screen bg-gray-50 pt-[20px] pb-20">
        <div class="md:max-w-[90%] max-w-[90%] mx-auto px-6">

            
            <?php if (isset($component)) { $__componentOriginalc45a5e48f24715e66ba38d7c37555f4d = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalc45a5e48f24715e66ba38d7c37555f4d = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.job-descriptions.nav-tabs','data' => ['active' => 'library']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('job-descriptions.nav-tabs'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['active' => 'library']); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalc45a5e48f24715e66ba38d7c37555f4d)): ?>
<?php $attributes = $__attributesOriginalc45a5e48f24715e66ba38d7c37555f4d; ?>
<?php unset($__attributesOriginalc45a5e48f24715e66ba38d7c37555f4d); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc45a5e48f24715e66ba38d7c37555f4d)): ?>
<?php $component = $__componentOriginalc45a5e48f24715e66ba38d7c37555f4d; ?>
<?php unset($__componentOriginalc45a5e48f24715e66ba38d7c37555f4d); ?>
<?php endif; ?>

            
            <div x-data="{ currentSlide: 0, dismissed: localStorage.getItem('jd_onboarding_dismissed') === 'true' }"
                 x-show="!dismissed" x-cloak>
                <div class="bg-gradient-to-r from-blue-50 to-white border border-blue-100 rounded-2xl p-6 mb-8 relative shadow-md">
                    
                    <button @click="dismissed = true; localStorage.setItem('jd_onboarding_dismissed', 'true')"
                            class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>

                    <div class="flex items-start gap-4">
                        
                        <div class="shrink-0">
                            <template x-if="currentSlide === 0">
                                <div class="w-14 h-14 bg-blue-100 rounded-2xl flex items-center justify-center">
                                    <svg class="w-7 h-7 text-[#2F3D7E]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                    </svg>
                                </div>
                            </template>
                            <template x-if="currentSlide === 1">
                                <div class="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center">
                                    <svg class="w-7 h-7 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                </div>
                            </template>
                            <template x-if="currentSlide === 2">
                                <div class="w-14 h-14 bg-orange-100 rounded-2xl flex items-center justify-center">
                                    <svg class="w-7 h-7 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                    </svg>
                                </div>
                            </template>
                            <template x-if="currentSlide === 3">
                                <div class="w-14 h-14 bg-yellow-100 rounded-2xl flex items-center justify-center">
                                    <svg class="w-7 h-7 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                    </svg>
                                </div>
                            </template>
                        </div>

                        <div class="flex-1 pr-8">
                            
                            <div x-show="currentSlide === 0">
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="text-xs font-medium text-[#2F3D7E] bg-blue-100 px-2 py-0.5 rounded-full">Step 1 of 4</span>
                                    <h3 class="text-lg font-bold text-gray-900">Intelligent Job Description Creation</h3>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">Create comprehensive job descriptions in minutes. Simply provide basic role information and let the system do the heavy lifting.</p>
                            </div>
                            <div x-show="currentSlide === 1" x-cloak>
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="text-xs font-medium text-[#2F3D7E] bg-blue-100 px-2 py-0.5 rounded-full">Step 2 of 4</span>
                                    <h3 class="text-lg font-bold text-gray-900">Validation & Alignment</h3>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">Automatically validate your JDs against job architecture, compliance standards, and best practices to ensure quality and consistency.</p>
                            </div>
                            <div x-show="currentSlide === 2" x-cloak>
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="text-xs font-medium text-[#2F3D7E] bg-blue-100 px-2 py-0.5 rounded-full">Step 3 of 4</span>
                                    <h3 class="text-lg font-bold text-gray-900">Approval Workflows</h3>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">Streamline your approval process with built-in workflows, version control, and audit trails for complete transparency.</p>
                            </div>
                            <div x-show="currentSlide === 3" x-cloak>
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="text-xs font-medium text-[#2F3D7E] bg-blue-100 px-2 py-0.5 rounded-full">Step 4 of 4</span>
                                    <h3 class="text-lg font-bold text-gray-900">Export & Publish</h3>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">Export to multiple formats (PDF, DOCX), share with your team, and publish to job boards with just a few clicks.</p>
                            </div>
                        </div>
                    </div>

                    
                    <div class="flex items-center justify-between mt-4">
                        
                        <div class="flex items-center gap-2">
                            <template x-for="i in 4" :key="i">
                                <button @click="currentSlide = i - 1"
                                        :class="currentSlide === i - 1 ? 'w-6 bg-[#2F3D7E]' : 'w-2 bg-blue-200'"
                                        class="h-2 rounded-full transition-all duration-300"></button>
                            </template>
                        </div>
                        
                        <button @click="currentSlide < 3 ? currentSlide++ : (dismissed = true, localStorage.setItem('jd_onboarding_dismissed', 'true'))"
                                class="inline-flex items-center gap-2 px-5 py-2.5 border border-[#2F3D7E] text-[#2F3D7E] text-sm font-medium rounded-lg hover:bg-[#2F3D7E]/5 transition-colors">
                            <span x-text="currentSlide < 3 ? 'Next' : 'Get Started'"></span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            
            <div class="mb-8 flex md:flex-row flex-col items-start md:items-center justify-between gap-4">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">Job Description Library</h1>
                    <p class="text-gray-500">Manage and create job descriptions</p>
                </div>
                <a href="<?php echo e(route('dashboard.job-descriptions.create')); ?>"
                   class="inline-flex items-center justify-center h-12 px-6 rounded-lg font-medium transition-all duration-200 text-base bg-[#2F3D7E] hover:bg-[#2F3D7E]/90 text-white shadow-sm active:scale-[0.98]">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    Create New JD
                </a>
            </div>

            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                
                <div class="bg-[#c6d1e0] border border-[#c6d1e0] rounded-2xl p-5">
                    <div class="w-10 h-10 bg-[#dbe9fe] rounded-xl flex items-center justify-center mb-4 shadow-sm">
                        <svg class="w-5 h-5 text-[#2F3D7E]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </div>
                    <p class="text-sm font-medium text-[#2F3D7E]">Total Job Description Library</p>
                    <p class="text-2xl font-semibold text-gray-900 mt-1"><?php echo e($stats['total'] ?? 0); ?></p>
                </div>
                
                <div class="bg-[#ffe2e6] border border-[#ffe2e6] rounded-2xl p-5">
                    <div class="w-10 h-10 bg-[#fffdf1] rounded-xl flex items-center justify-center mb-4 shadow-sm">
                        <svg class="w-5 h-5 text-[#ffa413]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <p class="text-sm font-medium text-gray-700">Approved</p>
                    <p class="text-2xl font-semibold text-gray-900 mt-1"><?php echo e($stats['approved'] ?? 0); ?></p>
                </div>
                
                <div class="bg-[#dcf5fc] border border-[#dcf5fc] rounded-2xl p-5">
                    <div class="w-10 h-10 bg-[#b6dae4] rounded-xl flex items-center justify-center mb-4 shadow-sm">
                        <svg class="w-5 h-5 text-[#0a5b72]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                    </div>
                    <p class="text-sm font-medium text-gray-700">Published</p>
                    <p class="text-2xl font-semibold text-gray-900 mt-1"><?php echo e($stats['published'] ?? 0); ?></p>
                </div>
                
                <div class="bg-[#DCEBFD] border border-[#DCEBFD] rounded-2xl p-5">
                    <div class="w-10 h-10 bg-[#F1F5F9] rounded-xl flex items-center justify-center mb-4 shadow-sm">
                        <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </div>
                    <p class="text-sm font-medium text-gray-700">Drafts</p>
                    <p class="text-2xl font-semibold text-gray-900 mt-1"><?php echo e($stats['drafts'] ?? 0); ?></p>
                </div>
            </div>

            <?php if(isset($jobDescriptions) && $jobDescriptions->count() > 0): ?>
                
                <div x-data="{
                    viewMode: 'list',
                    deleteModal: { open: false, id: null, title: '' },
                    openDeleteModal(id, title) {
                        this.deleteModal = { open: true, id, title };
                    }
                }" class="bg-white rounded-2xl shadow-sm">
                    <div class="p-4 border-b border-gray-100">
                        <div class="flex flex-col md:flex-row items-start md:items-center gap-4">
                            
                            <div class="flex-1 w-full md:w-auto">
                                <div class="relative">
                                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                    </svg>
                                    <input type="text" placeholder="Search by title, department, or ID..."
                                           class="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]">
                                </div>
                            </div>

                            
                            <div class="flex items-center gap-3">
                                <div class="flex items-center gap-2 relative">
                                    <svg class="w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                                    </svg>
                                    <input type="text" list="departments-filter" placeholder="All Departments"
                                           class="border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E] bg-white w-48">
                                    <datalist id="departments-filter">
                                        <option value="All Departments">
                                        <option value="Engineering">
                                        <option value="Product">
                                        <option value="Design">
                                        <option value="Marketing">
                                        <option value="Sales">
                                        <option value="Operations">
                                        <option value="Finance">
                                        <option value="Human Resources">
                                        <option value="Customer Success">
                                        <option value="Analytics">
                                        <option value="Legal">
                                        <option value="Compliance">
                                        <option value="Research & Development">
                                        <option value="Quality Assurance">
                                        <option value="Infrastructure">
                                        <option value="Security">
                                    </datalist>
                                </div>

                                <select class="border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E] bg-white">
                                    <option>All Status</option>
                                    <option>Draft</option>
                                    <option>Approved</option>
                                    <option>Published</option>
                                    <option>Unpublished</option>
                                </select>

                                
                                <div class="flex items-center border border-gray-200 rounded-lg overflow-hidden">
                                    <button @click="viewMode = 'list'"
                                            :class="viewMode === 'list' ? 'bg-gray-100 text-gray-900' : 'text-gray-400 hover:text-gray-600'"
                                            class="p-2.5 transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                                        </svg>
                                    </button>
                                    <button @click="viewMode = 'grid'"
                                            :class="viewMode === 'grid' ? 'bg-gray-100 text-gray-900' : 'text-gray-400 hover:text-gray-600'"
                                            class="p-2.5 transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    
                    <div x-show="viewMode === 'list'">
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b border-gray-100">
                                        <th class="text-left py-4 px-6 text-xs font-semibold text-[#2F3D7E] uppercase tracking-wider">Job ID</th>
                                        <th class="text-left py-4 px-6 text-xs font-semibold text-[#2F3D7E] uppercase tracking-wider">Job Title</th>
                                        <th class="text-left py-4 px-6 text-xs font-semibold text-[#2F3D7E] uppercase tracking-wider">Department</th>
                                        <th class="text-left py-4 px-6 text-xs font-semibold text-[#2F3D7E] uppercase tracking-wider">Job Level</th>
                                        <th class="text-left py-4 px-6 text-xs font-semibold text-[#2F3D7E] uppercase tracking-wider">Last Modified</th>
                                        <th class="text-left py-4 px-6 text-xs font-semibold text-[#2F3D7E] uppercase tracking-wider">Status</th>
                                        <th class="text-center py-4 px-6 text-xs font-semibold text-gray-400">
                                            <svg class="w-5 h-5 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
                                            </svg>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-50">
                                    <?php $__currentLoopData = $jobDescriptions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $jd): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="py-4 px-6 text-sm text-[#2F3D7E] font-medium"><?php echo e($jd->job_id); ?></td>
                                        <td class="py-4 px-6 text-sm text-gray-900 font-medium"><?php echo e($jd->job_title); ?></td>
                                        <td class="py-4 px-6 text-sm text-gray-600"><?php echo e($jd->department); ?></td>
                                        <td class="py-4 px-6 text-sm text-gray-600"><?php echo e($jd->level); ?></td>
                                        <td class="py-4 px-6 text-sm text-gray-600"><?php echo e($jd->updated_at->format('Y-m-d')); ?></td>
                                        <td class="py-4 px-6">
                                            <?php switch($jd->status):
                                                case ('approved'): ?>
                                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 border border-green-100">Approved</span>
                                                    <?php break; ?>
                                                <?php case ('published'): ?>
                                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-100">Published</span>
                                                    <?php break; ?>
                                                <?php case ('unpublished'): ?>
                                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-[#ffecd3] text-yellow-700 border border-[#ffecd3]">Unpublished</span>
                                                    <?php break; ?>
                                                <?php default: ?>
                                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-600 border border-gray-100">Draft</span>
                                            <?php endswitch; ?>
                                        </td>
                                        <td class="py-4 px-6 text-center relative" x-data="{ open: false, showAbove: false }" @click.away="open = false">
                                            <button @click="open = !open; if(open) { const rect = $el.getBoundingClientRect(); showAbove = rect.bottom > window.innerHeight - 400; }" class="text-gray-400 hover:text-gray-600">
                                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
                                                </svg>
                                            </button>
                                            <div x-show="open" x-cloak
                                                 :class="showAbove ? 'absolute right-0 bottom-full mb-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50' : 'absolute right-0 top-full mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50'">
                                                    <a href="<?php echo e(route('dashboard.job-descriptions.detail', $jd->id)); ?>" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">View</a>
                                                    <a href="<?php echo e(route('dashboard.job-descriptions.edit', $jd->id)); ?>" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Edit</a>
                                                    <button @click="open = false; $dispatch('open-delete', { id: <?php echo e($jd->id); ?>, title: '<?php echo e(addslashes($jd->job_title)); ?>' })"
                                                            class="block w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50">Delete</button>
                                            </div>
                                        </td>
                                    </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </tbody>
                            </table>
                        </div>

                        
                        <div class="flex items-center justify-between px-6 py-4 border-t border-gray-100">
                            <div class="flex items-center gap-3">
                                <span class="text-sm font-medium text-[#2F3D7E]">Show rows:</span>
                                <select class="border border-gray-200 rounded-lg px-2 py-1.5 text-sm bg-white">
                                    <option>10 items</option>
                                    <option>25 items</option>
                                    <option>50 items</option>
                                </select>
                            </div>
                            <div>
                                <?php echo e($jobDescriptions->links()); ?>

                            </div>
                        </div>
                    </div>

                    
                    <div x-show="viewMode === 'grid'" x-cloak>
                        <div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <?php $__currentLoopData = $jobDescriptions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $jd): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="border border-gray-200 rounded-2xl p-5 hover:shadow-md transition-shadow bg-white relative">
                                
                                <div class="flex items-start justify-between mb-3">
                                    <span class="text-xs text-[#2F3D7E] font-medium"><?php echo e($jd->job_id); ?></span>
                                    <div x-data="{ open: false, showAbove: false }" class="relative" @click.away="open = false">
                                        <button @click="open = !open; if(open) { const rect = $el.getBoundingClientRect(); showAbove = rect.bottom > window.innerHeight - 400; }" class="text-gray-400 hover:text-gray-600">
                                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
                                            </svg>
                                        </button>
                                        <div x-show="open" x-cloak
                                             :class="showAbove ? 'absolute right-0 bottom-full mb-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50' : 'absolute right-0 top-full mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50'">
                                            <a href="<?php echo e(route('dashboard.job-descriptions.detail', $jd->id)); ?>" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">View</a>
                                            <a href="<?php echo e(route('dashboard.job-descriptions.edit', $jd->id)); ?>" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Edit</a>
                                            <button @click="open = false; $dispatch('open-delete', { id: <?php echo e($jd->id); ?>, title: '<?php echo e(addslashes($jd->job_title)); ?>' })"
                                                    class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">Delete</button>
                                        </div>
                                    </div>
                                </div>

                                
                                <h3 class="text-base font-bold text-gray-900 mb-2"><?php echo e($jd->job_title); ?></h3>

                                
                                <p class="text-sm text-gray-500 mb-3"><?php echo e($jd->department); ?> &bull; <?php echo e($jd->level); ?></p>

                                
                                <div class="mb-4">
                                    <?php switch($jd->status):
                                        case ('approved'): ?>
                                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 border border-green-200">
                                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
                                                Approved
                                            </span>
                                            <?php break; ?>
                                        <?php case ('published'): ?>
                                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200">
                                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
                                                Published
                                            </span>
                                            <?php break; ?>
                                        <?php case ('unpublished'): ?>
                                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-[#ffecd3] text-yellow-700 border border-[#ffecd3]">
                                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" /></svg>
                                                Unpublished
                                            </span>
                                            <?php break; ?>
                                        <?php default: ?>
                                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-600 border border-gray-200">
                                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                                                Draft
                                            </span>
                                    <?php endswitch; ?>
                                </div>

                                
                                <div class="flex items-center justify-between text-xs text-gray-400 mb-4 pt-3 border-t border-gray-100">
                                    <span><?php echo e($jd->updated_at->format('Y-m-d')); ?></span>
                                    <span><?php echo e($jd->author ?? 'Sarah Johnson'); ?></span>
                                </div>

                                
                                <a href="<?php echo e(route('dashboard.job-descriptions.detail', $jd->id)); ?>"
                                   class="w-full inline-flex items-center justify-center gap-2 h-10 rounded-lg text-sm font-medium text-gray-700 border border-gray-200 hover:bg-gray-50 transition-colors">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                    View Details
                                </a>
                            </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>

                        
                        <div class="flex items-center justify-between px-6 py-4 border-t border-gray-100">
                            <div class="flex items-center gap-3">
                                <span class="text-sm font-medium text-[#2F3D7E]">Show rows:</span>
                                <select class="border border-gray-200 rounded-lg px-2 py-1.5 text-sm bg-white">
                                    <option>10 items</option>
                                    <option>25 items</option>
                                    <option>50 items</option>
                                </select>
                            </div>
                            <div>
                                <?php echo e($jobDescriptions->links()); ?>

                            </div>
                        </div>
                    </div>

                    
                    <div x-show="deleteModal.open" x-cloak
                         @open-delete.window="openDeleteModal($event.detail.id, $event.detail.title)"
                         class="fixed inset-0 z-50 flex items-center justify-center p-4"
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:enter-start="opacity-0"
                         x-transition:enter-end="opacity-100"
                         x-transition:leave="transition ease-in duration-150"
                         x-transition:leave-start="opacity-100"
                         x-transition:leave-end="opacity-0">
                        <div class="fixed inset-0 bg-black/50" @click="deleteModal.open = false"></div>

                        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-md"
                             @click.away="deleteModal.open = false">
                            <div class="p-6">
                                
                                <div class="flex items-start justify-between mb-4">
                                    <div class="flex items-center gap-3">
                                        <div class="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center">
                                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                        </div>
                                        <div>
                                            <h3 class="text-lg font-bold text-gray-900">Delete Job Description</h3>
                                            <p class="text-sm text-gray-500">This action cannot be undone</p>
                                        </div>
                                    </div>
                                    <button @click="deleteModal.open = false" class="text-gray-400 hover:text-gray-600 transition-colors">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>

                                
                                <div class="bg-red-50 border border-red-100 rounded-xl p-4 mb-6">
                                    <p class="text-sm text-gray-700 text-center">
                                        Are you sure you want to delete "<strong x-text="deleteModal.title"></strong>"? This will remove all associated data, history, and approvals.
                                    </p>
                                </div>

                                
                                <div class="flex items-center justify-end gap-3">
                                    <button @click="deleteModal.open = false"
                                            class="inline-flex items-center justify-center h-11 px-6 rounded-lg font-medium text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 transition-colors">
                                        Cancel
                                    </button>
                                    <form :action="'/dashboard/job-descriptions/' + deleteModal.id" method="POST" class="inline">
                                        <?php echo csrf_field(); ?>
                                        <?php echo method_field('DELETE'); ?>
                                        <button type="submit"
                                                class="inline-flex items-center justify-center gap-2 h-11 px-6 rounded-lg font-medium text-white bg-red-600 hover:bg-red-700 transition-colors">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                            Delete Job Description
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php else: ?>
                
                <div class="bg-white rounded-[20px] border border-gray-100 shadow-sm p-12 text-center">
                    <div class="w-32 h-32 mx-auto mb-6 flex items-center justify-center">
                        <svg class="w-24 h-24 text-[#2F3D7E]/20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">OOPS!!!</h3>
                    <p class="text-gray-500 mb-8 max-w-md mx-auto">
                        You have not created any job description yet
                    </p>
                    <a href="<?php echo e(route('dashboard.job-descriptions.create')); ?>"
                       class="inline-flex items-center justify-center h-12 px-8 rounded-lg font-medium transition-all duration-200 text-base bg-[#2F3D7E] hover:bg-[#2F3D7E]/90 text-white shadow-lg shadow-blue-900/10 active:scale-[0.98]">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        Create New JD
                    </a>
                </div>
            <?php endif; ?>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.dashboard', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/ratemypay/resources/views/dashboard/job-descriptions/index.blade.php ENDPATH**/ ?>