@extends('layouts.app')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/datatables.net-select-bs4/css/select.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/sweetalert2/dist/sweetalert2.min.css">

<style type="text/css">
	.modal-lg{
		max-width: 75%!important;
	}
	.modal-xl{
		min-width: 100%!important;
		min-height: 100%!important;
	}
</style>

@section('title', 'Permissões')
@section('content')
@include('layouts.headers.cards_prod')
	<div class="container-fluid">
		<div class="container">
			<div class="row">
            	@include('admin._caminho')
        	</div> 
			<h3 class="text-center font-weight-bold text-default h1">Painel de permissões</h3>
			<div class="row align-items-center mb-3">				
				<div class="offset-10 col-2">
					<a class='btn btn-primary btn-sm' href="{{route('permissoes.create')}}">
						<i class="fas fa-plus mr-2"></i>Adicionar Permissão
					</a>
				</div>
			</div>
			<div class="table-responsive">
				<table class="table table-flush table-bordered table-dark table-sm" id="tabela_permissoes">
					<thead class="thead-dark">
						<tr class="text-left">
							<th class="px-3">Permissão</th>
							<th class="px-3">Descrição</th>
							<th class="px-2">Ações</th>							
						</tr>
					</thead>
					<tbody class='text-left'>
						@foreach($permissoes as $permissao)
							<tr>
								<td>{{str_replace('-',' ',ucfirst($permissao->nome_permissao))}}</td>
								<td>{{ucfirst($permissao->descricao_permissao)}}</td>
								<td>
									<div class="row d-block mr-auto">										
										<button class="btn btn-sm btn-block btn-outline-info btn_atualizar" value='{{$permissao->id}}'>
											<i class="fas fa-sync"></i> Atualizar
										</button>
										<!-- <button class="btn btn-sm btn-danger" value='{{$permissao->id}}'>
											<i class="fas fa-trash-alt"></i> Deletar
										</button> -->
									</div>
								</td>
							</tr>
						@endforeach
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div class="modal fade" id='modal_atualizar_permissao' aria-hidden='true' data-backdrop='static' tabindex='-1' role='dialog' aria-labelledby='#modal_atualizar_permissao'>
		<div class="modal-dialog modal-dialog-centered modal-lg" role='document'>
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			        </button>
				</div>
				<div class="modal-body">
					<form id="form_atualizar_permissoes">
						{!! csrf_field() !!}
						<input type="hidden" name="id_permissao_fk" id='id_permissao_fk'>
						<div class="form-group">
							<label for='nome_permissao_atualizar'>Atualizar permissão</label>
							<input type="text" name="nome_permissao_atualizar" id="nome_permissao_atualizar" class="form-control obrigatorio_atualizar">
							<small class="font-weight-bold text-danger d-none">* Preenchimento obrigatório</small>
						</div>
						<div class="form-group">
							<label for='descricao_permissao_atualizar'>Atualizar descrição</label>
							<textarea name="descricao_permissao_atualizar" id="descricao_permissao_atualizar" class="form-control obrigatorio_atualizar"></textarea>
							<small class="font-weight-bold text-danger d-none">* Preenchimento obrigatório</small>
						</div>
						<div class="row">
							<button type="submit" class="btn btn-info mr-3 font-weight-bold ml-auto d-block">
								<i class="fas fa-sync-alt mr-2"></i> Atualizar
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection

@push('js')
<script src="../js/moment.js"></script>
<script src="../js/moment_locale.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.33.1/dist/sweetalert2.min.js"></script>
<script src="{{ asset('argon/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-buttons-bs4/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('argon/vendor/datatables.net-select-bs4/js/dataTables.select.min.js') }}"></script>
<script src="{{ asset('argon/vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('argon/vendor/bootstrap-datepicker/dist/locales/bootstrap-datepicker.pt-BR.min.js') }}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
<script src="{{ asset('argon') }}/vendor/bootstrap-notify/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="{{asset('js/permissoes_admin.js')}}"></script>
<script>
	$(document).ready(function() {
		$('#tabela_permissoes').DataTable({
			"language": {
				"info": "Mostrando de _START_ até _END_ de _TOTAL_ registos",
				"search": "Procurar:",
				"paginate": {
					"first": "Primeiro",
					"previous": "<",
					"next": ">",
					"last": "Último"
				}
			},
			dom: 'Bfrtip',
			buttons: [{
					extend: 'pdfHtml5',
					className: 'btn bg-danger text-white rounded',
					exportOptions: {
						columns: [0, 1, 2, 3, 4, 5]
					}
				},
				{
					extend: 'excelHtml5',
					className: 'btn bg-success text-white rounded',
					exportOptions: {
						columns: [0, 1, 2, 3, 4, 5]
					}
				},
				{
					extend: 'colvis',
					text: 'Colunas',
					className: 'btn bg-default text-white rounded'
				}
			],
			stateSave: true
		});
	});
</script>
@endpush