    <!-- Main Content -->

    <div class="hk-pg-wrapper">

			<!-- Container -->

            <div class="container-fluid mt-xl-50 mt-sm-30 mt-15">



            <div class="hk-pg-header mb-10">

                    <div>

						<h4 class="hk-pg-title"><span class="pg-title-icon"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg></span></span>Manage HR</h4>

                    </div>

					<div class="d-flex dropdown">

                    </div>

                </div>

                                    <div class="modal fade" id="editLemburModal" tabindex="-1" role="dialog" aria-labelledby="editLemburModalLabel" aria-hidden="true">

                                        <div class="modal-dialog modal-lg" role="document">

                                            <div class="modal-content">

                                                <div class="modal-header">

                                                    <h5 class="modal-title" id="editLemburModalLabel">Edit Lembur</h5>

                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                                                        <span aria-hidden="true">&times;</span>

                                                    </button>

                                                </div>

                                                <form id="editLemburForm">

                                                <div class="modal-body">

                                                </div>

                                                <div class="modal-footer">

                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                                                    <button type="submit" class="btn btn-primary">Save changes</button>

                                                </div>

                                                </form>

                                            </div>

                                        </div>

                                    </div>

                                    <div class="modal fade" id="editAbsensiModal" tabindex="-1" role="dialog" aria-labelledby="editAbsensiModalLabel" aria-hidden="true">

                                        <div class="modal-dialog modal-lg" role="document">

                                            <div class="modal-content">

                                                <div class="modal-header">

                                                    <h5 class="modal-title" id="editAbsensiModalLabel">Edit Absensi</h5>

                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                                                        <span aria-hidden="true">&times;</span>

                                                    </button>

                                                </div>

                                                <form id="editAbsensiModalForm">

                                                <div class="modal-body">

                                                </div>

                                                <div class="modal-footer">

                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                                                    <button type="submit" class="btn btn-primary">Save changes</button>

                                                </div>

                                                </form>

                                            </div>

                                        </div>

                                    </div>

                                    <div class="modal fade" id="editPenaltyModal" tabindex="-1" role="dialog" aria-labelledby="editPenaltyModalLabel" aria-hidden="true">

                                        <div class="modal-dialog modal-lg" role="document">

                                            <div class="modal-content">

                                                <div class="modal-header">

                                                    <h5 class="modal-title" id="editPenaltyModalLabel">Edit Penalty</h5>

                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                                                        <span aria-hidden="true">&times;</span>

                                                    </button>

                                                </div>

                                                <form id="editPenaltyForm">

                                                <div class="modal-body">

                                                </div>

                                                <div class="modal-footer">

                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                                                    <button type="submit" class="btn btn-primary">Save changes</button>

                                                </div>

                                                </form>

                                            </div>

                                        </div>

                                    </div>
                                    <div class="modal fade" id="editGajiModal" tabindex="-1" role="dialog" aria-labelledby="editGajiModalLabel" aria-hidden="true">

                                        <div class="modal-dialog modal-lg" role="document">

                                            <div class="modal-content">

                                                <div class="modal-header">

                                                    <h5 class="modal-title" id="editGajiModalLabel">Edit Gaji</h5>

                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                                                        <span aria-hidden="true">&times;</span>

                                                    </button>

                                                </div>

                                                <form id="editGajiModalForm">

                                                <div class="modal-body">

                                                </div>

                                                <div class="modal-footer">

                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                                                    <button type="submit" class="btn btn-primary">Save changes</button>

                                                </div>

                                                </form>

                                            </div>

                                        </div>

                                    </div>
               



				<div class="row">

                    <div class="col-xl-12">

                        <div class="hk-row">

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

								<div class="card card-sm">

									<div class="card-body">

										<div class="d-flex justify-content-between mb-5">

											<div>

												<span class="d-block font-15 text-dark font-weight-500">Users</span>

											</div>

											<div>

												<span class="text-success font-14 font-weight-500"></span>

											</div>

										</div>

										<div class="text-center">

											<span class="d-block display-4 text-dark mb-5">36.1K</span>

										</div>

									</div>

								</div>

							

							</div>

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

								<div class="card card-sm">

									<div class="card-body">

										<div class="d-flex justify-content-between mb-5">

											<div>

												<span class="d-block font-15 text-dark font-weight-500">Total Lembur</span>

											</div>

											<div>

												<span class="text-success font-14 font-weight-500"></span>

											</div>

										</div>

										<div class="text-center">

											<span class="d-block display-4 text-dark mb-5"><span class="counter-anim"><?= $totallembur ?></span></span>

										</div>

									</div>

								</div>

							</div>

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

								<div class="card card-sm">

									<div class="card-body">

										<div class="d-flex justify-content-between mb-5">

											<div>

												<span class="d-block font-15 text-dark font-weight-500">Pegawai Tepat Waktu Hari Ini</span>

											</div>

											<div>

												<span class="text-warning font-14 font-weight-500"></span>

											</div>

										</div>

										<div class="text-center">

											<span class="d-block display-4 text-dark mb-5"><?= $pegawaimasuk ?></span>

										</div>

									</div>

								</div>

							</div>

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

								<div class="card card-sm">

									<div class="card-body">

										<div class="d-flex justify-content-between mb-5">

											<div>

												<span class="d-block font-15 text-dark font-weight-500">Pegawai Telat Hari Ini</span>

											</div>

											<div>

												<span class="text-danger font-14 font-weight-500"></span>

											</div>

										</div>

										<div class="text-center">

											<span class="d-block display-4 text-dark mb-5"><?= $pegawaitelat ?></span>

										</div>

									</div>

								</div>

							</div>							

						</div>

                        <div class="hk-row">

                        <div class="col-lg-12">

                        <div class="card">

                        <ul class="nav nav-pills nav-fill pa-15" role="tablist">

                            <li class="nav-item">

                                <a href="#" class="nav-link active" onclick="showTab('absensi')">Absensi</a>

                            </li>

                            <li class="nav-item">

                                <a href="#" class="nav-link" onclick="showTab('lembur')">Lembur</a>

                            </li>

                            <li class="nav-item">

                                <a href="#" class="nav-link" onclick="showTab('gaji')">Gaji</a>

                            </li>

                            <li class="nav-item">

                                <a href="#" class="nav-link" onclick="showTab('penalty')">Penalty</a>

                            </li>

                            <li class="nav-item">

                                <a href="#" class="nav-link">Cuti</a>

                            </li>

                        </ul>

                        </div>

                        </div>            

                        </div>

                        <div class="hk-row">

							<div class="col-lg-4">

								<div class="card">

                                    <h5 class="card-title m-3">Rekapan lembur bulan ini</h5>

									<div class="card-body pa-0">

										<div class="table-wrap">

											<div class="table-responsive">

												<table class="table table-hover mb-0">

													<thead>

														<tr>

															<th>Nama</th>

															<th>Total Lembur	</th>

															<th>Total Lembur di-Approve	</th>

															<th>Total Lembur Mesin </th>

														</tr>

													</thead>

													<tbody>

                                                    <?php foreach ($total_lembur as $item) : ?>

														<tr>

                                                        <td> <?php echo esc($item['nama']); ?></td>

                                                        <td><censored-style censorship-type="blur" censorship-tag="censored"><censored><?php echo esc($item['total_lembur']); ?></censored></censored-style></td>

                                                        <td><censored-style censorship-type="blur" censorship-tag="censored"><censored><?php echo esc($item['total_lemburapp']); ?></censored></censored-style></td>

                                                        <td><censored-style censorship-type="blur" censorship-tag="censored"><censored><?php echo esc($item['mesin']); ?></censored></censored-style></td>

														</tr>

                                                    <?php endforeach; ?>    

													</tbody>

												</table>

											</div>

										</div>

									</div>

								</div>

                                <div class="card">

                                    <h5 class="card-title m-3">Rekapan Absensi bulan ini</h5>

									<div class="card-body pa-0">

										<div class="table-wrap">

											<div class="table-responsive">

												<table class="table table-hover mb-0">

													<thead>

														<tr>

															<th>Nama</th>

															<th>Kehadiran</th>

															<th>Telat	</th>

														</tr>

													</thead>

													<tbody>

                                                    <?php foreach ($rekapanabsen as $item) : ?>

														<tr>

                                                        <td><?php echo esc($item['nama_pegawai']); ?></td>

                                                        <td><?php echo esc($item['kehadiran']); ?></td>

                                                        <td><?php echo esc($item['telat']); ?></td>

														</tr>

                                                    <?php endforeach; ?>    

													</tbody>

												</table>

											</div>

										</div>

									</div>

								</div>

							</div>

                            <div class="col-lg-8">

								<div class="card" id="absensi">

                                    <h5 class="card-title m-3">Absensi</h5>

									<div class="card-body pa-3">
                                    <a href="#" class="btn btn-primary" onclick="showTab('createabsen')">Tambah</a>

										<div class="table-wrap">

											<div class="table-responsive m-3">

												<table id="absensiTable" class="table table-hover mb-0">

													<thead>

														<tr>

                                                            <th>tgl Absen</th>

                                                            <th>Nama Pegawai</th>

                                                            <th>Tanggal Absen</th>

                                                            <th>Jam Masuk</th>

                                                            <th>Jam Pulang</th>

                                                            <th>Status Pegawai</th>

                                                            <th>Action</th>
                                                            <th>tgl</th>

														</tr>

													</thead>

													<tbody>   

													</tbody>

												</table>

											</div>

										</div>

									</div>

								</div>

                                <div class="card" id="lembur" style="display: none;">

                                    <h5 class="card-title m-3">Lembur</h5>

                                    <div class="card-body pa-3">

                                        <div class="table-wrap">

                                            <div class="table-responsive m-3">

                                                <table id="lemburTable" class="table table-hover mb-0">

                                                    <thead>

                                                        <tr>

                                                            <th>ID </th>

                                                            <th>Nama </th>

                                                            <th>Alasan Lembur</th>

                                                            <th>Tanggal Lembur</th>

                                                            <th>Durasi Jam</th>

                                                            <th>Durasi Approve</th>

                                                            <th>Status</th>

                                                            <th>Status Approve</th>

                                                            <th>Action</th>

                                                        </tr>

                                                    </thead>

                                                    <tbody>

                                                        <!-- Data lembur akan ditampilkan di sini -->

                                                    </tbody>

                                                </table>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="card" id="gaji" style="display: none;">

                                    

                                    <h5 class="card-title m-3">Gaji</h5>

                                    <a href="#" class="btn btn-primary" onclick="showTab('creategaji')">Penalty</a>



                                    <div class="card-body pa-3">

                                        <div class="table-wrap">

                                            <div class="table-responsive m-3">

                                                <table id="gajiTable" class="table table-hover mb-0">

                                                    <thead>

                                                        <tr>

                                                            <th>ID </th>

                                                            <th>Nama </th>

                                                            <th>Periode Gajian</th>

                                                            <th>Total Gajian</th>

                                                            <th>Action</th>

                                                        </tr>

                                                    </thead>

                                                    <tbody>

                                                        <!-- Data lembur akan ditampilkan di sini -->

                                                    </tbody>

                                                </table>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="card" id="creategaji" style="display: none;">

                                    <h5 class="card-title m-3">Form Gaji Karyawan </h5>

                                    <form id="submitgajiform">

                                    <div class="card-body pa-3">

                                        <div class="form-group">

                                            <label for="karyawan">Nama Karyawan</label>

                                            <select class="form-control select_group karyawan" data-row-id="row_1" id="karyawan_1" name="karyawan_1" style="width:100%;"  required>

                                                <option value=""></option>

                                            </select>

                                            <input type="hidden" class="form-control" id="nama" name="nama" onkeyup="hitungtotal()"  required value="0" placeholder="Cth : 25 " autocomplete="off" />

                                        </div>

                                        <div class="form-group">

                                            <label for="qty_1">Jumlah Kehadiran</label>

                                            <input type="text" class="form-control" id="qty_1" name="qty_1" onkeyup="hitungtotal()"  required value="0" placeholder="Cth : 25 " autocomplete="off" />

                                        </div>

                                        <div class="form-group">

                                            <label for="waktu">Periode Gajian</label>

                                            <input type="month" class="form-control" id="waktu" name="waktu" onkeyup="hitungtotal()"  placeholder="Cth : 25 " autocomplete="off" />

                                        </div>

                                        <div class="form-group">

                                            <label for="gapok">Gaji Pokok</label>

                                            <input type="number" class="form-control" id="gapok" name="gapok" onkeyup="hitungtotal()"  placeholder="3000000 " autocomplete="off" />

                                        </div>

                                        <table class="table table-bordered table-striped">

                                            <tbody>

                                                <tr>

                                                    <th colspan="4"><center>Penghasilan</center></th>

                                                </tr>

                                                <tr>

                                                    <th>Keterangan</th>

                                                    <th>Harian</th>

                                                    <th>Hari Kerja</th>

                                                    <th>Nominal</th>

                                                </tr>

                                                <tr>

                                                    <td>Uang Makan</td>

                                                    <td><div class="form-group">

                                                        <input readonly type="text" class="form-control" id="qtycur_1" onkeyup="hitungtotal()"  name="qtycur_1" placeholder="Digenerate Otomatis" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>

                                                        <div class="form-group">

                                                        <input readonly type="text" class="form-control" id="uangmakanqty_1" onkeyup="hitungtotal()"  name="uangmakanqty_1" placeholder="Digenerate Otomatis" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>							

                                                        <div class="form-group">

                                                        <input readonly type="text" class="form-control" data-target="uang1" id="qtyfinal_1" name="qtyfinal_1" placeholder="Digenerate Otomatis"" autocomplete="off" />

                                                        </div>

                                                    </td>	

                                                </tr>

                                                <tr>

                                                    <td>Tunjangan Kesehatan</td>

                                                    <td><div class="form-group">

                                                        <input readonly type="text" class="form-control" id="hariankesehatan_1" onkeyup="hitungtotal()"  name="hariankesehatan_1" placeholder="Digenerate Otomatis" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>

                                                        <div class="form-group">

                                                        <input readonly type="text" class="form-control" id="kesehatan_1" onkeyup="hitungtotal()"  name="kesehatan_1" placeholder="Digenerate Otomatis" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>							

                                                        <div class="form-group">

                                                        <input readonly type="text" class="form-control" data-target="uang2" id="uangkesehatan_1" name="uangkesehatan_1" placeholder="Digenerate Otomatis"" autocomplete="off" />

                                                        </div>

                                                    </td>	

                                                </tr>						

                                                <tr>

                                                    <td>Tunjangan Kendaraan</td>

                                                    <td><div class="form-group">

                                                        <input readonly type="text" class="form-control" id="hariankendaraan_1" onkeyup="hitungtotal()"  name="hariankendaraan_1" placeholder="Digenerate Otomatis" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>

                                                        <div class="form-group">

                                                        <input readonly type="text" class="form-control" id="kendaraan_1" onkeyup="hitungtotal()"  name="kendaraan_1" placeholder="Digenerate Otomatis" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>							

                                                        <div class="form-group">

                                                        <input readonly type="text" class="form-control" data-target="uang3" id="uangkendaraan_1" name="uangkendaraan_1" placeholder="Digenerate Otomatis"" autocomplete="off" />

                                                        </div>

                                                    </td>	

                                                </tr>

                                                <tr>

                                                    <td>Lembur</td>

                                                    <td><div class="form-group">

                                                        <input readonly type="text" class="form-control" id="harianLembur_1" onkeyup="hitungtotal()"  name="harianLembur_1" placeholder="Digenerate Otomatis" value="13000" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>

                                                        <div class="form-group">

                                                        <input  type="text" class="form-control" id="total_lembur" onkeyup="hitungtotal()"  name="total_lembur" placeholder="Digenerate Otomatis" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>							

                                                        <div class="form-group">

                                                        <input readonly type="text"  data-target="uang4" class="form-control" id="uangLembur_1" name="uangLembur_1" placeholder="Digenerate Otomatis"" autocomplete="off" />

                                                        </div>

                                                    </td>	

                                                </tr>

                                                <tr>

                                                    <td>Lembur Lainnya</td>

                                                    <td><div class="form-group">

                                                        <input readonly type="text" class="form-control" id="harianLembur_2" onkeyup="hitungtotal()"  name="harianLembur_2" placeholder="Digenerate Otomatis" value="15000" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>

                                                        <div class="form-group">

                                                        <input readonly type="number" class="form-control" value="2" id="total_lembur2" onkeyup="hitungtotal()"  name="total_lembur2" placeholder="Digenerate Otomatis" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>							

                                                        <div class="form-group">

                                                        <input readonly type="text" data-target="uang" class="form-control" id="uangLembur_2" name="uangLembur_2" placeholder="Digenerate Otomatis"" autocomplete="off" />

                                                        </div>

                                                    </td>	

                                                </tr>

                                                <tr>

                                                    <td>Double Shift</td>

                                                    <td><div class="form-group">

                                                        <input readonly type="text" class="form-control" id="hariands" onkeyup="hitungtotal()"  name="hariands" placeholder="Digenerate Otomatis" value="120000" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>

                                                        <div class="form-group">

                                                        <input type="number" class="form-control" id="total_ds" onkeyup="hitungtotal()"  name="total_ds" placeholder="Masukan berapa kali" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>							

                                                        <div class="form-group">

                                                        <input readonly type="text" class="form-control" id="uangds" name="uangds" placeholder="Digenerate Otomatis"" autocomplete="off" />

                                                        </div>

                                                    </td>	

                                                </tr>

                                                <tr>

                                                    <th colspan="3"><center>Uang Kerajinan</center></th>

                                                

                                                <td>							

                                                        <div class="form-group">

                                                        <input required type="text" class="form-control" id="kerajinan" value="100000" name="kerajinan" onkeyup="hitungtotal()" autocomplete="off" />

                                                        </div>

                                                </td>

                                                </tr>

                                                <tr>

                                                    <th colspan="3"><center>Total Pendapatan Kotor</center></th>

                                                

                                                <td>							

                                                        <div class="form-group">

                                                        <input  type="text" class="form-control" id="nominal_kotor" name="nominal_kotor"  autocomplete="off" />

                                                        </div>

                                                </td>

                                                </tr>

                                                <tr>

                                                    <th colspan="4"><center>Potongan</center></th>

                                                </tr>

                                                <tr>

                                                    <th>Keterangan</th>

                                                    <th>Perpoin</th>

                                                    <th>Total Poin </th>

                                                    <th>Nominal</th>

                                                </tr>

                                                <tr>

                                                    <td>Telat</td>

                                                    <td><div class="form-group">

                                                        <input readonly type="text" class="form-control" id="telat" onkeyup="hitungtotal()"  name="telat" placeholder="Digenerate Otomatis" value="1000" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>

                                                        <div class="form-group">

                                                        <input type="number" class="form-control" id="total_telat" onkeyup="hitungtotal()"  name="total_telat" placeholder="Digenerate Otomatis" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td>							

                                                        <div class="form-group">

                                                        <input required readonly type="text" class="form-control" id="nominal_telat" onkeyup="hitungtotal()" name="nominal_telat" placeholder="Digenerate Otomatis"" autocomplete="off" />

                                                        </div>

                                                    </td>	

                                                </tr>

                                                <tr>

                                                    <td>Kasbon</td>

                                                    <td>

                                                    </td>

                                                    <td>

                                                

                                                    </td>

                                                    <td>							

                                                        <div class="form-group">

                                                        <input required type="number" class="form-control" id="kasbon2" onkeyup="hitungtotal()"  name="kasbon2" placeholder="Masukan Nilainya"  autocomplete="off" />

                                                        </div>

                                                    </td>	

                                                </tr>	

                                                <tr>

                                                    <td>Kasbon Lainnya</td>

                                                    <td colspan="2"><div class="form-group">

                                                        <input type="text" class="form-control" id="ket_kasbon"   name="ket_kasbon" placeholder="Keterangan"  autocomplete="off" />

                                                        </div>

                                                    </td>



                                                    <td>							

                                                        <div class="form-group">

                                                        <input  required type="number" class="form-control" id="kasbon" onkeyup="hitungtotal()" name="kasbon" placeholder="Masukan Nilainya"" autocomplete="off" />

                                                        </div>

                                                    </td>	

                                                </tr>

                                                <tr>

                                                    <td>Pinalty</td>

                                                    <td colspan ="2"><div class="form-group">

                                                        <input required type="text" class="form-control" id="pinalty" onkeyup="hitungtotal()"  name="pinalty" placeholder="keterangan Pinalty" autocomplete="off" />

                                                        </div>

                                                    </td>



                                                    <td>							

                                                        <div class="form-group">

                                                        <input required  type="text" class="form-control" id="nominal_pinalty" onkeyup="hitungtotal()" name="nominal_pinalty"  autocomplete="off" />

                                                        </div>

                                                    </td>	

                                                </tr>

                                                <tr>

                                                    <td>BPJS Kesehatan & Tenaga Kerja</td>

                                                    <td><div class="form-group">

                                                        <input required type="text" class="form-control" id="bpjskes" onkeyup="hitungtotal()"  name="bpjskes" placeholder="BPJS Kesehatan" autocomplete="off" />

                                                        </div>

                                                    </td>

                                                    <td><div class="form-group">

                                                        <input required type="text" class="form-control" id="bpjsnaker" onkeyup="hitungtotal()"  name="bpjsnaker" placeholder="BPJS Tenaga Kerja" autocomplete="off" />

                                                        </div>

                                                    </td>



                                                    <td>							

                                                        <div class="form-group">

                                                        <input readonly  required type="text" class="form-control" id="nominal_bpjs" onkeyup="hitungtotal()" name="nominal_bpjs"  autocomplete="off" />

                                                        </div>

                                                    </td>	

                                                </tr>

                                                <tr>

                                                    <th colspan="3"><center>Total Potongan</center></th>

                                                

                                                <td>							

                                                        <div class="form-group">

                                                        <input  readonly type="text" class="form-control" id="nominal_potongan" onkeyup="hitungtotal()" name="nominal_potongan"  autocomplete="off" />

                                                        </div>

                                                </td>

                                                </tr>

                                                <tr>

                                                    <th colspan="3"><center>Total 	Gaji</center></th>

                                                

                                                <td>							

                                                        <div class="form-group">

                                                        <input  readonly type="text" class="form-control" id="gajirp" name="gajirp"  autocomplete="off" />

                                                        <input  type="hidden" class="form-control" id="nominal_gaji" name="nominal_gaji"  autocomplete="off" />

                                                        </div>

                                                </td>

                                                </tr>

                                                

                                            </tbody>

                                        </table>

                                                                            <button type="submit" class="btn btn-primary">Save changes</button>



                                    </div>

                                    </form>

                                </div>

                                <div class="card" id="createpenalty" style="display: none;">

                                    <h5 class="card-title m-3">Form Manual Penalty </h5>

                                    <form id="submitpenaltyform">

                                    <div class="card-body pa-3">

                                        <div class="form-group">

                                            <label for="karyawan_2">Nama Karyawan</label>

                                            <select class="form-control select_group karyawan" id="karyawan_2" name="karyawan_2" style="width:100%;"  required>

                                                <option value=""></option>

                                            </select>

                                            <input type="hidden" class="form-control" id="kode_pegawai" name="kode_pegawai"  required value="0" placeholder="Cth : 25 " autocomplete="off" />

                                        </div>

                                        <div class="form-group">

                                            <label for="alasan">Alasan</label>

                                            <input type="text" class="form-control" id="alasan" name="alasan"  required value="0" placeholder="Cth : 25 " autocomplete="off" />

                                        </div>

                                        <div class="form-group">

                                            <label for="waktu_pen">Tanggal</label>

                                            <input type="date" class="form-control" id="waktu_pen" name="waktu_pen" placeholder="Cth : 25 " autocomplete="off" />

                                        </div>

                                        <div class="form-group">

                                            <label for="poin_pen">Poin</label>

                                            <input type="number" class="form-control" id="poin_pen" name="poin_pen"  placeholder="1 Poin = Rp. 1000 " autocomplete="off" />

                                        </div>

                                        <button type="submit" class="btn btn-primary">Save changes</button>



                                    </div>

                                    </form>

                                </div>
                                
                                
                                <div class="card" id="createabsen" style="display: none;">

                                    <h5 class="card-title m-3">Form Manual Absen </h5>

                                    <form id="submitabsenform">

                                    <div class="card-body pa-3">

                                        <div class="form-group">

                                            <label for="karyawan_3">Nama Karyawan</label>

                                            <select class="form-control select_group karyawan" id="karyawan_3" name="karyawan_3" style="width:100%;"  required>

                                                <option value=""></option>

                                            </select>

                                            <input type="hidden" class="form-control" id="kode_pegawai2" name="kode_pegawai2"  required value="0" placeholder="Cth : 25 " autocomplete="off" />
                                            <input type="hidden" class="form-control" id="nama_pegawai" name="nama_pegawai"  required value="0" placeholder="Cth : 25 " autocomplete="off" />

                                        </div>


                                        <div class="form-group">

                                            <label for="tgl_absen">Tanggal</label>

                                            <input type="date" class="form-control" id="tgl_absen" name="tgl_absen" placeholder="Cth : 25 " autocomplete="off" />

                                        </div>

                                        <div class="form-group">

                                            <label for="jam_masuk">Jam Masuk</label>

                                            <input type="text" class="form-control" id="jam_masuk" name="jam_masuk"  autocomplete="off" />

                                        </div>
                                        <div class="form-group">

                                            <label for="jam_pulang">Jam Pulang</label>

                                            <input type="text" class="form-control" id="jam_pulang" name="jam_pulang"   autocomplete="off" />

                                        </div>

                                        <div class="form-group">

                                            <label for="keterangan_absen">Keterangan Absen</label>

                                            <input type="text" class="form-control" id="keterangan_absen" name="keterangan_absen"  value="Bekerja Di Kantor" autocomplete="off" />

                                        </div>
                                        <div class="form-group">

                                            <label for="poin_pen">Status Absen</label>

                                            <select class="form-control" id="status" name="status">
                                            <option value="1" selected="selected">Tepat Waktu</option>
                                            <option value="2">Terlambat</option>
                                            </select>

                                        </div>

                                        <button type="submit" class="btn btn-primary">Save changes</button>



                                    </div>

                                    </form>

                                </div>
                                
                                
                                <div class="card" id="penalty" style="display: none;">

                                    <h5 class="card-title m-3">Penalty</h5>
                                    <a href="#" class="btn btn-primary" onclick="showTab('createpenalty')">Tambah</a>

                                    <div class="card-body pa-3">

                                        <div class="table-wrap">

                                            <div class="table-responsive m-3">

                                                <table id="penaltyTable" class="table table-hover mb-0">

                                                    <thead>

                                                        <tr>

                                                            <th>ID </th>

                                                            <th>Nama </th>

                                                            <th>Tanggal</th>

                                                            <th>Alasan</th>

                                                            <th>Poin</th>

                                                            <th>Kode Absen</th>

                                                            <th>Action</th>

                                                        </tr>

                                                    </thead>

                                                    <tbody>

                                                        <!-- Data lembur akan ditampilkan di sini -->

                                                    </tbody>

                                                </table>

                                            </div>

                                        </div>

                                    </div>

                                </div>

							</div>

						</div>

                    </div>

                </div>







    </div>



                                     

    <script src="https://texapp.is3.cloudhost.id/api/v2/assets/vendors/sweetalert2/sweetalert2.min.js"></script>

  <script src="https://texapp.is3.cloudhost.id/api/v2/assets/vendors/promise-polyfill/polyfill.min.js"></script>

  <!-- Library DataTables Buttons -->

