<div class="container mt-4">

    <div class="card border-0 shadow-lg rounded-4">

        <div class="card-body p-4">

            <div class="d-flex justify-content-between align-items-center mb-3">

                <div>
                    <h4 class="mb-1 fw-bold">
                        Data Karyawan
                    </h4>

                    <small class="text-muted">
                        Management Data Karyawan
                    </small>
                </div>

                <button class="btn btn-warning rounded-pill px-4 btn-add">
                    <i class="fa fa-plus me-2"></i>
                    Tambah Karyawan
                </button>

            </div>

            <div class="table-responsive">

                <table id="tableEmployees"
                       class="table modern-table align-middle w-100">

                    <thead class="table-light">

                        <tr>
                            <th>No</th>
                            <th>Foto</th>
                            <th>Kode</th>
                            <th>Fingerprint</th>
                            <th>Nama</th>
                            <th>Department</th>
                            <th>Position</th>
                            <th>Branch</th>
                            <th>Phone</th>
                            <th>Status</th>
                            <th>Active</th>
                            <th>Aksi</th>
                        </tr>

                    </thead>

                </table>

            </div>

        </div>

    </div>

</div>

<!-- MODAL -->
<div class="modal fade" id="modalEmployee">

    <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered">

        <div class="modal-content border-0 shadow-lg rounded-4">

            <div class="modal-header bg-warning text-white">

                <h5 class="modal-title">
                    Form Karyawan
                </h5>

                <button class="btn-close btn-close-white"
                        data-bs-dismiss="modal"></button>

            </div>

            <div class="modal-body p-4">

                <input type="hidden" id="id">

                <div class="row">

                    <!-- FOTO -->
                    <div class="col-md-4 mb-4">

                        <label class="fw-semibold mb-2">
                            Foto Karyawan
                        </label>

                        <div class="upload-box text-center p-4">

                            <img src="https://cdn-icons-png.flaticon.com/512/149/149071.png"
                                 id="photoPreview"
                                 class="preview-photo mb-3">

                            <div>

                                <input type="file"
                                       id="photo_file"
                                       accept="image/*"
                                       hidden>

                                <button type="button"
                                        class="btn btn-outline-warning rounded-pill"
                                        id="btnChoosePhoto">

                                    <i class="fa fa-image me-2"></i>
                                    Pilih Foto

                                </button>

                            </div>

                            <small class="text-muted d-block mt-2">
                                JPG, PNG, WEBP Max 2MB
                            </small>

                        </div>

                    </div>

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

                        <div class="row">

                            <div class="col-md-7 mb-3">

                                <label>NIK</label>

                                <input type="text"
                                       id="nik"
                                       class="form-control">

                            </div>

                            <div class="col-md-5 mb-3">

                                <label>Fingerprint User ID</label>

                                <input type="text"
                                       id="fingerprint_user_id"
                                       class="form-control">

                            </div>

                            <div class="col-md-6 mb-3">

                                <label>Nama Lengkap</label>

                                <input type="text"
                                       id="full_name"
                                       class="form-control">

                            </div>

                            <div class="col-md-3 mb-3">

                                <label>Agama</label>

                                <select id="religion"
                                        class="form-control">

                                    <option value="">
                                        -- Pilih --
                                    </option>

                                    <option value="Islam">
                                        Islam
                                    </option>

                                    <option value="Kristen">
                                        Kristen
                                    </option>

                                    <option value="Katolik">
                                        Katolik
                                    </option>

                                    <option value="Hindu">
                                        Hindu
                                    </option>

                                    <option value="Buddha">
                                        Buddha
                                    </option>

                                    <option value="Konghucu">
                                        Konghucu
                                    </option>

                                </select>

                            </div>

                            <div class="col-md-3 mb-3">

                                <label>Gender</label>

                                <select id="gender"
                                        class="form-control">

                                    <option value="">
                                        -- Pilih --
                                    </option>

                                    <option value="male">
                                        Male
                                    </option>

                                    <option value="female">
                                        Female
                                    </option>

                                </select>

                            </div>

                            <div class="col-md-5 mb-3">

                                <label>Tempat Lahir</label>

                                <input type="text"
                                       id="birth_place"
                                       class="form-control">

                            </div>

                            <div class="col-md-4 mb-3">

                                <label>Tanggal Lahir</label>

                                <input type="date"
                                       id="birth_date"
                                       class="form-control">

                            </div>

                            <div class="col-md-3 mb-3">

                                <label>Status Pernikahan</label>

                                <select id="marital_status"
                                        class="form-control">

                                    <option value="single">
                                        Single
                                    </option>

                                    <option value="married">
                                        Married
                                    </option>

                                    <option value="divorced">
                                        Divorced
                                    </option>

                                </select>

                            </div>

                            <div class="col-md-6 mb-3">

                                <label>Phone</label>

                                <input type="text"
                                       id="phone"
                                       class="form-control">

                            </div>

                            <div class="col-md-6 mb-3">

                                <label>Email</label>

                                <input type="email"
                                       id="email"
                                       class="form-control">

                            </div>

                            <div class="col-md-12 mb-3">

                                <label>Alamat</label>

                                <textarea id="address"
                                          class="form-control"></textarea>

                            </div>

                        </div>

                    </div>

                    <!-- JOB -->
                    <div class="col-md-3 mb-3">

                        <label>Department</label>

                        <select id="department_id"
                                class="form-control">

                            <option value="">
                                -- Pilih Department --
                            </option>

                            <?php foreach($departments as $d): ?>

                                <option value="<?= $d->id ?>">
                                    <?= $d->department_name ?>
                                </option>

                            <?php endforeach; ?>

                        </select>

                    </div>

                    <div class="col-md-3 mb-3">

                        <label>Position</label>

                        <select id="position_id"
                                class="form-control">

                            <option value="">
                                -- Pilih Position --
                            </option>

                            <?php foreach($positions as $p): ?>

                                <option value="<?= $p->id ?>">
                                    <?= $p->position_name ?>
                                </option>

                            <?php endforeach; ?>

                        </select>

                    </div>

                    <div class="col-md-3 mb-3">

                        <label>Branch</label>

                        <select id="branch_id"
                                class="form-control">

                            <option value="">
                                -- Pilih Branch --
                            </option>

                            <?php foreach($branches as $b): ?>

                                <option value="<?= $b->id ?>">
                                    <?= $b->branch_name ?>
                                </option>

                            <?php endforeach; ?>

                        </select>

                    </div>

                    <div class="col-md-3 mb-3">

                        <label>Status Karyawan</label>

                        <select id="employment_status"
                                class="form-control">

                            <option value="permanent">
                                Permanent
                            </option>

                            <option value="contract">
                                Contract
                            </option>

                            <option value="intern">
                                Intern
                            </option>

                            <option value="freelance">
                                Freelance
                            </option>

                        </select>

                    </div>

                    <div class="col-md-4 mb-3">

                        <label>Tanggal Masuk</label>

                        <input type="date"
                               id="join_date"
                               class="form-control">

                    </div>

                    <div class="col-md-4 mb-3">

                        <label>Status Active</label>

                        <select id="is_active"
                                class="form-control">

                            <option value="1">
                                Active
                            </option>

                            <option value="0">
                                Non Active
                            </option>

                        </select>

                    </div>

                    <div class="col-md-4 mb-3">

                        <label>Basic Salary</label>

                        <input type="number"
                               id="basic_salary"
                               class="form-control">

                    </div>

                    <div class="col-md-4 mb-3">

                        <label>Bank Name</label>

                        <input type="text"
                               id="bank_name"
                               class="form-control">

                    </div>

                    <div class="col-md-4 mb-3">

                        <label>Bank Account Number</label>

                        <input type="text"
                               id="bank_account_number"
                               class="form-control">

                    </div>

                    <div class="col-md-4 mb-3">

                        <label>Bank Account Name</label>

                        <input type="text"
                               id="bank_account_name"
                               class="form-control">

                    </div>

                    <div class="col-md-6 mb-3">

                        <label>BPJS Kesehatan</label>

                        <input type="text"
                               id="bpjs_kesehatan_number"
                               class="form-control">

                    </div>

                    <div class="col-md-6 mb-3">

                        <label>BPJS Ketenagakerjaan</label>

                        <input type="text"
                               id="bpjs_ketenagakerjaan_number"
                               class="form-control">

                    </div>

                </div>

            </div>

            <div class="modal-footer">

                <button class="btn btn-secondary"
                        data-bs-dismiss="modal">

                    Batal

                </button>

                <button class="btn btn-warning"
                        id="btnSimpan">

                    Simpan

                </button>

            </div>

        </div>

    </div>

