@extends('layouts.app')
@section('style')    
<link rel="stylesheet" type="text/css" href="{{asset('datatable/DataTables-1.10.20/css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('datatable/DataTables-1.10.20/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('datatable/Buttons-1.6.1/css/buttons.dataTables.min.css')}}">
<style type="text/css" media="screen">
table.dataTable tbody th, table.dataTable tbody td {
    padding: 2px 10px; /* e.g. change 8x to 4px here */
}
table.dataTable thead th, table.dataTable thead td {
    padding: 10px 10px; /* e.g. change 8x to 4px here */
    text-align: center;
}	
</style>
@endsection
    

@section('content')
<div class="card-header">
	<a type="button" href="#ModalScrollable" data-toggle="modal" data-href="{{route('area.create')}}" id="btn_nuevo" class="btn btn-primary btn-lg float-right" ><i class="fa fa-plus fa-lg"></i> Nuevo area</a>
    <h2>Registro de areas
    <small style="font-size:9" id="tpadre">Listar</small>
    </h2>  
    <input type="hidden" name="idarea" id="idarea" value="0">    
</div>
   
      
    @if (session('status'))
        <div class="alert alert-success" role="alert">
            {{ session('status') }}
        </div>
    @endif
<div class="table-responsive">
	<button style="display: none;" id="btn_eliminar">Elimina Fila Datatable</button>
     <spam class="float-right" id="btnretornar">
    </spam><br><br>
    <table class="table table-bordered table-hover" id="area_table" width="100%">
       <thead class="table-success">
        <tr>
            <th width="5%">#</th>
            <th >NOMBRE</th>
            <th >SIGLAS</th>
            <th >CORREO</th>
            <th >ESTADO</th>
            <th width="20%">ACCIONES</th>
        </tr>
       </thead>
   </table>
</div>

<!-- Modal -->
<div class="modal fade" id="ModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" id="modal_content">
			
        </div>
    </div>
</div> 

@endsection
@section('scripts')
<script src="{{asset('js/areas.js')}}"></script>
<script type="text/javascript" src="{{asset('datatable/DataTables-1.10.20/js/jquery.dataTables.min.js')}}"></script>
<script type="text/javascript" src="{{asset('datatable/DataTables-1.10.20/js/dataTables.bootstrap4.min.js')}}"></script>
<script type="text/javascript" src="{{asset('datatable/Buttons-1.6.1/js/dataTables.buttons.min.js')}}"></script>
<script type="text/javascript" src="{{asset('datatable/Buttons-1.6.1/js/buttons.flash.min.js')}}"></script>
<script type="text/javascript" src="{{asset('datatable/JSZip-2.5.0/jszip.min.js')}}"></script>
<script type="text/javascript" src="{{asset('datatable/pdfmake-0.1.36/pdfmake.min.js')}}"></script>
<script type="text/javascript" src="{{asset('datatable/pdfmake-0.1.36/vfs_fonts.js')}}"></script>
<script type="text/javascript" src="{{asset('datatable/Buttons-1.6.1/js/buttons.html5.min.js')}}"></script>
<script type="text/javascript" src="{{asset('datatable/Buttons-1.6.1/js/buttons.print.min.js')}}"></script>
<script type="text/javascript" src="{{asset('datatable/Buttons-1.6.1/js/buttons.colVis.min.js')}}"></script>
@endsection