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

<div class="max-w-7xl mx-auto mb-10">
    
    <div class="bg-gradient-to-r from-emerald-600 to-teal-500 rounded-2xl shadow-lg p-8 mb-8 text-white flex flex-col md:flex-row items-center justify-between relative overflow-hidden">
        <div class="absolute top-0 right-0 -mt-4 -mr-4 w-32 h-32 bg-white opacity-10 rounded-full blur-2xl"></div>
        <div class="absolute bottom-0 left-10 -mb-4 w-24 h-24 bg-white opacity-10 rounded-full blur-xl"></div>
        
        <div class="relative z-10">
            <h1 class="text-3xl font-bold mb-2">Welcome, <?php echo explode(' ', $data['user']->name)[0]; ?>!</h1>
            <p class="text-teal-50 opacity-90"><?php echo $data['description']; ?></p>
        </div>
        <div class="mt-4 md:mt-0 flex flex-col items-end relative z-10">
            <span class="px-4 py-2 bg-white/20 rounded-lg text-sm font-bold backdrop-blur-md shadow-sm border border-white/30 flex items-center">
                Status: <?php echo ($data['user']->is_active == 1) ? '<span class="w-2 h-2 rounded-full bg-emerald-300 ml-2 mr-1"></span> Active Account' : '<span class="w-2 h-2 rounded-full bg-red-400 ml-2 mr-1"></span> Restricted'; ?>
            </span>
        </div>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        
        <!-- Sidebar Stack -->
        <div class="col-span-1 flex flex-col gap-6">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden flex flex-col h-full">
                <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex items-center">
                    <svg class="w-4 h-4 mr-2 text-emerald-600 dark:text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                    <h2 class="text-sm font-bold text-gray-900 dark:text-white">My Details</h2>
                </div>
                
                <div class="p-6 flex-1 flex flex-col space-y-5">
                    <div>
                        <span class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Full Name</span>
                        <span class="text-sm text-gray-900 dark:text-white font-medium"><?php echo htmlspecialchars($data['user']->name); ?></span>
                    </div>
                    <div>
                        <span class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Email Address</span>
                        <span class="text-sm text-gray-900 dark:text-white font-medium"><?php echo htmlspecialchars($data['user']->email); ?></span>
                    </div>
                    <div class="mb-6">
                        <span class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Member Since</span>
                        <span class="text-sm text-gray-900 dark:text-white font-medium"><?php echo date('F j, Y', strtotime($data['user']->created_at)); ?></span>
                    </div>
                    
                    <a href="<?php echo URLROOT; ?>/profile/index" class="block w-full text-center bg-gray-100 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-700 text-gray-800 dark:text-white font-bold py-2.5 px-4 rounded-lg transition-colors mt-auto border border-gray-200 dark:border-gray-700/50 shadow-sm">
                        Edit Profile
                    </a>
                </div>
            </div>
        </div>

        <!-- Jobcards Matrix -->
        <div class="col-span-1 md:col-span-2">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden h-full flex flex-col">
                <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex items-center">
                    <svg class="w-4 h-4 mr-2 text-primary" 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 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
                    <h2 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider">My Service History</h2>
                </div>
                
                <div class="w-full text-gray-900 dark:text-gray-100 p-5 flex-grow">
                    <table id="clientJobsTable" 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</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">Technician</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">Actions</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 last:border-0 hover:bg-gray-50 dark:hover:bg-gray-700/25 transition-colors">
                                    <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->created_at); ?>">
                                        <?php echo date('M j, Y', strtotime($jc->created_at)); ?>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900 dark:text-white font-mono"><?php echo htmlspecialchars($jc->jobcard_number); ?></td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
                                        <?php echo $jc->tech_name ? htmlspecialchars($jc->tech_name) : '-'; ?>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <?php 
                                            $badgeColors = [
                                                'Created' => 'bg-gray-100 text-gray-700 border-gray-200',
                                                'Assigned' => 'bg-blue-50 text-blue-700 border-blue-200',
                                                'Started' => 'bg-yellow-50 text-yellow-700 border-yellow-200',
                                                'Completed' => 'bg-purple-50 text-purple-700 border-purple-200',
                                                'Signed Off' => 'bg-green-50 text-green-700 border-green-200'
                                            ];
                                            $color = $badgeColors[$jc->status] ?? $badgeColors['Created'];
                                        ?>
                                        <span class="px-2 py-0.5 inline-flex text-[10px] font-bold uppercase tracking-wider rounded border <?php echo $color; ?>">
                                            <?php echo $jc->status; ?>
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium flex justify-end space-x-2">
                                        <!-- Global View Details Button -->
                                        <a href="<?php echo URLROOT; ?>/clientdashboard/viewJobcard/<?php echo $jc->id; ?>" class="p-1.5 bg-blue-50 dark:bg-blue-900/10 hover:bg-blue-100 dark:hover:bg-blue-900/30 text-primary dark:text-blue-400 border border-blue-200 dark:border-blue-800/30 rounded-md transition-colors shadow-sm inline-flex items-center justify-center" title="View Details">
                                            <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><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"></path></svg>
                                        </a>
                                        
                                        <!-- Render PDF Button only if Finalized -->
                                        <?php if($jc->status === 'Signed Off'): ?>
                                            <a href="<?php echo URLROOT; ?>/clientdashboard/downloadPdf/<?php echo $jc->id; ?>" target="_blank" class="p-1.5 bg-emerald-50 dark:bg-emerald-900/10 hover:bg-emerald-100 dark:hover:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800/30 rounded-md transition-colors shadow-sm inline-flex items-center justify-center" title="Download PDF">
                                                <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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                                            </a>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('#clientJobsTable').DataTable({
            responsive: true,
            order: [[ 0, "desc" ]],
            pageLength: 10,
            columnDefs: [{ orderable: false, targets: 4 }],
            language: { 
                searchPlaceholder: "Search history...",
                emptyTable: "No service history found on your account."
            }
        });
    });
</script>

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