<?php echo $map_mulai['js']; ?>
<?php echo $map_selesai['js']; ?>
<div class="content-header">
    <div class="row align-items-center">
        <div class="content-header-left col-md-6 col-12 mb-md-0 mb-1">
            <h3 class="content-header-title"><?= $sub_judul ?></h3>
            <div class="row breadcrumbs-top">
                <div class="breadcrumb-wrapper col-12">
                    <ol class="breadcrumb">
                        </li>
                        <li class="breadcrumb-item"><a href="#"><?= $judul ?></a>
                        </li>
                        <li class="breadcrumb-item active"><?= $sub_judul ?>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
<?php
switch ($this->session->userdata('level_user')) {
    case '1':
        $lv_appv = 'hrd';
        break;
    case '2':
        $lv_appv = 'kedep';
        break;
        // case '3':
        //     $lv_appv = '';
        //     break;
    case '4':
        $lv_appv = 'direksi';
        break;
    case '5':
        $lv_appv = 'kacab';
        break;
        // case '6':
        //     $lv_appv = '';
        //     break;
    case '7':
        $lv_appv = 'spv';
        break;
    default:
        $lv_appv = '';
        break;
}
?>
<div class="card card-rounded">
    <div class="card-content">
        <div class="card-body">

            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-6">
                            <table>
                                <tr>
                                    <td width="60%" style="font-weight: bold;"><label>NIK</label></td>
                                    <td width="5%" style="font-weight: bold;">:</td>
                                    <td style="font-weight: bold;"><?php echo $data->nik; ?></td>
                                </tr>
                                <tr>
                                    <td width="60%" style="font-weight: bold;"><label>Nama Karyawan</label></td>
                                    <td width="5%" style="font-weight: bold;">:</td>
                                    <td style="font-weight: bold;"><?php echo $data->nama_lengkap; ?></td>
                                </tr>
                                <tr>
                                    <td width="60%" style="font-weight: bold;"><label>Jabatan</label></td>
                                    <td width="5%" style="font-weight: bold;">:</td>
                                    <td style="font-weight: bold;"><?php echo $data->nama_jabatan; ?></td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table>
                                <tr>
                                    <td width="60%" style="font-weight: bold;"><label>Departemen</label></td>
                                    <td width="5%" style="font-weight: bold;">:</td>
                                    <td style="font-weight: bold;"><?php echo $data->nama_departemen; ?></td>
                                </tr>
                                <tr>
                                    <td width="60%" style="font-weight: bold;"><label>Cabang</label></td>
                                    <td width="5%" style="font-weight: bold;">:</td>
                                    <td style="font-weight: bold;"><?php echo $data->nama_cabang; ?></td>
                                </tr>
                                <tr>
                                    <td width="60%" style="font-weight: bold;"><label>Tanggal Lembur</label></td>
                                    <td width="5%" style="font-weight: bold;">:</td>
                                    <td style="font-weight: bold;"><?php echo date('d-m-Y', strtotime($data->tgl_mulai)); ?></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <h5 style="font-weight:bold;" class="mt-2">Absen Lembur Mulai</h5>
                    <hr>
                    <table>
                        <tr>
                            <td width="60%" style="font-weight: bold;"><label>Jam Mulai</label></td>
                            <td width="5%" style="font-weight: bold;">:</td>
                            <td style="font-weight: bold;"><?php echo date('d-m-Y H:i', strtotime($data->jam_mulai)); ?></td>
                        </tr>
                        <tr>
                            <td width="60%" style="font-weight: bold;"><label>Keterangan</label></td>
                            <td width="5%" style="font-weight: bold;">:</td>
                            <td style="font-weight: bold;"><?php echo $data->keterangan_mulai ?></td>
                        </tr>
                    </table>
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Lokasi : <?php echo $data->lokasi_mulai ?></h6>
                            <?php
                            echo $map_mulai['html'];
                            ?>
                        </div>
                        <div class="col-md-6">
                            <h6>Foto</h6>
                            <?php
                            $foto_m = $this->config->item('base_image').'image?_t=absensi&_d='.$data->foto_mulai;
                            ?>
                            <a data-toggle="modal" data-target="#exampleModal" data-urlimg="<?php echo $foto_m ?>" href="javascript:;">
                                <img id="ft_mulai" class="object-fit_contain img" width="100%" src="<?php echo $foto_m ?>" alt="Lampiran">
                            </a>
                            <!-- <img class="object-fit_contain img" src="<?= $img; ?>" style="background-color: transparent; width: 100%; border-color: black;"> -->
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <h5 style="font-weight:bold;" class="mt-2">Absen Lembur Selesai</h5>
                    <hr>
                    <table>
                        <tr>
                            <td width="60%" style="font-weight: bold;"><label>Jam Selesai</label></td>
                            <td width="5%" style="font-weight: bold;">:</td>
                            <td style="font-weight: bold;"><?php echo date('d-m-Y H:i', strtotime($data->jam_selesai)); ?></td>
                        </tr>
                        <tr>
                            <td width="60%" style="font-weight: bold;"><label>Keterangan</label></td>
                            <td width="5%" style="font-weight: bold;">:</td>
                            <td style="font-weight: bold;"><?php echo $data->keterangan_selesai ?></td>
                        </tr>
                    </table>
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Lokasi : <?php echo $data->lokasi_selesai ?></h6>
                            <?php
                            echo $map_selesai['html'];
                            ?>
                        </div>
                        <div class="col-md-6">
                            <h6>Foto</h6>
                            <?php
                            $foto_s = $this->config->item('base_image').'image?_t=absensi&_d='.$data->foto_selesai;
                            ?>
                            <a data-toggle="modal" data-target="#exampleModal" data-urlimg="<?php echo $foto_s ?>" href="javascript:;">
                                <img id="ft_selesai" class="object-fit_contain img" width="100%" src="<?php echo $foto_s ?>" alt="Lampiran">
                            </a>
                            <!-- <img class="object-fit_contain img" src="<?= $img; ?>" style="background-color: transparent; width: 100%; border-color: black;"> -->
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-1">
                <div class="col-md-12">
                    <input type="hidden" name="id" value="<?php echo md5($data->id_lemmulai) ?>">
                    <a class="btn btn-secondary" href="<?php echo site_url('pengajuan/lembur') ?>">
                        <i class="fa fa-arrow-left"></i> KEMBALI
                    </a>
                    <?php
                    if ($lv_appv != '') {
                        $tx = 'approval_' . $lv_appv;
                        $cek = $data->$tx;
                        if ($cek == '1') {
                    ?>
                            <button type="button" id="btn_approve" lvl-approve="<?= $lv_appv ?>" id-izin="<?php echo md5($data->id_lemmulai) ?>" class="btn btn-success">
                                <i class="fa fa-check-square-o"></i> VERIVIKASI
                            </button>
                    <?php }
                    } ?>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img id="imgcont" width="100%" src="#" alt="">
            </div>
        </div>
    </div>
