@extends('layouts.master')

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

@section('styles')
<style type="text/css">
	#main_datatable_wrapper{border-top: none}
</style>
@endsection

@section('content')

	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h4 class="card-title">Import New Listing</h4>
			<div class="header-elements">
				<div class="list-icons">
		            <a class="list-icons-item" data-action="collapse"></a>

					{{-- <a class="btn btn-outline-primary rounded-round" data-toggle="collapse" href="#info_collapse1"><i class="icon-info22 mr-2"></i>More Info</a> --}}
            	</div>
        	</div>					
		</div>
		<div class="card-body">
			<p>Here you can import the listing using the excel format.</p>
			<div class="collapse" id="info_collapse1">
				<p> 
					• .<br>
				</p>	
			</div>

			<form id="import_data_form">
				<div class="row">
					<div class="col-md-3 col-6 my-2">
						<label class="col-form-label">Plant</label>
	                    <select required name="plant_id" class="form-control select" data-fouc>
	                    </select>
					</div>

					<div class="col-md-4 col-6 my-2">
						<label class="col-form-label">Report:</label>
						<div class="custom-file">
							<input type="file" class="custom-file-input text-muted" name="import_file" id="import_file" aria-describedby="import_file" accept=".xlsx,.xls" required>
							<label class="custom-file-label" for="import_file">Choose File</label>
							<span class="form-text text-muted">Accepted file type: Excel. Max file size 5MB</span>
						</div>						
					</div>			

					<div class="col-md-2 my-2">
						<label class="col-form-label">&nbsp;&nbsp;</label>
						<div>
							<button data-style="zoom-in" type="submit" class="btn bg-primary btn-ladda btn-ladda-spinner"><i class="icon-cloud-upload2 mr-2"></i> Upload</button>
						</div>
					</div>
				</div>
			</form>					
		</div>		
	</div>

	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h4 class="card-title">Listings History</h4>
			<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 . By default 3 months of history is shown.</p>
			<div class="collapse" id="info_collapse">
				<p> 
					• <br>
					• <br>
				</p>	
			</div>

			<form id="search_data_form">
				<div class="row">
					<div class="col-md-2 my-2">
						<label class="col-form-label">Plant</label>
	                    <select required name="plant_id" class="form-control select" data-fouc>
	                    </select>
					</div>

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

					<div class="col-md-3 my-2">
						<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="col-md-2 my-2">
						<div class="form-group_no" style="margin-top: 2.6rem">
							<div class="form-check form-check-inline">
								<label class="form-check-label">
									<input type="checkbox" name="history" class="form-check-input-styled-primary mr-2" data-fouc>
									Include History
								</label>								
							</div>
						</div>
					</div>

					<div class="col-md-2 my-2">
						<div class="form-group_no" style="margin-top: 2.6rem">
							<div class="form-check form-check-inline">
								<label class="form-check-label">
									<input type="checkbox" name="deleted" class="form-check-input-styled-primary mr-2" data-fouc>
									Include Deleted
								</label>								
							</div>
						</div>
					</div>

					<div class="col-md-2 my-2">
						<label class="col-form-label">&nbsp;&nbsp;</label>
						<div>
							<button data-style="zoom-in" type="submit" class="btn bg-primary btn-ladda btn-ladda-spinner"><i class="icon-search4 mr-2"></i> Search</button>
						</div>
					</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>View</th>
						<th>ID</th>
						<th>Date</th>
						<th>Uploaded By</th>
						<th>Plant</th>
						<th>Delete</th>
			        </tr>		        
				</thead>
				<tbody>
					@foreach($listings as $listing)
					<tr data-listing_id="{{$listing->id}}">
						<td><a href="/deliveryschedule/listings/show/{{$listing->id}}" class="btn bg-primary btn-outline text-primary"><i class="icon-zoomin3"></i></a></td>
						<td>{{$listing->id}}</td>
						<td class="created_at">{{$listing->created_at_dmy}}</td>
						<td class="uploader">{{$listing->uploader->full_name}}</td>
						<td>{{$listing->plant->name}}</td>
						<td>
							@if(!$listing->trashed())
								<button class="btn bg-danger btn-outline text-danger btn-delete"><i class="icon-cancel-square"></i></button>
							@endif
						</td>
					</tr>
					@endforeach

				</tbody>
				<tfoot>
					<tr>
			            <td class="not-searchable">&nbsp;</td>			            
						<td>ID</td>
						<td>Date</td>
						<td>Uploaded By</td>
						<td>Plant</td>
			            <td class="not-searchable">&nbsp;</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 HISTORY = {{$history}};
		const DELETED = {{$deleted}};
		const SUPPLIER_PLANT_ID = {{$supplier_plant_id}};
	</script>
	<script src="{{mix('js/deliveryschedule/listings_overview.js')}}"></script>

@endsection