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

            
            <?php if(session('success')): ?>
                <div x-data="{ show: true }" x-show="show" x-cloak style="display: none;" x-init="setTimeout(() => show = false, 4000)"
                    x-transition:enter="transition ease-out duration-300"
                    x-transition:enter-start="opacity-0 transform -translate-y-2"
                    x-transition:enter-end="opacity-100 transform translate-y-0"
                    x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0" class="bg-green-50 border border-green-100 rounded-2xl p-5 mb-8">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center shrink-0">
                            <svg class="w-5 h-5 text-green-600" 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>
                        </div>
                        <div>
                            <h4 class="text-sm font-bold text-gray-900"><?php echo e(session('success')); ?></h4>
                        </div>
                    </div>
                </div>
            <?php endif; ?>

            <?php if($errors->any()): ?>
                <div
                    class="mb-6 flex items-center gap-3 bg-red-50 border border-red-200 text-red-700 text-sm font-medium px-5 py-3.5 rounded-xl shadow-sm">
                    <svg class="w-5 h-5 text-red-500 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                            clip-rule="evenodd" />
                    </svg>
                    <?php echo e($errors->first()); ?>

                </div>
            <?php endif; ?>

            
            <?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 style="display: none;">
                <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-4 h-4" 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 width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M13.2486 20.6666C13.1296 20.2052 12.8891 19.7841 12.5521 19.4471C12.2151 19.1101 11.794 18.8696 11.3326 18.7506L3.1526 16.6413C3.01304 16.6016 2.89021 16.5176 2.80275 16.4019C2.71529 16.2861 2.66797 16.145 2.66797 15.9999C2.66797 15.8549 2.71529 15.7137 2.80275 15.598C2.89021 15.4823 3.01304 15.3982 3.1526 15.3586L11.3326 13.2479C11.7939 13.129 12.2149 12.8887 12.5518 12.552C12.8888 12.2153 13.1294 11.7944 13.2486 11.3333L15.3579 3.15326C15.3971 3.01315 15.4811 2.88971 15.597 2.80178C15.7129 2.71386 15.8544 2.66626 15.9999 2.66626C16.1454 2.66626 16.2869 2.71386 16.4028 2.80178C16.5188 2.88971 16.6027 3.01315 16.6419 3.15326L18.7499 11.3333C18.869 11.7947 19.1095 12.2158 19.4464 12.5527C19.7834 12.8897 20.2045 13.1302 20.6659 13.2493L28.8459 15.3573C28.9866 15.3961 29.1107 15.4799 29.1991 15.596C29.2875 15.7121 29.3353 15.854 29.3353 15.9999C29.3353 16.1458 29.2875 16.2877 29.1991 16.4038C29.1107 16.5199 28.9866 16.6038 28.8459 16.6426L20.6659 18.7506C20.2045 18.8696 19.7834 19.1101 19.4464 19.4471C19.1095 19.7841 18.869 20.2052 18.7499 20.6666L16.6406 28.8466C16.6014 28.9867 16.5174 29.1101 16.4015 29.1981C16.2856 29.286 16.1441 29.3336 15.9986 29.3336C15.8531 29.3336 15.7116 29.286 15.5957 29.1981C15.4798 29.1101 15.3958 28.9867 15.3566 28.8466L13.2486 20.6666Z" stroke="#2F3D7E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M26.668 4V9.33333" stroke="#2F3D7E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M29.3333 6.66675H24" stroke="#2F3D7E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M5.33203 22.6667V25.3334" stroke="#2F3D7E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M6.66667 24H4" stroke="#2F3D7E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                    </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 width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M29.0662 13.3333C29.6751 16.3217 29.2411 19.4286 27.8366 22.1357C26.4322 24.8429 24.142 26.9867 21.3482 28.2097C18.5544 29.4328 15.4257 29.661 12.4839 28.8565C9.54214 28.0519 6.9651 26.2632 5.18255 23.7885C3.39999 21.3139 2.51968 18.303 2.6884 15.2578C2.85712 12.2127 4.06469 9.31744 6.10971 7.05488C8.15474 4.79232 10.9136 3.29923 13.9263 2.82459C16.9389 2.34995 20.0232 2.92247 22.6648 4.44665" stroke="#00A63E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M12 14.6666L16 18.6666L29.3333 5.33331" stroke="#00A63E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                    </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 width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8 4V20" stroke="#F76C5E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M24 12C26.2091 12 28 10.2091 28 8C28 5.79086 26.2091 4 24 4C21.7909 4 20 5.79086 20 8C20 10.2091 21.7909 12 24 12Z" stroke="#F76C5E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M8 28C10.2091 28 12 26.2091 12 24C12 21.7909 10.2091 20 8 20C5.79086 20 4 21.7909 4 24C4 26.2091 5.79086 28 8 28Z" stroke="#F76C5E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24" stroke="#F76C5E" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                </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 width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M28 20V25.3333C28 26.0406 27.719 26.7189 27.219 27.219C26.7189 27.719 26.0406 28 25.3333 28H6.66667C5.95942 28 5.28115 27.719 4.78105 27.219C4.28095 26.7189 4 26.0406 4 25.3333V20" stroke="#E17100" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M9.33203 13.3333L15.9987 20L22.6654 13.3333" stroke="#E17100" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M16 20V4" stroke="#E17100" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                </div>
                            </template>
                        </div>
                        <div class="flex-1 pr-8">
                            <div x-show="currentSlide === 0" style="display: none;">
                                <div class="flex items-center gap-2 mb-1">
                                    <span
                                        class="text-xs font-medium text-[#284DBF] border border-[#8EC5FF] bg-white px-2 py-0.5 rounded-full">Step
                                        1 of 4</span>
                                    <h3 class="text-md font-semibold text-[#1C398E]">Intelligent Job Description Creation</h3>
                                </div>
                                <p class="text-sm text-[#284DBF] 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 style="display: none;">
                                <div class="flex items-center gap-2 mb-1">
                                    <span
                                        class="text-xs font-medium text-[#284DBF] border border-[#8EC5FF] bg-white px-2 py-0.5 rounded-full">Step
                                        2 of 4</span>
                                    <h3 class="text-md font-semibold text-[#1C398E]">Validation & Alignment</h3>
                                </div>
                                <p class="text-sm text-[#284DBF] 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 style="display: none;">
                                <div class="flex items-center gap-2 mb-1">
                                    <span
                                        class="text-xs font-medium text-[#284DBF] border border-[#8EC5FF] bg-white px-2 py-0.5 rounded-full">Step
                                        3 of 4</span>
                                    <h3 class="text-md font-semibold text-[#1C398E]">Approval Workflows</h3>
                                </div>
                                <p class="text-sm text-[#284DBF] 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 style="display: none;">
                                <div class="flex items-center gap-2 mb-1">
                                    <span
                                        class="text-xs font-medium text-[#284DBF] border border-[#8EC5FF] bg-white px-2 py-0.5 rounded-full">Step
                                        4 of 4</span>
                                    <h3 class="text-md font-semibold text-[#1C398E]">Export & Publish</h3>
                                </div>
                                <p class="text-sm text-[#284DBF] 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'), window.location.href='/dashboard/job-descriptions/create')"
                            class="inline-flex items-center gap-2 px-4 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 x-show="currentSlide < 3" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M3.33203 8H12.6654" stroke="#2F3D7E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M8 3.33325L12.6667 7.99992L8 12.6666" stroke="#2F3D7E" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                            </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-2xl font-semibold text-gray-900 mb-2">Job Description Library</h1>
                    <p class="text-sm 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-4 rounded-lg font-medium transition-all duration-200 text-sm bg-[#2F3D7E] hover:bg-[#2F3D7E]/90 text-white shadow-sm active:scale-[0.98]">
                    <svg class="w-4 h-4 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 width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V7L15 2Z" stroke="#2F3D7E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M14 2V6C14 6.53043 14.2107 7.03914 14.5858 7.41421C14.9609 7.78929 15.4696 8 16 8H20" stroke="#2F3D7E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M10 9H8" stroke="#2F3D7E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M16 13H8" stroke="#2F3D7E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M16 17H8" stroke="#2F3D7E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    </div>
                    <p class="text-sm font-medium text-[#2F3D7E]">Total Job Description Library</p>
                    <p class="text-xl font-semibold text-[#0F172B] 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 width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21.8026 9.99999C22.2593 12.2413 21.9338 14.5714 20.8804 16.6018C19.827 18.6322 18.1095 20.24 16.0141 21.1573C13.9187 22.0746 11.5722 22.2458 9.36586 21.6424C7.15954 21.0389 5.22676 19.6974 3.88984 17.8414C2.55293 15.9854 1.89269 13.7272 2.01923 11.4434C2.14577 9.15952 3.05144 6.98808 4.58522 5.29116C6.11899 3.59424 8.18815 2.47442 10.4476 2.11844C12.7071 1.76247 15.0203 2.19185 17.0016 3.33499" stroke="#FFA412" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M9 11L12 14L22 4" stroke="#FFA412" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    </div>
                    <p class="text-sm font-medium text-[#101828]">Approved</p>
                    <p class="text-xl font-semibold text-[#0F172B] 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-[#45556C]">Published</p>
                    <p class="text-xl font-semibold text-[#0F172B] 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 width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V7L15 2Z" stroke="#45556C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M14 2V6C14 6.53043 14.2107 7.03914 14.5858 7.41421C14.9609 7.78929 15.4696 8 16 8H20" stroke="#45556C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M10 9H8" stroke="#45556C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M16 13H8" stroke="#45556C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M16 17H8" stroke="#45556C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    </div>
                    <p class="text-sm font-medium text-[#45556C]">Drafts</p>
                    <p class="text-xl font-semibold text-[#0F172B] mt-1"><?php echo e($stats['drafts'] ?? 0); ?></p>
                </div>
            </div>

            <?php if($totalUnfiltered > 0): ?>
                <div x-data="{
                    viewMode: localStorage.getItem('jd_view_mode') || 'list',
                    setView(mode) {
                        this.viewMode = mode;
                        localStorage.setItem('jd_view_mode', mode);
                    }
                }" class="bg-white rounded-2xl shadow-sm">
                    
                  <div class="p-4 search_group_box">

    <div class="flex flex-col lg:flex-row lg:items-center gap-4">

        
        <form method="GET"
              id="filter-form"
              action="<?php echo e(route('dashboard.job-descriptions.index')); ?>"
              class="w-full lg:flex-1">

            <?php if(request('per_page') && request('per_page') != 10): ?>
                <input type="hidden" name="per_page" value="<?php echo e(request('per_page')); ?>">
            <?php endif; ?>

            <?php if(request('department')): ?>
                <input type="hidden" name="department" value="<?php echo e(request('department')); ?>">
            <?php endif; ?>

            <?php if(request('status')): ?>
                <input type="hidden" name="status" value="<?php echo e(request('status')); ?>">
            <?php endif; ?>

            <div class="relative w-full">
                <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"
                       name="search"
                       value="<?php echo e(request('search')); ?>"
                       placeholder="Search by title, department, or ID..."
                       class="w-full pl-10 pr-4 py-2.5 bg-[#F3F3F5] border border-[#F3F3F5] rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-[#F3F3F5]/20 focus:border-[#F3F3F5]"
                       onkeydown="if(event.key==='Enter'){event.preventDefault();this.form.submit();}">
            </div>
        </form>

        
        <div class="flex flex-wrap lg:flex-nowrap items-start lg:items-center gap-2 lg:gap-4 w-full lg:w-auto">

            
            <form method="GET"
                  action="<?php echo e(route('dashboard.job-descriptions.index')); ?>"
                  class="w-full sm:w-auto">

                <?php if(request('search')): ?>
                    <input type="hidden" name="search" value="<?php echo e(request('search')); ?>">
                <?php endif; ?>

                <?php if(request('status')): ?>
                    <input type="hidden" name="status" value="<?php echo e(request('status')); ?>">
                <?php endif; ?>

                <?php if(request('per_page') && request('per_page') != 10): ?>
                    <input type="hidden" name="per_page" value="<?php echo e(request('per_page')); ?>">
                <?php endif; ?>

                <select name="department"
                        onchange="this.form.submit()"
                        class="w-full sm:w-48 bg-[#F3F3F5] border border-[#F3F3F5] rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-1 focus:ring-[#F3F3F5]/20 focus:border-[#F3F3F5]">

                    <option value="">All Departments</option>
                    <?php $__currentLoopData = $departments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dept): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($dept); ?>"
                            <?php echo e(request('department') === $dept ? 'selected' : ''); ?>>
                            <?php echo e($dept); ?>

                        </option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </form>

            
            <form method="GET"
                  action="<?php echo e(route('dashboard.job-descriptions.index')); ?>"
                  class="w-full sm:w-auto">

                <?php if(request('search')): ?>
                    <input type="hidden" name="search" value="<?php echo e(request('search')); ?>">
                <?php endif; ?>

                <?php if(request('department')): ?>
                    <input type="hidden" name="department" value="<?php echo e(request('department')); ?>">
                <?php endif; ?>

                <?php if(request('per_page') && request('per_page') != 10): ?>
                    <input type="hidden" name="per_page" value="<?php echo e(request('per_page')); ?>">
                <?php endif; ?>

                <select name="status"
                        onchange="this.form.submit()"
                        class="w-full sm:w-auto bg-[#F3F3F5] border border-[#F3F3F5] rounded-lg px-3 pr-6 py-2.5 text-sm focus:outline-none focus:ring-1 focus:ring-[#F3F3F5]/20 focus:border-[#F3F3F5]">

                    <option value="">All Status</option>
                    <option value="Draft" <?php echo e(request('status') === 'Draft' ? 'selected' : ''); ?>>Draft</option>
                    <option value="Approved" <?php echo e(request('status') === 'Approved' ? 'selected' : ''); ?>>Approved</option>
                    <option value="Published" <?php echo e(request('status') === 'Published' ? 'selected' : ''); ?>>Published</option>
                </select>
            </form>

            
            

            
            <div class="inline-flex items-center w-fit border border-gray-200 rounded-lg overflow-hidden shrink-0">

                <button type="button"
                        @click="setView('list')"
                        :class="viewMode === 'list'
                            ? 'bg-gray-100 text-gray-900'
                            : 'text-gray-400 hover:text-gray-600'"
                        class="m-1.5 p-1.5 rounded-lg 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 type="button"
                        @click="setView('grid')"
                        :class="viewMode === 'grid'
                            ? 'bg-gray-100 text-gray-900'
                            : 'text-gray-400 hover:text-gray-600'"
                        class="m-1.5 p-1.5 rounded-lg 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>
                    
                    <?php if($jobDescriptions->count() > 0): ?>
                        
                        <div x-show="viewMode === 'list'" style="display: none;" class="px-4">
                            <div class="overflow-x-auto">
                                <div class="space-y-3 min-w-[900px]">
                                    
                                    <div class="grid grid-cols-[0.8fr_1.5fr_1fr_1fr_1fr_1fr_0.5fr] items-center py-4 px-6 bg-[#F8F9FD] border border-[#F8F9FD] rounded-xl">
                                        <span class="text-sm font-medium text-[#94A3B8] tracking-wider">Job ID</span>
                                        <span class="text-sm font-medium text-[#94A3B8] tracking-wider">Job Title</span>
                                        <span class="text-sm font-medium text-[#94A3B8] tracking-wider">Department</span>
                                        <span class="text-sm font-medium text-[#94A3B8] tracking-wider">Job Level</span>
                                        <span class="text-sm font-medium text-[#94A3B8] tracking-wider">Last Modified</span>
                                        <span class="text-sm font-medium text-[#94A3B8] tracking-wider">Status</span>
                                        <span class="text-center">
                                            <svg class="w-5 h-5 mx-auto text-gray-400" 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>
                                        </span>
                                    </div>

                                    
                                    <?php $__currentLoopData = $jobDescriptions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $jd): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <div class="grid grid-cols-[0.8fr_1.5fr_1fr_1fr_1fr_1fr_0.5fr] items-center py-3 px-6 bg-white border border-[#F5F5F5] rounded-xl">
                                            <span class="text-sm text-[#94A3B8]"><?php echo e($jd->job_id); ?></span>
                                            <span class="text-sm text-[#6E7079]"><?php echo e($jd->job_title); ?></span>
                                            <span class="text-sm text-[#6E7079]"><?php echo e($jd->department); ?></span>
                                            <span class="text-sm text-[#6E7079]"><?php echo e($jd->level); ?></span>
                                            <span class="text-sm text-[#6E7079]"><?php echo e($jd->updated_at->format('Y-m-d')); ?></span>
                                            <span>
                                                <?php switch($jd->status):
                                                    case ('approved'): ?>
                                                        <span class="inline-flex items-center justify-center min-w-[100px] px-3 py-1 rounded-lg text-xs font-medium bg-green-100 text-green-700 border border-green-100">Approved</span>
                                                    <?php break; ?>

                                                    <?php case ('published'): ?>
                                                        <span class="inline-flex items-center justify-center min-w-[100px] px-3 py-1 rounded-lg text-xs font-medium bg-blue-100 text-blue-700 border border-blue-100">Published</span>
                                                    <?php break; ?>

                                                    <?php default: ?>
                                                        <span class="inline-flex items-center justify-center min-w-[100px] px-3 py-1 rounded-lg text-xs font-medium bg-gray-100 text-gray-600 border border-gray-100">Draft</span>
                                                <?php endswitch; ?>
                                            </span>
                                            <span class="text-center">
                                                <div x-data="dropdownMenu()" class="relative inline-block"
                                                    @keydown.escape.window="close()">

                                                    
                                                    <button type="button" @click="toggle($event)"
                                                        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 x-transition.opacity.scale.90
                                                        :style="style"
                                                        class="fixed w-40 bg-white text-left rounded-lg shadow-lg border border-gray-200 py-1 z-[9999]"
                                                        @click.outside="close()">
                                                        <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>

                                                        <?php if(!$jd->isPublished()): ?>
                                                            <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>
                                                        <?php endif; ?>

                                                        <button type="button"
                                                            @click="handleDelete(<?php echo e($jd->id); ?>, '<?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>
                                            </span>
                                        </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>

                            
                            <div class="flex items-center justify-between px-8 py-4">
                                <div class="flex items-center gap-3">
                                    <span class="text-sm font-medium text-[#2F3D7E]">Show rows:</span>
                                    <form method="GET" id="perpage-list-form"
                                        action="<?php echo e(route('dashboard.job-descriptions.index')); ?>">
                                        <?php if(request('search')): ?>
                                            <input type="hidden" name="search" value="<?php echo e(request('search')); ?>">
                                        <?php endif; ?>
                                        <?php if(request('department')): ?>
                                            <input type="hidden" name="department" value="<?php echo e(request('department')); ?>">
                                        <?php endif; ?>
                                        <?php if(request('status')): ?>
                                            <input type="hidden" name="status" value="<?php echo e(request('status')); ?>">
                                        <?php endif; ?>
                                        <select name="per_page" onchange="this.form.submit()"
                                            class="border border-gray-200 rounded-lg px-2 py-1.5 text-sm bg-white">
                                            <option value="10" <?php echo e(request('per_page', 10) == 10 ? 'selected' : ''); ?>>10 items</option>
                                            <option value="25" <?php echo e(request('per_page', 10) == 25 ? 'selected' : ''); ?>>25 items</option>
                                            <option value="50" <?php echo e(request('per_page', 10) == 50 ? 'selected' : ''); ?>>50 items</option>
                                        </select>
                                    </form>
                                </div>
                                <div class="flex items-center gap-4">
                                    <?php if($jobDescriptions->lastPage() > 1): ?>
                                        <div class="flex items-center gap-1">
                                            
                                            <?php if($jobDescriptions->onFirstPage()): ?>
                                                <span class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-gray-300 cursor-not-allowed">
                                                    <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 19l-7-7 7-7"/></svg>
                                                </span>
                                            <?php else: ?>
                                                <a href="<?php echo e($jobDescriptions->previousPageUrl()); ?>" class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-[#94A3B8] hover:bg-gray-50">
                                                    <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 19l-7-7 7-7"/></svg>
                                                </a>
                                            <?php endif; ?>

                                            
                                            <?php $__currentLoopData = $jobDescriptions->getUrlRange(1, $jobDescriptions->lastPage()); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <?php if($page == $jobDescriptions->currentPage()): ?>
                                                    <span class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-[#2F3D7E] text-sm font-semibold"><?php echo e($page); ?></span>
                                                <?php else: ?>
                                                    <a href="<?php echo e($url); ?>" class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-[#94A3B8] text-sm font-medium hover:bg-gray-50"><?php echo e($page); ?></a>
                                                <?php endif; ?>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                                            
                                            <?php if($jobDescriptions->hasMorePages()): ?>
                                                <a href="<?php echo e($jobDescriptions->nextPageUrl()); ?>" class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-[#94A3B8] hover:bg-gray-50">
                                                    <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="M9 5l7 7-7 7"/></svg>
                                                </a>
                                            <?php else: ?>
                                                <span class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-gray-300 cursor-not-allowed">
                                                    <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="M9 5l7 7-7 7"/></svg>
                                                </span>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>

                        
                        <div x-show="viewMode === 'grid'" x-cloak style="display: none;">
                            <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-[#62748E] font-medium"><?php echo e($jd->job_id); ?></span>
                                            <div x-data="{ open: false, above: false }" class="relative" @click.away="open = false">
                                                <button type="button"
                                                    @click="open = !open; if(open){ const r = $el.getBoundingClientRect(); above = (window.innerHeight - r.bottom) < 160; }"
                                                    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 style="display: none;"
                                                    :class="above ?
                                                        'absolute right-0 bottom-full mb-1 w-40 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-[200]' :
                                                        'absolute right-0 top-full mt-1 w-40 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-[200]'">
                                                    <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>
                                                    <?php if(!$jd->isPublished()): ?>
                                                        <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>
                                                    <?php endif; ?>
                                                    <button type="button"
                                                        @click="open = false; Alpine.store('deleteModal').open(<?php echo e($jd->id); ?>, '<?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-semibold text-gray-900 mb-2"><?php echo e($jd->job_title); ?></h3>
                                        <p class="text-sm text-[#45556C] 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 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-[#45556C] 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 ?? '—'); ?></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-8 py-4">
                                <div class="flex items-center gap-3">
                                    <span class="text-sm font-medium text-[#2F3D7E]">Show rows:</span>
                                    <form method="GET" id="perpage-list-form"
                                        action="<?php echo e(route('dashboard.job-descriptions.index')); ?>">
                                        <?php if(request('search')): ?>
                                            <input type="hidden" name="search" value="<?php echo e(request('search')); ?>">
                                        <?php endif; ?>
                                        <?php if(request('department')): ?>
                                            <input type="hidden" name="department" value="<?php echo e(request('department')); ?>">
                                        <?php endif; ?>
                                        <?php if(request('status')): ?>
                                            <input type="hidden" name="status" value="<?php echo e(request('status')); ?>">
                                        <?php endif; ?>
                                        <select name="per_page" onchange="this.form.submit()"
                                            class="border border-gray-200 rounded-lg px-2 py-1.5 text-sm bg-white">
                                            <option value="10" <?php echo e(request('per_page', 10) == 10 ? 'selected' : ''); ?>>10 items</option>
                                            <option value="25" <?php echo e(request('per_page', 10) == 25 ? 'selected' : ''); ?>>25 items</option>
                                            <option value="50" <?php echo e(request('per_page', 10) == 50 ? 'selected' : ''); ?>>50 items</option>
                                        </select>
                                    </form>
                                </div>
                                <div class="flex items-center gap-4">
                                    <?php if($jobDescriptions->lastPage() > 1): ?>
                                        <div class="flex items-center gap-1">
                                            
                                            <?php if($jobDescriptions->onFirstPage()): ?>
                                                <span class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-gray-300 cursor-not-allowed">
                                                    <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 19l-7-7 7-7"/></svg>
                                                </span>
                                            <?php else: ?>
                                                <a href="<?php echo e($jobDescriptions->previousPageUrl()); ?>" class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-[#94A3B8] hover:bg-gray-50">
                                                    <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 19l-7-7 7-7"/></svg>
                                                </a>
                                            <?php endif; ?>

                                            
                                            <?php $__currentLoopData = $jobDescriptions->getUrlRange(1, $jobDescriptions->lastPage()); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <?php if($page == $jobDescriptions->currentPage()): ?>
                                                    <span class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-[#2F3D7E] text-sm font-semibold"><?php echo e($page); ?></span>
                                                <?php else: ?>
                                                    <a href="<?php echo e($url); ?>" class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-[#94A3B8] text-sm font-medium hover:bg-gray-50"><?php echo e($page); ?></a>
                                                <?php endif; ?>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                                            
                                            <?php if($jobDescriptions->hasMorePages()): ?>
                                                <a href="<?php echo e($jobDescriptions->nextPageUrl()); ?>" class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-[#94A3B8] hover:bg-gray-50">
                                                    <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="M9 5l7 7-7 7"/></svg>
                                                </a>
                                            <?php else: ?>
                                                <span class="w-9 h-9 flex items-center justify-center rounded-lg border border-gray-200 text-gray-300 cursor-not-allowed">
                                                    <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="M9 5l7 7-7 7"/></svg>
                                                </span>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    <?php else: ?>
                        
                        <div class="py-16 text-center">
                            <svg class="w-12 h-12 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            <p class="text-gray-500 text-sm font-medium">No job descriptions match your filters.</p>
                            <a href="<?php echo e(route('dashboard.job-descriptions.index')); ?>"
                                class="inline-flex items-center gap-1.5 mt-4 text-sm font-medium text-[#2F3D7E] hover:underline">
                                <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="M6 18L18 6M6 6l12 12" />
                                </svg>
                                Clear filters
                            </a>
                        </div>
                    <?php endif; ?>


                </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-3 flex items-center justify-center">
                        <svg width="250" height="224" viewBox="0 0 250 224" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <rect x="13" width="224" height="224" rx="112" fill="#E6EAF1" fill-opacity="0.48"/>
                        <rect y="12" width="250" height="200" fill="url(#pattern0_952_7000)"/>
                        <defs>
                        <pattern id="pattern0_952_7000" patternContentUnits="objectBoundingBox" width="1" height="1">
                        <use xlink:href="#image0_952_7000" transform="scale(0.004 0.005)"/>
                        </pattern>
                        <image id="image0_952_7000" width="250" height="200" preserveAspectRatio="none" xlink:href="data:image/png;base64, "/>
                        </defs>
                        </svg>
                    </div>
                    <h3 class="text-md font-semibold text-gray-900 mb-2">No JD!!!</h3>
                    <p class="text-sm text-gray-500 mb-4 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-4 rounded-lg font-medium transition-all duration-200 text-sm bg-[#2F3D7E] hover:bg-[#2F3D7E]/90 text-white shadow-sm active:scale-[0.98]">
                        <svg class="w-4 h-4 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>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.store('deleteModal', {
                isOpen: false,
                id: null,
                title: '',
                open(id, title) {
                    this.id = id;
                    this.title = title;
                    this.isOpen = true;
                },
                close() {
                    this.isOpen = false;
                }
            });
        });
    </script>

    <div x-data x-show="$store.deleteModal.isOpen" style="display: none;"
        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"
        class="fixed inset-0 z-50 flex items-center justify-center p-4" style="display:none">

        
        <div class="fixed inset-0 bg-black/50" @click="$store.deleteModal.close()"></div>

        
        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-md">
            <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 type="button" @click="$store.deleteModal.close()"
                        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="$store.deleteModal.title"></strong>"?
                        This will remove all associated data, history, and approvals.
                    </p>
                </div>

                <div class="flex items-center justify-end gap-3">
                    <button type="button" @click="$store.deleteModal.close()"
                        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/' + $store.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>

    <script>
        function dropdownMenu() {
            return {
                open: false,
                style: '',

                toggle(event) {
                    this.open = !this.open;

                    if (this.open) {
                        this.$nextTick(() => {
                            const rect = event.target.getBoundingClientRect();

                            const dropdownHeight = 120; // safe estimate
                            const spaceBelow = window.innerHeight - rect.bottom;

                            let top;

                            // decide direction WITHOUT affecting layout
                            if (spaceBelow < dropdownHeight) {
                                top = rect.top - dropdownHeight;
                            } else {
                                top = rect.bottom;
                            }

                            this.style = `
                        top: ${top}px;
                        left: ${rect.right - 160}px;
                    `;
                        });
                    }
                },

                close() {
                    this.open = false;
                },

                handleDelete(id, title) {
                    this.close();
                    Alpine.store('deleteModal').open(id, title);
                }
            }
        }
    </script>
<?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_dev/resources/views/dashboard/job-descriptions/index.blade.php ENDPATH**/ ?>