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

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

<div style="max-width: 800px; margin: 0 auto;">
    <?php if (session()->getFlashdata('success')): ?>
        <div style="background: rgba(46, 204, 113, 0.1); color: #2ecc71; padding: 15px; border-radius: 12px; border: 1px solid rgba(46, 204, 113, 0.2); margin-bottom: 25px; display: flex; align-items: center; gap: 10px;">
            <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; border-radius: 12px; border: 1px solid rgba(231, 76, 60, 0.2); margin-bottom: 25px; display: flex; align-items: center; gap: 10px;">
            <i class="bi bi-exclamation-triangle-fill"></i>
            <?= session()->getFlashdata('error') ?>
        </div>
    <?php endif; ?>

    <div class="card">
        <form action="<?= base_url('employee/profile') ?>" method="POST" enctype="multipart/form-data">
            <style>
                .profile-grid {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 20px;
                }
                @media (max-width: 576px) {
                    .profile-grid {
                        grid-template-columns: 1fr;
                    }
                }
            </style>
            <div style="display: flex; gap: 40px; flex-wrap: wrap; justify-content: center;">
                <div style="flex: 0 0 200px; text-align: center;">
                    <div style="position: relative; width: 180px; height: 180px; margin: 0 auto 20px;">
                        <?php 
                            $profile_pic = $user['profile_pic'] ?? '';
                            if ($profile_pic) {
                                if (strpos($profile_pic, 'http') === false) {
                                    $profile_pic = base_url($profile_pic);
                                }
                            } else {
                                $profile_pic = base_url('assets/images/placeholder-user.jpg');
                            }
                        ?>
                        <img id="preview" src="<?= $profile_pic ?>" style="width: 100%; height: 100%; border-radius: 20px; object-fit: cover; box-shadow: 0 10px 25px rgba(0,0,0,0.1);">
                        <label for="profile_pic" style="position: absolute; bottom: -10px; right: -10px; width: 45px; height: 45px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 3px solid #fff; box-shadow: 0 5px 15px rgba(229, 45, 39, 0.3);">
                            <i class="bi bi-camera-fill"></i>
                        </label>
                        <input type="file" id="profile_pic" name="profile_pic" style="display: none;" onchange="previewImage(this)">
                    </div>
                    <div style="font-size: 0.85rem; color: var(--text-muted);">Allowed: JPG, PNG (Max 2MB)</div>
                </div>

                <div style="flex: 1; min-width: 300px;">
                    <div class="profile-grid">
                        <div style="grid-column: 1 / -1; margin-bottom: 10px;">
                            <label style="display: block; margin-bottom: 8px; font-weight: 700; font-size: 0.9rem; color: #1e1e2d;">Full Name</label>
                            <input type="text" name="name" value="<?= $user['name'] ?>" class="form-control" style="width: 100%; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--border);" required>
                        </div>

                        <div>
                            <label style="display: block; margin-bottom: 8px; font-weight: 700; font-size: 0.9rem; color: #1e1e2d;">Email Address</label>
                            <input type="email" value="<?= $user['email'] ?>" class="form-control" style="width: 100%; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--border); background: #f8f9fa;" readonly title="Email cannot be changed by employee">
                        </div>

                        <div>
                            <label style="display: block; margin-bottom: 8px; font-weight: 700; font-size: 0.9rem; color: #1e1e2d;">Phone Number</label>
                            <input type="text" name="phone" value="<?= $user['phone'] ?>" class="form-control" style="width: 100%; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--border);">
                        </div>

                        <div style="grid-column: 1 / -1;">
                            <label style="display: block; margin-bottom: 8px; font-weight: 700; font-size: 0.9rem; color: #1e1e2d;">Physical Address</label>
                            <textarea name="address" class="form-control" style="width: 100%; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--border); min-height: 80px;"><?= $user['address'] ?></textarea>
                        </div>

                        <div style="grid-column: 1 / -1; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--border);">
                            <h4 style="margin: 0 0 15px 0; font-size: 1rem; font-weight: 800; color: var(--primary);">Change Password</h4>
                            <p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 15px;">Leave blank if you don't want to change your password.</p>
                            <div class="profile-grid">
                                <div>
                                    <label style="display: block; margin-bottom: 8px; font-weight: 700; font-size: 0.9rem; color: #1e1e2d;">New Password</label>
                                    <input type="password" name="password" class="form-control" style="width: 100%; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--border);">
                                </div>
                                <div>
                                    <label style="display: block; margin-bottom: 8px; font-weight: 700; font-size: 0.9rem; color: #1e1e2d;">Confirm Password</label>
                                    <input type="password" name="confirm_password" class="form-control" style="width: 100%; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--border);">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="margin-top: 30px; display: flex; gap: 15px;">
                        <button type="submit" class="btn btn-primary" style="padding: 12px 30px; font-weight: 700; border-radius: 10px;">Save Profile Changes</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    function previewImage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview').src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

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