<?= $this->extend('layout/admin') ?>
<?= $this->section('content') ?>

<style>
    .avatar-preview {
        width: 130px;
        height: 130px;
        border-radius: 10px;
        border: 3px solid #e3e3e3;
        object-fit: cover;
    }

    .section-title {
        font-weight: 700;
        color: #0d6efd;
    }

    .card-info-box {
        background: #f8faff;
        border: 1px dashed #b9c7ff;
        padding: 15px;
        border-radius: 10px;
    }
</style>

<div class="page-header mb-3">
    <h4 class="fw-bold text-primary">
        <i class="fas fa-users me-2"></i> Master Karyawan
    </h4>
    <small class="text-muted">
        Form registrasi karyawan / peserta program P4GN
    </small>
</div>

<div class="card shadow-sm border-0">
    <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
        <div>
            <h5 class="mb-0 fw-bold">Tambah Karyawan</h5>
            <span class="text-muted">Lengkapi data berikut dengan benar</span>
        </div>

        <a href="<?= site_url('master/employees') ?>" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i> Kembali
        </a>
    </div>

    <div class="card-body">

        <?php if (session()->getFlashdata('errors')): ?>
            <div class="alert alert-danger">
                <b>Terjadi Kesalahan:</b><br>
                <?= implode('<br>', session()->getFlashdata('errors')) ?>
            </div>
        <?php endif; ?>

        <form action="<?= site_url('master/employees/store') ?>" method="post" enctype="multipart/form-data">

            <div class="row">

                <!-- LEFT -->
                <div class="col-md-8">

                    <div class="alert alert-primary py-2 px-3 mb-4">
                        <i class="fas fa-id-card me-2"></i>
                        <b>Identitas Karyawan</b>
                    </div>

                    <div class="row">

                        <div class="col-md-6 mb-3">
                            <label class="fw-semibold">NIK / Employee No <span class="text-danger">*</span></label>
                            <input type="text" name="employee_no" class="form-control form-control-lg"
                                placeholder="Masukkan NIK / Nomor Karyawan" required value="<?= old('employee_no') ?>">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="fw-semibold">Nama Karyawan <span class="text-danger">*</span></label>
                            <input type="text" name="employee_name" class="form-control form-control-lg"
                                placeholder="Masukkan nama lengkap" required value="<?= old('employee_name') ?>">
                        </div>

                    </div>

                    <div class="alert alert-secondary py-2 px-3 mb-4">
                        <i class="fas fa-briefcase me-2"></i>
                        <b>Informasi Pekerjaan</b>
                    </div>

                    <div class="row">

                        <div class="col-md-4 mb-3">
                            <label class="fw-semibold">Jabatan *</label>
                            <select name="position" class="form-select select2" required>
                                <option value="">-- Pilih Jabatan --</option>
                                <option>Manager</option>
                                <option>Supervisor</option>
                                <option>Foreman</option>
                                <option>Engineer</option>
                                <option>Operator</option>
                                <option>Admin</option>
                                <option>Inspector</option>
                            </select>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="fw-semibold">Departemen *</label>
                            <select name="department" class="form-select select2" required>
                                <option value="">-- Pilih Departemen --</option>
                                <option>HSE</option>
                                <option>Operation</option>
                                <option>Maintenance</option>
                                <option>HRGA</option>
                                <option>Finance</option>
                            </select>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="fw-semibold">Perusahaan / Unit</label>
                            <select name="company" class="form-select select2">
                                <option value="">-- Pilih Perusahaan --</option>
                                <option>PT Nusa Raya Energi Utama</option>
                                <option>Vendor / Kontraktor</option>
                            </select>
                        </div>

                    </div>

                </div>

                <!-- RIGHT -->
                <div class="col-md-4">

                    <div class="card-info-box mb-3">
                        <b class="text-primary">
                            <i class="fas fa-info-circle me-1"></i>
                            Informasi
                        </b>
                        <div class="text-muted">
                            Foto digunakan untuk data sidak, badge & evidence sistem.
                        </div>
                    </div>

                    <center>
                        <img src="https://ui-avatars.com/api/?name=USER&background=0D6EFD&color=fff&size=150"
                            id="avatarPreview" class="avatar-preview mb-2">

                        <div class="mb-2">
                            <label class="fw-semibold">Photo Karyawan</label>
                            <input type="file" name="photo" class="form-control" accept="image/*"
                                onchange="previewAvatar(event)">
                        </div>
                    </center>

                </div>

            </div>

            <div class="border-top pt-3 text-end mt-4">
                <button type="reset" class="btn btn-light">
                    <i class="fas fa-undo me-1"></i> Reset
                </button>

                <button class="btn btn-success">
                    <i class="fas fa-save me-1"></i> Simpan Data
                </button>
            </div>

        </form>

    </div>
</div>

<!-- SELECT2 + AVATAR JS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>

<script>
    $('.select2').select2({
        theme: "classic",
        width: '100%'
    });

    function previewAvatar(event) {
        let reader = new FileReader();
        reader.onload = function () {
            document.getElementById('avatarPreview').src = reader.result;
        }
        reader.readAsDataURL(event.target.files[0]);
    }
</script>

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