@extends('layouts.master')

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

@section('content')


	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h4 class="card-title">Suppliers Certificates</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 for the selected plant with their certificates</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-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 class="table-bordered">
					<tr>
						<th rowspan="2" >Supplier Name</th>
						<th rowspan="2" >Code</th>
						<th rowspan="2" >Type</th>
						<th colspan="5" style="border-right: none;">Quality Certificate</th>
						<th colspan="4">Environmental Certificate</th>
			        </tr>
			        <tr>
			        	{{-- <th>Upload Date</th> --}}
			        	<th style="border-right: none; border-left:none">Number</th>
			        	<th style="border-right: none; border-left:none">Expiration Date</th>
			        	<th style="border-right: none; border-left:none">Type</th>
			        	<th style="border-right: none; border-left:none">Status</th>
			        	<th style="border-right: none; border-left:none">Actions</th>
			        	{{-- <th>Upload Date</th> --}}
			        	<th style="border-right: none; border-left:none"> Expiration Date</th>
			        	<th style="border-right: none; border-left:none">Type</th>
			        	<th style="border-right: none; border-left:none">Status</th>
			        	<th style="border-right: none; border-left:none">Actions</th>			        	
			        </tr>
				</thead>
				<tfoot>
					<tr>
						<td>Supplier Name</td>
						<td>Code</td>
						<td>Type</td>
						<td>Cert. Number</td>
						<td>Expiration Date</td>
						<td>Status</td>
						<td>Type</td>
						<td class="not-searchable">&nbsp;</td>
						<td>Expiration Date</td>
						<td>Status</td>
						<td>Type</td>						
						<td class="not-searchable">&nbsp;</td>
					</tr>
				</tfoot>

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


    <!-- --------- Add Document modal----------- -->
    {{-- Removed tabindex because select2 can't work properly --}}
	<div id="add_certificate_modal" class="modal fade" tabindex="-1" data-backdrop="static">
	{{-- <div id="add_certificate_modal" class="modal fade"  data-backdrop="static"> --}}
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">Upload Certificate</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				
				<form id="add_certificate_form" enctype="multipart/form-data">

					<input type="hidden" name="id" value="">
					<input type="hidden" name="type" value="">

					<div class="modal-body">

						<div class="form-group row" style="display: none;">
							<label class="col-form-label col-sm-3">Number<span class='text-danger'>*</span></label>
							<div class="col-sm-9">
								<input type="text" maxlength="50" name="number" class="form-control">
							</div>
						</div>	

						<div class="form-group row">
							<label class="col-form-label col-sm-3">Type<span class='text-danger'>*</span></label>
							<div class="col-sm-9">
								<select required name="certicate_type_id" class="form-control"  data-fouc >
								</select>
							</div>
						</div>						

						<div class="form-group row">
							<label class="col-form-label col-sm-3">Expiration Date<span class='text-danger'>*</span></label>
							<div class="col-sm-9">
								<input type="text" name="expiration" class="form-control datepicker" required>
							</div>
						</div>	

						<div class="form-group row">
							<label class="col-form-label col-sm-3 mt-2">Select File<span class='text-danger'>*</span></label>
							<div class="col-sm-9">

								<div class="">
									@component('components.file_input',[
																		'id'=>'import_file', 
																		'name'=>'import_file', 
																		'accept' => 'image/jpeg,image/gif,image/png,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf'
																		])@endcomponent
								</div>
								<span class="text-muted">Accepted file type: PDF, Image, Word. Max file size 5MB</span>								
								
{{-- 								<div class="custom-file">
									<input type="file" class="custom-file-input text-muted" name="import_file" id="import_file" aria-describedby="import_file" accept=".pdf,.jpg,.png,.gif,.doc,.docx" required>
									<label class="custom-file-label" for="import_file">Choose File</label>
									<span class="form-text text-muted">Accepted file type: PDF, Image, Word. Max file size 5MB</span>
								</div>	 --}}
							</div>
						</div>

						<div id="feedback_modal"></div>

					</div>

					<div class="modal-footer">
						<button data-style="zoom-in" type="submit" class="btn bg-primary btn-ladda btn-ladda-spinner">Upload Certificate<i class="icon-paperplane ml-1"></i> </button>
					</div>						

				</form>
			</div>
		</div>
	</div>
	<!-- /primary modal -->
    <!-- --------- / Add Document modal----------- -->


@endsection

@section('plugin-scripts')

	@include('scripts.datatablesjs')

@endsection


@section('app-scripts')

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

@endsection