@extends('admin.tpl.admintpl')

@section('content')

<div class="row">
	<div class="col-md-12">                    
	  <div class="panel">
		<div class="panel-heading">
			<div class="panel-control">
				<button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
				<button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
				<button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
				<button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
			</div>
			<h3 class="panel-title">Department Form</h3>
		</div>
		<div class="panel-body">
			{{ csrf_field() }}
			<!-- Inline Form  -->
			<!--===================================================-->
			<form data-parsley-validate class="form-inline" method="post" id="form-department" action="{{ route('createdepartment') }}">
				
				<div class="form-group mar-hor">
					<label for="dep-name" class="sr-only">Department name</label>
					<input type="text" placeholder="Enter department name" id="dep_name" class="form-control" data-parsley-trigger="blur" data-parsley-required data-index="0">
				</div>
				<div class="form-group mar-rgt">
					<label for="dep-description" class="sr-only">Department description</label>
					<input type="text" placeholder="Description here..." id="dep_description" class="form-control" data-parsley-trigger="blur" data-parsley-required data-index="1">
					<!--<textarea placeholder="Desciption here..."  rows="13" id="dep_description" name="dep_description" class="form-control"></textarea>-->
				</div>
				<!--
				<div class="form-group mar-rgt">
					<label for="supervisor" class="sr-only">Supervisor</label>
					<input type="text" placeholder="Supervisor" id="supervisor" class="form-control" >
				</div>
				-->
				<button class="btn btn-info" type="submit">Save</button>
			</form>
			<!--===================================================-->
			<!-- End Inline Form  -->
		</div>
	 </div>
   </div>
 </div>



<!-- Basic Data Tables -->
<!--===================================================-->
<div class="panel">
<div class="panel-heading">
	<h3 class="panel-title">List of Departments</h3>
</div>
<div class="panel-body">
	<table id="demo-dt-basic" class="table table-striped table-bordered table-responsive response-datas">
		<thead>
			<tr>
				<th>Department Name</th>
				<th>Department Description</th>
				<!--<th>Supervisor</th>-->
				<th class="">Operations</th>
				
			</tr>
		</thead>
		<tbody>
		@if($departments)
			@foreach($departments as $department)
			<tr class="{{ 'tr-'.$department->id }}">
				<td>{{$department->dep_name}}</td>
				<td>{{$department->dep_description}}</td>
				<!--<td>{{$department->supervisor}}</td>-->
				<td>
				    	@if( $department->id != 1  )
							    @if( $department->id != 2  )
							        @if( $department->id != 3  )
					<div class="btn-group btn-group-lg">
						<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button">
						Action <i class="dropdown-caret fa fa-chevron-down"></i>
						</button>
						<ul class="dropdown-menu">
							<li class="dropdown-header">Select action</li>
						
							<li><a href="{{ url('detdep/'.$department->id) }}" data-toggle="modal" data-target="#detdep" data-slug="{{ $department->id }}" class="detaildep">Details</a>

							</li>
							<li><a href="{{ url('upgetdet/'.$department->id) }}" data-toggle="modal" data-target="#updepartment" data-slug="{{ $department->id }}" class="upgetdet">Update</a>

							</li>
							<li><a href="{{ url('deletedepartment/'.$department->slug) }}" data-slug="{{ $department->slug }}" class="delete-item">Delete</a>
							</li>
							
						</ul>
					</div>
					@endif
						@endif
						@endif
				</td>
			</tr>
			@endforeach	
		@endif
		</tbody>
	</table>
</div>
</div>


		<!--updated department -->


		<div class="modal fade" id="updepartment" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        
                        <h1 class="modal-title">Update Departement</h1>
                        
                    </div>
                    <div class="modal-body">
					
						<form data-parsley-validate  class="form-horizontal" id="form-update-det" action="{{ route('updatedet') }}" method="post">
							<div class="panel-body">

									<div class="form-group mar-hor">
										<label for="dep-name">Department name</label>
										<input type="text" placeholder="Enter department name" id="dep_name_u" name="dep_name_u" class="form-control"data-parsley-trigger="blur" data-parsley-required>
										<input id="dep_id" name="dep_id" type="hidden" class="form-control" placeholder="">
									</div>
									<div class="form-group mar-rgt">
										<label for="dep-description">Department description</label>
										<textarea placeholder="Desciption here..."  rows="13" id="dep_description_u" name="dep_description_u" class="form-control"data-parsley-trigger="blur" data-parsley-required></textarea>
									</div>
							
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        <button type="submit" class="btn btn-primary" id="btn_update">Update</button>
									</div>
								</div>
                        </form>
                    </div> 
                </div>
            </div>
        </div>

		
		<div class="modal fade" id="detdep" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    
					<div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h1 class="modal-title">Department Detail</h1>
                    </div>
					
                    <div class="modal-body">
					
							<form class="form-horizontal" id="detaildep" action="" method="post">
                                    <div class="panel-body">
                                        
                                                <label for="dep-name">Department Name</label>
                                                <input readonly="readonly" id="dep_name_d" name="dep_name_d" type="text" class="form-control" placeholder="dep Name" required>
                                                <input id="dep_id" name="dep_id" type="hidden" class="form-control" placeholder="" required>
                                            
                                        <label for="dep-description_d">Department Description</label>
                                        <textarea readonly="readonly" name="dep_description_d" id="dep_description_d" placeholder="dep Description" rows="10" class="form-control" required></textarea>
									
									</div>
							</form>
					</div> 
					
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
					
				</div>
            </div>
        </div>

@stop

@section('addlibjs')

<!-- We put here the additionnals libs for this page only -->
<!-- Form validation -->
<script src="{{ asset('assets/plugins/parsley/parsley.min.js') }}"></script>

 <!--Demo script [ DEMONSTRATION ]-->
<link href="{{ asset('assets/plugins/datatables/media/css/dataTables.bootstrap.css') }}" rel="stylesheet">
<link href="{{ asset('assets/plugins/datatables/extensions/Responsive/css/dataTables.responsive.css') }}" rel="stylesheet">
 <!--DataTables [ OPTIONAL ]-->
<script src="{{ asset('assets/plugins/datatables/media/js/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/media/js/dataTables.bootstrap.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js') }}"></script>
<!--DataTables Sample [ SAMPLE ]-->
<script src="{{ asset('assets/js/demo/tables-datatables.js') }}"></script>
 <!--Demo script [ DEMONSTRATION ]-->
 <script src="{{ asset('assets/js/demo/form-layout.js') }}"></script>
<script src="{{  asset('assets/plugins/pace/pace.min.css') }}"></script>
<script src="{{ asset('plugins/pace/pace.min.js' )}}"></script>
<script src="{{ asset('plugins/modal/modal.css' )}}"></script>
<script src="{{ asset('plugins/modal/modal.js' )}}"></script>
<!--Actions roles user -->
<script src="{{ asset('js/admin/department/create-department.js') }}"></script>
<script src="{{ asset('js/admin/department/delete-department.js') }}"></script>
<script src="{{ asset('js/admin/department/upgetdet.js') }}"></script>
<script src="{{ asset('js/admin/department/updatedet.js') }}"></script>
<script src="{{ asset('js/admin/department/detail-dep.js') }}"></script>
@stop