<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>

<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>

<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/pdfmake.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/vfs_fonts.js"></script> 

<script type="text/javascript">

var base_url2 = "<?php echo base_url(); ?>";

var tableSJ;



        $(document).ready(function () {

            $(".select_group").select2();
            loadAbsensiData();

            $('#absensiTable').on('click', '.btn-edit', function () {

                var id = $(this).data('id'); // Ambil ID dari tombol
                $.ajax({
                url: base_url2 + 'admin/get/absenbyid/' + id,
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                    var modalBody = `


                        <div class="mb-3">
                        <label for="nama" class="form-label">Nama Karyawan</label>
                        <input type="text" class="form-control" id="nama" name="nama" value="${response.data.nama_pegawai}">
                        </div>

                        <div class="mb-3">
                        <label for="tanggal" class="form-label">Tanggal</label>
                        <input type="date" class="form-control" id="tanggal" name="tanggal" value="${response.data.tgl}">
                        </div>



                        <div class="mb-3">
                        <label for="jam_masuk" class="form-label">Jam Masuk</label>
                        <input type="text" class="form-control" id="jam_masuk" name="jam_masuk" value="${response.data.jam_masuk}" autocomplete="off" />
                        </div>

                        <div class="mb-3">
                        <label for="jam_pulang" class="form-label">Jam Pulang</label>
                        <input type="text" class="form-control" id="jam_pulang" name="jam_pulang" value="${response.data.jam_pulang}" autocomplete="off" />
                        </div>

                        <div class="mb-3">
                        <label for="ket_absen" class="form-label">Keterangan Absen</label>
                        <input type="text" class="form-control" id="ket_absen" name="ket_absen" value="${response.data.keterangan_absen}">
                        </div>

                        <div class="mb-3">
                        <label for="status" class="form-label">Status Absen</label>
                        <select class="form-control" id="status" name="status">
                        <option value="1" ${response.data.status_pegawai == 1 ? "selected='selected'" : ""}>Tepat Waktu</option>
                        <option value="2" ${response.data.status_pegawai != 1 ? "selected='selected'" : ""}>Terlambat</option>
                        </select>
                        </div>

                        <input type="hidden" id="absensi_id" name="absensi_id" value="${response.data.id_absen}">

                    `;

                    $('#editAbsensiModal .modal-body').html(modalBody);
                    $('#editAbsensiModal').modal('show');
                    } else {
                    alert('Data tidak ditemukan!');
                    }
                },

                error: function () {
                    alert('Gagal mengambil data.');
                }
                });

            });

            $('#gajiTable').on('click', '.btn-edit', function () {

                var id = $(this).data('id'); // Ambil ID dari tombol
                $.ajax({
                url: base_url2 + 'admin/get/gajibyid/' + id,
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    if (response.success) {
                    var modalBody = `


                        <div class="mb-3">
                        <label for="nama" class="form-label">Nama Karyawan</label>
                        <input type="text" class="form-control" id="nama" name="nama" value="${response.data.nama}">
                        </div>

                        <div class="form-group">
                            <label for="qty_1">Jumlah Kehadiran</label>
                             <input type="text" class="form-control" id="qty_1" name="qty_1" onkeyup="hitungtotal()" required="" value="${response.data.jumlah_kehadiran}" placeholder="Cth : 25 " autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="waktu">Periode Gajian</label>
                            <input type="month" class="form-control" id="waktu" name="waktu" onkeyup="hitungtotal()" placeholder="Cth : 25 " value="${response.data.periode_gajian}" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="gapok">Gaji Pokok</label>
                            <input type="number" class="form-control" id="gapok" name="gapok" value="${response.data.gaji_pokok}" onkeyup="hitungtotal()" placeholder="3000000 " autocomplete="off">
                        </div>
                        <table class="table table-bordered table-striped">
                            <tbody>
                                <tr>
                                    <th colspan="4"><center>Penghasilan</center></th>
                                </tr>
                                <tr>
                                    <th>Keterangan</th>
                                    <th>Harian</th>
                                    <th>Hari Kerja</th>
                                    <th>Nominal</th>
                                </tr>
                                <tr>
                                    <td>Uang Makan</td>
                                    <td><div class="form-group">
                                            <input readonly="" type="text" class="form-control" id="qtycur_1" onkeyup="hitungtotal()" value="${response.data.uang_makan}" name="qtycur_1" placeholder="Digenerate Otomatis" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input readonly="" type="text" class="form-control" id="uangmakanqty_1" onkeyup="hitungtotal()" value="${response.data.hari_kerja}" name="uangmakanqty_1" placeholder="Digenerate Otomatis" autocomplete="off">
                                        </div>
                                   </td>
                                    <td>							
                                        <div class="form-group">
                                            <input readonly="" type="text" class="form-control" data-target="uang1" id="qtyfinal_1" value="${response.data.nominal_uang_makan}" name="qtyfinal_1" placeholder="Digenerate Otomatis" "="" autocomplete="off">
                                        </div>
                                    </td>	
                                </tr>
                                <tr>
                                    <td>Tunjangan Kesehatan</td>
                                    <td><div class="form-group">
                                            <input readonly="" type="text" class="form-control" id="hariankesehatan_1" value="${response.data.tunjangan_kesehatan}" onkeyup="hitungtotal()" name="hariankesehatan_1" placeholder="Digenerate Otomatis" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input readonly="" type="text" class="form-control" id="kesehatan_1" value="${response.data.kesehatan}" onkeyup="hitungtotal()" name="kesehatan_1" placeholder="Digenerate Otomatis" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>							
                                        <div class="form-group">
                                            <input readonly="" type="text" class="form-control" data-target="uang2" id="uangkesehatan_1" value="${response.data.nominal_tunjangan_kesehatan}" name="uangkesehatan_1" placeholder="Digenerate Otomatis" "="" autocomplete="off">
                                        </div>
                                    </td>	
                                </tr>						
                                <tr>
                                    <td>Tunjangan Kendaraan</td>
                                    <td><div class="form-group">
                                            <input readonly="" type="text" class="form-control" id="hariankendaraan_1" onkeyup="hitungtotal()" value="${response.data.tunjangan_kendaraan}" name="hariankendaraan_1" placeholder="Digenerate Otomatis" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input readonly="" type="text" class="form-control" id="kendaraan_1" onkeyup="hitungtotal()" value="${response.data.kendaraan}" name="kendaraan_1" placeholder="Digenerate Otomatis" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>							
                                        <div class="form-group">
                                            <input readonly="" type="text" class="form-control" data-target="uang3" id="uangkendaraan_1" value="${response.data.nominal_tunjangan_kendaraan}" name="uangkendaraan_1" placeholder="Digenerate Otomatis" "="" autocomplete="off">
                                        </div>
                                    </td>	
                                </tr>
                                <tr>
                                    <td>Lembur</td>
                                    <td><div class="form-group">
                                            <input readonly="" type="text" class="form-control" id="harianLembur_1" onkeyup="hitungtotal()" value="${response.data.lembur_harian}" name="harianLembur_1" placeholder="Digenerate Otomatis" value="13000" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input readonly="" type="text" class="form-control" id="total_lembur" onkeyup="hitungtotal()" value="${response.data.total_lembur}" name="total_lembur" placeholder="Digenerate Otomatis" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>							
                                        <div class="form-group">
                                            <input readonly="" type="text" data-target="uang4" class="form-control" id="uangLembur_1" value="${response.data.lembur_lainnya}" name="uangLembur_1" placeholder="Digenerate Otomatis" "="" autocomplete="off">
                                        </div>
                                    </td>	
                                </tr>
                                <tr>
                                    <td>Lembur Lainnya</td>
                                    <td><div class="form-group">
                                            <input readonly="" type="text" class="form-control" id="harianLembur_2" onkeyup="hitungtotal()" value="${response.data.lembur_lainnya}" name="harianLembur_2" placeholder="Digenerate Otomatis" value="15000" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input readonly="" type="number" class="form-control"  id="total_lembur2" onkeyup="hitungtotal()" value="${response.data.total_lembur_lainnya}" name="total_lembur2" placeholder="Digenerate Otomatis" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>							
                                        <div class="form-group">
                                            <input readonly="" type="text" data-target="uang" class="form-control" id="uangLembur_2" value="${response.data.nominal_lembur_lainnya}" name="uangLembur_2" placeholder="Digenerate Otomatis" "="" autocomplete="off">
                                        </div>
                                    </td>	
                                </tr>
                                <tr>
                                    <td>Double Shift</td>
                                    <td><div class="form-group">
                                            <input type="text" class="form-control" id="hariands" onkeyup="hitungtotal()" value="${response.data.double_shift}" name="hariands" placeholder="Digenerate Otomatis" value="120000" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input type="number" class="form-control" id="total_ds" onkeyup="hitungtotal()" value="${response.data.total_double_shift}" name="total_ds" placeholder="Masukan berapa kali" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>							
                                        <div class="form-group">
                                            <input readonly="" type="text" class="form-control" id="uangds" name="uangds" value="${response.data.nominal_double_shift}" placeholder="Digenerate Otomatis" "="" autocomplete="off">
                                        </div>
                                    </td>	
                                </tr>
                                <tr>
                                    <th colspan="3"><center>Uang Kerajinan</center></th>     
                                    <td>							
                                        <div class="form-group">
                                            <input required="" type="text" class="form-control" id="kerajinan" value="${response.data.uang_kerajinan}" name="kerajinan" onkeyup="hitungtotal()" autocomplete="off">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th colspan="3"><center>Total Pendapatan Kotor</center></th>
                                    <td>							
                                        <div class="form-group">
                                            <input type="text" class="form-control" value="${response.data.total_pendapatan_kotor}" id="nominal_kotor" name="nominal_kotor" autocomplete="off">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th colspan="4"><center>Potongan</center></th>
                                </tr>
                                <tr>
                                    <th>Keterangan</th>
                                    <th>Perpoin</th>
                                    <th>Total Poin </th>
                                    <th>Nominal</th>
                                </tr>
                                <tr>
                                    <td>Telat</td>
                                    <td><div class="form-group">
                                            <input readonly="" type="text" class="form-control" id="telat" onkeyup="hitungtotal()" name="telat" placeholder="Digenerate Otomatis" value="${response.data.telat}" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <input type="number" class="form-control" id="total_telat" onkeyup="hitungtotal()" value="${response.data.total_telat}" name="total_telat" placeholder="Digenerate Otomatis" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>							
                                        <div class="form-group">
                                            <input required="" readonly="" type="text" class="form-control" id="nominal_telat" onkeyup="hitungtotal()" value="${response.data.nominal_telat}" name="nominal_telat" placeholder="Digenerate Otomatis" "="" autocomplete="off">
                                        </div>
                                    </td>	
                                </tr>
                                <tr>
                                    <td>Kasbon</td>
                                    <td></td>
                                    <td></td>
                                    <td>							
                                        <div class="form-group">
                                            <input required="" type="number" class="form-control" id="kasbon2" onkeyup="hitungtotal()" name="kasbon2" value="${response.data.kasbon}" placeholder="Masukan Nilainya" autocomplete="off">
                                        </div>
                                    </td>	
                                </tr>	
                                <tr>
                                    <td>Kasbon Lainnya</td>
                                    <td colspan="2">
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="ket_kasbon" name="ket_kasbon" value="${response.data.kasbon_lainnya}" placeholder="Keterangan" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>							
                                        <div class="form-group">
                                            <input required="" type="number" class="form-control" id="kasbon" onkeyup="hitungtotal()" name="kasbon" placeholder="Masukan Nilainya" "=""  value="${response.data.nominal_kasbon}"autocomplete="off">
                                        </div>
                                    </td>	
                                </tr>
                                <tr>
                                    <td>Pinalty</td>
                                    <td colspan="2">
                                        <div class="form-group">
                                            <input required="" type="text" class="form-control" id="pinalty" onkeyup="hitungtotal()" value="${response.data.pinalty}" name="pinalty" placeholder="keterangan Pinalty" autocomplete="off">
                                        </div>
                                    </td>
                                   <td>							
                                        <div class="form-group">
                                           <input required="" type="text" class="form-control" id="nominal_pinalty" onkeyup="hitungtotal()" value="${response.data.nominal_pinalty}" name="nominal_pinalty" autocomplete="off">
                                        </div>
                                    </td>	
                                </tr>
                                <tr>
                                    <td>BPJS Kesehatan &amp; Tenaga Kerja</td>
                                    <td>
                                        <div class="form-group">
                                            <input required="" type="text" class="form-control" id="bpjskes" onkeyup="hitungtotal()" value="${response.data.bpjs_kesehatan}" name="bpjskes" placeholder="BPJS Kesehatan" autocomplete="off">
                                        </div>
                                    </td>
                                    <td><div class="form-group">
                                            <input required="" type="text" class="form-control" id="bpjsnaker" onkeyup="hitungtotal()" value="${response.data.bpjs_tenaga_kerja}" name="bpjsnaker" placeholder="BPJS Tenaga Kerja" autocomplete="off">
                                        </div>
                                    </td>
                                    <td>							
                                        <div class="form-group">
                                            <input readonly="" required="" type="text" class="form-control" id="nominal_bpjs" onkeyup="hitungtotal()" value="${response.data.nominal_bpjs}" name="nominal_bpjs" autocomplete="off">
                                        </div>
                                    </td>	
                                </tr>
                                <tr>
                                    <th colspan="3"><center>Total Potongan</center></th>
                                    <td>							
                                        <div class="form-group">
                                            <input readonly="" type="text" class="form-control" id="nominal_potongan" onkeyup="hitungtotal()" value="${response.data.total_potongan}" name="nominal_potongan" autocomplete="off">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th colspan="3"><center>Total 	Gaji</center></th>                                              
                                    <td>							
                                        <div class="form-group">
                                            <input readonly="" type="text" class="form-control" id="gajirp" value="${response.data.total_gaji}" name="gajirp" autocomplete="off">
                                            <input type="hidden" class="form-control" id="nominal_gaji" value="${response.data.total_gaji}" name="nominal_gaji" autocomplete="off">
                                        </div>
                                    </td>
                                </tr>                
                            </tbody>
                        </table>

                        <input type="hidden" id="gaji_id" name="gaji_id" value="${response.data.id}">

                    `;

                    $('#editGajiModal .modal-body').html(modalBody);
                    $('#editGajiModal').modal('show');
                    } else {
                    alert('Data tidak ditemukan!');
                    }
                },

                error: function () {
                    alert('Gagal mengambil data.');
                }
                });

            });
            $('#lemburTable').on('click', '.btn-edit', function () {

                var id = $(this).data('id'); // Ambil ID dari tombol



                // Lakukan AJAX untuk mendapatkan detail berdasarkan ID

                $.ajax({

                url: base_url2 + 'admin/get/lemburbyid/' + id,

                type: 'GET',

                dataType: 'json',

                success: function (response) {

                    if (response.success) {

                    // Isi modal dengan data dari server

                    var modalBody = `

                    <div class="mb-3">

                    <img src="https://hrm.texprint.id/${response.data.image}" width="150" height="150" class="img-circle">



                        </div>

                        <div class="mb-3">

                        <label for="nama" class="form-label">Nama</label>

                        <input type="text" class="form-control" id="nama" name="nama" value="${response.data.nama}">

                        </div>

                        <div class="mb-3">

                        <label for="deskripsi" class="form-label">Deskripsi</label>

                        <textarea class="form-control" id="deskripsi" name="deskripsi">${response.data.deskripsi}</textarea>

                        </div>

                        <div class="mb-3">

                        <label for="jumlah" class="form-label">Total Jam</label>

                        <input type="number" class="form-control" id="jumlah" name="jumlah" value="${response.data.jumlah}" autocomplete="off" />

                        </div>

                        <div class="mb-3">

                        <label for="tanggal" class="form-label">Tanggal</label>

                        <input type="date" class="form-control" id="tanggal" name="tanggal" value="${response.data.tanggal}">

                        </div>

                        <div class="mb-3">

                        <label for="jml_approve" class="form-label">Total Approve</label>

                        <input type="number" class="form-control" id="jml_approve" name="jml_approve" value="${response.data.jml_approve}" autocomplete="off" />

                        </div>

                        <div class="mb-3">

                        <label for="status" class="form-label">Status</label>

                        <select class="form-control" id="status" name="status">

                        <option value="1" ${response.data.status == 1 ? "selected='selected'" : ""}>Lembur</option>

                        <option value="2" ${response.data.status != 1 ? "selected='selected'" : ""}>Lembur + Nunggu Mesin</option>

                        </select>

                        </div>

                        <div class="mb-3">

                        <label for="approve" class="form-label">Status</label>

                        <select class="form-control" id="approve" name="approve">

                        <option value="1" ${response.data.approve == 1 ? "selected='selected'" : ""}>Approve</option>

                        <option value="2" ${response.data.approve != 1 ? "selected='selected'" : ""}>DITOLAK</option>

                        </select>

                        </div>

                        <input type="hidden" id="lembur_id" name="lembur_id" value="${response.data.id}">

                    `;

                    $('#editLemburModal .modal-body').html(modalBody);

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

                    } else {

                    alert('Data tidak ditemukan!');

                    }

                },

                error: function () {

                    alert('Gagal mengambil data.');

                }

                });

            });

            $('#penaltyTable').on('click', '.btn-edit', function () {

                var id = $(this).data('id'); // Ambil ID dari tombol



                // Lakukan AJAX untuk mendapatkan detail berdasarkan ID

                $.ajax({

                url: base_url2 + 'admin/get/getpenaltybyid/' + id,

                type: 'GET',

                dataType: 'json',

                success: function (response) {

                    if (response.success) {

                    // Isi modal dengan data dari server

                    var modalBody = `

                        <div class="mb-3">

                        <label for="nama" class="form-label">Nama</label>

                        <input type="text" class="form-control" id="nama" name="nama" value="${response.data.kode_pegawai}">

                        </div>

                        <div class="mb-3">

                        <label for="deskripsi" class="form-label">Deskripsi</label>

                        <textarea class="form-control" id="deskripsi" name="deskripsi">${response.data.reason}</textarea>

                        </div>

                        <div class="mb-3">

                        <label for="poin" class="form-label">Total Point</label>

                        <input type="number" class="form-control" id="poin" name="poin" value="${response.data.poin}" autocomplete="off" />

                        </div>

                        <div class="mb-3">

                        <label for="tanggal" class="form-label">Tanggal</label>

                        <input type="date" class="form-control" id="tanggal" name="tanggal" value="${response.data.tgl_absen}">

                        </div>

                        <div class="mb-3">

                        <label for="jml_approve" class="form-label">Kode Absen</label>

                        <input type="text" class="form-control" id="jml_approve" name="jml_approve" value="${response.data.kode_absen}" autocomplete="off" />

                        </div>

                        <input type="hidden" id="penalty_id" name="penalty_id" value="${response.data.id}">

                    `;

                    $('#editPenaltyModal .modal-body').html(modalBody);

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

                    } else {

                    alert('Data tidak ditemukan!');

                    }

                },

                error: function () {

                    alert('Gagal mengambil data.');

                }

                });

            });

            $('#karyawan_1').on('change', function() {

                var selectedId = $(this).val();

                $.getJSON("<?= site_url('admin/get/totallemburbyid/') ?>" + selectedId, function(response) {

                    if (response.success) {

                        $('#total_lembur').val(response.data.jml_approve);

                    } else {

                        console.error("Failed to retrieve data.");

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

                    }

                }).fail(function(jqXHR, textStatus, errorThrown) {

                    console.error("Error loading total lembur data: " + textStatus, errorThrown);

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

                });



                $.getJSON("<?= site_url('admin/get/totalmesinbyid/') ?>" + selectedId, function(response) {

                    if (response.success) {

                        $('#total_lembur2').val(response.data.status_count);

                    } else {

                        console.error("Failed to retrieve data.");

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

                    }

                }).fail(function(jqXHR, textStatus, errorThrown) {

                    console.error("Error loading total lembur data: " + textStatus, errorThrown);

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

                });



                getKaryawanData(selectedId);

                getTotalPenaltyid(selectedId);

            });

            $('#editLemburForm').on('submit', function (e) {

                e.preventDefault();



                var formData = $(this).serialize();



                $.ajax({

                url: base_url2 + 'admin/post/updatelembur',

                type: 'POST',

                data: formData,

                dataType: 'json',

                success: function (response) {

                    if (response.success) {

                    $('#editLemburModal').modal('hide'); // Tutup modal

                    tableSJ.ajax.reload(null, false); // Refresh tabel tanpa mengubah halaman

                    Swal.fire({

                        icon: 'success',

                        title: 'Sukses!',

                        text: 'Data berhasil diperbarui!',

                    });

                    } else {

                        Swal.fire({

                        icon: 'error',

                        title: 'Gagal!',

                        text: response.message,

                    });

                    }



                },

                error: function () {

                    alert('Terjadi kesalahan saat memperbarui data.');

                    console.log(response);

                }

                });

            });
            $('#editAbsensiModalForm').on('submit', function (e) {

                e.preventDefault();



                var formData = $(this).serialize();



                $.ajax({

                url: base_url2 + 'admin/post/updateabsensi',

                type: 'POST',

                data: formData,

                dataType: 'json',

                success: function (response) {

                    if (response.success) {

                    $('#editAbsensiModal').modal('hide'); // Tutup modal


                    Swal.fire({

                        icon: 'success',

                        title: 'Sukses!',

                        text: 'Data berhasil diperbarui!',

                    });
                    tableAbsensi.ajax.reload(null, false);

                    } else {

                        Swal.fire({

                        icon: 'error',

                        title: 'Gagal!',

                        text: response.message,

                    });

                    }



                },

                error: function () {

                    alert('Terjadi kesalahan saat memperbarui data.');

                    console.log(response);

                }

                });

            });
            $('#editGajiModalForm').on('submit', function (e) {
                e.preventDefault();
                var formData = $(this).serialize();

                $.ajax({

                url: base_url2 + 'admin/post/updategaji',

                type: 'POST',

                data: formData,

                dataType: 'json',

                success: function (response) {

                    if (response.success) {

                    $('#editGajiModal').modal('hide'); // Tutup modal


                    Swal.fire({

                        icon: 'success',

                        title: 'Sukses!',

                        text: 'Data berhasil diperbarui!',

                    });
                    tableSJgaji.ajax.reload(null, false);

                    } else {

                        Swal.fire({

                        icon: 'error',

                        title: 'Gagal!',

                        text: response.message,

                    });

                    }



                },

                error: function () {

                    alert('Terjadi kesalahan saat memperbarui data.');

                    console.log(response);

                }

                });

                });            


            $('#submitgajiform').on('submit', function (e) {

                e.preventDefault();



                var formData = $(this).serialize();



                $.ajax({

                url: base_url2 + 'admin/post/creategaji',

                type: 'POST',

                data: formData,

                dataType: 'json',

                success: function (response) {

                    if (response.success) {

                    Swal.fire({

                        icon: 'success',

                        title: 'Sukses!',

                        text: 'Data berhasil diperbarui!',

                    }).then(() => {

                        // Panggil fungsi showTab untuk kembali ke tab gaji

                        showTab('gaji');

                        $('#submitgajiform')[0].reset();



                    });

                    tableSJgaji.ajax.reload(null, false);

                    } else {

                    Swal.fire({

                        icon: 'error',

                        title: 'Gagal!',

                        text: response.message,

                    });

                    }

                },

                error: function () {

                    alert('Terjadi kesalahan saat memperbarui data.');

                    console.log(response);

                }

                });

            });

            $('#submitpenaltyform').on('submit', function (e) {

                e.preventDefault();



                var formData = $(this).serialize();



                $.ajax({

                url: base_url2 + 'admin/post/createpenalty',

                type: 'POST',

                data: formData,

                dataType: 'json',

                success: function (response) {

                    if (response.success) {

                    Swal.fire({

                        icon: 'success',

                        title: 'Sukses!',

                        text: 'Data berhasil diperbarui!',

                    }).then(() => {

                        // Panggil fungsi showTab untuk kembali ke tab gaji

                        showTab('penalty');

                        $('#submitpenaltyform')[0].reset();



                    });

                    tableSJpenalty.ajax.reload(null, false);

                    } else {

                    Swal.fire({

                        icon: 'error',

                        title: 'Gagal!',

                        text: response.message,

                    });

                    }

                },

                error: function () {

                    alert('Terjadi kesalahan saat memperbarui data.');

                    console.log(response);

                }

                });

            });        


            $('#submitabsenform').on('submit', function (e) {

                e.preventDefault();



                var formData = $(this).serialize();



                $.ajax({

                url: base_url2 + 'admin/post/createabsen',

                type: 'POST',

                data: formData,

                dataType: 'json',

                success: function (response) {

                    if (response.success) {

                    Swal.fire({

                        icon: 'success',

                        title: 'Sukses!',

                        text: 'Data berhasil diperbarui!',

                    }).then(() => {

                        // Panggil fungsi showTab untuk kembali ke tab gaji

                        showTab('absensi');

                        $('#submitabsenform')[0].reset();



                    });

                    tableAbsensi.ajax.reload(null, false);

                    } else {

                    Swal.fire({

                        icon: 'error',

                        title: 'Gagal!',

                        text: response.message,

                    });

                    }

                },

                error: function () {

                    alert('Terjadi kesalahan saat memperbarui data.');

                    console.log(response);

                }

                });

            });   
            $('#editPenaltyForm').on('submit', function (e) {

                e.preventDefault();



                var formData = $(this).serialize();



                $.ajax({

                url: base_url2 + 'admin/post/updatepenalty',

                type: 'POST',

                data: formData,

                dataType: 'json',

                success: function (response) {

                    if (response.success) {

                    $('#editPenaltyModal').modal('hide'); // Tutup modal

                    tableSJpenalty.ajax.reload(null, false); // Refresh tabel tanpa mengubah halaman

                    Swal.fire({

                        icon: 'success',

                        title: 'Sukses!',

                        text: 'Data berhasil diperbarui!',

                    });

                    } else {

                    Swal.fire({

                        icon: 'error',

                        title: 'Gagal!',

                        text: response.message,

                    });

                    }

                    console.log(response);

                },

                error: function () {

                    alert('Terjadi kesalahan saat memperbarui data.');

                    console.log(response);

                }

                });

            });
                

        });





        /////////////////////////////////////////////END DOCUMENT READY FUNCTION///////////////////////////////////////////////////////////////////









        function loadkaryawan() {

            $.getJSON("<?= site_url('admin/get/karyawan') ?>", function(response) {

                var select = $('#karyawan_1');

                select.empty(); // Kosongkan opsi yang ada

                select.append('<option value=""></option>'); // Tambahkan opsi kosong



                $.each(response.data, function(key, value) {

                select.append('<option value="' + value.id_pegawai + '">' + value.nama_lengkap + '</option>');

                });

            }).fail(function(jqXHR, textStatus, errorThrown) {

            console.error("Error loading karyawan data: " + textStatus, errorThrown);

            });

        }
        function loadkaryawanpen() {

            $.getJSON("<?= site_url('admin/get/karyawan') ?>", function(response) {

                var select = $('#karyawan_2');

                select.empty(); // Kosongkan opsi yang ada

                select.append('<option value=""></option>'); // Tambahkan opsi kosong

                var kode_pegawai = $('#kode_pegawai');


                $.each(response.data, function(key, value) {

                select.append('<option value="' + value.id_pegawai + '">' + value.nama_lengkap + '</option>');

                });
                select.change(function() {
                    var selectedId = $(this).val();
                    var selectedKaryawan = response.data.find(karyawan => karyawan.id_pegawai == selectedId);
                    if (selectedKaryawan) {
                        kode_pegawai.val(selectedKaryawan.kode_pegawai); // Set nilai kode_pegawai
                    } else {
                        kode_pegawai.val(''); // Kosongkan jika tidak ada yang dipilih
                    }
                });

            }).fail(function(jqXHR, textStatus, errorThrown) {

            console.error("Error loading karyawan data: " + textStatus, errorThrown);

            });

        }

         function loadkaryawanabs() {

            $.getJSON("<?= site_url('admin/get/karyawan') ?>", function(response) {

                var select = $('#karyawan_3');

                select.empty(); // Kosongkan opsi yang ada

                select.append('<option value=""></option>'); // Tambahkan opsi kosong

                var kode_pegawai = $('#kode_pegawai2');
                var nama_pegawai = $('#nama_pegawai');

                $.each(response.data, function(key, value) {

                select.append('<option value="' + value.id_pegawai + '">' + value.nama_lengkap + '</option>');

                });
                select.change(function() {
                    var selectedId = $(this).val();
                    var selectedKaryawan = response.data.find(karyawan => karyawan.id_pegawai == selectedId);
                    if (selectedKaryawan) {
                        kode_pegawai.val(selectedKaryawan.kode_pegawai); // Set nilai kode_pegawai
                        nama_pegawai.val(selectedKaryawan.nama_lengkap);
                    } else {
                        kode_pegawai.val(''); // Kosongkan jika tidak ada yang dipilih
                         nama_pegawai.val('');

                    }
                });

            }).fail(function(jqXHR, textStatus, errorThrown) {

            console.error("Error loading karyawan data: " + textStatus, errorThrown);

            });

        }

        function getTotalPenaltyid(selectedId)  { 

                $.ajax({        

                url: base_url2 + 'admin/get/totalpenalty/'+ selectedId,        

                type: 'GET',        

                dataType: 'json',

                success:function(response) {        

                    // setting the rate value into the rate input fiel         

                    $("#total_telat").val(response.total_poin);

                    hitungtotal();    } // /success      

                }); // /ajax function to fetch the product data     

        }



        function getKaryawanData(selectedId)  { 

            var karyawan_id = $("#karyawan_"+1).val();        

            if(karyawan_id == "") {      

                $("#qtycur_"+1).val("");               

            } 

            else {

                $.ajax({        

                url: base_url2 + 'admin/post/karyawandata',        

                type: 'post',        

                data: {selectedId : selectedId},        

                dataType: 'json',

                success:function(response) {        

                    // setting the rate value into the rate input fiel         

                    $("#qtycur_"+1).val(response.uang_makan);

                    $("#nama").val(response.nama_lengkap);

                    $("#hariankesehatan_"+1).val(response.tunjangan_kesehatan);

                    $("#hariankendaraan_"+1).val(response.tunjangan_kendaraan);

                    $("#gapok").val(response.gaji_pokok); // Menampilkan jumlah lembur         

                    hitungtotal();    } // /success      

                }); // /ajax function to fetch the product data     

            }  

        }



        function showTab(tab) {



        document.getElementById('absensi').style.display = 'none';

        document.getElementById('lembur').style.display = 'none';

        document.getElementById('gaji').style.display = 'none';

        document.getElementById('penalty').style.display = 'none';

        document.getElementById('creategaji').style.display = 'none';

        document.getElementById('createpenalty').style.display = 'none';

        document.getElementById('createabsen').style.display = 'none';



        if (tab === 'absensi') {

            document.getElementById('absensi').style.display = 'block';

        } else if (tab === 'lembur') {

            document.getElementById('lembur').style.display = 'block';

            loadLemburData(); // Memuat data lembur

        } else if (tab === 'gaji') {

            document.getElementById('gaji').style.display = 'block';

            loadGajiData();

        } else if (tab === 'penalty') {

            document.getElementById('penalty').style.display = 'block';

            loadPenaltyData();

        }   else if (tab === 'creategaji') {

            document.getElementById('creategaji').style.display = 'block';

            loadkaryawan();

        
        }   else if (tab === 'createpenalty') {

        document.getElementById('createpenalty').style.display = 'block';

            loadkaryawanpen();
        }   else if (tab === 'createabsen') {

        document.getElementById('createabsen').style.display = 'block';

            loadkaryawanabs();
        }



        const navLinks = document.querySelectorAll('.nav-link');

        navLinks.forEach(link => {

            link.classList.remove('active');

        });

        event.target.classList.add('active');

        }



        function loadAbsensiData() {
            if ($.fn.DataTable.isDataTable('#absensiTable')) {
            $('#absensiTable').DataTable().destroy();
            }
            tableAbsensi = $('#absensiTable').DataTable({
                dom: 'Bfrtip', 
        
                // Konfigurasi Tombol Export
                buttons: [
                    {
                        // Tombol Export Excel
                        extend: 'excelHtml5',
                        text: 'Export Excel',
                        exportOptions: {
                            // Export semua data
                            modifier: {
                                page: 'all' 
                            }
                        }
                    },
                    {
                        // Tombol Export PDF
                        extend: 'pdfHtml5',
                        text: 'Export PDF',
                        exportOptions: {
                            // Export semua data
                            modifier: {
                                page: 'all' 
                            }
                        }
                    },
                    // Anda juga dapat menyertakan tombol yang sudah Anda miliki untuk halaman saat ini
                    {
                        extend: 'excel',
                        text: 'Save Current Page (Excel)',
                        exportOptions: {
                            modifier: {
                                page: 'current'
                            }
                        }
                    }
                ],
                "destroy": true, // Hapus DataTable yang ada sebelum membuat yang baru
                "ajax": {
                    "url" : "<?php echo site_url('admin/getabsensi')?>",
                    "type": "GET",
                        "data": function(d) {
                            d.length = $('#absensiTable').DataTable().page.len();
                        }
                    },
                "columns": [
                    { "data": "tgl" },
                    { "data": "nama_pegawai" },
                    { "data": "tgl_absen" },
                    { "data": "jam_masuk" },
                    { "data": "jam_pulang" },
                    {   
                        "data": "status_pegawai",
                        "render": function(data, type, row) {
                            if (data === '1') {
                                return '<span class="badge badge-soft-success">Sudah Absen</span>';
                            } else if (data === '2') {
                                return '<span class="badge badge-soft-danger">Absen Terlambat</span>';
                            } else {
                                return data;
                            }
                        },
                        "type": "string"
                    },

                    { 
                        "data": null, 
                        "render": function(data, type, row) {
                        return '<a href="javascript:void(0);" class="btn btn-primary btn-sm btn-edit" data-id="' + row.id_absen + '"><i class="fa-solid fa-pencil"></i></a>';
                        } 
                    },
                     ],
                        "order": [[0, "desc"]],				// Mengurutkan berdasarkan kolom "id_absen" secara descending

            });
        };
        function loadLemburData() {



            if ($.fn.DataTable.isDataTable('#lemburTable')) {

            $('#lemburTable').DataTable().destroy();

            }

            tableSJ = $('#lemburTable').DataTable({

                "destroy": true, // Hapus DataTable yang ada sebelum membuat yang baru

                "ajax": {

                    "url": "<?php echo site_url('admin/getlembur')?>", // Ganti dengan URL endpoint API Anda

                    "type": "GET",

                    "data": function(d) {

                        d.length = $('#lemburTable').DataTable().page.len();

                    }

                },

                "columns": [

                    { "data": "id" }, // Ganti dengan nama field yang sesuai

                    { "data": "nama_pegawai" },

                    { "data": "deskripsi" },

                    { "data": "tanggal" },

                    { "data": "jumlah" },

                    { "data": "jml_approve" },

                    {   

                        "data": "status",

                        "render": function(data, type, row) {

                            if (data === '2') {

                                return '<span class="badge badge-soft-success">Lembur + Mesin</span>';

                            } else if (data === '1') {

                                return '<span class="badge badge-soft-warning">Lembur</span>';

                            } else {

                                return data;

                            }

                        },

                        "type": "string"

                    },

                    {   

                        "data": "approve",

                        "render": function(data, type, row) {

                            if (data === '2') {

                                return '<span class="badge badge-soft-warning">Ditolak</span>';

                            } else if (data === '1') {

                                return '<span class="badge badge-soft-success">Approve</span>';

                            } else {

                                return data;

                            }

                        },

                        "type": "string"

                    },

                    { 

                        "data": null, 

                        "render": function(data, type, row) {

                        return '<a href="javascript:void(0);" class="btn btn-primary btn-sm btn-edit" data-id="' + row.id + '"><i class="fa-solid fa-pencil"></i></a>';

                        } 

                    },

                ],

                "order": [[3, "desc"]],				

                "language": {

                    "emptyTable": "Tidak ada data lembur yang tersedia."

                }

            });

        }

        function loadGajiData() {



            if ($.fn.DataTable.isDataTable('#gajiTable')) {

            $('#gajiTable').DataTable().destroy();

            }

            tableSJgaji = $('#gajiTable').DataTable({

                "destroy": true, // Hapus DataTable yang ada sebelum membuat yang baru

                "ajax": {

                    "url": "<?php echo site_url('admin/getgaji')?>", // Ganti dengan URL endpoint API Anda

                    "type": "GET",

                    "data": function(d) {

                        d.length = $('#gajiTable').DataTable().page.len();

                    }

                },

                "columns": [

                    { "data": "id" }, // Ganti dengan nama field yang sesuai

                    { "data": "nama_pegawai" },

                    { "data": "periode_gajian" },

                    { "data": "total_gaji" },

                    { 

                        "data": null, 

                        "render": function(data, type, row) {

                        return '<a href="javascript:void(0);" class="btn btn-primary btn-sm btn-edit" data-id="' + row.id + '"><i class="fa-solid fa-pencil"></i></a><a href="javascript:void(0);" class="btn btn-danger btn-sm btn-del" data-id="' + row.id + '"><i class="fa-solid fa-trash"></i></a>';

                        } 

                    },

                ],

                "order": [[0, "desc"]],				

                "language": {

                    "emptyTable": "Tidak ada data lembur yang tersedia."

                }

            });

        }

        function loadPenaltyData() {



            if ($.fn.DataTable.isDataTable('#penaltyTable')) {

            $('#penaltyTable').DataTable().destroy();

            }

            tableSJpenalty = $('#penaltyTable').DataTable({

                "destroy": true, // Hapus DataTable yang ada sebelum membuat yang baru

                "ajax": {

                    "url": "<?php echo site_url('admin/getpenalty')?>", // Ganti dengan URL endpoint API Anda

                    "type": "GET",

                    "data": function(d) {

                        d.length = $('#penaltyTable').DataTable().page.len();

                    }

                },

                "columns": [

                    { "data": "id" }, // Ganti dengan nama field yang sesuai

                    { "data": "nama_pegawai" },

                    { "data": "tgl_absen" },

                    { "data": "reason" },

                    { "data": "poin" },

                    { "data": "kode_absen" },

                    { 

                        "data": null, 

                        "render": function(data, type, row) {

                        return '<a href="javascript:void(0);" class="btn btn-primary btn-sm btn-edit" data-id="' + row.id + '"><i class="fa-solid fa-pencil"></i></a>';

                        } 

                    },

                ],

                "order": [[0, "desc"]],				

                "language": {

                    "emptyTable": "Tidak ada data lembur yang tersedia."

                }

            });

        }

        function hitungtotal(){          



            var hadir = $("#qty_1").val();

                $("#uangmakanqty_1").val(hadir);

                $("#kesehatan_1").val(hadir);

                $("#kendaraan_1").val(hadir);

            var makan = Number($("#uangmakanqty_1").val()) * Number($("#qtycur_1").val());

            $("#qtyfinal_"+1).val(makan);

            var kesehatan = Number($("#hariankesehatan_1").val()) * Number($("#kesehatan_1").val());

            $("#uangkesehatan_"+1).val(kesehatan);

            var kendaraan = Number($("#hariankendaraan_1").val()) * Number($("#kendaraan_1").val());

            $("#uangkendaraan_"+1).val(kendaraan);

            var lembur = Number($("#harianLembur_1").val()) * Number($("#total_lembur").val());

            $("#uangLembur_1").val(lembur);

            var lembur2 = Number($("#harianLembur_2").val()) * Number($("#total_lembur2").val());

            $("#uangLembur_2").val(lembur2)		

            var ds = Number($("#hariands").val()) * Number($("#total_ds").val());

            $("#uangds").val(ds)

            var kerajinan = Number($("#kerajinan").val());

            var gapok = Number($("#gapok").val());

            var subkotor = Number(gapok) + Number(makan) + Number(kesehatan) + Number(kendaraan) + Number(lembur) + Number(lembur2) + Number(ds) + Number(kerajinan);

            $("#nominal_kotor").val(subkotor);

            var sitelat = Number($("#telat").val()) * Number($("#total_telat").val());

            $("#nominal_telat").val(sitelat);

            var bpjs = Number($("#bpjskes").val()) + Number($("#bpjsnaker").val());

            $("#nominal_bpjs").val(bpjs);

            var kasbon = Number($("#kasbon").val());

            var kasbon2 = Number($("#kasbon2").val());

            var pinalty = Number($("#nominal_pinalty").val());

            var potongan = Number(sitelat) + Number(bpjs) + Number(kasbon) + Number(kasbon2) + Number(pinalty);

            $("#nominal_potongan").val(potongan);



            var gaji = Number(subkotor) - Number(potongan);

            $("#nominal_gaji").val(gaji);

            var formatgaji = gaji.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' });



            $("#gajirp").val(formatgaji);

                                    

                                    

            }

        



    </script>



            <!-- /Container -->





