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

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

<div>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px;">
            <div style="display: flex; align-items: center; gap: 20px;">
                <h1>Employee Directory</h1>
            </div>
            <div style="display: flex; gap: 15px;">
                <button onclick="document.getElementById('importModal').style.display='block'" class="btn" style="background: var(--bg-admin-card); color: var(--text-admin-main); border: 1px solid var(--border-admin); box-shadow: 0 4px 10px rgba(0,0,0,0.03);"><i class="bi bi-file-earmark-arrow-up"></i> Import Employees</button>
                <a href="<?= base_url('admin/employee_add') ?>" class="btn btn-primary"><i class="bi bi-person-plus"></i> Register Employee</a>
            </div>
        </div>

    <!-- Modal for Import -->
    <div id="importModal" class="modal" style="display:none; position: fixed; z-index: 10001; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(8px);">
        <div style="background-color: var(--bg-admin-card); margin: 10% auto; padding: 40px; border-radius: 24px; width: 450px; color: var(--text-admin-main); box-shadow: 0 25px 50px rgba(0,0,0,0.2); border: 1px solid var(--border-admin);">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
                <div>
                    <h3 style="font-size: 1.8rem; margin: 0; color: var(--text-admin-main);">Import Employees</h3>
                    <p style="font-size: 0.95rem; color: var(--text-admin-muted); margin-top: 5px; line-height: 1.6;">Upload a CSV file for bulk registration.</p>
                </div>
                <button onclick="document.getElementById('importModal').style.display='none'" style="background: none; border: none; color: var(--text-admin-main); cursor: pointer; font-size: 1.5rem;"><i class="bi bi-x-lg"></i></button>
            </div>
            
            <div style="background: rgba(249, 115, 22, 0.08); border-left: 4px solid var(--accent); padding: 15px; border-radius: 10px; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: flex-start;">
                <div>
                    <p style="font-size: 0.85rem; color: var(--accent); margin: 0; font-weight: 700;">CSV Column Order:</p>
                    <p style="font-size: 0.8rem; color: var(--text-admin-main); margin: 5px 0 0; font-family: monospace;">Name, Email, Phone, Designation, Department, Salary, Joining Date</p>
                </div>
                <a href="<?= base_url('admin/employee_sample_csv') ?>" class="btn" style="padding: 5px 12px; font-size: 0.75rem; background: var(--accent); color: #fff; border-radius: 6px; text-decoration: none; font-weight: 700;"><i class="bi bi-download"></i> Sample</a>
            </div>
            
            <form action="<?= base_url('admin/employee_import') ?>" method="post" enctype="multipart/form-data">
                <div style="background: var(--bg-admin-body); padding: 30px; border-radius: 20px; border: 2px dashed var(--border-admin); margin-bottom: 30px; text-align: center;">
                    <i class="bi bi-cloud-arrow-up" style="font-size: 3.5rem; color: var(--accent); display: block; margin-bottom: 15px;"></i>
                    <input type="file" name="csv_file" accept=".csv" required style="font-size: 0.9rem; width: 100%; color: var(--text-admin-main);">
                </div>
                
                <div style="display: flex; gap: 15px; justify-content: flex-end;">
                    <button type="button" onclick="document.getElementById('importModal').style.display='none'" class="btn" style="background: transparent; color: var(--text-admin-muted); font-weight: 600;">Cancel</button>
                    <button type="submit" class="btn btn-primary" style="padding: 12px 35px; border-radius: 12px; font-weight: 700;">Start Import</button>
                </div>
            </form>
        </div>
    </div>

    <?php if (session()->getFlashdata('success')): ?>
        <div style="background: rgba(46, 204, 113, 0.1); color: #2ecc71; padding: 15px 20px; border-radius: 12px; margin-bottom: 25px; border-left: 5px solid #2ecc71; display: flex; align-items: center; gap: 12px;">
            <i class="bi bi-check-circle-fill"></i>
            <?= session()->getFlashdata('success') ?>
        </div>
    <?php endif; ?>

    <?php if (session()->getFlashdata('error')): ?>
        <div style="background: rgba(231, 76, 60, 0.1); color: #e74c3c; padding: 15px 20px; border-radius: 12px; margin-bottom: 25px; border-left: 5px solid #e74c3c; display: flex; align-items: center; gap: 12px;">
            <i class="bi bi-exclamation-triangle-fill"></i>
            <?= session()->getFlashdata('error') ?>
        </div>
    <?php endif; ?>

    <div class="admin-card">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Profile</th>
                    <th>Employee Name</th>
                    <th>Contact</th>
                    <th>Position</th>
                    <th>Joined Date</th>
                    <th style="text-align: right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($employees as $employee): ?>
                    <tr>
                        <td>
                            <?php 
                                $pic = !empty($employee['profile_pic']) ? $employee['profile_pic'] : 'assets/images/default-avatar.png';
                                $pic_url = (strpos($pic, 'http') === 0) ? $pic : base_url($pic);
                            ?>
                            <img src="<?= $pic_url ?>" alt="" style="width: 35px; height: 35px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border);">
                        </td>
                        <td style="font-weight: 600;"><?= $employee['name'] ?></td>
                        <td>
                            <div style="font-size: 0.85rem; color: #fff;"><?= $employee['email'] ?></div>
                            <div style="font-size: 0.75rem; color: var(--text-muted);"><?= $employee['phone'] ?></div>
                        </td>
                        <td>
                            <div style="font-weight: 600; font-size: 0.85rem; color: var(--primary);"><?= $employee['designation'] ?></div>
                            <div style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase;"><?= $employee['department'] ?></div>
                        </td>
                        <td style="color: var(--text-muted); font-size: 0.85rem;">
                            <?= !empty($employee['joining_date']) ? date('M d, Y', strtotime($employee['joining_date'])) : date('M d, Y', strtotime($employee['created_at'])) ?>
                        </td>
                        <td style="text-align: right;">
                            <div style="display: flex; gap: 8px; justify-content: flex-end;">
                                <a href="<?= base_url('admin/employee_edit/' . $employee['id']) ?>" class="btn-action edit" title="Edit"><i class="bi bi-pencil-square"></i></a>
                                <a href="<?= base_url('admin/employee_delete/' . $employee['id']) ?>" class="btn-action delete" title="Delete" onclick="return confirm('Are you sure you want to delete this employee?')"><i class="bi bi-trash-fill"></i></a>
                            </div>
                        </td>
                    </tr>
                <?php endforeach; ?>
                <?php if(empty($employees)): ?>
                    <tr>
                        <td colspan="5" style="padding: 40px; text-align: center; color: var(--text-muted);">No employees registered yet.</td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

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