</div>

<!-- MODAL DETAIL -->
<div class="modal fade" id="modalDetail">

    <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered">

        <div class="modal-content border-0 shadow-lg rounded-4">

            <div class="modal-header bg-secondary text-white">

                <h5 class="modal-title">
                    Detail Karyawan
                </h5>

                <button class="btn-close btn-close-white"
                        data-bs-dismiss="modal"></button>

            </div>

            <div class="modal-body"
                 id="detailBody">

            </div>

        </div>

    </div>

</div>

<style>
.preview-photo{
    width:140px;
    height:140px;
    object-fit:cover;
    border-radius:50%;
    border:5px solid #f1f1f1;
}

.upload-box{
    border:2px dashed #d9d9d9;
    border-radius:20px;
    background:#fafafa;
}

.table-photo{
    width:50px;
    height:50px;
    border-radius:50%;
    object-fit:cover;
}
</style>

<script>

const base_url = "<?= base_url(); ?>";

$(function(){

    let action = 'add';

    // =========================================
    // DATATABLE
    // =========================================
    let table = $('#tableEmployees').DataTable({
        processing:true,
        responsive:true,
        autoWidth:false,
        ajax:{
            url: base_url + 'employees/getAll',
            dataSrc:'data'
        },
        columns:[

            {
                data:null,
                render:(d,t,r,m)=>m.row+1
            },

            {
                data:'photo',
                render:function(data){

                    let photo = data
                        ? base_url + data
                        : 'https://cdn-icons-png.flaticon.com/512/149/149071.png';

                    return `
                        <img src="${photo}"
                             class="table-photo">
                    `;
                }
            },

            {data:'employee_code'},
            {data:'fingerprint_user_id'},
            {data:'full_name'},

            {
                data:'department_name',
                defaultContent:'-'
            },

            {
                data:'position_name',
                defaultContent:'-'
            },

            {
                data:'branch_name',
                defaultContent:'-'
            },

            {data:'phone'},
            {data:'employment_status'},

            {
                data:'is_active',
                render:function(data){

                    return data == 1
                        ? '<span class="badge bg-success">Active</span>'
                        : '<span class="badge bg-danger">Non Active</span>';
                }
            },

            {
                data:null,
                render:function(data){

                    return `
                        <button class="btn btn-info btn-sm btn-detail"
                                data-id="${data.id}">
                            Detail
                        </button>

                        <button class="btn btn-warning btn-sm btn-edit"
                                data-id="${data.id}">
                            Edit
                        </button>

                        <button class="btn btn-danger btn-sm btn-delete"
                                data-id="${data.id}">
                            Delete
                        </button>
                    `;
                }
            }

        ]
    });

    // =========================================
    // RESET
    // =========================================
    function resetForm(){

        $('#id').val('');

        $('#modalEmployee input').val('');
        $('#modalEmployee textarea').val('');

        $('#department_id').val('');
        $('#position_id').val('');
        $('#branch_id').val('');

        $('#gender').val('');
        $('#employment_status').val('permanent');
        $('#marital_status').val('single');
        $('#is_active').val('1');

        $('#photoPreview').attr(
            'src',
            'https://cdn-icons-png.flaticon.com/512/149/149071.png'
        );

        $('#photo_file').val('');
    }

    // =========================================
    // FOTO
    // =========================================
    $('#btnChoosePhoto').click(function(){
        $('#photo_file').click();
    });

    $('#photo_file').change(function(){

        let file = this.files[0];

        if(file){

            let reader = new FileReader();

            reader.onload = function(e){

                $('#photoPreview').attr(
                    'src',
                    e.target.result
                );
            }

            reader.readAsDataURL(file);
        }

    });

    // =========================================
    // ADD
    // =========================================
    $('.btn-add').click(function(){

        resetForm();

        action = 'add';

        $('#modalEmployee').modal('show');

    });

    // =========================================
    // EDIT
    // =========================================
    $(document).on('click','.btn-edit',function(){

        let id = $(this).data('id');

        $.get(
            base_url + 'employees/detail/' + id,
            function(res){

                if(!res.status){

                    Swal.fire(
                        'Error',
                        res.message,
                        'error'
                    );

                    return;
                }

                let d = res.data;

                $('#id').val(d.id);

                $('#nik').val(d.nik);
                $('#full_name').val(d.full_name);

                $('#gender').val(d.gender);

                $('#birth_place').val(d.birth_place);
                $('#birth_date').val(d.birth_date);

                $('#phone').val(d.phone);
                $('#email').val(d.email);

                $('#address').val(d.address);

                $('#join_date').val(d.join_date);
                $('#resign_date').val(d.resign_date);

                $('#employment_status').val(d.employment_status);
                $('#marital_status').val(d.marital_status);

                $('#religion').val(d.religion);

                $('#department_id').val(d.department_id);
                $('#position_id').val(d.position_id);
                $('#branch_id').val(d.branch_id);

                $('#basic_salary').val(d.basic_salary);

                $('#bank_name').val(d.bank_name);
                $('#bank_account_number').val(d.bank_account_number);
                $('#bank_account_name').val(d.bank_account_name);

                $('#bpjs_kesehatan_number').val(d.bpjs_kesehatan_number);
                $('#bpjs_ketenagakerjaan_number').val(d.bpjs_ketenagakerjaan_number);

                $('#fingerprint_user_id').val(d.fingerprint_user_id);

                $('#is_active').val(d.is_active);

                if(d.photo){

                    $('#photoPreview').attr(
                        'src',
                        base_url + d.photo
                    );
                }

                action = 'edit';

                $('#modalEmployee').modal('show');

            },
            'json'
        );

    });

    // =========================================
    // SAVE
    // =========================================
    $('#btnSimpan').click(function(){

        let formData = new FormData();

        formData.append('nik', $('#nik').val());
        formData.append('full_name', $('#full_name').val());

        formData.append('gender', $('#gender').val());

        formData.append('birth_place', $('#birth_place').val());
        formData.append('birth_date', $('#birth_date').val());

        formData.append('phone', $('#phone').val());
        formData.append('email', $('#email').val());

        formData.append('address', $('#address').val());

        formData.append('join_date', $('#join_date').val());
        formData.append('resign_date', $('#resign_date').val());

        formData.append('employment_status', $('#employment_status').val());
        formData.append('marital_status', $('#marital_status').val());

        formData.append('religion', $('#religion').val());

        formData.append('department_id', $('#department_id').val());
        formData.append('position_id', $('#position_id').val());
        formData.append('branch_id', $('#branch_id').val());

        formData.append('basic_salary', $('#basic_salary').val());

        formData.append('bank_name', $('#bank_name').val());
        formData.append('bank_account_number', $('#bank_account_number').val());
        formData.append('bank_account_name', $('#bank_account_name').val());

        formData.append('bpjs_kesehatan_number', $('#bpjs_kesehatan_number').val());
        formData.append('bpjs_ketenagakerjaan_number', $('#bpjs_ketenagakerjaan_number').val());

        formData.append('fingerprint_user_id', $('#fingerprint_user_id').val());

        formData.append('is_active', $('#is_active').val());

        let photo = $('#photo_file')[0].files[0];

        if(photo){
            formData.append('photo_file', photo);
        }

        if(
            !$('#full_name').val() ||
            !$('#join_date').val()
        ){

            Swal.fire(
                'Warning',
                'Nama dan tanggal masuk wajib diisi',
                'warning'
            );

            return;
        }

        let url = action === 'add'
            ? base_url + 'employees/store'
            : base_url + 'employees/update/' + $('#id').val();

        $.ajax({

            url:url,
            type:'POST',
            data:formData,
            processData:false,
            contentType:false,
            dataType:'json',

            success:function(res){

                if(res.status){

                    $('#modalEmployee').modal('hide');

                    table.ajax.reload(null,false);

                    Swal.fire(
                        'Sukses',
                        res.message,
                        'success'
                    );

                } else {

                    Swal.fire(
                        'Error',
                        res.message,
                        'error'
                    );
                }

            }

        });

    });
    
    // =========================================
    // DETAIL
    // =========================================
    $(document).on('click','.btn-detail',function(){
    
        let id = $(this).data('id');
    
        $.get(
            base_url + 'employees/detail/' + id,
            function(res){
    
                if(!res.status){
    
                    Swal.fire(
                        'Error',
                        res.message,
                        'error'
                    );
    
                    return;
                }
    
                let d = res.data;
    
                let photo = d.photo
                    ? base_url + d.photo
                    : 'https://cdn-icons-png.flaticon.com/512/149/149071.png';
    
                $('#detailBody').html(`
    
    <div class="row">
    
        <div class="col-md-4 mb-4">
    
            <div class="upload-box p-4 h-100 d-flex flex-column">
    
                <div class="text-center">
    
                    <img src="${photo}"
                         class="preview-photo mb-3">
    
                    <h4 class="fw-bold mb-1">
                        ${d.full_name || '-'}
                    </h4>
    
                    <div class="text-muted mb-3">
                        ${d.employee_code || '-'}
                    </div>
    
                    <span class="badge ${d.is_active == 1 ? 'bg-success' : 'bg-danger'} px-3 py-2">
                        ${d.is_active == 1 ? 'Active' : 'Non Active'}
                    </span>
    
                </div>
    
                <div class="mt-4">
    
                    <div class="border rounded-4 p-3 bg-white mb-3">
    
                        <small class="text-muted d-block">
                            Department
                        </small>
    
                        <div class="fw-semibold">
                            ${d.department_name || '-'}
                        </div>
    
                    </div>
    
                    <div class="border rounded-4 p-3 bg-white mb-3">
    
                        <small class="text-muted d-block">
                            Position
                        </small>
    
                        <div class="fw-semibold">
                            ${d.position_name || '-'}
                        </div>
    
                    </div>
    
                    <div class="border rounded-4 p-3 bg-white mb-3">
    
                        <small class="text-muted d-block">
                            Branch
                        </small>
    
                        <div class="fw-semibold">
                            ${d.branch_name || '-'}
                        </div>
    
                    </div>
    
                    <div class="border rounded-4 p-3 bg-white mb-3">
    
                        <small class="text-muted d-block">
                            Phone
                        </small>
    
                        <div class="fw-semibold">
                            ${d.phone || '-'}
                        </div>
    
                    </div>
    
                    <div class="border rounded-4 p-3 bg-white">
    
                        <small class="text-muted d-block">
                            Email
                        </small>
    
                        <div class="fw-semibold text-break">
                            ${d.email || '-'}
                        </div>
    
                    </div>
    
                </div>
    
            </div>
    
        </div>
    
        <div class="col-md-8">
    
            <div class="row">
    
                <div class="col-12 mb-3">
    
                    <h5 class="fw-bold border-bottom pb-2">
                        Data Pribadi
                    </h5>
    
                </div>
    
                <div class="col-md-6 mb-3">
    
                    <label class="text-muted small">
                        NIK
                    </label>
    
                    <div class="fw-semibold">
                        ${d.nik || '-'}
                    </div>
    
                </div>
    
                <div class="col-md-6 mb-3">
    
                    <label class="text-muted small">
                        Fingerprint User ID
                    </label>
    
                    <div class="fw-semibold">
                        ${d.fingerprint_user_id || '-'}
                    </div>
    
                </div>
    
                <div class="col-md-6 mb-3">
    
                    <label class="text-muted small">
                        Gender
                    </label>
    
                    <div class="fw-semibold">
                        ${d.gender || '-'}
                    </div>
    
                </div>
    
                <div class="col-md-6 mb-3">
    
                    <label class="text-muted small">
                        Agama
                    </label>
    
                    <div class="fw-semibold">
                        ${d.religion || '-'}
                    </div>
    
                </div>
    
                <div class="col-md-6 mb-3">
    
                    <label class="text-muted small">
                        Status Pernikahan
                    </label>
    
                    <div class="fw-semibold">
                        ${d.marital_status || '-'}
                    </div>
    
                </div>
    
                <div class="col-md-6 mb-3">
    
                    <label class="text-muted small">
                        Tempat Lahir
                    </label>
    
                    <div class="fw-semibold">
                        ${d.birth_place || '-'}
                    </div>
    
                </div>
    
                <div class="col-md-6 mb-3">
    
                    <label class="text-muted small">
                        Tanggal Lahir
                    </label>
    
                    <div class="fw-semibold">
                        ${d.birth_date || '-'}
                    </div>
    
                </div>
    
                <div class="col-12 mt-3 mb-3">
    
                    <h5 class="fw-bold border-bottom pb-2">
                        Kontak
                    </h5>
    
                </div>
    
                <div class="col-md-6 mb-3">
    
                    <label class="text-muted small">
                        Phone
                    </label>
    
                    <div class="fw-semibold">
                        ${d.phone || '-'}
                    </div>
    
                </div>
    
                <div class="col-md-6 mb-3">
    
                    <label class="text-muted small">
                        Email
                    </label>
    
                    <div class="fw-semibold">
                        ${d.email || '-'}
                    </div>
    
                </div>
    
                <div class="col-md-12 mb-3">
    
                    <label class="text-muted small">
                        Alamat
                    </label>
    
                    <div class="fw-semibold">
                        ${d.address || '-'}
                    </div>
    
                </div>
    
                <div class="col-12 mt-3 mb-3">
    
                    <h5 class="fw-bold border-bottom pb-2">
                        Data Pekerjaan
                    </h5>
    
                </div>
    
                <div class="col-md-4 mb-3">
    
                    <label class="text-muted small">
                        Department
                    </label>
    
                    <div class="fw-semibold">
                        ${d.department_name || '-'}
                    </div>
    
                </div>
    
                <div class="col-md-4 mb-3">
    
                    <label class="text-muted small">
                        Position
                    </label>
    
                    <div class="fw-semibold">
                        ${d.position_name || '-'}
                    </div>
    
                </div>
    
                <div class="col-md-4 mb-3">
    
                    <label class="text-muted small">
                        Branch
                    </label>
    
                    <div class="fw-semibold">
                        ${d.branch_name || '-'}
                    </div>
    
                </div>
    
                <div class="col-md-6 mb-3">
    
                    <label class="text-muted small">
                        Status Karyawan
                    </label>
    
                    <div class="fw-semibold">
                        ${d.employment_status || '-'}
                    </div>
    
                </div>
    
                <div class="col-md-6 mb-3">
    
                    <label class="text-muted small">
                        Basic Salary
                    </label>
    
                    <div class="fw-semibold">
                        Rp ${parseInt(d.basic_salary || 0).toLocaleString('id-ID')}
                    </div>
    
                </div>
    
                <div class="col-md-6 mb-3">
    
                    <label class="text-muted small">
                        Tanggal Masuk
                    </label>
    
                    <div class="fw-semibold">
                        ${d.join_date || '-'}
                    </div>
    
                </div>
    
                <div class="col-md-6 mb-3">
    
                    <label class="text-muted small">
                        Tanggal Resign
                    </label>
    
                    <div class="fw-semibold">
                        ${d.resign_date || '-'}
                    </div>
    
                </div>
    
            </div>
    
        </div>
    
    </div>
    
                `);
    
                $('#modalDetail').modal('show');
    
            },
            'json'
        );
    
    });

    // =========================================
    // DELETE
    // =========================================
    $(document).on('click','.btn-delete',function(){

        let id = $(this).data('id');

        Swal.fire({

            title:'Hapus karyawan?',
            text:'Data tidak dapat dikembalikan',
            icon:'warning',
            showCancelButton:true

        }).then((r)=>{

            if(r.isConfirmed){

                $.get(
                    base_url + 'employees/delete/' + id,
                    function(res){

                        if(res.status){

                            table.ajax.reload(null,false);

                            Swal.fire(
                                'Sukses',
                                res.message,
                                'success'
                            );

                        } else {

                            Swal.fire(
                                'Error',
                                res.message,
                                'error'
                            );
                        }

                    },
                    'json'
                );

            }

        });

    });

});
</script>