{% extends '../template.html' %}
{% block subcontent %}
	<div>
		<table class="tab-container">
			<tr>
				<td class="tab-list tab-active">aktif</td>
				<td class="tab-list"><a href="{% nav customer_order %}">histori</a></td>
				<td></td>
			</tr>
		</table>
	</div>
	<div>
	<h2>Aktif Order: <input type="text" id="date_picker" value="{{tgl}}">
		Search: <input type="text" id="find"/>
	</h2>

	{% if data.length > 0 %}		
	<table class="orderhistory data">
		<tr>
			<th>ID</th>
			<th>Tgl/Jam</th>
			<th>Customer</th>
			<th>Store</th>
			<th>Status</th>
			<th>Delivery Time</th>
			<th></th>
		</tr>
		{% for row in data %}
			<tr class="order_histori_{{row.id}} orders" valign="top">
				<td>{{row.id}}</td>
				<td>{{row.date}}</td>
				<td><abbr title="Alamat: {{row.customer_alamat}} - Telp. {{row.customer_telepon}}">{{row.nama}}</abbr></td>
				<td>{{row.store_nama}}</td>
				<td class="status">{{row.status}}</td>
				{% if row.delivery_time == "" %}
				<td class="delivery_time" year="{{row.date_detail.year}}" month="{{row.date_detail.mon}}" day="{{row.date_detail.mday}}" hour="{{row.date_detail.hours}}" minute="{{row.date_detail.minutes}}" second="{{row.date_detail.seconds}}">- loading -</td>
				{% else %}
				<td style="text-align:center;">{{row.delivery_time}}</td>
				{% endif %}
				<td class="histori_options">
					<a href="{% nav active_order %}/{{ row.id }}">Detail</a>
				</td>
			</tr>
		{% endfor %}
	</table>
	<div id="current_time" year="{{current.year}}" month="{{current.mon}}" day="{{current.mday}}" hour="{{current.hours}}" minute="{{current.minutes}}" second="{{current.seconds}}"></div>
	{% else %}
		- Order Masih Kosong -<br/><br/>
	{% endif %}
	</div>
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/glDatePicker.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#find").keyup(function() {
			$this = $(this);
			$(".orders").hide();
			if ($this.val().trim() != '') {
				$(".orders").each(function() {
					$va = $(this).find('td');
					if ((
						$va.eq(2).text().toLowerCase().indexOf($this.val().toLowerCase()) >= 0 || 
						$va.eq(2).find('abbr').attr('title').toLowerCase().indexOf($this.val().toLowerCase()) >= 0 || 
						$va.eq(3).text().toLowerCase().indexOf($this.val().toLowerCase()) >= 0 || 
						$va.eq(4).text().toLowerCase().indexOf($this.val().toLowerCase()) >= 0)
					) {
						console.debug($va.eq(2).text().toLowerCase().indexOf($this.val().toLowerCase()));
						$(this).show();
					}
				});
			} else {
				$(".orders").show();
			}
		});
		$("#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 active_order %}?tgl=" + newDate.getDate()  + "-" + (newDate.getMonth() + 1) + "-" + newDate.getFullYear();
				}
		});
	
	
		setInterval("getTimer()",1000);
		waitForStatus();
		$(".batalkan").click(function() {
			id = $(this).attr("id_order");
			$("#id_batal_order").text(id);
			$("#id_form_batal_order").val(id);
			$("#keterangan_cancel").show();
			$("#keterangan_cancel textarea").val('').focus();
		});
		$("#tutup_keterangan_cancel").click(function() {
			$("#keterangan_cancel").hide();
		});
	});
	var elapsed_second = 0;
	function processStatus(data) {
		$(data).each(function() {
			$(".order_histori_" + this.id + " .status").text(this.status);
			if (this.status == 'success' || this.status == 'fail' || this.status == 'failed') {
				$(".order_histori_" + this.id + " .delivery_time").removeClass('delivery_time');
				$(".order_histori_" + this.id + " .batalkan").remove();
			}
		});
	}
	function waitForStatus() {
		$.ajax({
            type: "GET",
            url: "{% nav outbound_get_status %}?date={{tgl_get}}" ,
			
			dataType: "json",
			
            async: true, /* If set to non-async, browser shows page as "Loading.."*/
            cache: false,
            timeout:50000, /* Timeout in ms */

            success: function(data){ /* called when request to barge.php completes */
                processStatus(data); /* Add response to a .msg div (with the "new" class)*/
                setTimeout(
                    'waitForStatus()', /* Request next message */
                    1000 /* ..after 1 seconds */
                );
			}
		});
	}
	
	function getTimer() {
		elapsed_second++;
		c = new Date(
				$("#current_time").attr('year'),
				$("#current_time").attr('month') -1,
				$("#current_time").attr('day'),
				$("#current_time").attr('hour'),
				$("#current_time").attr('minute'),
				$("#current_time").attr('second'));
				
		c.setSeconds(c.getSeconds() + elapsed_second); 
		
		$(".delivery_time").each(function() {
			d = new Date($(this).attr('year'),
						$(this).attr('month') -1,
						$(this).attr('day'),
						$(this).attr('hour'),
						$(this).attr('minute'),
						$(this).attr('second'));
			ms = c - d;
			
			x = ms /1000;
			second = Math.floor(x % 60);
			x /= 60;
			minute = Math.floor(x % 60);
			x /= 60;
			hour = Math.floor(x % 24);
			x /= 24;
			day = Math.floor(x % 24);
			
			hour = (day * 24) + hour;
			
			if (hour < 10) hour = "0" + Math.floor(hour);
			if (minute < 10) minute = "0" + Math.floor(minute);
			if (second < 10) second = "0" + Math.floor(second);
			
			$(this).text(hour+":"+minute+":"+second);
		});
	}
</script>
{% endblock %}