

<?php $__env->startSection('title', 'Employees'); ?>

<?php $__env->startSection('content'); ?>
    <header class="page-header">
        <div>
            <p class="eyebrow">Team</p>
            <h1>Employee Management</h1>
            <p class="muted">Manage your workforce and employee details</p>
        </div>
    </header>

    <?php
        $statIcons = [
            'users' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="10" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>',
            'shield' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 4 5v6c0 5 3.5 9.74 8 11 4.5-1.26 8-6 8-11V5Z" /><path d="m9 12 2 2 4-4" /></svg>',
            'calendar' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4" /><path d="M8 2v4" /><path d="M3 10h18" /></svg>',
            'pause' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2" /><line x1="10" y1="8" x2="10" y2="16" /><line x1="14" y1="8" x2="14" y2="16" /></svg>',
        ];
    ?>

    <section class="card-grid four-col">
        <?php $__currentLoopData = $employeeStats; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $stat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <article class="stat-card compact stat-card--metric"
                style="--card-accent-soft: <?php echo e($stat['accent_soft'] ?? 'var(--accent-soft)'); ?>; --card-accent: <?php echo e($stat['accent'] ?? 'var(--accent)'); ?>;">
                <div class="stat-card__icon" aria-hidden="true">
                    <?php echo $statIcons[$stat['icon']] ?? ''; ?>

                </div>
                <div class="stat-card__content">
                    <p class="muted"><?php echo e($stat['label']); ?></p>
                    <h3><?php echo e($stat['value']); ?></h3>
                    <?php if(isset($stat['meta'])): ?>
                        <p class="stat-meta"><?php echo e($stat['meta']); ?></p>
                    <?php endif; ?>
                </div>
            </article>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </section>

    <section class="toolbar toolbar--filters">
        <div class="toolbar__search">
            <input type="search" placeholder="Search by name, email or department..." class="input">
        </div>
        <div class="toolbar__filters">
            <div class="select-wrapper">
                <select class="select">
                    <option>All Departments</option>
                    <?php $__currentLoopData = $departments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $department): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option><?php echo e($department); ?></option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
                <span class="select-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                        <path d="m6 9 6 6 6-6"/>
                    </svg>
                </span>
            </div>
            <div class="select-wrapper">
                <select class="select">
                    <?php $__currentLoopData = $statuses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $status): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option><?php echo e($status); ?></option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
                <span class="select-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                        <path d="m6 9 6 6 6-6"/>
                    </svg>
                </span>
            </div>
        </div>
        <div class="toolbar__actions">
            <button class="ghost-btn ghost-btn--icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                    <polyline points="7 10 12 15 17 10"/>
                    <line x1="12" y1="15" x2="12" y2="3"/>
                </svg>
                Export
            </button>
            <button class="primary-btn js-open-add-employee" style="display: inline-flex; align-items: center; gap: 6px;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                    <line x1="12" y1="5" x2="12" y2="19"/>
                    <line x1="5" y1="12" x2="19" y2="12"/>
                </svg>
                Add Employee
            </button>
        </div>
    </section>

    <section class="panel panel--table">
        <div class="panel__body">
            <table class="data-table data-table--employees">
                <thead>
                    <tr>
                        <th>Employee</th>
                        <th>Contact</th>
                        <th>Department</th>
                        <th>Designation</th>
                        <th>Status</th>
                        <th>Join Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__currentLoopData = $employees; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $employee): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td>
                                <div class="table-person">
                                    <span class="avatar small"><?php echo e($employee['initials']); ?></span>
                                    <div>
                                        <p><?php echo e($employee['name']); ?></p>
                                        <span class="muted"><?php echo e($employee['id']); ?></span>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <p><?php echo e($employee['email']); ?></p>
                                <span class="muted"><?php echo e($employee['phone']); ?></span>
                            </td>
                            <td><?php echo e($employee['department']); ?></td>
                            <td><?php echo e($employee['designation']); ?></td>
                            <td><span class="pill success"><?php echo e($employee['status']); ?></span></td>
                            <td><?php echo e($employee['joined']); ?></td>
                            <td>
                                <div class="table-actions">
                                    <button class="icon-btn icon-btn--round" aria-label="View employee" title="View">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                            <circle cx="12" cy="12" r="3"/>
                                        </svg>
                                    </button>
                                    <button class="icon-btn icon-btn--round" aria-label="Edit employee" title="Edit">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                        </svg>
                                    </button>
                                    <button class="icon-btn icon-btn--round icon-btn--danger" aria-label="Delete employee" title="Delete">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="3 6 5 6 21 6"/>
                                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                                            <line x1="10" y1="11" x2="10" y2="17"/>
                                            <line x1="14" y1="11" x2="14" y2="17"/>
                                        </svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        </div>
    </section>

    <div class="modal" id="addEmployeeModal" role="dialog" aria-modal="true" aria-labelledby="addEmployeeTitle" aria-hidden="true">
        <div class="modal__overlay" data-modal-close></div>
        <div class="modal__content">
            <div class="modal__header">
                <div>
                    <h2 id="addEmployeeTitle">Add New Employee</h2>
                </div>
                <button class="icon-btn icon-btn--ghost" aria-label="Close modal" data-modal-close>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>
            <form class="form-grid">
                <label class="field">
                    <span>Full Name *</span>
                    <input type="text" placeholder="Enter full name" class="input">
                </label>
                <label class="field">
                    <span>Email *</span>
                    <input type="email" placeholder="email@example.com" class="input">
                </label>
                <label class="field">
                    <span>Phone Number *</span>
                    <input type="text" placeholder="+44 7700 900000" class="input">
                </label>
                <label class="field">
                    <span>Department *</span>
                    <select class="select">
                        <option>Select department</option>
                        <?php $__currentLoopData = $departments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $department): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option><?php echo e($department); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </label>
                <label class="field">
                    <span>Designation *</span>
                    <input type="text" placeholder="Job title" class="input">
                </label>
                <label class="field">
                    <span>Join Date *</span>
                    <input type="date" class="input">
                </label>
                <label class="field">
                    <span>Hourly Rate (£) *</span>
                    <input type="number" step="0.01" placeholder="14.50" class="input">
                </label>
                <label class="field">
                    <span>Status *</span>
                    <select class="select">
                        <?php $__currentLoopData = $statuses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $status): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option><?php echo e($status); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </label>
                <div class="form-actions">
                    <button type="button" class="ghost-btn" data-modal-close>Cancel</button>
                    <button type="submit" class="primary-btn">Add Employee</button>
                </div>
            </form>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const modal = document.getElementById('addEmployeeModal');
            const openButtons = document.querySelectorAll('.js-open-add-employee');
            const closeElements = modal.querySelectorAll('[data-modal-close]');

            const openModal = () => {
                modal.setAttribute('aria-hidden', 'false');
                modal.classList.add('is-visible');
                document.body.classList.add('modal-open');
            };

            const closeModal = () => {
                modal.setAttribute('aria-hidden', 'true');
                modal.classList.remove('is-visible');
                document.body.classList.remove('modal-open');
            };

            openButtons.forEach((btn) => btn.addEventListener('click', openModal));
            closeElements.forEach((el) => el.addEventListener('click', closeModal));
            modal.addEventListener('click', (event) => {
                if (event.target === modal) {
                    closeModal();
                }
            });
        });
    </script>
<?php $__env->stopPush(); ?>



<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\HP15s-fd\Desktop\Figma hr\hr-admin\resources\views/admin/employees.blade.php ENDPATH**/ ?>