@extends('layouts.app2')
@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')}}">
<link rel="stylesheet" type="text/css" href="{{asset('datatable/Select-1.3.1/css/select.dataTables.min.css')}}">
<style type="text/css" media="screen">
table tbody th, table tbody td {
    padding: 2px 10px !important; /* e.g. change 8x to 4px here */
}
table thead th, table thead td {
    padding: 5px 10px !important; /* e.g. change 8x to 4px here */
    text-align: center;
}
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;
}
.sub-menu a:hover, .sub-menu a:focus {
    color: #f7fcf7;
    background: #408adb;
}
table.dataTable tbody tr.selected, table.dataTable tbody tr.selected:hover {
    background-color: #B0BED9 !important;
    color: red !important;
}
table.dataTable tbody tr:hover {
    background-color: #F3F6F9 !important;
}

td.details-control {
    background: url('datatable/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('datatable/details_close.png') no-repeat center center;
}
.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}
.bs-callout h5 {
    margin-top: 0;
    margin-bottom: 5px;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code {
    border-radius: 3px;
}
.bs-callout+.bs-callout {
    margin-top: -5px;
}
.bs-callout-default {
    border-left-color: #777;
}
.bs-callout-default h5 {
    color: #777;
}
.bs-callout-primary {
    border-left-color: #428bca;
}
.bs-callout-primary h5 {
    color: #428bca;
}
.bs-callout-success {
    border-left-color: #5cb85c;
}
.bs-callout-success h5 {
    color: #5cb85c;
}
.bs-callout-danger {
    border-left-color: #d9534f;
}
.bs-callout-danger h5 {
    color: #d9534f;
}
.bs-callout-warning {
    border-left-color: #f0ad4e;
}
.bs-callout-warning h5 {
    color: #f0ad4e;
}
.bs-callout-info {
    border-left-color: #5bc0de;
}
.bs-callout-info h5 {
    color: #5bc0de;
}   	
</style>
@endsection
    

@section('content')
<div class="card-header">
    <h2>Consulta de tramite </h2> <h6>Seleccionar expediente y hacer clic derecho sobre el contenido de la tabla para ver mas opciones!! </h6> 
</div>
      
    @if (session('status'))
        <div class="alert alert-success" role="alert">
            {{ session('status') }}
        </div>
    @endif
<div class="tabs-style-two ">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#basica">Basica</a>
        </li>
    </ul>
 </div>
<div class="tab-content">
<div class="tab-pane fade active show" id="basica" role="tabpanel">
<form id="frmbasico" action="{{route('consultatramite.basica')}}" method="post" enctype="multipart/form-data">
    @csrf  {{ csrf_field() }}
    <div class="bs-callout bs-callout-info">
    <div class="form-row">
    <div class="form-group col-md-1 col-sm-4 col-4">
        <label class=" text-dark" ><b>CUT :</b></label>
    </div>
    <div class="form-group col-md-2 col-sm-7 col-7">
    <input type="text" style="text-align:right;" class="form-control form-control-sm  text-dark" id="tncut" name="tncut">
    <span id="error-tncut" class="invalid-feedback"></span>
    </div>
    <div class="form-group col-md-2 col-sm-6 col-6">
    <select class="form-control form-control-sm  text-dark" id="tperiodo" name="tperiodo" >
            @for ($i = date("Y"); $i >=2019 ; $i--)
                <option value="{{ $i }}" >{{ $i }}</option>
            @endfor
    </select>
    </div>
    <div class="form-group col-md-6 col-sm-6 col-6">
    <button type="submit" class="btn btn-dark btn-sm "><i class="fas fa-search"></i> Buscar</button>
    </div>
    </div> 
    </div> 
</form>
<div class="table-responsive">
    <table class="table table-bordered table-hover" id="basica_table" style="font-size: 11px;" width="100%">
       <thead class="table-success">
        <tr>
            <th width="5%">#</th>
            <th >CUT</th>
            <th >TUPA</th>
            <th >TIPO</th>
            <th >ORIGEN</th>
            <th >ASUNTO</th>
            <th >FECHA INICIO</th>
            <th >DIAS</th>
            <th >DESTINATARIO</th>
            <th >ESTADO</th>
            <th >COPIAS</th>
        </tr>
       </thead>
   </table>
</div>
</div>

</div>

<ul id="menuCapa" class="dropdown-menu sub-menu"  role="menu" aria-labelledby="dropdownMenu1" >            
  <a role="menuitem" class="dropdown-item pointer " tabindex="-1"  onClick="verexpediente();"><i class="far fa-eye"></i> Ver expediente</a>
  <a role="menuitem" class="dropdown-item pointer " tabindex="-1"  onClick="verruta();"><i class="fas fa-wave-square"></i> Ver ruta</a>
</ul>
<ul id="menuCapa2" class="dropdown-menu sub-menu"  role="menu" aria-labelledby="dropdownMenu1">            
  
</ul>
<ul id="menuCapa3" class="dropdown-menu sub-menu"  role="menu" aria-labelledby="dropdownMenu1" style="z-index: 2048;">            
  <a role="menuitem" class="dropdown-item pointer " tabindex="-1"  onClick="verrutamodal();"><i class="fas fa-wave-square"></i> Ver ruta</a>
</ul>
<!-- Modal -->


<form id="frmeditdoc" action="#" method="post" enctype="multipart/form-data">
<div class="modal fade" id="Modaleditdoc" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true" style="z-index: 2048;">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content" id="modalconteditdoc">
         <div class="modal-body">
        </div>   
        </div>
    </div>
</div>
</form> 
<div class="modal fade" id="ModalLista" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true" style="z-index: 2048;">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content" id="modaltable">
            
        </div>
    </div>
</div>
<div class="modal fade" id="ModalExpediente" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
        <div class="modal-content" id="modaltableexpediente">
        <div class="modal-body">
        </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script src="{{asset('js/consultastramite.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 type="text/javascript" src="{{asset('datatable/Select-1.3.1/js/dataTables.select.min.js')}}"></script>
<script src="{{asset('js/input-mask/jquery.inputmask.js')}}"></script>
<script src="{{asset('js/input-mask/jquery.inputmask.date.extensions.js')}}"></script>
<script src="{{asset('js/input-mask/jquery.inputmask.regex.extensions.js')}}"></script>
<script type="text/javascript">
    $('#tfechai').datepicker({
        language: 'es-ES',
        autoHide: true,
        zIndex: 2048,
    });
    $('#tfechaf').datepicker({
        language: 'es-ES',
        autoHide: true,
        zIndex: 2048,
    });
    $("[data-mask]").inputmask();
    $("#tncut").inputmask('Regex', {regex: "[0-9]{10}"});
</script>
@endsection