@extends("layout")
@section("content")

<div>
	<ol class="breadcrumb">
		<li><a href="{{{URL::route('user.home')}}}">{{trans('messages.home')}}</a></li>
		<li class="active">Warehouse Stock Statuses</li>
	</ol>
</div>


<!-- Style the tab -->
<style>
.tab {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #337ab7;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
	background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-top: none;
}

.tabcontent {
	animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
}
</style>

<!-- Tab links -->
<div class="tab">
	<button class="tablinks" onclick="openrequest(event, 'maul')"><img width="190" height="70" src="{{ Config::get('kblis.maul') }}"> <br><h3>MAUL</h3> </button>
	<button class="tablinks" onclick="openrequest(event, 'jms')"><img width="190" height="70" src="{{ Config::get('kblis.jms') }}"><br><h3>JMS</h3></button>
	<button class="tablinks" onclick="openrequest(event, 'nms')"><img width="190" height="70" src="{{ Config::get('kblis.nms') }}"><br><h3>NMS</h3></button>
</div>

<!-- Tab content -->
<div id="maul" class="tabcontent">

	@if (Session::has('message'))
	<div class="alert alert-info">{{ trans(Session::get('message')) }}</div>
	@endif
	<div  class="panel panel-primary">
		<div class="panel-heading ">
			<span class="glyphicon glyphicon-list"></span>
			MAUL
			<div class="panel-btn">
				<a class="btn btn-sm btn-info" href="{{ URL::route('warehouse.create') }}" >
					<span class="glyphicon glyphicon-plus-sign"></span>
					<font size="3">Add Record</font>
				</a>
			</div>
		</div>

		<table id='warehouse' class="table table-striped table-hover table-bordered search-table">
			<thead>
				<tr>
					<th class="text-center">#</th>
					<th class="text-center">Item Code</th>
					<th class="text-center">Product Description</th>
					<th class="text-center">Batch Number</th>
					<th class="text-center">Batch Quantity</th>
					<th class="text-center">Expiry Date</th>
				</tr>
			</thead>

			<tbody>

								@foreach($maul as $value)
				<tr>
					<td class="text-center">{{ $row}}</td>
					<td class="text-center">{{ $value->item_code}}</td>
					<td class="text-center">{{$value->commodity->name}}</td>
					<td class="text-center">{{ $value->batch_number}}</td>
					<td class="text-center">{{ $value->batch_quantity}}</td>
					<td>{{ $value->expiry_date}}</td>
					<td>Actions</td>
				</tr>
								@endforeach
			</tbody>
		</table>
	</div>
</div>

<!-- JMS -->
<div id="jms" class="tabcontent">

	@if (Session::has('message'))
	<div class="alert alert-info">{{ trans(Session::get('message')) }}</div>
	@endif
	<div  class="panel panel-primary">
		<div class="panel-heading ">
			<span class="glyphicon glyphicon-list"></span>
		JMS
			<div class="panel-btn">
				<a class="btn btn-sm btn-info" href="{{ URL::route('warehouse.create') }}" >
					<span class="glyphicon glyphicon-plus-sign"></span>
					<font size="3">Add Record</font>
				</a>
			</div>
		</div>

		<table id='warehouse' class="table table-striped table-hover table-bordered search-table">
			<thead>
				<tr>
					<th class="text-center">#</th>
					<th class="text-center">Item Code</th>
					<th class="text-center">Product Description</th>
					<th class="text-center">Batch Number</th>
					<th class="text-center">Batch Quantity</th>
					<th class="text-center">Expiry Date</th>
					<th class="text-center">Actions</th>
				</tr>
			</thead>

			<tbody>

								@foreach($jms as $value)
				<tr>
					<td class="text-center">{{ $row}}</td>
					<td class="text-center">{{ $value->item_code}}</td>
					<td class="text-center">{{$value->commodity->name}}</td>
					<td class="text-center">{{ $value->batch_number}}</td>
					<td class="text-center">{{ $value->batch_quantity}}</td>
					<td>{{ $value->expiry_date}}</td>
					<td class="text-center">
						<button class="btn btn-sm btn-danger delete-item-link" data-toggle="modal" data-target=".confirm-delete-modal"
						data-id="{{ URL::route('warehouse.delete', array($value->id)) }}">
						<span class="glyphicon glyphicon-trash"></span>
						{{trans('messages.delete')}}
					</button>

					<!--  edit requisition-->
					<a class="btn btn-sm btn-info" href="{{ URL::route('warehouse.edit', array($value->id)) }}" >
						<span class="glyphicon glyphicon-edit"></span>
						{{trans('messages.edit')}}
					</a>
					</td>
				</tr>
								@endforeach
			</tbody>
		</table>
	</div>
</div>

<!-- JMS -->
<div id="nms" class="tabcontent">

	@if (Session::has('message'))
	<div class="alert alert-info">{{ trans(Session::get('message')) }}</div>
	@endif
	<div  class="panel panel-primary">
		<div class="panel-heading ">
			<span class="glyphicon glyphicon-list"></span>
		NMS
			<div class="panel-btn">
				<a class="btn btn-sm btn-info" href="{{ URL::route('warehouse.create') }}" >
					<span class="glyphicon glyphicon-plus-sign"></span>
					<font size="3">Add Record</font>
				</a>
			</div>
		</div>

		<table id='warehouse' class="table table-striped table-hover table-bordered search-table">
			<thead>
				<tr>
					<th class="text-center">#</th>
					<th class="text-center">Item Code</th>
					<th class="text-center">Product Description</th>
					<th class="text-center">Batch Number</th>
					<th class="text-center">Batch Quantity</th>
					<th class="text-center">Expiry Date</th>
				</tr>
			</thead>

			<tbody>

								@foreach($nms as $value)
				<tr>
					<td class="text-center">{{ $row}}</td>
					<td class="text-center">{{ $value->item_code}}</td>
					<td class="text-center">{{$value->commodity->name}}</td>
					<td class="text-center">{{ $value->batch_number}}</td>
					<td class="text-center">{{ $value->batch_quantity}}</td>
					<td>{{ $value->expiry_date}}</td>
				</tr>
								@endforeach
			</tbody>
		</table>
	</div>
</div>

<script>
	function openrequest(evt, cityName) {
		// Declare all variables
		var i, tabcontent, tablinks;

		// Get all elements with class="tabcontent" and hide them
		tabcontent = document.getElementsByClassName("tabcontent");
		for (i = 0; i < tabcontent.length; i++) {
			tabcontent[i].style.display = "none";
		}

		// Get all elements with class="tablinks" and remove the class "active"
		tablinks = document.getElementsByClassName("tablinks");
		for (i = 0; i < tablinks.length; i++) {
			tablinks[i].className = tablinks[i].className.replace(" active", "");
		}

		// Show the current tab, and add an "active" class to the button that opened the tab
		document.getElementById(cityName).style.display = "block";
		evt.currentTarget.className += " active";
	}

	$(document).ready(function () {
		$('#datatables').DataTable({
			"processing": true,
			"serverSide": true,
			"ajax":{
				"url": "/fetch_records",
				"dataType": "json",
				"type": "POST",
				"data":{ _token: "{{csrf_token()}}"}
			},
			"columns": [
			{ "data": "item_code" },
			{ "data": "commodity_id" },
			{ "data": "batch_number" },
			{ "data": "batch_quantity" },
			{ "data": "expiry_date" },
			{ "data": "created_by" }
			]

		});
	});
</script>