<!-- Jam -->
<link href="<?= base_url() ?>assets/plugins/jam/bootstrap-clockpicker.min.css" rel="stylesheet">
<script src="<?= base_url() ?>assets/plugins/jam/bootstrap-clockpicker.min.js"></script>
<script type="text/javascript">
    callmasktanggal();
    $('.clockpicker').clockpicker({
        placement: 'top',
        align: 'left',
        donetext: 'Done'
    });
</script>
<div class="card-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    <h3 class="title modal-title"></h3>
</div>
<div id="form_input" class="card-body" disabled>
    <input type="hidden" id="id_karyawan" class="form-control" value="<?= ((isset($data)) ? $data->id_karyawan : '') ?>">
    <input type="hidden" id="tanggal" class="form-control" value="<?= ((isset($data)) ? $data->tgl_absen : '') ?>">
    <input type="hidden" id="id_company" class="form-control" value="<?= ((isset($data)) ? $data->id_company : '') ?>">
    <input type="hidden" id="id_cabang" class="form-control" value="<?= ((isset($data)) ? $data->id_cabang : '') ?>">
    <input type="hidden" id="id_departemen" class="form-control" value="<?= ((isset($data)) ? $data->id_departemen : '') ?>">
    <input type="hidden" id="id_cabang" class="form-control" value="<?= ((isset($data)) ? $data->id_cabang : '') ?>">
    <div class="form-group">
        <label>Nama Karyawan <span class="text-danger">*</span></label>
        <?php

            if (!empty($ref)) {
                 ?>
            <input type="text" id="nama_karyawan" class="form-control" value="<?= ((isset($data)) ? $data->nama_karyawan : '') ?>" disabled>
        <?php } else { ?>
            <select class="form-control" id="karyawan" style="width: 100%">
                <option></option>
            </select>
        <?php } ?>
    </div>
    <div class="form-group">
        <label>Tanggal Absen <span class="text-danger">*</span></label>
        <input type="text" id="tgl_absen" <?php echo (isset($data)) ? 'disabled' : '' ?> class="form-control <?php echo (isset($data)) ? '' : 'datepicker masktanggal' ?>" value="<?= (isset($data)) ? date('d-m-Y', strtotime($data->tgl_absen)) : ''  ?>">
    </div>
    <?php
    // echo '<pre>'.var_export($data, true).'</pre>';
    ?>
    <div class="form-group">
        <label>Jenis Absen <span class="text-danger">*</span></label><br>
        <select class="form-control" id="kode_absensi" style="width: 100%">
            <option <?php echo ($data != null) ? ($data->jenis_absen == '') ? '' : '' : '' ?> value="" disabled>Pilih Jenis Absen</option>
            <option <?php echo ($data != null) ? ($data->jenis_absen == 'reguler' || $data->jenis_absen == 'shift') ? '' : '' : '' ?> value="H">Hadir</option>
            <option <?php echo ($data != null) ? ($data->jenis_absen == 'alpha') ? '' : '' : '' ?> value="A">Alpha</option>
            <option <?php echo ($data != null) ? ($data->jenis_absen == 'libur') ? '' : '' : '' ?> value="L">Libur</option>
        </select>
    </div>
    <div class="form-group dd-jam-kerja" style="display:none;">
        <label>Jam Kerja <span class="text-danger">* <?= $data->jenis_absen ?></span></label><br>
        <select class="form-control" id="jam_kerja" style="width: 100%">
            <option value="" disabled>Pilih Jam Kerja</option>
            <option value="reguler" <?= ($data->jenis_absen == "reguler")?"selected":""?>>Reguler</option>
            <option value="shift" <?= ($data->jenis_absen == "shift")?"selected":""?>>Shift</option>
        </select>
    </div>
    <div class="form-group cont-pilih-shift" style="display:none;">
        <label>Nama Shift <span class="text-danger">*</span></label><br>
        <select class="form-control" id="id_shift" style="width: 100%">
            <option value="">Pilih Shift</option>
        </select>
    </div>
    <style>
        .alert[class*=alert-icon-]:after {
            content: '\f017';
        }
    </style>
    <div class="info-jam-kerja" style="display:none; margin-top:0px;">
        <div class="alert bg-blue alert-icon-left alert-dismissible mb-2" role="alert">
            Jam Kerja <b><span class="info-jam-reguler-shift"></span></b> :
            <span class="info-jam-masuk"></span> -
            <span class="info-jam-pulang"></span>
        </div>
    </div>
    <div class="form-group dd-absen-masuk-pulang">
        <div class="row">
            <div class="col-md-6">
                <label>Absen Masuk <span class="text-danger">*</span></label>
                <?php
                $date1 = $data->absen_masuk;
                $absen_masuk = "";
                if ($date1 != "") {
                    $format = 'Y-m-d H:i:s';
                    $date = DateTime::createFromFormat($format, $date1);
                    $a_masuk = $date->format("H:i:s");
                    if($data == null)
                    {
                        if ($a_masuk != '00:00:00') {
                            $absen_masuk = $a_masuk;
                        }
                    }else{
                        if ($a_masuk != '00:00:00') {
                            $absen_masuk = $a_masuk;
                        }
                    }
                }

                ?>
                <input name="absen_masuk" id="absen_masuk" type="text" data-inputmask="'alias': 'datetime','inputFormat': 'HH:MM'" class="form-control" value="<?= $absen_masuk ?>" style="/*background-color: white;*/">
            </div>
            <div class="col-md-6">
                <label>Absen Pulang</label>
                <?php
                $date2 = $data->absen_pulang;
                $absen_pulang = "";
                if ($date2 != "") {
                    $format = 'Y-m-d H:i:s';
                    $date = DateTime::createFromFormat($format, $date2);
                    $a_pulang = $date->format("H:i:s");
                    if($data == null)
                    {
                        if ($a_pulang != '00:00:00') {
                            $absen_pulang = $a_pulang;
                        }
                    }else{
                        if ($a_pulang != '00:00:00') {
                            $absen_pulang = $a_pulang;
                        }
                    }
                }

                ?>
                <input name="absen_pulang" id="absen_pulang" type="text" data-inputmask="'alias': 'datetime','inputFormat': 'HH:MM'" class="form-control" value="<?= $absen_pulang ?>" style="/*background-color: white;*/">
            </div>
        </div>
    </div>
    <div class="form-group dd-istirahat-mulai-selesai">
        <div class="row">
            <div class="col-md-6">
                <label>Istirahat Mulai</label>
                <?php
                $date3 = $data->absen_ist_mulai;
                $absen_ist_mulai = "";
                if ($date3 != "") {
                    $format = 'Y-m-d H:i:s';
                    $date = DateTime::createFromFormat($format, $date3);
                    $a_ist_mulai = $date->format("H:i:s");
                    if($data == null)
                    {
                        if ($a_ist_mulai != '00:00:00') {
                            $absen_ist_mulai = $a_ist_mulai;
                        }
                    }else{
                        if ($a_ist_mulai != '00:00:00') {
                            $absen_ist_mulai = $a_ist_mulai;
                        }
                    }
                }
                ?>
                <input name="istirahat_mulai" id="istirahat_mulai" type="text" data-inputmask="'alias': 'datetime','inputFormat': 'HH:MM'" class="form-control" value="<?= $absen_ist_mulai ?>" style="/*background-color: white;*/">
            </div>
            <div class="col-md-6">
                <label>Istirahat Selesai</label>
                <?php
                $date4 = $data->absen_ist_selesai;
                $absen_ist_selesai = "";
                if ($date4 != "") {
                    $format = 'Y-m-d H:i:s';
                    $date = DateTime::createFromFormat($format, $date4);
                    $a_ist_selesai = $date->format("H:i:s");
                    if($data == null)
                    {
                        if ($a_ist_selesai != '00:00:00') {
                            $absen_ist_selesai = $a_ist_selesai;
                        }
                    }else{
                        if ($a_ist_selesai != '00:00:00') {
                            $absen_ist_selesai = $a_ist_selesai;
                        }
                    }
                }
                ?>
                <input name="istirahat_selesai" id="istirahat_selesai" type="text" data-inputmask="'alias': 'datetime','inputFormat': 'HH:MM'" class="form-control" value="<?= $absen_ist_selesai ?>" style="/*background-color: white;*/">
            </div>
        </div>
    </div>
