@extends('layouts.master')

@section('header-title')
	<span class="font-weight-semibold">Delivery Schedule </span> - Orders History
@endsection

@section('content')


	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<div class="mx-auto">
				<h2 class="card-title mt-2 font-weight-semibold">Orders History</h2>
			</div>
			<div class="header-elements">
				<div class="list-icons">
					{{-- <a class="btn btn-outline-primary rounded-round" data-toggle="collapse" href="#info_collapse"><i class="icon-info22 mr-2"></i>More Info</a> --}}
            	</div>
        	</div>					
		</div>
		<div class="card-body">
			{{-- <p>Here you can see all the listings uploaded, and its history .</p> --}}
			<div class="collapse" id="info_collapse">
				<p> 
					• <br>
					• <br>
				</p>	
			</div>
			<form id="search_data_form">
				<div class="d-flex flex-wrap align-items-center">
					<div class="mx-2">
						<label class="col-form-label">Plant</label>
	                    <select required name="plant_id" class="form-control select" data-fouc>
	                    </select>
					</div>

					<div class="mx-2">
						<label class="col-form-label">Listing Date from:</label>
						<input type="text" class="form-control" name="date_from" placeholder="Date from:">
					</div>
					<div class="mx-2">
						<label class="col-form-label">Listing Date to:</label>
						<input type="text" class="form-control" name="date_to" placeholder="Date to:">
					</div>

					<div class="mx-2" style="min-width: 350px;">
						<label class="col-form-label">Supplier</label>
	                    <select name="supplier_plant_id" class="form-control select" data-fouc>
	                        <option value="">Select One</option>
	                    </select>
					</div>

					<div class="mx-2">
						<label class="col-form-label">Part Number</label>
						<input type="text" class="form-control" name="part_number" value="{{$part_number}}">
					</div>

					<div class="mx-2 mt-4 pt-1">
						<button data-style="zoom-in" type="submit" class="btn bg-primary btn-ladda btn-ladda-spinner mr-2"><i class="icon-search4 mr-2"></i> Search</button>
					</div>					


					<div class="mx-2 mt-4 pt-1">
						@component('components.button', ['type'=>'download'])@endcomponent
					</div>	

				</div>
			</form>
		</div>

		<div class="table-responsive border-0">
			<table id="main_datatable" class="table table-hover main-datatable datatable-header-basic text-center">
				<thead>
					<tr>
						<th>Listing Id</th>
						<th>Supplier</th>
						<th>Uploaded By</th>
						<th>Uploaded Date</th>
						<th>Part No.</th>
						<th>Description</th>
						<th>Units</th>
						<th>Plant</th>
						<th>EXW</th>
						<th>Service Part</th>
						<th>Standard Pack</th>
						<th>Dynamic Columns</th>
						<th>Priority</th>
						<th>Transit</th>
						<th class="alpha-primary text-primary-800 font-weight-semibold">Quantity</th>
						<th class="alpha-primary text-primary-800 font-weight-semibold">Date</th>
			        </tr>		        
				</thead>
				<tfoot>
					<tr>
						<td>Listing Id</td>
						<td>Supplier</td>
						<td>Uploaded By</td>
						<td>Uploaded Date</td>
						<td>Part No.</td>
						<td>Description</td>
						<td>Units</td>
						<td>Plant</td>
						<td>EXW</td>
						<td>Service Part</td> 
						<td>Standard Pack</td>
						<td class="not-searchable">&nbsp;</td>
						<td>Priority</td>
						<td>Transit</td>
						<td style="background-color: white!important;">Quantity</td>
						<td style="background-color: white!important;">Date</td>
			        </tr>
				</tfoot>	

			</table>
		</div>
	</div>


@endsection

@section('plugin-scripts')

	@include('scripts.datatablesjs')

@endsection


@section('app-scripts')
	<script type="text/javascript">
		const DATE_FROM = '{{$date_from}}';
		const DATE_TO = '{{$date_to}}';
		const PLANT_ID = {{$plant_id}};
		const SUPPLIER_PLANT_ID = {{$supplier_plant_id}};
		const PART_NUMBER = '{{$part_number}}';

		const ORDERS_HISTORY = {!! json_encode($orders_history) !!};
	</script>
	<script src="{{mix('js/deliveryschedule/orders_history.js')}}"></script>

@endsection