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

@section('content')

	@component('components.card_main', [
		'title' 			=> 	'Edit Roles User',
		'id'				=>	"edit_roles_card",
		'custom_style'		=>	'display:none',
	])
		@slot('body')
			<div id="edit_roles_div" class="">
			</div>
			<div class="d-flex justify-content-center">
				<div class="mx-2">
					@component('components.button', ['id'=>'save_roles_btn', 'text'=>'Update Roles', 'type' =>'send', 'extra_class'=>'btn-lg']) @endcomponent
				</div>
				<div class="mx-2">
					@component('components.button', ['id'=>'cancel_save_roles_btn', 'type' =>'cancel',  'extra_class'=>'btn-lg']) @endcomponent
				</div>
			</div>
		@endslot
	@endcomponent


	@component('components.card_main', [
											'title' 			=> 	'Supplier Users',
											'description'		=>	'Here you can see all the supplier users that have access to the platform.',
											'more_info_button'	=> 	true,
											'collapse_button'	=>	true,
										])

		@slot('info')
			<p> 
				• If you want to add a user for a new supplier, remember to add first add the Supplier <a href="/suppliers">here</a>.<br>
				• After adding a user, an email with the instructions to set a new password is sent to the user.<br>
				• Send Password Reset button, is used in case the user needs another email to reset his password.<br>
				• After adding a user, is recommended to set his permissions using the orange button 'Roles'.<br>
				• When a user is deactivated, his access to the system is blocked.<br>
			</p>	
		@endslot
		
		@slot('body')
		@endslot

		@slot('after_body')
			@component('components.datatable')
				@slot('thead')
					<tr>
						<th>&nbsp;</th>
						<th>Email</th>
						<th>First Name</th>
						<th>Last Name</th>
						<th>Supplier</th>
						<th>Status</th>
						<th>Contact Type</th>
						<th>Telephone</th>
						<th>Timezone</th>
						<th>Last Login Date</th>
						<th>Last Login IP</th>
						<th>Created At</th>
						<th>Terms Agreed At</th>
						<th>Added By</th>
						<th>Supplier Quality Roles</th>			            
						<th>Delivery Schedule Roles</th>
						<th>Shipments Roles</th>
						<th>APQP Roles</th>
					</tr>
				@endslot
				@slot('tfoot')
					<tr>
						<td class="not-searchable">&nbsp;</td>
			            <td>Email</td>
			            <td>First Name</td>
			            <td>Last Name</td>
			            <td>Supplier</td>
			            <td>Status</td>
			            <td>Contact Type</td>
			            <td>Telephone</td>
			            <td>Timezone</td>
			            <td>Last Login Date</td>
			            <td>Last Login IP</td>
			            <td>Created At</td>
			            <td>Terms Agreed At</td>
			            <td>Added By</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>
				@endslot
			@endcomponent
		@endslot

	@endcomponent


@endsection


@section('app-scripts')

	<script type="text/javascript">
		const SCOPE = 'external';
	</script>
    <script src="{{mix('js/master/external_users.js')}}"></script>

@endsection