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

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

<div>
        <div style="max-width: 600px; margin: 0 auto;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px;">
                <h1><?= isset($employee) ? 'Edit Employee Details' : 'Register New Employee' ?></h1>
                <a href="<?= base_url('admin/employees') ?>" class="btn" style="border: 1px solid var(--border); color: var(--text-admin-muted);">Cancel</a>
            </div>

            <div class="admin-card" style="padding: 40px;">
                <form action="<?= base_url('admin/employee_save') ?>" method="post" enctype="multipart/form-data">
                    <?php if(isset($employee)): ?>
                        <input type="hidden" name="id" value="<?= $employee['id'] ?>">
                    <?php endif; ?>

                    <h4 style="color: var(--primary); margin-bottom: 25px; font-weight: 700;">Basic Information</h4>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                        <div>
                            <label style="display: block; margin-bottom: 8px; color: var(--text-admin-muted); font-size: 0.85rem; font-weight: 600;">Full Name</label>
                            <input type="text" name="name" value="<?= $employee['name'] ?? '' ?>" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px;" placeholder="John Doe" required>
                        </div>
                        <div>
                            <label style="display: block; margin-bottom: 8px; color: var(--text-admin-muted); font-size: 0.85rem; font-weight: 600;">Profile Picture</label>
                            <input type="file" name="profile_pic" style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px;">
                        </div>
                    </div>
                    
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                        <div>
                            <label style="display: block; margin-bottom: 8px; color: var(--text-admin-muted); font-size: 0.85rem; font-weight: 600;">Email Address</label>
                            <input type="email" name="email" value="<?= $employee['email'] ?? '' ?>" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px;" placeholder="john@saanviinfratech.com" required>
                        </div>
                        <div>
                            <label style="display: block; margin-bottom: 8px; color: var(--text-admin-muted); font-size: 0.85rem; font-weight: 600;">Phone Number</label>
                            <input type="text" name="phone" value="<?= $employee['phone'] ?? '' ?>" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px;" placeholder="+1 234 567 890">
                        </div>
                    </div>

                    <h4 style="color: var(--primary); margin-bottom: 25px; margin-top: 40px; font-weight: 700;">Professional Details</h4>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                        <div>
                            <label style="display: block; margin-bottom: 8px; color: var(--text-admin-muted); font-size: 0.85rem; font-weight: 600;">Designation</label>
                            <input type="text" name="designation" value="<?= $employee['designation'] ?? '' ?>" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px;" placeholder="Structural Engineer">
                        </div>
                        <div>
                            <label style="display: block; margin-bottom: 8px; color: var(--text-admin-muted); font-size: 0.85rem; font-weight: 600;">Department</label>
                            <select name="department" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff;">
                                <?php $dept = $employee['department'] ?? ''; ?>
                                <option value="Engineering" <?= $dept == 'Engineering' ? 'selected' : '' ?>>Engineering</option>
                                <option value="Architecture" <?= $dept == 'Architecture' ? 'selected' : '' ?>>Architecture</option>
                                <option value="Operations" <?= $dept == 'Operations' ? 'selected' : '' ?>>Operations</option>
                                <option value="Sales" <?= $dept == 'Sales' ? 'selected' : '' ?>>Sales</option>
                            </select>
                        </div>
                    </div>

                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                        <div>
                            <label style="display: block; margin-bottom: 8px; color: var(--text-admin-muted); font-size: 0.85rem; font-weight: 600;">Joining Date</label>
                            <input type="date" name="joining_date" value="<?= $employee['joining_date'] ?? '' ?>" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px;">
                        </div>
                        <div>
                            <label style="display: block; margin-bottom: 8px; color: var(--text-admin-muted); font-size: 0.85rem; font-weight: 600;">Salary (Monthly)</label>
                            <input type="number" name="salary" value="<?= $employee['salary'] ?? '' ?>" step="0.01" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px;" placeholder="5000.00">
                        </div>
                    </div>

                    <div style="margin-bottom: 30px;">
                        <label style="display: block; margin-bottom: 8px; color: var(--text-admin-muted); font-size: 0.85rem; font-weight: 600;">Residential Address</label>
                        <textarea name="address" rows="3" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px;" placeholder="Street, City, State..."><?= $employee['address'] ?? '' ?></textarea>
                    </div>

                    <div style="margin-bottom: 30px; border-top: 1px solid var(--border); padding-top: 30px;">
                        <label style="display: block; margin-bottom: 8px; color: var(--text-admin-muted); font-size: 0.85rem; font-weight: 600;">
                            <?= isset($employee) ? 'Update Password (Leave blank to keep current)' : 'Initial Password' ?>
                        </label>
                        <input type="password" name="password" style="width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px;" placeholder="••••••••" <?= isset($employee) ? '' : 'required' ?>>
                    </div>

                    <button type="submit" class="btn btn-primary" style="width: 100%; padding: 15px; border-radius: 10px; font-weight: 700;">
                        <?= isset($employee) ? 'Save Changes' : 'Finalize Registration' ?>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

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