<?= $this->extend('layouts/admin') ?>

<?= $this->section('content') ?>

<div class="animate-up">
    <div style="margin-bottom: 30px;">
        <a href="<?= base_url('admin/projects') ?>" style="color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 5px; margin-bottom: 10px;">
            <i class="bi bi-arrow-left"></i> Back to Projects
        </a>
        <h1>Assign Team: <span style="color: var(--primary);"><?= $project['title'] ?></span></h1>
        <p style="color: var(--text-muted);">Select the employees who will be working on this project.</p>
    </div>

    <form action="<?= base_url('admin/project_assign_save/' . $project['id']) ?>" method="post">
        <div class="admin-card">
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px;">
                <?php if (empty($employees)): ?>
                    <div style="grid-column: 1 / -1; text-align: center; padding: 50px; background: var(--bg-admin-main); border: 2px dashed var(--border-admin); border-radius: 15px;">
                        <i class="bi bi-person-x" style="font-size: 3rem; color: var(--text-admin-muted); margin-bottom: 15px; display: block;"></i>
                        <h3 style="color: var(--text-admin-main);">No Employees Found</h3>
                        <p style="color: var(--text-admin-muted); margin-bottom: 20px;">You need to register employees before you can assign them to projects.</p>
                        <a href="<?= base_url('admin/employee_add') ?>" class="btn btn-primary">
                            <i class="bi bi-person-plus"></i> Register New Employee
                        </a>
                    </div>
                <?php else: ?>
                    <?php foreach ($employees as $emp): ?>
                        <label style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #fff; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.2s;" class="employee-card">
                            <input type="checkbox" name="employee_ids[]" value="<?= $emp['id'] ?>" <?= in_array($emp['id'], $assigned_ids) ? 'checked' : '' ?> 
                                   style="width: 18px; height: 18px; accent-color: #ff4757; cursor: pointer;">
                            
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <div style="position: relative;">
                                    <?php 
                                        $pic = !empty($emp['profile_pic']) ? $emp['profile_pic'] : 'assets/images/placeholder-user.jpg';
                                        $pic_url = (strpos($pic, 'http') === 0) ? $pic : base_url($pic);
                                    ?>
                                    <img src="<?= $pic_url ?>" 
                                         alt="<?= $emp['name'] ?>" 
                                         style="width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid #f1f5f9;">
                                </div>
                                <div>
                                    <div style="font-weight: 700; color: #1e293b; font-size: 0.95rem; line-height: 1.2;"><?= $emp['name'] ?></div>
                                    <div style="font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-top: 2px;"><?= $emp['role'] ?? 'Employee' ?></div>
                                </div>
                            </div>
                        </label>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>

            <div style="display: flex; justify-content: flex-end; gap: 15px;">
                <a href="<?= base_url('admin/projects') ?>" class="btn" style="background: rgba(0,0,0,0.05); color: var(--text-admin-main);">Cancel</a>
                <button type="submit" class="btn btn-primary" style="padding: 12px 40px; border-radius: 8px;">
                    <i class="bi bi-check2-circle"></i> Update Assignments
                </button>
            </div>
        </div>
    </form>
</div>

<style>
    .employee-card:hover {
        border-color: var(--primary);
        background: rgba(229, 45, 39, 0.05);
        transform: translateY(-2px);
    }
    .employee-card input:checked + div + div {
        /* Optional: style for checked state */
    }
</style>

<?= $this->endSection() ?>
