<?php require APPROOT . '/app/Views/layouts/header.php'; ?>

<div class="max-w-7xl mx-auto mb-10 space-y-8">
    <div class="pb-4">
        <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1"><?php echo $data['title']; ?></h1>
        <p class="text-sm text-gray-600 dark:text-gray-400"><?php echo $data['description']; ?></p>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
        <div class="w-full text-gray-900 dark:text-gray-100 p-5">
            <table id="techHistoryTable" class="w-full text-left whitespace-nowrap">
                <thead class="border-b border-gray-200 dark:border-gray-700/50">
                    <tr>
                        <th class="px-6 py-4 text-[11px] font-extrabold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Date Finished</th>
                        <th class="px-6 py-4 text-[11px] font-extrabold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Jobcard #</th>
                        <th class="px-6 py-4 text-[11px] font-extrabold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Client</th>
                        <th class="px-6 py-4 text-[11px] font-extrabold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Status</th>
                        <th class="px-6 py-4 text-right text-[11px] font-extrabold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if(!empty($data['jobcards'])): ?>
                        <?php foreach($data['jobcards'] as $jc) : ?>
                        <tr class="border-b border-gray-100 dark:border-gray-700/50 hover:bg-gray-50 dark:hover:bg-gray-700/25">
                            <td class="px-6 py-4 whitespace-nowrap text-xs text-gray-500 dark:text-gray-400 font-mono" data-order="<?php echo strtotime($jc->completed_at); ?>">
                                <?php echo $jc->completed_at ? date('M j, Y - H:i', strtotime($jc->completed_at)) : '-'; ?>
                            </td>
                            <td class="px-6 py-4 font-bold font-mono"><?php echo htmlspecialchars($jc->jobcard_number); ?></td>
                            <td class="px-6 py-4"><?php echo htmlspecialchars($jc->client_name); ?></td>
                            <td class="px-6 py-4">
                                <?php 
                                    $badgeColor = ($jc->status === 'Signed Off') ? 'bg-green-50 text-green-700 border-green-200' : 'bg-purple-50 text-purple-700 border-purple-200';
                                ?>
                                <span class="px-2 py-0.5 text-[10px] font-bold uppercase rounded border <?php echo $badgeColor; ?>">
                                    <?php echo $jc->status; ?>
                                </span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <?php if ($jc->status === 'Signed Off'): ?>
                                    <a href="<?php echo URLROOT; ?>/staff/downloadPdf/<?php echo $jc->id; ?>" target="_blank" class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white text-xs font-bold rounded shadow-sm mr-2 transition-colors">Download PDF</a>
                                <?php endif; ?>
                                <a href="<?php echo URLROOT; ?>/staff/viewJobcard/<?php echo $jc->id; ?>" class="px-4 py-2 bg-primary hover:bg-blue-700 text-white text-xs font-bold rounded shadow-sm transition-colors">
                                    View
                                </a>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() { $('#techHistoryTable').DataTable({ responsive: true, order: [[ 0, "desc" ]] }); });
</script>

<?php require APPROOT . '/app/Views/layouts/footer.php'; ?>