@extends('layouts.master', 	[
								'plugins'			=> ['datatables' => true]
							])

@section('content')

	
	@component('components.card_main', [
											'title' 		=> 	'Administrate Quantity Explosion of BOM',
											'description'	=>	"Here you can manage explosions of BOM."
										])

        @slot('body')
            <div class="d-flex justify-content-end">
                <div>		
                </div>
            </div>
        @endslot

		@slot('after_body')
			@component('components.datatable')
				@slot('thead')
				
					<tr>
						<th>&nbsp;</th>
						<th>@lang('master.name')</th>
						<th>@lang('master.description')</th>
						<th>@lang('master.quantity')</th>
						<th>@lang('master.unit')</th>	
						<!--<th>@lang('master.level')</th>-->	
						<!--<th>@lang('master.status')</th>-->
						<th>@lang('master.part_number')</th>	
						<th>@lang('master.plant')</th>					
						<th>@lang('master.creator')</th>	
					</tr>
				@endslot
				@slot('tfoot')
					<tr>
						<td class="not-searchable">&nbsp;</td>			            
						<td>@lang('master.name')</td>		
						<td>@lang('master.description')</td>		
						<td>@lang('master.quantity')</td>	
						<td>@lang('master.unit')</td>					
						<!--<td>@lang('master.level')</td>-->	
						<!--<td>@lang('master.status')</td>-->
						<td>@lang('master.part_number')</td>				
						<td>@lang('master.plant')</td>				
						<td>@lang('master.creator')</td>							
					</tr>
				@endslot
			@endcomponent
		@endslot
	@endcomponent

	<!-- --------- Upload Document modal----------- -->
	<div id="add_document_modal" class="modal fade" tabindex="-1" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">Upload Explosion BOM</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				
				<form id="add_document_form" enctype="multipart/form-data">
					<div class="modal-body">
						<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">
								<input type="hidden" name="id" value="">

								<div class="">
									@component('components.file_input',[
									'id'=>'import_file', 
									'name'=>'import_file', 
									'accept' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
									])@endcomponent
								</div>
								<span class="text-muted">Accepted file type: Excel. Max file size 5MB</span>								
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button data-style="zoom-in" type="submit" class="btn bg-primary btn-ladda btn-ladda-spinner">Upload Document<i class="icon-paperplane ml-1"></i> </button>
					</div>						
				</form>
			</div>
		</div>
	</div>
	<!-- --------- / Upload Document modal----------- -->
@endsection

@section('app-scripts')
	<script type="text/javascript">
		const COMPONENTS = {!! json_encode($components) !!};
		const PART_NUMBERS = {!! json_encode($part_numbers) !!}
	</script>
	<script src="{{mix('js/master/component.js')}}"></script>
@endsection