@extends('layouts.master')

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

@section('content')


	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h4 class="card-title">Suppliers Scorecard</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 the general evaluation of Suppliers Scorecard, click on one to see more details.</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 name="year" class="form-control"></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>View<br>Scorecard</th>
						<th>Supplier</th>
						<th>Supplier Code</th>
						<th>Plant</th>
						<th>Year</th>
						<th>YTD</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>
				<tfoot>
					<tr>
						<td class="not-searchable">&nbsp;</td>
						<td>Supplier</td>
						<td>Supplier Code</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
						<td class="not-searchable">&nbsp;</td>
			        </tr>					
				</tfoot>

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


@endsection

@section('plugin-scripts')

	@include('scripts.datatablesjs')

@endsection


@section('app-scripts')

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

@endsection