@extends('layouts.master')

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

@section('content')

	<!-- Scrollable datatable -->
	<div class="card card-main">
		<div class="card-header header-elements-inline">
			<h5 class="card-title">Departments</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 departments that are loaded in the system.</p>
			<div class="collapse" id="info_collapse">
				<p class=""> 
					• To deactive a Department, first you need to deactive all titles associated with it.<br>
					• You can see all the department in the system, but can modify only the ones that you have permission.
				</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>Responsibles</th>
			            <th>General Status</th>
			            <th>Andon Status</th>
			            <th>Plant</th>
			            <th>Created At</th>
			        </tr>		        
				</thead>
				<tfoot>
					<tr>
						<td class="not-searchable">&nbsp;</td>
			            <td>Name</td>
			            <td>Responsibles</td>
			            <td>General Status</td>
			            <td>Andon Status</td>
			            <td>Plant</td>
			            <td>Created At</td>
			        </tr>
				</tfoot>			
			</table>
		</div>

	</div>
	<!-- /scrollable datatable -->

@endsection

@section('plugin-scripts')

	@include('scripts.datatablesjs')

@endsection

@section('app-scripts')
	<script type="text/javascript">
		
		const USERS = {!! $users->toJson() !!};

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

@endsection