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

<div class="max-w-5xl mx-auto mb-10">
    <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 flex justify-between items-center">
            <h1 class="text-sm font-bold text-gray-900 dark:text-white flex items-center uppercase tracking-wider">
                <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 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                Issue New Jobcard
            </h1>
            <a href="<?php echo URLROOT; ?>/admin/jobcards" class="text-xs text-primary hover:underline font-bold">Cancel</a>
        </div>
        
        <div class="p-6 md:p-8">
            <form action="<?php echo URLROOT; ?>/admin/createJobcard" method="POST" class="space-y-6">
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 border-b border-gray-200 dark:border-gray-700/50 pb-6 mb-6">
                    <div>
                        <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Select Client *</label>
                        <select name="client_id" id="client_id_select" class="w-full px-4 py-2.5 rounded-lg border <?php echo (!empty($data['client_err'])) ? 'border-red-500' : 'border-gray-300 dark:border-gray-700'; ?> bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none transition-colors">
                            <option value="" data-partner-id="" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">-- Choose Client --</option>
                            <?php foreach($data['users'] as $u): if($u->role === 'client'): ?>
                                <?php 
                                    // Build display name including company if available
                                    $displayName = htmlspecialchars($u->name);
                                    if (!empty($u->company_name)) {
                                        $displayName .= ' - ' . htmlspecialchars($u->company_name);
                                    }
                                    $displayName .= ' (' . htmlspecialchars($u->email) . ')';
                                ?>
                                <option value="<?php echo $u->id; ?>" data-partner-id="<?php echo htmlspecialchars((string)$u->partner_id); ?>" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
                                    <?php echo $displayName; ?>
                                </option>
                            <?php endif; endforeach; ?>
                        </select>
                        <span class="text-xs text-red-500 mt-1 block"><?php echo $data['client_err']; ?></span>
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold text-emerald-600 dark:text-emerald-500 uppercase tracking-wider mb-2">Partner / Agency (Optional)</label>
                        <select name="partner_id" id="partner_id_select" class="w-full px-4 py-2.5 rounded-lg border border-emerald-500/30 bg-emerald-50 dark:bg-emerald-900/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-emerald-500 outline-none transition-colors">
                            <option value="" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">-- Internal Job (No Partner) --</option>
                            <?php foreach($data['partners'] as $p): ?>
                                <option value="<?php echo $p->id; ?>" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white"><?php echo htmlspecialchars($p->name); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold text-blue-600 dark:text-blue-500 uppercase tracking-wider mb-2">Assign Technician (Optional)</label>
                        <select name="technician_id" class="w-full px-4 py-2.5 rounded-lg border border-blue-500/30 bg-blue-50 dark:bg-blue-900/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 outline-none transition-colors">
                            <option value="" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">-- Assign Later --</option>
                            <?php foreach($data['staff'] as $staff): ?>
                                <option value="<?php echo $staff->id; ?>" class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white"><?php echo htmlspecialchars($staff->name); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Job Instructions *</label>
                    <textarea name="instructions" rows="6" placeholder="Provide detailed instructions for the technician..." class="w-full px-4 py-3 rounded-lg border <?php echo (!empty($data['instructions_err'])) ? 'border-red-500' : 'border-gray-300 dark:border-gray-700'; ?> bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary outline-none resize-y transition-colors"></textarea>
                    <span class="text-xs text-red-500 mt-1 block"><?php echo $data['instructions_err']; ?></span>
                </div>

                <div class="flex justify-end pt-4">
                    <button type="submit" class="w-full md:w-auto bg-primary hover:opacity-90 text-white font-bold py-3 px-10 rounded-lg shadow-sm transition-all focus:ring-4 focus:ring-primary/50">
                        Generate Jobcard
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const clientSelect = document.getElementById('client_id_select');
    const partnerSelect = document.getElementById('partner_id_select');

    if (clientSelect && partnerSelect) {
        clientSelect.addEventListener('change', function() {
            // Get the selected option element
            const selectedOption = this.options[this.selectedIndex];
            
            // Get the data-partner-id attribute from the option
            const partnerId = selectedOption.getAttribute('data-partner-id');

            // If a partner ID exists, update the partner dropdown to match.
            // If it doesn't, revert to the "No Partner" default.
            if (partnerId) {
                partnerSelect.value = partnerId;
            } else {
                partnerSelect.value = "";
            }
        });
    }
});
</script>

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