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

<div class="max-w-5xl mx-auto mb-10 space-y-6">
    <!-- Header & Status -->
    <div class="flex flex-col md:flex-row justify-between items-center bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 p-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white font-mono"><?php echo htmlspecialchars($data['jobcard']->jobcard_number); ?></h1>
            <p class="text-sm text-gray-500">Service Request Details for Client: <strong class="text-primary"><?php echo htmlspecialchars($data['jobcard']->client_name); ?></strong></p>
        </div>
        <div class="mt-4 md:mt-0 flex items-center space-x-4">
            <span class="px-3 py-1.5 text-xs font-bold uppercase tracking-wider rounded border bg-gray-100 text-gray-700 border-gray-200 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700">
                Status: <?php echo $data['jobcard']->status; ?>
            </span>
            <a href="<?php echo URLROOT; ?>/partnerDashboard/index" class="text-xs text-primary hover:underline font-bold ml-2">Back to Dashboard</a>
        </div>
    </div>
    
    <!-- Service Parties Grid -->
    <?php 
        $sysContact = !empty($data['settings']['contact_mobile']) ? $data['settings']['contact_mobile'] : ($data['settings']['contact_landline'] ?? '');
    ?>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        
        <!-- Requested By -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 p-6 flex flex-col">
            <h3 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider mb-4 border-b border-gray-200 dark:border-gray-700/50 pb-2">Requested By</h3>
            
            <p class="text-gray-900 dark:text-white font-medium text-lg mb-2">
                <?php echo htmlspecialchars($data['jobcard']->partner_name); ?>
            </p>
            <div class="mt-auto pt-2 space-y-1.5">
                <?php if(!empty($data['jobcard']->partner_contact)): ?>
                    <p class="text-xs text-gray-500 flex items-center font-mono">
                        <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
                        <?php echo htmlspecialchars($data['jobcard']->partner_contact); ?>
                    </p>
                <?php endif; ?>
                <?php if(!empty($data['jobcard']->partner_email)): ?>
                    <p class="text-xs text-gray-500 flex items-center">
                        <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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                        <a href="mailto:<?php echo htmlspecialchars($data['jobcard']->partner_email); ?>" class="hover:text-primary"><?php echo htmlspecialchars($data['jobcard']->partner_email); ?></a>
                    </p>
                <?php endif; ?>
            </div>
            <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400 mt-4 pt-4 border-t border-gray-100 dark:border-gray-700/50">Partner Agency</p>
        </div>

        <!-- Contracting Company (Subcontractor) -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 p-6 flex flex-col">
            <h3 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider mb-4 border-b border-gray-200 dark:border-gray-700/50 pb-2">Subcontractor</h3>
            <p class="text-gray-900 dark:text-white font-medium text-lg mb-2">
                <?php echo htmlspecialchars($data['settings']['app_name'] ?? 'System Owner'); ?>
            </p>
            <div class="mt-auto pt-2 space-y-1.5">
                <?php if(!empty($sysContact)): ?>
                    <p class="text-xs text-gray-500 flex items-center font-mono">
                        <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
                        <?php echo htmlspecialchars($sysContact); ?>
                    </p>
                <?php endif; ?>
                <?php if(!empty($data['settings']['contact_email'])): ?>
                    <p class="text-xs text-gray-500 flex items-center">
                        <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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                        <a href="mailto:<?php echo htmlspecialchars($data['settings']['contact_email']); ?>" class="hover:text-primary"><?php echo htmlspecialchars($data['settings']['contact_email']); ?></a>
                    </p>
                <?php endif; ?>
            </div>
            <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400 mt-4 pt-4 border-t border-gray-100 dark:border-gray-700/50">Executing Company</p>
        </div>

        <!-- Technician Details -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 p-6 flex flex-col">
            <h3 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider mb-4 border-b border-gray-200 dark:border-gray-700/50 pb-2">Service Technician</h3>
            <?php if ($data['jobcard']->technician_id): ?>
                <p class="text-gray-900 dark:text-white font-medium text-lg flex items-center mb-2">
                    <svg class="w-5 h-5 mr-2 text-primary" 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>
                    <?php echo htmlspecialchars($data['jobcard']->tech_name); ?>
                </p>
                <div class="mt-auto pt-2 space-y-1.5">
                    <?php if(!empty($data['jobcard']->tech_contact)): ?>
                        <p class="text-xs text-gray-500 flex items-center font-mono">
                            <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
                            <?php echo htmlspecialchars($data['jobcard']->tech_contact); ?>
                        </p>
                    <?php endif; ?>
                    <?php if(!empty($data['jobcard']->tech_email)): ?>
                        <p class="text-xs text-gray-500 flex items-center">
                            <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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                            <a href="mailto:<?php echo htmlspecialchars($data['jobcard']->tech_email); ?>" class="hover:text-primary"><?php echo htmlspecialchars($data['jobcard']->tech_email); ?></a>
                        </p>
                    <?php endif; ?>
                </div>
                <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400 mt-4 pt-4 border-t border-gray-100 dark:border-gray-700/50">Assigned Expert</p>
            <?php else: ?>
                <p class="text-yellow-600 dark:text-yellow-500 font-bold flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    Awaiting Assignment
                </p>
                <p class="text-xs text-gray-500 mt-auto pt-2">A technician will be assigned to your request shortly.</p>
            <?php endif; ?>
        </div>
    </div>

    <!-- Instructions Block -->
    <div class="bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800/30 rounded-xl p-6 shadow-sm">
        <h3 class="text-sm font-bold text-blue-900 dark:text-blue-300 mb-2 uppercase tracking-wider">Work Instructions / Issue Description</h3>
        <p class="text-blue-800 dark:text-blue-200/80 leading-relaxed whitespace-pre-wrap"><?php echo htmlspecialchars($data['jobcard']->instructions); ?></p>
    </div>

    <!-- Operational Timeline -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 p-6">
        <h3 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider mb-4 border-b border-gray-200 dark:border-gray-700/50 pb-2">Operational Timeline</h3>
        <div class="space-y-4">
            <div class="flex justify-between items-center">
                <span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Logged</span>
                <span class="text-gray-900 dark:text-white font-medium text-sm font-mono"><?php echo date('M j, Y - H:i', strtotime($data['jobcard']->created_at)); ?></span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Started</span>
                <span class="text-gray-900 dark:text-white font-medium text-sm font-mono"><?php echo $data['jobcard']->started_at ? date('M j, Y - H:i', strtotime($data['jobcard']->started_at)) : '<span class="text-gray-400 italic">Not started</span>'; ?></span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Completed</span>
                <span class="text-gray-900 dark:text-white font-medium text-sm font-mono"><?php echo $data['jobcard']->completed_at ? date('M j, Y - H:i', strtotime($data['jobcard']->completed_at)) : '<span class="text-gray-400 italic">Not completed</span>'; ?></span>
            </div>
            <?php 
            $duration = '<span class="text-gray-400 italic">Not completed</span>';
            if (!empty($data['jobcard']->started_at) && !empty($data['jobcard']->completed_at)) {
                $start = new DateTime($data['jobcard']->started_at);
                $end = new DateTime($data['jobcard']->completed_at);
                $diff = $start->diff($end);
                $hours = ($diff->days * 24) + $diff->h;
                $duration = $hours . 'h ' . $diff->i . 'm';
            }
            ?>
            <div class="flex justify-between items-center pt-2 border-t border-gray-100 dark:border-gray-700/50">
                <span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Time On-Site</span>
                <span class="text-gray-900 dark:text-white font-medium text-sm font-mono"><?php echo $duration; ?></span>
            </div>
        </div>
    </div>

    <?php if (!empty($data['jobcard']->work_done) || in_array($data['jobcard']->status, ['Completed', 'Signed Off'])): ?>
        <!-- Work Performed Block -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 p-6">
            <h3 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider mb-4 border-b border-gray-200 dark:border-gray-700/50 pb-2">Work Performed</h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap"><?php echo $data['jobcard']->work_done ? htmlspecialchars($data['jobcard']->work_done) : '<span class="text-gray-400 italic">No work logged yet.</span>'; ?></p>
        </div>
    <?php endif; ?>

    <?php if (!empty($data['materials'])): ?>
        <!-- Materials Matrix -->
        <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="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40">
                <h3 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider">Materials Used</h3>
            </div>
            <ul class="divide-y divide-gray-100 dark:divide-gray-700/50">
                <?php foreach($data['materials'] as $mat): ?>
                    <li class="p-4 flex justify-between items-center hover:bg-gray-50 dark:hover:bg-gray-900/20">
                        <span class="text-sm font-medium text-gray-800 dark:text-gray-200"><?php echo htmlspecialchars($mat->material_name); ?> <span class="text-gray-400 ml-2 font-mono">x<?php echo htmlspecialchars($mat->quantity); ?></span></span>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif; ?>

    <?php if ($data['jobcard']->status === 'Signed Off'): ?>
        <!-- Final Signatures -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 p-6 text-center">
                <h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">Client Signature</h3>
                <img src="<?php echo $data['jobcard']->client_signature; ?>" class="h-32 mx-auto border-b border-gray-300 dark:border-gray-600 mb-2">
                <p class="text-sm font-bold text-gray-900 dark:text-white"><?php echo htmlspecialchars($data['jobcard']->client_sign_name ?? $data['jobcard']->client_name); ?></p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 p-6 text-center">
                <h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">Technician Signature</h3>
                <img src="<?php echo $data['jobcard']->tech_signature; ?>" class="h-32 mx-auto border-b border-gray-300 dark:border-gray-600 mb-2">
                <p class="text-sm font-bold text-gray-900 dark:text-white"><?php echo htmlspecialchars($data['jobcard']->tech_sign_name ?? $data['jobcard']->tech_name); ?></p>
            </div>
        </div>

        <!-- DOWNLOAD PDF BUTTON -->
        <div class="mt-8 flex justify-end">
            <a href="<?php echo URLROOT; ?>/partnerDashboard/downloadPdf/<?php echo $data['jobcard']->id; ?>" target="_blank" class="bg-primary hover:opacity-90 text-white font-bold py-3.5 px-8 rounded-lg shadow-sm transition-all flex items-center focus:ring-4 focus:ring-primary/50">
                <svg class="w-5 h-5 mr-2" 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>
                Download Finalized PDF
            </a>
        </div>
    <?php endif; ?>
</div>

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