<!-- Container Fluid-->
<?php 
	$sync = $this->db->query('SELECT NOW() AS now')->row()->now;
	$waktu_server = strtotime($sync);
	$waktu_sekarang = date('Y-m-d H:i:s'); 
	$waktu_sekarang = strtotime($waktu_sekarang);
	 
	$jam_sekarang = date('H:i');
	$setting = isset($setting) ? $setting : (object)[];
	
	$title_masuk = '';
	$title_pulang = '';
	$disabled_masuk = 'disabled';
	$disabled_pulang = 'disabled';

	$jam_awal_shift_1 = !empty($setting->jam_masuk_shift_1) ? date('H:i', strtotime($setting->jam_masuk_shift_1)) : '07:00';
	$jam_awal_shift_2 = !empty($setting->jam_masuk_shift_2) ? date('H:i', strtotime($setting->jam_masuk_shift_2)) : '11:00';
	$jam_pulang_shift_1 = !empty($setting->jam_pulang_shift_1) ? date('H:i', strtotime($setting->jam_pulang_shift_1)) : '14:00';
	$jam_pulang_shift_2 = !empty($setting->jam_pulang_shift_2) ? date('H:i', strtotime($setting->jam_pulang_shift_2)) : '00:00';

	$to_minutes = function($time) {
		$parts = explode(':', $time);
		return ((int)$parts[0] * 60) + (int)$parts[1];
	};

	$is_in_range = function($now, $start, $end) {
		if ($start <= $end) {
			return ($now >= $start && $now <= $end);
		}
		return ($now >= $start || $now <= $end);
	};

	$minutes_until = function($now, $target) {
		$diff = $target - $now;
		if ($diff < 0) {
			$diff += 1440;
		}
		return $diff;
	};

	$now_minutes = $to_minutes($jam_sekarang);
	$masuk_shift_1_minutes = $to_minutes($jam_awal_shift_1);
	$masuk_shift_2_minutes = $to_minutes($jam_awal_shift_2);
	$pulang_shift_1_minutes = $to_minutes($jam_pulang_shift_1);
	$pulang_shift_2_minutes = $to_minutes($jam_pulang_shift_2);

	$shift_1_aktif = $is_in_range($now_minutes, $masuk_shift_1_minutes, $pulang_shift_1_minutes);
	$shift_2_aktif = $is_in_range($now_minutes, $masuk_shift_2_minutes, $pulang_shift_2_minutes);

	// Tombol MASUK aktif selama rentang jam masuk -> jam pulang masing-masing shift.
	if ($shift_2_aktif) {
		$disabled_masuk = '';
		$title_masuk = 'Shift II Aktif';
	} elseif ($shift_1_aktif) {
		$disabled_masuk = '';
		$title_masuk = 'Shift I Aktif';
	} else {
		$to_shift_1 = $minutes_until($now_minutes, $masuk_shift_1_minutes);
		$to_shift_2 = $minutes_until($now_minutes, $masuk_shift_2_minutes);
		$title_masuk = ($to_shift_1 <= $to_shift_2)
			? 'Presensi mulai pukul '.$jam_awal_shift_1
			: 'Presensi Shift II mulai pukul '.$jam_awal_shift_2;
	}

	// Tombol PULANG aktif saat sudah masuk rentang pulang tiap shift.
	$pulang_shift_1_aktif = $is_in_range($now_minutes, $pulang_shift_1_minutes, $masuk_shift_2_minutes);
	$pulang_shift_2_aktif = $is_in_range($now_minutes, $pulang_shift_2_minutes, $masuk_shift_1_minutes);
	if ($pulang_shift_1_aktif || $pulang_shift_2_aktif) {
		$disabled_pulang = '';
		$title_pulang = 'Tombol Aktif';
	} else {
		$to_pulang_1 = $minutes_until($now_minutes, $pulang_shift_1_minutes);
		$to_pulang_2 = $minutes_until($now_minutes, $pulang_shift_2_minutes);
		$title_pulang = ($to_pulang_1 <= $to_pulang_2)
			? 'Waktu pulang mulai pukul '.$jam_pulang_shift_1
			: 'Waktu pulang Shift II mulai pukul '.$jam_pulang_shift_2;
	}

	if($waktu_sekarang < $waktu_server){
	?>
	<!-- Container Fluid-->
	<div class="container-fluid absen-dashboard" id="container-wrapper">
		<div class="absen-error-card text-center">
			<img src="<?= base_url('assets/'); ?>img/error.svg" style="max-height: 100px;" class="mb-3">
			<h3 class="font-weight-bold mb-2">Oopss!</h3>
			<p class="lead mb-1">Waktu di komputer tidak sesuai</p>
			<p class="text-muted mb-3">Sesuaikan terlebih dahulu</p>
			<a class="btn btn-outline-primary btn-sm px-3" href="<?= base_url('absen/data'); ?>">&larr; Back to Dashboard</a>
		</div>
		
	</div>
	<!---Container Fluid-->
	<?php }else{ ?>
	<div class="container-fluid absen-dashboard" id="container-wrapper">
		<div class="absen-header mb-4">
			<div>
				<h4 class="absen-title mb-1">Dashboard Absensi</h4>
				<p class="absen-subtitle mb-0">Ringkasan kehadiran karyawan hari ini</p>
			</div>
			<a class="btn btn-outline-danger btn-sm px-3" href="<?=base_url('absen/detail/').$id;?>">Detail Absen</a>
		</div>

		<div class="row">
			<div class="col-xl-4 col-md-6 mb-3">
				<div class="card absen-card h-100">
					<div class="card-body" id="LoadingTotal">
						<div class="d-flex justify-content-between align-items-center mb-3">
							<div>
								<div class="absen-stat-label">Masuk</div>
								<div class="absen-stat-value load-count">0</div>
							</div>
							<span class="absen-stat-icon text-success"><i class="fas fa-sign-in-alt"></i></span>
						</div>
						<div data-toggle='tooltip' title="<?=$title_masuk;?>">
							<button class="btn btn-success btn-sm px-4 save_masuk" data-id='<?=$id;?>' <?=$disabled_masuk;?>>Masuk</button>
						</div>
					</div>
				</div>
			</div>

			<div class="col-xl-4 col-md-6 mb-3">
				<div class="card absen-card h-100">
					<div class="card-body" id="LoadingToday">
						<div class="d-flex justify-content-between align-items-center mb-3">
							<div>
								<div class="absen-stat-label">Pulang</div>
								<div class="absen-stat-value load-now">0</div>
							</div>
							<span class="absen-stat-icon text-info"><i class="fas fa-sign-out-alt"></i></span>
						</div>
						<div data-toggle='tooltip' title="<?=$title_pulang;?>">
							<button class="btn btn-info btn-sm px-4 save_pulang" data-id='<?=$id;?>' <?=$disabled_pulang;?>>Pulang</button>
						</div>
					</div>
				</div>
			</div>

			<div class="col-xl-4 col-md-6 mb-3">
				<div class="card absen-card h-100">
					<div class="card-body" id="LoadingBaru">
						<div class="d-flex justify-content-between align-items-center">
							<div>
								<div class="absen-stat-label">Total Karyawan</div>
								<div class="absen-stat-value load-baru">0</div>
							</div>
							<span class="absen-stat-icon text-primary"><i class="fas fa-users"></i></span>
						</div>
					</div>
				</div>
			</div>

			<div class="col-12">
				<div class="card absen-card absen-table-card" id="LoadingKehadiran">
					<div class="card-header d-flex flex-row align-items-center justify-content-between">
						<h6 class="m-0">List Absen Hari ini</h6>
					</div>
					<div class="table-responsive">
						<table class="table align-items-center mb-0">
							<thead>
								<tr>
									<th class="w-1">NO.</th>
									<th class="text-left">NAMA</th>
									<th class="text-left">TANGGAL</th>
									<th class="text-right">JAM MASUK</th>
									<th class="text-right">JAM PULANG</th>
								</tr>
							</thead>
							<tbody id="load-kehadiran">
								
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
<?php } ?>
<style>
	.absen-dashboard{
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.absen-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		flex-wrap: wrap;
	}
	.absen-title{
		font-weight: 700;
		color: #1f2937;
	}
	.absen-subtitle{
		font-size: 14px;
		color: #6b7280;
	}
	.absen-dashboard .absen-card{
		border: 1px solid #e9edf5;
		border-radius: 14px;
		box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05);
		margin-top: 0;
		overflow: hidden;
	}
	.absen-dashboard .absen-card .card-body{
		padding: 18px 18px;
	}
	.absen-stat-label{
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .4px;
		text-transform: uppercase;
		color: #64748b;
	}
	.absen-stat-value{
		font-size: 28px;
		font-weight: 700;
		line-height: 1.1;
		color: #0f172a;
	}
	.absen-stat-icon{
		width: 44px;
		height: 44px;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f1f5f9;
		font-size: 18px;
	}
	.absen-dashboard .save_masuk,
	.absen-dashboard .save_pulang{
		border-radius: 999px;
		font-weight: 600;
	}
	.absen-table-card .card-header{
		background: #ffffff;
		padding: 16px 18px;
		border-bottom: 1px solid #eef2f7;
	}
	.absen-table-card .card-header h6{
		font-weight: 700;
		color: #1f2937;
	}
	.absen-table-card table thead th{
		background: #f8fafc;
		color: #64748b;
		font-size: 12px;
		font-weight: 700;
		border-bottom: 1px solid #eef2f7;
	}
	.absen-table-card table tbody td{
		border-color: #f1f5f9;
		vertical-align: middle;
	}
	.absen-error-card{
		max-width: 560px;
		margin: 32px auto;
		border: 1px solid #e9edf5;
		border-radius: 16px;
		background: #fff;
		box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05);
		padding: 24px 20px;
	}
