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


@section('styles')
	<link href="{{asset('plugins/smartwizard/css/smart_wizard.min.css')}}" rel="stylesheet" type="text/css">
	<link href="{{asset('plugins/smartwizard/css/smart_wizard_theme_arrows.min.css')}}" rel="stylesheet" type="text/css">
@endsection

@section('content')


	@component('components.card_main', [
											'title' 			=> 	'Add New User',
											'id'				=>	"add_user_card",
											'custom_style'		=>	'display:none',
										])
		@slot('body')
			<div id="add_user_wizard">
			    <ul>
			        <li><a href="#add_user_step_0">Personal Data<br /><small>User Information</small></a></li>
			        <li><a href="#add_user_step_1">Titles<br /><small>Create Title</small></a></li>
			        <li><a href="#add_user_step_2">Roles<br /><small>Give Permissions</small></a></li>
			        <li><a href="#add_user_step_3">Finish<br /><small>Review and Save</small></a></li>
			    </ul>
			 
			    <div>
			        <div id="add_user_step_0" class="">
			        	<form>
							<div class="d-flex flex-wrap justify-content-center mt-2 mb-4">
								<div class="mx-3">
									<div class="form-group">
										<label class="">First Name:</label>
										<input type="text" name="first_name" class="form-control" placeholder="">
									</div>
								</div>

								<div class="mx-3">
									<div class="form-group">
										<label class="">Last Name:</label>
										<input type="text" name="last_name" class="form-control" placeholder="">
									</div>
								</div>

								<div class="mx-3">
									<div class="form-group">
										<label class="">Email address:<span class='text-danger'>*</span></label>
										<input  type="email" name="email" required class="form-control" placeholder="email@katcon.com">
									</div>
								</div>


								<div class="mx-3">
									<div class="form-group">
										<label class="">Telephone:</label>
										<input type="text" name="telephone" class="form-control" placeholder="">
									</div>
								</div>

								{{-- <div class="d-flex"> --}}
	
									<div class="mx-3">
										<div class="form-group">
											<label class="">Employee Id:</label>
											<input type="number" name="employee_id" class="form-control" placeholder="">
										</div>
									</div>
	
									<div class="mx-3">
										<label class="">Plant<span class='text-danger'>*</span></label>
										<div class="form-group">
						                    <select required name="plant_id" class="form-control" data-fouc>
						                    </select>
										</div>
									</div>

									<div class="mx-3 d-flex flex-wrap align-items-center">
										<div>
											<label class="">Select Title<span class='text-danger'>*</span></label>
											<div class="form-group">
							                    <select required  name="title_id" class="form-control" data-fouc>
							                    </select>
											</div>
										</div>
										<div class="ml-2">
											@component('components.button', ['id'=>'create_title_btn', 'text'=>'Or Create a New One', 'type' =>'add', 'extra_class'=>'mt-2']) @endcomponent
										</div>
									</div>
								{{-- </div> --}}
								
							</div>
			        	</form>
			        </div>
			        <div id="add_user_step_1" class="">
			        	<form>
							<div class="d-flex flex-wrap justify-content-center mt-2 mb-4">
								<div class="mx-3">
									<div class="form-group">
										<label class="">Name<span class='text-danger'>*</span></label>
										<input required type="text" name="name" class="form-control" placeholder="" style="width: 375px">
									</div>
								</div>

								<div class="mx-3">
									<label class="">Department<span class='text-danger'>*</span></label>
									<div class="form-group">
					                    <select required name="department_id" class="form-control" data-fouc>
					                    </select>
									</div>
								</div>

								<div class="d-flex">
									<div class="mx-3">
										<label class="">Manager Plant<span class='text-danger'>*</span></label>
										<div class="form-group">
						                    <select required name="manager_plant_id" class="form-control" data-fouc>
						                    </select>
										</div>
									</div>

									<div>
										<label class="">Select Manager Title<span class='text-danger'>*</span></label>
										<div class="form-group">
						                    <select required name="parent_id" class="form-control" data-fouc>
						                    </select>
										</div>
									</div>

								</div>
								
							</div>
			        	</form>
			        </div>
			        <div id="add_user_step_2" class="">
			        </div>
			        <div id="add_user_step_3" class="">
			        	<form>
							<div class="d-flex flex-wrap justify-content-center mt-2 mb-4">
								
								<div class="mx-5 personal-information">
									<h4>Personal Information:</h4>
									<ul>
										
									<li><span class="font-weight-bold">First Name: 	</span> <span class="first-name"></span></li>
									<li><span class="font-weight-bold">Last Name: 		</span> <span class="last-name"></span></li>
									<li><span class="font-weight-bold">Email: 			</span> <span class="email"></span> </li>
									<li><span class="font-weight-bold">Telephone: 		</span> <span class="telephone"></span></li>
									<li><span class="font-weight-bold">Employee ID: 		</span> <span class="employee_id"></span></li>
									<li><span class="font-weight-bold">Plant: 			</span> <span class="plant"></span></li>
									<li><span class="font-weight-bold">Job Title: 		</span> <span class="title"></span></li>
									</ul>
								</div>

								<div class="mx-5 roles-information">
									<h4>Module and Roles:</h4>
									<div>
										
									</div>
								</div>

							</div>
							<div class="d-flex justify-content-center">
								@component('components.button', ['text'=>'Create User', 'type' =>'send', 'submit'=>true, 'extra_class'=>'btn-lg']) @endcomponent
							</div>
			        	</form>
			        </div>
			    </div>
			</div>
		@endslot
	@endcomponent

	
	@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' 			=> 	'Internal Users',
											'description'		=>	'Here you can see all the Katcon users that have access to the platform.',
											'more_info_button'	=> 	true,
											'collapse_button'	=>	true,
										])

		@slot('info')
			<p> 
				• If you want to add new user and you don't find a title, remember to first add a Title <a href="/titles">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>
				• You can see all the users in the system, but can modify only the ones that you have permission.
			</p>	
		@endslot
		
		@slot('body')
		@endslot

		@slot('after_body')
			@component('components.datatable')
				@slot('thead')
					<tr>
						<th>&nbsp;</th>
			            <th>Email</th>
			            <th>Employee ID</th>
			            <th>First Name</th>
			            <th>Last Name</th>
			            <th>Telephone</th>
			            <th>Title</th>
			            <th>Plant</th>
			            <th>Status</th>
			            <th>Timezone</th>
			            <th>Last Login Date</th>
			            <th>Last Login IP</th>
			            <th>Created At</th>
			            <th>Added By</th>
			            <th>Master Roles</th>
			            <th>Documents Roles</th>
			            <th>Supplier Q Roles</th>
			            <th>Delivery S Roles</th>
			            <th>Audit Roles</th>
			            <th>Reworks Roles</th>
			            <th>Andon Roles</th>
						<th>Warehouse Roles</th>
						<th>Shipment Roles</th>
						<th>APQP Roles</th>
			            @if($user->is_super_user)
			            <th>Suggestions Mailbox Roles</th>
			            @endif
			        </tr>	
				@endslot
				@slot('tfoot')
					<tr>
						<td class="not-searchable">&nbsp;</td>
			            <td>Email</td>
			            <td>Employee ID</td>
			            <td>First Name</td>
			            <td>Last Name</td>
			            <td>Telephone</td>
			            <td>Title</td>
			            <td>Plant</td>
			            <td>Status</td>
			            <td>Timezone</td>
			            <td>Last Login Date</td>
			            <td>Last Login IP</td>			            
			            <td>Created 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>
			            <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>
			            @if($user->is_super_user)
			            <td class="not-searchable">&nbsp;</td>
			            @endif
			        </tr>
				@endslot
			@endcomponent
		@endslot

	@endcomponent


@endsection

@section('plugin-scripts')
    <script src="{{asset('plugins/smartwizard/js/jquery.smartWizard.min.js')}}"></script>

@endsection

@section('app-scripts')
	
	<script type="text/javascript">
		const SCOPE = 'internal';
	</script>
    <script src="{{mix('js/master/internal_users.js')}}"></script>

@endsection