<?php $__env->startSection('title', 'Application Status Tracker | Munchify Careers'); ?>

<?php $__env->startSection('content'); ?>
<!-- Header Banner -->
<section class="bg-[#111318] text-white py-12 relative overflow-hidden">
    <div class="absolute w-[400px] h-[400px] bg-[#FF6B00]/10 rounded-full blur-[100px] -top-20 -right-20"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
        <div>
            <div class="flex flex-wrap items-center gap-2 mb-2">
                <span class="app-number"><?php echo e($application->application_number); ?></span>
                <span class="badge <?php echo e($application->status_badge_class); ?>"><?php echo e(ucfirst($application->status)); ?></span>
            </div>
            <h1 class="text-2xl sm:text-3xl font-extrabold text-white">
                <?php echo e($application->full_name); ?>'s Status Tracker
            </h1>
            <p class="text-xs text-gray-400 mt-1">
                Applying for: <span class="text-white font-bold"><?php echo e($job->title); ?></span> &bull; Submitted <?php echo e($application->created_at->format('M d, Y')); ?>

            </p>
        </div>
        
        <a href="<?php echo e(route('careers.jobs')); ?>" class="btn btn-outline btn-sm rounded-full">
            <i class="fa-solid fa-angle-left"></i> Back to Jobs
        </a>
    </div>
</section>

<!-- Tracking Stepper / Activity -->
<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-3 gap-8">
        
        <!-- Left Side: Interactive Pipeline Progress -->
        <div class="col-span-1 lg:col-span-2 space-y-6">
            
            <div class="bg-white p-6 md:p-8 rounded-2xl border border-gray-200 shadow-sm">
                <h3 class="font-extrabold text-[#111318] text-base mb-8 flex items-center gap-2">
                    <i class="fa-solid fa-road text-[#FF6B00]"></i> Recruitment Progress
                </h3>

                <!-- Pipeline Stepper Layout -->
                <div class="relative pl-8 space-y-8">
                    <!-- Vertical Line connecting steps -->
                    <div class="absolute left-[15px] top-2 bottom-2 w-0.5 bg-gray-200"></div>

                    <?php
                        $currentStageOrder = $application->currentStage->sort_order ?? 1;
                        $isFail = $application->status === 'rejected';
                        $isPass = $application->status === 'hired';
                    ?>

                    <?php $__currentLoopData = $stages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $stage): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php
                            $stepOrder = $stage->sort_order;
                            $isCompleted = $stepOrder < $currentStageOrder || $isPass;
                            $isCurrent = $stepOrder === $currentStageOrder && !$isPass && !$isFail;
                            $isStepFail = $isFail && $stepOrder === $currentStageOrder && $stage->is_terminal_fail;
                            
                            // Color variables based on status
                            $dotClass = 'bg-gray-200 text-gray-500';
                            if ($isCompleted) {
                                $dotClass = 'bg-[#FF6B00] text-white';
                            } elseif ($isCurrent) {
                                $dotClass = 'bg-white border-4 border-[#FF6B00] text-[#FF6B00] shadow-[0_0_10px_rgba(255,107,0,0.3)]';
                            } elseif ($isStepFail) {
                                $dotClass = 'bg-red-500 text-white';
                            } elseif ($isPass && $stage->is_terminal_pass) {
                                $dotClass = 'bg-emerald-500 text-white';
                            }
                        ?>

                        <div class="relative flex gap-6 items-start animate-fade-in">
                            <!-- Bullet dot -->
                            <div class="absolute -left-[33px] w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs z-10 transition duration-300 <?php echo e($dotClass); ?>">
                                <?php if($isCompleted && !$stage->is_terminal_pass): ?>
                                    <i class="fa-solid fa-check"></i>
                                <?php elseif($isStepFail): ?>
                                    <i class="fa-solid fa-xmark"></i>
                                <?php elseif($isPass && $stage->is_terminal_pass): ?>
                                    <i class="fa-solid fa-trophy"></i>
                                <?php else: ?>
                                    <?php echo e($stepOrder); ?>

                                <?php endif; ?>
                            </div>

                            <!-- Step label content -->
                            <div class="flex-grow">
                                <h4 class="font-bold text-sm leading-none mb-1 flex items-center gap-2 <?php echo e($isCurrent ? 'text-[#FF6B00]' : 'text-[#111318]'); ?>">
                                    <?php echo e($stage->name); ?>

                                    <?php if($isCurrent): ?>
                                        <span class="inline-flex items-center bg-orange-50 text-[#FF6B00] text-[9px] font-bold uppercase tracking-wider py-0.5 px-2 rounded-full border border-orange-100 animate-pulse">Current Stage</span>
                                    <?php endif; ?>
                                    <?php if($isStepFail): ?>
                                        <span class="inline-flex items-center bg-red-50 text-red-500 text-[9px] font-bold uppercase tracking-wider py-0.5 px-2 rounded-full border border-red-100">Application Closed</span>
                                    <?php endif; ?>
                                </h4>
                                <p class="text-xs text-gray-500 mt-1 leading-relaxed">
                                    <?php echo e($stage->description); ?>

                                </p>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>

            <!-- Custom Helper Info -->
            <div class="bg-white p-6 rounded-2xl border border-gray-200 flex gap-4 items-start">
                <div class="w-10 h-10 rounded-xl bg-orange-50 border border-orange-100 text-[#FF6B00] flex items-center justify-center shrink-0">
                    <i class="fa-solid fa-circle-question text-lg"></i>
                </div>
                <div class="space-y-1">
                    <h4 class="font-extrabold text-[#111318] text-sm">Need help or want to reschedule?</h4>
                    <p class="text-xs text-gray-500 leading-relaxed">
                        If you have scheduled an interview and need to change the details, or want to follow up, you can reply directly to the WhatsApp messages sent from our automated recruiter number, or email us at <span class="font-semibold text-gray-700">careers@munchify.co.ke</span>.
                    </p>
                </div>
            </div>

        </div>

        <!-- Right Side: Message timeline / communications logs -->
        <div class="col-span-1">
            <div class="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm flex flex-col h-full max-h-[500px]">
                <h3 class="font-extrabold text-[#111318] text-sm mb-6 flex items-center gap-2">
                    <i class="fa-brands fa-whatsapp text-emerald-500 text-lg"></i> Communication History
                </h3>

                <!-- Message timeline lists -->
                <div class="flex-grow overflow-y-auto space-y-4 pr-1">
                    <?php $__empty_1 = true; $__currentLoopData = $application->communications; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $comm): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <?php
                            $isOutbound = $comm->direction === 'outbound';
                        ?>
                        <div class="flex flex-col gap-1">
                            <div class="chat-bubble <?php echo e($isOutbound ? 'chat-outbound' : 'chat-inbound'); ?>">
                                <p class="text-xs leading-relaxed whitespace-pre-line"><?php echo e($comm->message); ?></p>
                            </div>
                            <span class="text-[9px] text-gray-400 font-semibold mt-0.5 <?php echo e($isOutbound ? 'text-right' : 'text-left'); ?>">
                                <?php echo e($comm->sent_at ? $comm->sent_at->format('M d, g:i A') : $comm->created_at->format('M d, g:i A')); ?>

                            </span>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <div class="text-center py-12 text-gray-400 flex flex-col items-center justify-center gap-3">
                            <i class="fa-regular fa-comment-dots text-2xl text-gray-300"></i>
                            <p class="text-xs">No notifications sent yet. You will receive SMS & WhatsApp alerts as your application progresses.</p>
                        </div>
                    <?php endif; ?>
                </div>

            </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/status-tracker.blade.php ENDPATH**/ ?>