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

<style>
.avatar-preview{
    width:140px;height:140px;border-radius:12px;
    border:3px solid #d9d9d9;object-fit:cover
}
.card-info-box{
    background:#f8fbff;border:1px dashed #b8c6ff;
    padding:15px;border-radius:12px
}
.section-title{
    font-weight:700;
}
</style>

<div class="card shadow">
<div class="card-header bg-warning text-white">
    <b>Edit Karyawan</b>
</div>

<div class="card-body">

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

<form action="<?= site_url('master/employees/update/'.$employee['id']) ?>" 
      method="post" enctype="multipart/form-data">

<div class="row">

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

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

    <div class="row">
        <div class="col-md-6 mb-3">
            <label>NIK / Employee No *</label>
            <input type="text" name="employee_no" 
                   class="form-control form-control-lg"
                   value="<?= $employee['employee_no'] ?>" required>
        </div>

        <div class="col-md-6 mb-3">
            <label>Nama *</label>
            <input type="text" name="employee_name" 
                   class="form-control form-control-lg"
                   value="<?= $employee['employee_name'] ?>" required>
        </div>
    </div>

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

    <div class="row">

        <div class="col-md-4 mb-3">
            <label>Jabatan *</label>
            <select name="position" class="form-select" required>
                <option value="">-- Pilih Jabatan --</option>
                <?php foreach($positions as $p): ?>
                    <option value="<?= $p['position_name'] ?>"
                        <?= $employee['position']==$p['position_name']?'selected':'' ?>>
                        <?= $p['position_name'] ?>
                    </option>
                <?php endforeach ?>
            </select>
        </div>

        <div class="col-md-4 mb-3">
            <label>Departemen *</label>
            <select name="department" class="form-select" required>
                <option value="">-- Pilih Departemen --</option>
                <?php foreach($departments as $d): ?>
                    <option value="<?= $d['department_name'] ?>"
                        <?= $employee['department']==$d['department_name']?'selected':'' ?>>
                        <?= $d['department_name'] ?>
                    </option>
                <?php endforeach ?>
            </select>
        </div>

        <div class="col-md-4 mb-3">
            <label>Perusahaan</label>
            <input type="text" name="company"
                   class="form-control"
                   value="<?= $employee['company'] ?>">
        </div>

    </div>

    <!-- STATUS -->
    <div class="alert alert-info py-2 px-3 mb-3">
        <b><i class="fas fa-cog me-1"></i> Status & Pengaturan</b>
    </div>

    <div class="row">
        <div class="col-md-6 mb-3">
            <label>Operator Type</label>
            <select name="operator_type" class="form-select">
                <option value="">-- Pilih --</option>
                <option value="Operator" 
                    <?= $employee['operator_type']=='Operator'?'selected':'' ?>>
                    Operator
                </option>
                <option value="Non Operator" 
                    <?= $employee['operator_type']=='Non Operator'?'selected':'' ?>>
                    Non Operator
                </option>
            </select>
        </div>

        <div class="col-md-6 mb-3">
            <label>Status</label>
            <select name="status" class="form-select">
                <option value="1" <?= $employee['status']==1?'selected':'' ?>>
                    Aktif
                </option>
                <option value="0" <?= $employee['status']==0?'selected':'' ?>>
                    Non Aktif
                </option>
            </select>
        </div>
    </div>

    <div class="mb-3">
        <label>Dibuat Pada</label>
        <input type="text" class="form-control" 
               value="<?= $employee['created_at'] ?>" readonly>
    </div>

</div>

<!-- ================= RIGHT SIDE ================= -->
<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 identitas, sidak & laporan sistem.
        </div>
    </div>

    <center>
        <img id="avatarPreview" class="avatar-preview mb-2"
             src="<?= !empty($employee['photo'])
                 ? base_url('uploads/employees/'.$employee['photo'])
                 : 'https://ui-avatars.com/api/?name='.urlencode($employee['employee_name']).'&background=0D6EFD&color=fff&size=150' ?>">
        <div class="mb-3">
            <label>Foto 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">
    <a href="<?= site_url('master/employees') ?>" 
       class="btn btn-secondary">Batal</a>
    <button class="btn btn-success">
        <i class="fas fa-save me-1"></i> Update
    </button>
</div>

</form>

</div>
</div>

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

<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>
$('select').select2({
    width:'100%',
    theme:'bootstrap-5',
    placeholder:"Pilih data"
});
</script>

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