</div>
<div class="card-footer">
    <div class="row">
        <div class="col-md-7 text-left">
            <div id="message"></div>
        </div>
        <div class="col-md-5 text-right">
            <button id="btn_new_input" class="btn" style="display:none">TAMBAH BARU</button>
            <button class="btn_save ladda-button" data-style="expand-left"></button>
        </div>
    </div>
</div>
<script>
    var dropdown_karyawan, picker_tanggal_absen, index_day = 0,
        id_kary = null,
        id_company = null,
        id_cabang = null,
        id_departemen = null,
        id_master_shift = null;
    $(function() {
        <?php
        $kda = 'H';
        if($data != null)
        {
            if($data->jenis_absen == 'reguler' || $data->jenis_absen == 'shift')
            {
                $kda = 'H';
            }elseif($data->jenis_absen == 'alpha')
            {
                $kda = 'A';
            }elseif($data->jenis_absen == 'libur')
            {
                $kda = 'L';
            }
        }
        ?>
        $('select#kode_absensi').val('<?php echo $kda ?>').trigger('change');

        $('select#id_shift').select2();

        $(document).ready(function() {

            //modal
            dropdown_karyawan = $("#karyawan").select2({
				dropdownParent: $('#modal_form'),
                placeholder: "Pilih Karyawan",
                allowClear: true,
                ajax: {
                    url: '<?= site_url("absensi/list/karyawan") ?>',
                    dataType: 'json',
                    delay: 250,
                    processResults: function(data) {
                        return {
                            results: data
                        };
                    },
                    cache: false
                }
            });
            //modal
            dropdown_karyawan.on('change.select2', function() {
                var res = dropdown_karyawan.select2('data')[0];
                // id_kary = res.id;
                // id_company = res.id_company;
                // id_cabang = res.id_cabang;
                // id_departemen = res.id_departemen;

                $("#form_input #id_karyawan").val(res.id);
                $("#form_input #id_company").val(res.idcompany);
                $("#form_input #id_cabang").val(res.idcabang);
                $("#form_input #id_departemen").val(res.iddepartemen);
                // $('input#id_karyawan').val(id_kary);

                trigger_cek_jam_kerja()
            });

            picker_tanggal_absen = datepicker(null, '<?php echo date('d-m-Y') ?>');

            picker_tanggal_absen.on('changeDate', function() {
                index_day = moment($(this).val(), 'DD-MM-YYYY').format('E');

                $('input#tanggal').val($(this).val());
                trigger_cek_jam_kerja();
            });


            <?php
            if ($data != null) {
            ?>
                id_kary = $("#form_input #id_karyawan").val();
                id_company = $("#form_input #id_company").val();
                id_cabang = $("#form_input #id_cabang").val();
                id_departemen = $("#form_input #id_departemen").val();
                index_day = moment($("#form_input #tgl_absen").val(), 'DD-MM-YYYY').format('E');

                setTimeout(function() {
                    <?php
                    if (in_array($data->jenis_absen, ['reguler', 'shift'])) {
                        $kd = 'H';
                    } elseif ($data->jenis_absen == 'alpha') {
                        $kd = 'A';
                    } elseif ($data->jenis_absen == 'libur') {
                        $kd = 'L';
                    } else {
                        $kd = '';
                    }
                    ?>
                    $('select#kode_absensi').val('<?php echo $kd ?>').trigger('change');
                }, 100);

                setTimeout(function() {
                    $('select#jam_kerja').val('<?php echo $data->jenis_absen ?>').trigger('change');
                }, 300);
            <?php
            }
            ?>
        });
    });

    $('select#kode_absensi').on('change', function() {
        if ($(this).val() == 'H') {
            $('.dd-jam-kerja').slideDown('fast');
            $('.dd-absen-masuk-pulang').slideDown('fast');
            $('.dd-istirahat-mulai-selesai').slideDown('fast');

            trigger_cek_jam_kerja();
        } else {
            // form_jam_kerja();
            $('.dd-jam-kerja').slideUp('fast');
            $('.dd-absen-masuk-pulang').slideUp('fast');
            $('.dd-istirahat-mulai-selesai').slideUp('fast');

            $('.info-jam-kerja').slideUp('fast');
            $('select#jam_kerja').val('').trigger('change');
            $('select#id_shift').val('').trigger('change');

            $('input[name=absen_masuk]').val('');
            $('input[name=absen_pulang]').val('');
            $('input[name=istirahat_mulai]').val('');
            $('input[name=istirahat_selesai]').val('');
        }
    });


    $('select#jam_kerja').on('change', function() {
		var jam_kerja = $(this).val();
        if (jam_kerja == 'shift') {
            $('.cont-pilih-shift').slideDown('fast');
            getjamshift();
        } else {
            $('.info-jam-kerja').slideUp('fast');
            $('.cont-pilih-shift').slideUp('fast');
            trigger_cek_jam_kerja();
        }
    });

    $('select#id_shift').on('change', function() {
        if ($(this).val() != '') {
            id_master_shift = $(this).val();
            trigger_cek_jam_kerja();
            libur = $('select#id_shift option:selected').attr('libur');
            if(libur == '1'){
                // $('.dd-jam-kerja').slideUp('fast');
                $('.dd-absen-masuk-pulang').slideUp('fast');
                $('.dd-istirahat-mulai-selesai').slideUp('fast');

                $('.info-jam-kerja').slideUp('fast');
                <?php if(!isset($data)) { ?>
                $('input[name=absen_masuk]').val('');
                $('input[name=absen_pulang]').val('');
                $('input[name=istirahat_mulai]').val('');
                $('input[name=istirahat_selesai]').val('');
				<?php } ?>
            } else {
				$('.dd-absen-masuk-pulang').slideDown('fast');
				$('.dd-istirahat-mulai-selesai').slideDown('fast');
			}
        }
    });

    function trigger_cek_jam_kerja() {
        var jenis_absen = $('select#kode_absensi').val();
        var jam_kerja = $('select#jam_kerja').val();
        var id_cabang = $('#form_input #id_cabang').val();

        if (jenis_absen == 'H' && jam_kerja != '' && index_day != 0 && id_cabang != null) {
            var params = {};
            params.id_karyawan = id_kary;
            params.id_company = id_company;
            params.id_cabang = id_cabang;
            params.id_departemen = id_departemen;
            params.index_day = index_day;
            params.jam_kerja = jam_kerja;
            params.id_master_shift = id_master_shift;

            $('.info-jam-kerja').slideUp('fast');
            $.get('<?php echo route('dropdown.jamkerjakaryawan') ?>', params, function(result) {
                var json = $.parseJSON(result);

                if (json.status) {
                    $('.info-jam-kerja').slideDown('fast');
                    $('.info-jam-reguler-shift').text(jam_kerja.toUpperCase());
                    $('.info-jam-masuk').text(json.data.jam_masuk);
                    $('.info-jam-pulang').text(json.data.jam_pulang);
                }
            });
        }
    }

    function getjamshift() {
        var id_cabang = $("#form_input #id_cabang").val();
        var params = {};
        params.id_cabang = id_cabang;
        $.get('<?php echo route('dropdown.jamshift') ?>', params, function(result) {
            var data = $.parseJSON(result);

            if (data.status) {
                var option = '';

                <?php
                $selected = '';
                    if($data != null)
                    {
                        if($data->kode_absensi != null)
                        {
                            $kode = explode(',', $data->kode_absensi);
                            if(isset($kode[0]))
                            {
                                $selected = $kode[0];
                            }
                        }
                    }
                ?>

                var selected = '<?php echo $selected ?>';

                $.each(data.data, function(k, v) {
                    var slt = (v.kode_shift == selected) ? 'selected' : '';
                    option += '<option '+slt+' libur="'+v.libur+'" value="' + v.id_master_shift + '">' + v.kode_shift + ' - ' + v.nama_shift + '</option>';
                });
                $('select#id_shift').html(option);

                // setTimeout(function(){
                $('select#id_shift').trigger('change');
                // }, 300);
            }
        });
    }
</script>
