{% extends '../center_store/template.html' %}
{% block subcontent %}

	{% if harus_update_shift == "y" %}
	<div class="error">
		<center>
		
		SHIFT MASTER BERBEDA DENGAN SHIFT TOKO INI <br/>
		MOHON SEGERA UPDATE SHIFT RIDER
		
		</center>
	</div>
	{% endif %}
	
	<h2>Absensi Rider: <input type="text" id="date_picker" value="{{tgl}}">  </h2>
		
	{% if data.length > 0 %}		
	<table class="data">
		<tr>
			<th>Nama</th>
			<th>Shift</th>
			<th>Kehadiran</th>
			<th>Jam Datang</th>
			<th>Jam Keluar</th>
			<th>Hantaran</th>
		</tr>
		{% for row in data %}
			<tr>
				<td>
					{% if row.kehadiran == "backup" %}
					<div class="nama strike">{{row.nama}}</div>
					<b>{{ row.backup }}</b>
					{% else %}
					<div class="nama">{{row.nama}}</div>
					{% endif %}
					<form class="backup" action="{% nav store_absen_backup %}{{ row.id }}" style="display:none;">
						<small>Digantikan oleh:</small><br/>
						<input type="hidden" name="shift" value="{{row.shift}}"/>
						<input type="text" name="backup"/><input type="submit" value="Go"/>
					</form>
				</td>
				<td>
					{{row.shift}}
				</td>
				<td>
					<select class="kehadiran {% if row.shift_2 == row.shift%}shift2{%endif%}" shift="{{row.shift}}" name="kehadiran" id_kurir="{{row.id}}" 
						{% if row.kehadiran == "hadir"%}disabled="disabled"{% endif %}
						{% if row.kehadiran == "backup"%}disabled="disabled"{% endif %}
						{% if disabled == "y"%}disabled="disabled"{% endif %}
					>
						<option value="off" {% if row.kehadiran == "off"%}selected="selected"{%endif%}>Off</option>
						<option value="hadir" {% if row.kehadiran == "hadir"%}selected="selected"{%endif%}>Hadir</option>
						<option value="backup" {% if row.kehadiran == "backup"%}selected="selected"{%endif%}>Backup</option>
					</select>
				</td>
				<td>
					<div class="jam_datang" shift="{{row.shift}}" >{{row.jam_datang}}</div>
					
				</td>
				<td>
					<div class="jam_keluar" shift="{{row.shift}}" id_kurir="{{row.id_kurir}}" status="{{row.status}}" jam_keluar="{{row.jam_keluar}}">- loading -</div>
					</td>
				<td>
					<div class="hantaran" hantaran="{{row.hantaran}}" shift="{{row.shift}}" id_kurir="{{row.id_kurir}}" status="{{row.kehadiran}}">- loading -</div>
				</td>
			</tr>
		{% endfor %}
	</table>
	{% else %}<br/><br/>
		<center>
		- Tidak ada Rider -
		</center>
	{% endif %}
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/glDatePicker.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#date_picker").glDatePicker({
			cssName: "android",
			selectedDate:new Date("{{tgl_js}}"),
			startDate: new Date("{{tgl_js}}"),
		    allowOld: true,
			onChange: function(target, newDate)
				{
					var month= ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Des"];
					target.val
					(
						newDate.getDate()  + "-" +
						month[newDate.getMonth()] + "-" +
						newDate.getFullYear() 
					);
					
					location.href = "{% nav store_absen %}?tgl=" + newDate.getDate()  + "-" + (newDate.getMonth() + 1) + "-" + newDate.getFullYear();
				}
		});
	
		$(".kehadiran").change(function () {
			$(this).parent().parent().find('.backup').hide();
			if ($(this).find("option:selected").val() == "hadir") {
				id_kurir = $(this).attr('id_kurir');
				shift = $(this).attr('shift');
				
				$this = $(this);
				$.ajax({
					url:"{% nav store_absen_hadir %}" + id_kurir + "?shift=" + shift,
					dataType:"json",
					beforeSend:function(xhr) {
						$this.attr("disabled","disabled");
						$this.parent().parent().find(".jam_datang[shift="+shift+"]").text(" - loading - ");
					},
					success:function (data) {
						$this.val(data.kehadiran).attr("disabled","disabled");
						$this.parent().parent().find(".jam_datang[shift="+shift+"]").text(data.jam_datang);
						$this.parent().parent().find(".jam_keluar[shift="+shift+"]")
							.html('<input id_kurir="'+$this.attr('id_kurir')+'" type="button" value="Pulang"/>');
							
						$this.parent().parent().find(".hantaran").show();
						$this.parent().parent().find(".hantaran b").text("0");
					}
				});
			} else if ($(this).find("option:selected").val() == "backup") {
				$(this).parent().parent().find('.backup').show();
			}
        });
		$(".jam_keluar").each(function() {
			if ($(this).attr('status') != "keluar") {
				if ($(this).attr('jam_keluar') != "") {
					$(this).text($(this).attr('jam_keluar'));
				} else if ($(this).parent().parent().find('.jam_datang').text() != "") {
					$this = $(this);
					$(this).html('<input id_kurir="'+$this.attr('id_kurir')+'" type="button" value="Pulang"/>');
				} else if ($(this).parent().parent().find('.jam_datang').text() == "") {
					$(this).text('');
				}
			} else {
				if ($(this).attr('jam_keluar') != "") {
					$(this).text($(this).attr('jam_keluar'));
				} else {
					$(this).text('- mengantar pesanan -');
				}
			}
		});
		$(".hantaran").each(function() {
			if ($(this).attr('status') == "off") {
				$(this).text('');
			} else {
				$(this).text($(this).attr('hantaran'));
			}
		});
		// $(".shift2").each(function() {
		// 	$s1 = $(this).parent().parent().prev();
		// 	if ($s1.find('.jam_datang').text() != "" && $s1.find('.jam_keluar').text() != "" && $(this).val() == "off") {
		// 		$(this).removeAttr('disabled');
		// 	};
		// });
		$(".jam_keluar input").on('click',function() {
			$parent = $(this).parent();
			$this = $(this);
			$.ajax({
				url:"{% nav store_absen_keluar %}" + $this.attr('id_kurir') + "?shift=" + $parent.attr('shift'),
				dataType:"json",
				beforeSend:function(xhr) {
					$parent.text(" - loading - ");
				},
				success:function (data) {
					$parent.text(data.jam_keluar);
					if ($(".shift2[id_kurir="+$this.attr('id_kurir')+"]").val() == "off") {
						$(".shift2[id_kurir="+$this.attr('id_kurir')+"]").removeAttr('disabled');
					}
				}
			});
		});
	});
</script>
{% endblock %}