</div>



<script>
    $(document).ready(function() {

        var tg_mulai = $('#map_mulai').height();
        $('img#ft_mulai').attr('style', 'max-height:' + tg_mulai + 'px; object-fit:cover;')
        var tg_selesai = $('#map_selesai').height();
        $('img#ft_selesai').attr('style', 'max-height:' + tg_selesai + 'px; object-fit:cover;')

        $('#exampleModal').on('shown.bs.modal', function(event) {
            $('#imgcont').attr('src', event.relatedTarget.dataset.urlimg);
        });

        $('#exampleModal').on('hide.bs.modal', function(event) {
            $('#imgcont').attr('src', '');
        });

        $(document).on('click', '#btn_approve', function() {
            var level_approve = $(this).attr("lvl-approve");
            var id_izin = $(this).attr("id-izin");
            $('#tampil_form').load("<?= site_url('pengajuan/lembur/verifikasi/') ?>"+level_approve+"/"+id_izin, function() {
                $('#modal_form').modal('show');
                $(".title").text("Approval Supervisi");

                //Setuju
                $(document).on("click", ".btn_setuju", function(e) {
                    e.preventDefault();
                    $('#modal_form #message').html("");
                    // if(!validasiinput()) {
                    //     return false;
                    // }
                    var loading = Ladda.create(this);

                    status = $(this).attr('id');

                    loading.start();

                    var param = new FormData();
                    param.append('status', status);
                    param.append('id', $("#id").val());
                    param.append('tgl_mulai', $("#tgl_mulai").val());
                    param.append('tgl_selesai', $("#tgl_selesai").val());
                    param.append('jam_mulai', $("#jam_mulai").val());
                    param.append('jam_selesai', $("#jam_selesai").val());

                    $.ajax({
                        type: 'POST',
                        url: "<?= site_url('pengajuan/lembur/approve-') ?>"+level_approve,
                        data: param,
                        dataType: 'JSON',
                        contentType: false,
                        processData: false,
                        cache: false,
                        complete: function(data) {
                            reconfigure(data);
                        },
                        success: function(result) {
                            if (result.status == 'berhasil') {
                                $("#btn_approve").hide();
                            }
                            loading.stop();
                            $('#modal_form #message').show();
                            $('#modal_form #message').html(result.alert);
                        },
                        error: function() {
                            loading.stop();
                            $('#modal_form #message').show();
                            $('#modal_form #message').html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong>Gagal : Terjadi Kesalahan</strong></font>');
                        }
                    });
                });

                //Tolak
                $(document).on("click", ".btn_tolak", function(e) {
                    e.preventDefault();
                    $('#message').html("");
                    var loading = Ladda.create(this);

                    status = $(this).attr('id');

                    loading.start();

                    var param = new FormData();
                    param.append('status', status);
                    param.append('id', $("#id").val());

                    $.ajax({
                        type: 'POST',
                        url: "<?= site_url('pengajuan/lembur/approve-') ?>"+level_approve,
                        data: param,
                        dataType: 'JSON',
                        contentType: false,
                        processData: false,
                        cache: false,
                        complete: function(data) {
                            reconfigure(data);
                        },
                        success: function(result) {
                            if (result.success == true){
                                $("#btn_approve").hide();
                            }
                            loading.stop();
                            $('#modal_form #message').show();
                            $('#modal_form #message').html(result.alert);
                        },
                        error: function() {
                            loading.stop();
                            $('#modal_form #message').show();
                            $('#modal_form #message').html('<font color="#eb3a28"><i class="fa fa-close(alias)">&nbsp;</i><strong>Gagal : Terjadi Kesalahan</strong></font>');
                        }
                    });
                });
            });
        });

    });
</script>