@extends('layouts.master')

@section('header-title')
	<span class="font-weight-semibold">Supplier Quality - Total Orders</span>
@endsection

@section('styles')
<style type="text/css">
	.ui-datepicker-calendar {
    	display:none;
	}

	/*.ui-datepicker-month { display: none; }*/

</style>
@endsection

@section('content')

	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h4 class="card-title">Import Total Orders</h4>
			<div class="header-elements">
				<div class="list-icons">
					<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 total orders for all suppliers, using the Navision export format.</p>
			<div class="collapse" id="info_collapse1">
				<p> 
					• You can only import the orders for current month and previous month.<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-3 col-6 my-2">
						<label class="col-form-label">Month:</label>
						<div class="input-group">
							<span class="input-group-prepend">
								<span class="input-group-text"><i class="icon-calendar2"></i></span>
							</span>
							<input type="text" name="month_year" class="form-control monthPicker"> 
						</div>						
					</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">Total Orders 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 suppliers with their total orders in the selected year .</p>
			<div class="collapse" id="info_collapse">
				<p> 
					• <br>
					• <br>
				</p>	
			</div>

			<form id="search_data_form">
				<div class="row">
					<div class="col-md-3 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-3 my-2">
						<label class="col-form-label">Year:</label>
						<div class="input-group">
							<span class="input-group-prepend">
								<span class="input-group-text"><i class="icon-calendar2"></i></span>
							</span>
							<select class="form-control" name="year"></select> 
						</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>Supplier</th>
						<th>Supplier Code</th>
						<th>Year</th>
						<th>Jan</th>
						<th>Feb</th>
						<th>Mar</th>
						<th>Abr</th>
						<th>May</th>
						<th>Jun</th>
						<th>Jul</th>
						<th>Ago</th>
						<th>Sept</th>
						<th>Oct</th>
						<th>Nov</th>
						<th>Dec</th>
			        </tr>		        
				</thead>
				<tbody></tbody>

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


@endsection

@section('plugin-scripts')

	@include('scripts.datatablesjs')

@endsection


@section('app-scripts')

	<script src="{{mix('js/supplierquality/total_orders.js')}}"></script>

@endsection