@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" id="temptotal">
    <h2>Registro de correlativos 
    <small style="font-size:9">Listar</small>
    </h2>    
</div>
   
      
    @if (session('status'))
        <div class="alert alert-success" role="alert">
            {{ session('status') }}
        </div>
    @endif
<div class="table-responsive">
    <div class="form-row text-right">
    <div class="form-group col-md-6">
    </div>
    <div class="form-group col-md-4">
        <label>
        <select class="form-control form-control-sm " id="escritorio" name="escritorio" >
            <option value="0">Seleccionar</option>
            @foreach($escritorio as $val)
            <option value="{{$val->id}}">{{$val->nombre}}</option>
            @endforeach()
        </select>
        </label>
    </div>
    <div class="form-group col-md-1">
        <label>
        <select class="form-control form-control-sm " id="periodo" name="periodo" onchange="listardatatblecorrelativo()">
            @for ($i = date("Y"); $i >=2019 ; $i--)
                <option value="{{ $i }}" >{{ $i }}</option>
            @endfor
        </select>
        </label>
    </div>
    <div class="form-group col-md-1">
        <button onclick="listardatatblecorrelativo()" class="form-control form-control-sm btn btn-sm btn-outline-primary btn-rounded">Listar</button>
    </div>
    </div>
	<button style="display: none;" id="btn_eliminar">Elimina Fila Datatable</button>
    <table class="table table-bordered table-hover" id="correlativo_table" width="100%">
       <thead class="table-success">
        <tr>
            <th width="5%">#</th>
            <th >TIPO DOCUMENTO</th>
            <th >NUMERO</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 " role="document">
        <div class="modal-content" id="modal_content">
			
        </div>
    </div>
</div> 

@endsection
@section('scripts')
<script src="{{asset('js/correlativos.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>
<script src="{{asset('js/input-mask/jquery.inputmask.js')}}"></script>
<script src="{{asset('js/input-mask/jquery.inputmask.regex.extensions.js')}}"></script>
@endsection