@extends('layouts.master')
@section('title') {{ Config::get('document.title') }} @stop
@section('body')

<div class="row">
	<div class="col-md-3">
		<div class="form-group">
			<label class="control-label">Invoices Dispatched From</label>
			<input type="text" class="form-control fromDate">
		</div>
	</div>
	<div class="col-md-3">
		<div class="form-group">
			<label class="control-label">To</label>
			<input type="text" class="form-control toDate">
		</div>
	</div>
	<div class="col-md-2">
		<button class="btn btn-primary btnFilter" style="margin-top: 25px;">Filter</button>
	</div>

	
</div>

<style type="text/css">
	.documents .img-thumbnail{
		width: 100%;
		padding: 5px 10px 5px 10px;
		margin-bottom: 20px;
	}
	.documents .heading{
		padding: 0px 5px 0px 5px;
		background-color: #ecf0f1;
		white-space: nowrap;
	}
	.documents h3{
		display: inline-block;
		width: 33.3%;
		font-size: 1.5em;
		margin: 0px;
	}
	.documents h3:last-child{
		display: block;
		width: 100%;
	}
	.documents hr{
		margin: 5px;
	}
	.documents .row{
		margin-top: 15px;
	}
</style>

<div class="row">
	<div class="col-xs-12">
		<label style="background-color: #FFC107; padding: 0px 4px 0px 4px !important;"><input type="checkbox" class="documents_not_received" checked/> Documents Not Received</label>
		<input type="text" placeholder="Search by Invoice No." class="search">
		<button class="btn btn-xs btn-primary btn_item_filter" style="margin-bottom: 5px;"><i class="fa fa-filter fa-lg"></i></button>
	</div>
	<div class="col-xs-12 documents">

	</div>
</div>

