@extends('layouts.master')

@section('header-title')
	<span class="font-weight-semibold">Configuration</span> - Suppliers
@endsection

@section('styles')	


@endsection

@section('content')

	<!-- Scrollable datatable -->
	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h5 class="card-title">Suppliers</h5>
			<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 that are loaded in the system.</p>
			<div class="collapse" id="info_collapse">
				<p> 
					• You can see all the suppliers in the system, but can modify only the Codes of the ones that you have permission.<br>
					• If you want to add new supplier user use this <a href="/users/external">page</a>.<br>
				</p>	
			</div>			
		</div>

		<div class="table-responsive border-0">
			<table id="main_datatable" class="table table-hover main-datatable datatable-header-basic">
				<thead>
					<tr>
						<th>&nbsp;</th>
			            <th>Name</th>
			            <th>Plants | Codes</th>
			            <th>Users Count</th>
			            <th>Type</th>
			            <th>City</th>
			            <th>State</th>
			            <th>Country</th>
			            <th>Created At</th>
			            <th>Address</th>
			        </tr>		        
				</thead>
				<tfoot>
					<tr>
						<td>&nbsp;</td>
			            <td>Name</td>
			            <td>Plants | Codes</td>
			            <td>Users Count</td>
			            <td>Type</td>
			            <td>City</td>
			            <td>State</td>
			            <td>Country</td>
			            <td>Created At</td>
			            <td>Address</td>
			        </tr>
				</tfoot>			
			</table>
		</div>
	</div>
	<!-- /scrollable datatable -->

	{{-- _________ HTML appended to datatable form _________ --}}
		<div id="plants_codes_html" class="d-none">
			<div class="table-responsive plants-codes">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Plant</th>
							<th>Local Name</th>
							<th>Code</th>
							<th>Action</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
			                    <select name="plant_id" class="form-control select" data-fouc>
			                    </select>
							</td>
							<td><input type="text" name="name" placeholder="Name" class="form-control" maxlength="100"></td>
							<td><input type="text" name="code" placeholder="Code" class="form-control" maxlength="20"></td>
							<td><button type="button" class="btn btn-outline bg-success text-success btn-icon btn-add-plant"><i class="icon-plus-circle2"></i></button></td>
						</tr>												
					</tbody>
				</table>
			</div>										
		</div>
	{{-- _________ /HTML appended to datatable form _________ --}}


@endsection

@section('plugin-scripts')

	@include('scripts.datatablesjs')

@endsection

@section('app-scripts')

	<script type="text/javascript">
		const SUPPLIERS = {!! $suppliers->toJSON() !!};
	</script>

    <script src="{{mix('js/master/suppliers.js')}}"></script>

@endsection