<div class="p-8 max-w-5xl mx-auto space-y-6">

    <!-- Back button & Header -->
    <div class="flex items-center justify-between">
        <a href="/contacts" class="text-xs text-slate-400 hover:text-white flex items-center space-x-1">
            <i class="fa-solid fa-arrow-left"></i>
            <span>Back to Contacts</span>
        </a>
        <div class="flex items-center space-x-2">
            <a href="/chat?conv_id=<?= $contact['id'] ?>" class="bg-emerald-500 hover:bg-emerald-600 text-slate-950 text-xs font-bold px-4 py-2 rounded-xl transition flex items-center space-x-1.5 shadow-lg shadow-emerald-500/20">
                <i class="fa-brands fa-whatsapp text-sm"></i>
                <span>Open Live Chat</span>
            </a>
            <form method="POST" action="/contacts/<?= $contact['id'] ?>/delete" onsubmit="return confirm('Are you sure you want to delete this contact?');">
                <button type="submit" class="bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/30 text-xs p-2 rounded-xl transition">
                    <i class="fa-solid fa-trash-can"></i>
                </button>
            </form>
        </div>
    </div>

    <!-- Contact Info Card -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        
        <!-- Profile Column -->
        <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-6">
            <div class="text-center">
                <div class="w-20 h-20 rounded-3xl bg-gradient-to-tr from-emerald-600 to-teal-500 mx-auto flex items-center justify-center font-bold text-white text-2xl shadow-xl shadow-emerald-500/20 mb-3">
                    <?= strtoupper(substr($contact['name'], 0, 2)) ?>
                </div>
                <h2 class="text-lg font-bold text-white"><?= htmlspecialchars($contact['name']) ?></h2>
                <p class="text-xs text-slate-400 font-mono mt-0.5"><?= htmlspecialchars($contact['phone_number']) ?></p>
            </div>

            <div class="space-y-3 text-xs border-t border-slate-800 pt-4">
                <div>
                    <span class="text-slate-500 block">Email Address</span>
                    <span class="text-slate-200"><?= htmlspecialchars($contact['email'] ?? 'Not set') ?></span>
                </div>
                <div>
                    <span class="text-slate-500 block">Company / Organization</span>
                    <span class="text-slate-200"><?= htmlspecialchars($contact['company'] ?? 'Not set') ?></span>
                </div>
                <div>
                    <span class="text-slate-500 block">Assigned Team Agent</span>
                    <span class="text-slate-200">👤 <?= htmlspecialchars($contact['assigned_user_name'] ?? 'Unassigned') ?></span>
                </div>
                <div>
                    <span class="text-slate-500 block">Lifecycle Stage</span>
                    <span class="inline-block mt-1 text-[10px] font-semibold px-2 py-0.5 rounded text-white" style="background-color: <?= $contact['stage_color'] ?? '#3b82f6' ?>">
                        <?= htmlspecialchars($contact['stage_name'] ?? 'Lead') ?>
                    </span>
                </div>
            </div>

            <!-- Tags -->
            <div class="border-t border-slate-800 pt-4">
                <span class="text-slate-500 text-xs block mb-2">Assigned Tags</span>
                <div class="flex flex-wrap gap-1.5">
                    <?php if (empty($contact['tags'])): ?>
                        <span class="text-xs text-slate-600">No tags</span>
                    <?php else: ?>
                        <?php foreach ($contact['tags'] as $t): ?>
                            <span class="text-[10px] px-2 py-0.5 rounded-full font-semibold" style="background-color: <?= $t['color'] ?>25; color: <?= $t['color'] ?>; border: 1px solid <?= $t['color'] ?>40;">
                                <?= htmlspecialchars($t['name']) ?>
                            </span>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Edit Form & Deals Column -->
        <div class="md:col-span-2 space-y-6">
            
            <!-- Update Details Form -->
            <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-4">
                <h3 class="font-bold text-white text-sm">Edit Contact Information</h3>
                <form method="POST" action="/contacts/<?= $contact['id'] ?>/update" class="space-y-4">
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">Full Name</label>
                            <input type="text" name="name" value="<?= htmlspecialchars($contact['name']) ?>" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                        </div>
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">WhatsApp Phone</label>
                            <input type="text" name="phone_number" value="<?= htmlspecialchars($contact['phone_number']) ?>" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">Email</label>
                            <input type="email" name="email" value="<?= htmlspecialchars($contact['email'] ?? '') ?>" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                        </div>
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">Company</label>
                            <input type="text" name="company" value="<?= htmlspecialchars($contact['company'] ?? '') ?>" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">Pipeline Stage</label>
                            <select name="stage_id" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                                <?php foreach ($stages as $st): ?>
                                    <option value="<?= $st['id'] ?>" <?= ($contact['stage_id'] == $st['id']) ? 'selected' : '' ?>><?= htmlspecialchars($st['name']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">Assigned Agent</label>
                            <select name="assigned_to" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                                <option value="">Unassigned</option>
                                <?php foreach ($agents as $ag): ?>
                                    <option value="<?= $ag['id'] ?>" <?= ($contact['assigned_to'] == $ag['id']) ? 'selected' : '' ?>><?= htmlspecialchars($ag['name']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs text-slate-400 mb-1">Notes</label>
                        <textarea name="notes" rows="3" class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-white focus:outline-none focus:border-emerald-500 resize-none"><?= htmlspecialchars($contact['notes'] ?? '') ?></textarea>
                    </div>
                    <button type="submit" class="bg-emerald-500 hover:bg-emerald-600 text-slate-950 text-xs font-bold py-2.5 px-5 rounded-xl transition">
                        Update Contact Profile
                    </button>
                </form>
            </div>

            <!-- Deals Linked with Contact -->
            <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-4">
                <div class="flex items-center justify-between">
                    <h3 class="font-bold text-white text-sm">Associated Sales Deals</h3>
                    <a href="/pipeline" class="text-xs text-emerald-400 hover:underline">View on Pipeline Board</a>
                </div>
                <div class="space-y-3">
                    <?php if (empty($deals)): ?>
                        <p class="text-xs text-slate-500">No active deals associated with this lead.</p>
                    <?php else: ?>
                        <?php foreach ($deals as $deal): ?>
                            <div class="p-3.5 bg-slate-950 border border-slate-800 rounded-2xl flex items-center justify-between">
                                <div>
                                    <h4 class="font-bold text-white text-xs"><?= htmlspecialchars($deal['title']) ?></h4>
                                    <span class="text-[10px] text-slate-500">Stage: <?= htmlspecialchars($deal['stage_name']) ?></span>
                                </div>
                                <div class="text-right">
                                    <div class="text-xs font-bold text-emerald-400">$<?= number_format($deal['value'], 2) ?></div>
                                    <span class="text-[10px] text-slate-500"><?= $deal['closing_date'] ?: 'No date' ?></span>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>

        </div>

    </div>

</div>