@stop
@section('script')
<script>
	$(function(){
		var _token = $('meta[name="_token"]').attr('content');

		$(document).ajaxStart(function() {
			$('button').data('loading-text', '...');
			$('button').button('loading');
		}).ajaxStop(function(){
			$('button').button('reset');
		});

		$('.fromDate').datepicker({
			dateFormat: "yy-mm-dd",
			onSelect: function(){
				$(".toDate").datepicker( "option", "minDate", new Date($('.fromDate').val()) );
			}
		});
		$(".toDate").datepicker({
			dateFormat: "yy-mm-dd",
			onSelect: function(){
				$(".fromDate").datepicker( "option", "maxDate", new Date($('.toDate').val()) );
			}
		});

		$(".btnFilter").click(function(){
			documentsTable();
		});

		$(".btn_item_filter").click(function(){
			documentsTable();
		});

		$(document).on("click", ".saveDocumentsReceived", function(){
			var id = $(this).closest(".documentsReceivedWrapper").find(".documentsReceived").data("id");
			var documentsReceived = $(this).closest(".documentsReceivedWrapper").find(".documentsReceived").is(":checked") == true ? 1 : 0;
			var date = $(this).closest(".documentsReceivedWrapper").find(".datepicker").val();
			var comment = $(this).closest(".documentsReceivedWrapper").find(".comment").val();


			saveDocumentsReceived({id: id, documentsReceived: documentsReceived, date: date, comment: comment});
		});

		function saveDocumentsReceived(data){
			$.post("{{ url('/document/saveDocumentsReceived') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(){
					if(typeof(e) == "object" && e.hasOwnProperty("ok") && e.ok == 1){
						documentsTable();
						$.notify.success(e.msg);
					}
				});
			}, "json");
		}

		function throwError(e, callback) {
			if (e != undefined && e != null) {
				if (e.hasOwnProperty('errors')) {
					$.each(e.errors, function (k, msg) {
						$.notify.error('<b>' + msg + '</b>');
						return false;
					});
				} else {
					if (e.hasOwnProperty('ok') && e.hasOwnProperty('msg') && e.ok == 0) {
						$.notify.error('<b>' + e.msg + '</b>');
					} else {
						if(callback != undefined && typeof(callback) == "function"){
							callback(e);
						}
					}
				}
			}
		}

		function documentsTable(){
			var $documents = $(".documents");

			var data = {
				fromDate: $('.fromDate').val(),
				toDate: $('.toDate').val()
			};
			$.post("{{ url('/document/documentsTable') }}", {_token: _token, data: data}, function(e){
				throwError(e, function(){
					
					var dom = '';
					if(typeof(e) == "object" && Object.keys(e).length > 0){
						$.each(e, function(order_id, k){
							if($(".documents_not_received").is(":checked") && k.order.documentsReceived == "true"){ return true; } //skipping
							
							var search = $(".search").val();
							var regex = new RegExp(search + '.*');
							if($.trim(search).length > 0 && k.order.number.match(regex) == null) { return true; }

							var order = k.order;
							var trips = k.trips;

							dom += '<div class="img-thumbnail">';
							dom += '	<div class="heading">';
							dom += '		<h3><small>Invoice No : </small>'+ order.number +'</h3>';
							dom += '		<h3><small>Created At : </small>'+ order.created_date +'</h3>';
							dom += '		<h3><small>Dispatched At : </small>'+ order.dispatched_date +'</h3>';
							dom += '		<h3><small>Distributor : </small>'+ order.distributor +'</h3>';
							dom += '	</div>';
							dom += '	<div class="row">';
							dom += '		<div class="col-xs-8">';

							dom += '			<div class="table-responsive" style="margin-bottom: 10px; margin-top: 10px;">';
							dom += '				<table>';
							dom += '					<thead>';
							dom += '						<tr>';
							dom += '							<th style="width: 115px;">Trip #</th>';
							dom += '							<th style="width: 380px;">Transporter</th>';
							dom += '							<th>Vehicle No</th>';
							dom += '						</tr>';
							dom += '					</thead>';
							dom += '				</table>';
							dom += '			</div>';

							$.each(trips, function(trip_id, trip){
								
								dom += '			<div class="table-responsive">';
								dom += '				<table class="table table-condensed table-bordered">';
								dom += '					<tbody>';


								var vehicles = trip.vehicles;

								dom += '						<tr>';
								dom += '							<td style="width: 115px;" rowspan="'+ trip.rowspan +'">'+ trip.id +'</td>';

								
								$.each(vehicles, function(m, vehicle){
									if(m > 0)
										dom += '						<tr>';

									dom += '							<td style="width: 380px;">'+ vehicle.name +'</td>';
									dom += '							<td>'+ vehicle.number +'</td>';
									dom += '						</tr>';
								});
								dom += '						</tr>';

								
								dom += '					</tbody>';
								dom += '				</table>';
								dom += '			</div>';

								
							});

					
							dom += '		</div>';
							dom += '		<div class="col-xs-4 documentsReceivedWrapper">';
							var checked = order.documentsReceived == "true" ? "checked" : "";
							dom += '			<div class="form-group text-right" style="margin-bottom: 0px;">';
							dom += '				<label><input type="checkbox" class="documentsReceived" data-id="'+ order.id +'" '+ checked +'> Documents Received</label>';
							dom += '			</div>';
							dom += '			<div class="form-group text-right">';
							dom += '				<input type="text" placeholder=" date" value="'+ order.documentsReceivedDate +'" class="datepicker">';
							dom += '			</div>';
							dom += '			<div class="form-group">';
							dom += '				<textarea class="comment" style="width: 100%;" placeholder=" comments">'+ order.documentsReceivedComment +'</textarea>';
							dom += '			</div>';
							dom += '			<div class="form-group text-right">';
							dom += '				<button class="btn btn-primary btn-sm saveDocumentsReceived">Save</button>';
							dom += '			</div>';
							dom += '		</div>';
							dom += '	</div>';
							dom += '</div>';

						});
					}else{
						dom = ' -- no results found --';
					}

					$documents.html(dom);

					$(".datepicker").datepicker({
						dateFormat: "yy-mm-dd"
					});

				});
			}, 'json');
		}
	});
</script>
@stop