</style>
<script>
	
	$(document).ready(function() {
		load_list();load_masuk();load_pulang();load_karyawan();
	});
	
	function load_list(){
		$.ajaxQueue({
			url:  base_url+"absen/list_kehadiran",
			cache: false,
			beforeSend: function(){
				$("#LoadingKehadiran").loading();
			},
			success: function (data) {
				$("#LoadingKehadiran").loading('stop');
				$('#load-kehadiran').html(data);
			}
		});
	}
	
	
	function load_masuk(){
		$.ajaxQueue({
			url:  base_url+"absen/load_masuk",
			cache: false,
			beforeSend: function(){
				$("#LoadingTotal").loading();
			},
			success: function (data) {
				$("#LoadingTotal").loading("stop");
				$('.load-count').html(data);
			}
		});
	}
	function load_pulang(){
		$.ajaxQueue({
			url:  base_url+"absen/load_pulang",
			cache: false,
			beforeSend: function(){
				$("#LoadingToday").loading();
			},
			success: function (data) {
				$("#LoadingToday").loading('stop');
				$('.load-now').html(data);
			}
		});
	}
	function load_karyawan(){
		$.ajaxQueue({
			url:  base_url+"absen/load_karyawan",
			cache: false,
			beforeSend: function(){
				$("#LoadingBaru").loading();
			},
			success: function (data) {
				$("#LoadingBaru").loading('stop');
				$('.load-baru').html(data);
			},
			error : function(res, status, httpMessage) {
				sweet("Peringatan!!!", httpMessage, "warning", "warning");
			}
		});
	}
	
	$(document).on("click", ".save_masuk", function() {
		var id = $(this).attr("data-id");
		$.ajax({
			"url" : base_url + "absen/save_masuk",
			"data" : {id : id},
			"method" : "POST",
			"dataType" : "json",
			success : function(response) {
				if(response.status==200){
					sweet_login(response.msg,'success');
					}else{
					sweet_login(response.msg,'warning');
				}
				console.log(response);
				// $("#error_piutang").css("display", "none");
				// $("#data-cari").html(htmlExercise);
			},
			error : function(res, status, httpMessage) {
				sweet("Peringatan!!!", httpMessage, "warning", "warning");
			}
		});
	});
	
	$(document).on("click", ".save_pulang", function() {
		var id = $(this).attr("data-id");
		$.ajax({
			"url" : base_url + "absen/save_pulang",
			"data" : {id : id},
			"method" : "POST",
			"dataType" : "json",
			success : function(response) {
				if(response.status==200){
					sweet_login(response.msg,'success');
					}else{
					sweet_login(response.msg,'warning');
				}
				console.log(response);
				// $("#error_piutang").css("display", "none");
				// $("#data-cari").html(htmlExercise);
			},
			error : function(res, status, httpMessage) {
				sweet("Peringatan!!!", httpMessage, "warning", "warning");
			}
		});
	});
</script>					
