@extends('templates.adminlte3.layout')

@section('title', 'Akses User')

@section('css')
	@include('monitoring::templates.adminlte3.Partials.css')
@stop

@section('sidebar')
	@include('monitoring::templates.adminlte3.Partials.sidebar')
@stop

@section('breadcrumb')
	<ol class="breadcrumb float-sm-right" style="font-size: .75rem !important">
	    <li class="breadcrumb-item"><a href="javascript:void(0)">Kelola Anggaran</a></li>
	    <li class="breadcrumb-item"><a href="{{ url('monitoring/akses') }}">Akses</a></li>
	    <li class="breadcrumb-item active">User</li>
	</ol>
@stop

@section('content')
<div class="row">
	<div class="col-12">
		<div class="card">
			<div class="card-header">
				<h3 class="card-title">Daftar User</h3>
				<div class="card-tools">
					<button type="button" class="btn btn-tool add-table" data-toggle="modal" data-target="#modal-add">
                  		<i class="fas fa-plus"></i>
                  	</button>
                  	<button type="button" class="btn btn-tool refresh-table">
                  		<i class="fas fa-sync-alt"></i>
                  	</button>
                </div>
			</div>
            <!-- /.card-header -->
			<div class="card-body">
				<table id="data" class="table table-bordered table-hover text-xs">
					<thead>
						<tr>
							<th class="bg-gray-dark text-center">Username</th>
							<th class="bg-gray-dark text-center">Nama</th>
							<th class="bg-gray-dark text-center">NIP</th>
							<th class="bg-gray-dark text-center">Jabatan</th>
							<th class="bg-gray-dark text-center">Suspend</th>
							<th class="bg-gray-dark text-center">Aksi</th>
						</tr>
						<tr>
							<th class="filter-columns bg-gray">
								<input class="form-control form-control-sm" type="text" placeholder="Enter Here...">
							</th>
							<th class="filter-columns bg-gray">
								<input class="form-control form-control-sm" type="text" placeholder="Enter Here...">
							</th>
							<th class="filter-columns bg-gray">
								<input class="form-control form-control-sm" type="text" placeholder="Enter Here...">
							</th>
							<th class="filter-columns bg-gray">
								<input class="form-control form-control-sm" type="text" placeholder="Enter Here...">
							</th>
							<th class="filter-columns bg-gray">
								<select class="select2bs4" data-placeholder="Chose Here.." style="width: 100%">
									<option value=""></option>
									<option value="0">Tidak Aktif</option>
									<option value="1">Aktif</option>
								</select>
							</th>
							<th class="filter-columns bg-gray"></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="text-left">admin</td>
							<td class="text-left">Administrator</td>
							<td class="text-center">-</td>
							<td class="text-left">Administrator</td>
							<td class="text-center"><i class="fas fa-check" style="color: #28a745"></i></td>
							<td class="text-center">
								<button type="button" class="btn bg-gradient-warning btn-sm"><i class="fas fa-edit text-xs"></i></button>
								<button type="button" class="btn bg-gradient-danger btn-sm"><i class="fas fa-times text-xs"></i></button>
							</td>
						</tr>
						<tr>
							<td class="text-left">admin2</td>
							<td class="text-left">Administrator 2</td>
							<td class="text-center">-</td>
							<td class="text-left">Administrator</td>
							<td class="text-center"><i class="fas fa-times" style="color: #dc3545"></i></td>
							<td class="text-center">
								<button type="button" class="btn bg-gradient-warning btn-sm"><i class="fas fa-edit text-xs"></i></button>
								<button type="button" class="btn bg-gradient-danger btn-sm"><i class="fas fa-times text-xs"></i></button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="modal-add">
	<div class="modal-dialog modal-lg">
  		<div class="modal-content">
    		<div class="modal-header">
      			<h5 class="modal-title" style="font-weight: bold;">Tambah User</h5>
      			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
        			<span aria-hidden="true">&times;</span>
      			</button>
    		</div>
    		<form class="form-horizontal">
    			<div class="modal-body">
                  	<div class="form-group row">
                    	<label for="kode" class="col-sm-2 col-form-label">Kode</label>
                    	<div class="col-sm-10">
                      		<input type="text" class="form-control form-control-sm" id="kode" placeholder="Enter Here...">
                    	</div>
                  	</div>
                  	<div class="form-group row">
                    	<label for="username" class="col-sm-2 col-form-label">Username</label>
                    	<div class="col-sm-10">
                      		<input type="text" class="form-control form-control-sm" id="username" placeholder="Enter Here...">
                    	</div>
                  	</div>
                  	<div class="form-group row">
                    	<label for="nama" class="col-sm-2 col-form-label">Nama</label>
                    	<div class="col-sm-10">
                      		<input type="text" class="form-control form-control-sm" id="nama" placeholder="Enter Here...">
                    	</div>
                  	</div>
                  	<div class="form-group row">
                    	<label for="nip" class="col-sm-2 col-form-label">NIP</label>
                    	<div class="col-sm-10">
                      		<input type="text" class="form-control form-control-sm" id="nip" placeholder="Enter Here...">
                    	</div>
                  	</div>
                  	<div class="form-group row">
                    	<label for="password" class="col-sm-2 col-form-label">Password</label>
                    	<div class="col-sm-10">
                      		<input type="password" class="form-control form-control-sm" id="password" placeholder="Enter Here...">
                    	</div>
                  	</div>
                  	<div class="form-group row">
                    	<label for="confirm_password" class="col-sm-2 col-form-label">Confirm Password</label>
                    	<div class="col-sm-10">
                      		<input type="password" class="form-control form-control-sm" id="confirm_password" placeholder="Enter Here...">
                    	</div>
                  	</div>
                  	<div class="form-group row">
                    	<label for="jabatan" class="col-sm-2 col-form-label">Jabatan</label>
                    	<div class="col-sm-10">
                      		<select class="form-control form-control-sm select2bs4 select2sm" id="jabatan" data-placeholder="Choose Here...">
                      			<option value=""></option>
                      		</select>
                    	</div>
                  	</div>
                  	<div class="form-group row">
                  		<label class="col-sm-2 col-form-label">Suspend</label>
                    	<div class="col-sm-10">
                    		<div class="custom-control custom-checkbox" style="margin-top: 5px; margin-bottom: 5px;">
                    			<input class="custom-control-input" type="checkbox" id="suspend" value="1">
                    			<label for="suspend" class="custom-control-label" style="font-weight: normal;">Ya</label>
                    		</div>
                    	</div>
                  	</div>
	    		</div>
	    		<div class="modal-footer justify-content-between">
	      			<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-times"></i> Close</button>
	      			<button type="submit" class="btn btn-success"><i class="fas fa-check"></i> Save</button>
	    		</div>
    		</form>
  		</div>
  		<!-- /.modal-content -->
	</div>
<!-- /.modal-dialog -->
</div>
@stop

@section('js')
	@include('monitoring::templates.adminlte3.Partials.js')
@stop