<?php $__env->startSection('title', 'Browse Job Openings - Munchify Careers'); ?>

<?php $__env->startSection('content'); ?>
<!-- Search / Header banner -->
<section class="bg-[#111318] text-white py-12 relative overflow-hidden">
    <div class="absolute w-[300px] h-[300px] bg-[#FF6B00]/10 rounded-full blur-[80px] -top-20 -right-20"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <h1 class="text-3xl font-extrabold mb-2">Explore Open Positions</h1>
        <p class="text-xs text-gray-400">Discover your next opportunity at Maseno University's premiere delivery network.</p>
    </div>
</section>

<!-- Filterable Listings Grid -->
<section class="py-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        
        <!-- SIDEBAR FILTERS (Desktop) -->
        <div class="col-span-1 bg-white p-6 rounded-2xl border border-gray-200 h-fit sticky top-24">
            <h3 class="font-extrabold text-[#111318] text-sm mb-4 flex items-center gap-2">
                <i class="fa-solid fa-filter text-[#FF6B00]"></i> Filter Jobs
            </h3>

            <form action="<?php echo e(route('careers.jobs')); ?>" method="GET" class="space-y-6">
                <!-- Text Search -->
                <div>
                    <label for="search" class="form-label text-xs">Search Keywords</label>
                    <div class="relative">
                        <input type="text" name="search" id="search" value="<?php echo e(request('search')); ?>" class="form-input text-xs pl-8" placeholder="e.g. Developer, Rider">
                        <i class="fa-solid fa-magnifying-glass absolute left-3 top-3 text-[10px] text-gray-400"></i>
                    </div>
                </div>

                <!-- Department Filter -->
                <div>
                    <label for="department" class="form-label text-xs">Department</label>
                    <select name="department" id="department" class="form-input text-xs">
                        <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->id); ?>" <?php echo e(request('department') == $dept->id ? 'selected' : ''); ?>><?php echo e($dept->name); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>

                <!-- Job Type Filter -->
                <div>
                    <label for="type" class="form-label text-xs">Job Type</label>
                    <select name="type" id="type" class="form-input text-xs">
                        <option value="">All Types</option>
                        <option value="full_time" <?php echo e(request('type') === 'full_time' ? 'selected' : ''); ?>>Full-time</option>
                        <option value="part_time" <?php echo e(request('type') === 'part_time' ? 'selected' : ''); ?>>Part-time</option>
                        <option value="contract" <?php echo e(request('type') === 'contract' ? 'selected' : ''); ?>>Contract</option>
                        <option value="internship" <?php echo e(request('type') === 'internship' ? 'selected' : ''); ?>>Internship</option>
                    </select>
                </div>

                <!-- Location Filter -->
                <div>
                    <label for="location" class="form-label text-xs">Workplace Location</label>
                    <select name="location" id="location" class="form-input text-xs">
                        <option value="">All Locations</option>
                        <option value="on_site" <?php echo e(request('location') === 'on_site' ? 'selected' : ''); ?>>On-site</option>
                        <option value="remote" <?php echo e(request('location') === 'remote' ? 'selected' : ''); ?>>Remote</option>
                        <option value="hybrid" <?php echo e(request('location') === 'hybrid' ? 'selected' : ''); ?>>Hybrid</option>
                    </select>
                </div>

                <!-- Actions -->
                <div class="flex gap-2">
                    <button type="submit" class="btn btn-primary btn-sm flex-grow py-2.5 font-bold text-xs rounded-xl">
                        Apply Filters
                    </button>
                    <?php if(request()->anyFilled(['search', 'department', 'type', 'location'])): ?>
                        <a href="<?php echo e(route('careers.jobs')); ?>" class="btn btn-secondary btn-sm py-2.5 px-3 rounded-xl" title="Clear Filters">
                            <i class="fa-solid fa-rotate-left"></i>
                        </a>
                    <?php endif; ?>
                </div>
            </form>
        </div>

        <!-- JOB LISTINGS COLUMN -->
        <div class="col-span-1 lg:col-span-3 space-y-4">
            
            <div class="flex justify-between items-center mb-2">
                <span class="text-xs text-gray-500 font-semibold">
                    Showing <?php echo e($jobs->firstItem() ?? 0); ?>-<?php echo e($jobs->lastItem() ?? 0); ?> of <?php echo e($jobs->total()); ?> open roles
                </span>
            </div>

            <?php $__empty_1 = true; $__currentLoopData = $jobs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $job): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="card bg-white p-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 border-l-4 border-l-[#FF6B00] shadow-sm hover:shadow-md transition">
                    <div class="flex-grow">
                        <div class="flex flex-wrap items-center gap-2 mb-2">
                            <span class="badge badge-orange"><?php echo e($job->department->name); ?></span>
                            <span class="badge badge-gray"><?php echo e($job->type_label); ?></span>
                            <span class="badge badge-gray"><?php echo e($job->location_label); ?></span>
                        </div>
                        <h3 class="font-extrabold text-lg text-[#111318] hover:text-[#FF6B00] transition mb-1">
                            <a href="<?php echo e(route('careers.jobs.show', ['ulid' => $job->ulid])); ?>"><?php echo e($job->title); ?></a>
                        </h3>
                        <p class="text-xs text-gray-500 line-clamp-2 mb-3 leading-relaxed">
                            <?php echo e(Str::limit($job->description, 160)); ?>

                        </p>
                        <div class="flex items-center gap-4 text-[11px] text-gray-400 font-semibold">
                            <span><i class="fa-solid fa-map-marker-alt"></i> <?php echo e($job->location_detail); ?></span>
                            <?php if($job->salary_range): ?>
                            <span><i class="fa-solid fa-wallet"></i> <?php echo e($job->salary_range); ?></span>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="flex items-center gap-2 w-full md:w-auto shrink-0">
                        <a href="<?php echo e(route('careers.jobs.show', ['ulid' => $job->ulid])); ?>" class="btn btn-secondary w-full md:w-auto py-2 px-5 text-xs">
                            View details
                        </a>
                        <a href="<?php echo e(route('apply.step', ['ulid' => $job->ulid, 'step' => 1])); ?>" class="btn btn-primary w-full md:w-auto py-2 px-5 text-xs">
                            Apply
                        </a>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="text-center py-16 card bg-white flex flex-col items-center justify-center">
                    <div class="w-16 h-16 rounded-full bg-gray-50 border border-gray-100 flex items-center justify-center text-gray-400 text-2xl mb-4">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </div>
                    <h3 class="font-bold text-gray-800 mb-1">No Jobs Found</h3>
                    <p class="text-xs text-gray-500 max-w-sm">We couldn't find any openings matching your query. Try clearing filters or searching other keywords.</p>
                </div>
            <?php endif; ?>

            <!-- Pagination links -->
            <div class="mt-8">
                <?php echo e($jobs->appends(request()->query())->links()); ?>

            </div>

        </div>

    </div>
</section>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.public', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/manuu/Projects/munchify/Munchify appointing/resources/views/public/jobs.blade.php ENDPATH**/ ?>