@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')}}">
<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 expediententes despachados </h2> 
</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>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#avanzada">Avanzada</a>
        </li>
    </ul>
 </div>
<div class="tab-content">
<div class="tab-pane fade active show" id="basica" role="tabpanel">
<form id="frmbasico" action="{{route('expedientedespachado.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-1 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 class="tab-pane fade" id="avanzada" role="tabpanel">
<form id="frmavanzado" action="{{route('expedientedespachado.avanzada',1)}}" 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-3">
            <label><b>Tipo documento </b></label>
            <select class="selectpicker form-control" id="ttipodocumento" name="ttipodocumento" data-live-search="true" width="30%" data-width="100%" data-dropup-auto="false" data-size="5">
                <option value="{{null}}">TODOS</option>
                @foreach($tipodocumento as $val)
                <option value="{{$val->id}}" {{ old('ttipodocumento')==$val->id?'selected':'' }}>{{$val->nombre}}</option>
                @endforeach
            </select>
            <span id="error-ttipodocumento" class="invalid-feedback"></span>
            </div>  
            <div class="form-group col-md-3">
            <label><b>Numero </b></label>
            <input type="text" class="form-control form-control-sm " id="tnumero" name="tnumero" placeholder="Ingresar numero de documento"value="{{old('tnumero')}}" >
            <span id="error-tnumero" class="invalid-feedback"></span>
            </div>
            <div class="form-group col-md-3">
            <label><b>Remitente </b></label>
            <input type="text" class="form-control form-control-sm " id="tremitente" placeholder="Ingresar remitente"  name="tremitente" onblur="this.value=this.value.toUpperCase();"  value="{{old('tremitente')}}" >
            <input type="hidden" class="form-control form-control-sm " id="tidescritorio" placeholder="Ingresar remitente" readonly="readonly" name="tidescritorio"   value="{{session () ->get('Sescritorio_id')}}" >  
            <span id="error-tremitente" class="invalid-feedback"></span>
            </div>
            <div class="form-group col-md-3">
            <label><b>Destinatario </b></label>
            <div class="form-row" id="tempdestinatario">
            <input type="text" placeholder="Ingresar destinatario" class="form-control form-control-sm " id="tdestinatario" name="tdestinatario" onblur="this.value=this.value.toUpperCase();"  value="{{old('tdestinatario')}}" >  
            <span id="error-tdestinatario" class="invalid-feedback"></span>
            </div>
            </div>
            <div class="form-group col-md-6">
            <label><b>Asunto </b></label>
            <input type="text" class="form-control form-control-sm " id="tasunto" name="tasunto" placeholder="Ingresar asunto" onblur="this.value=this.value.toUpperCase();" value="{{old('tasunto')}}" >
            <span id="error-tasunto" class="invalid-feedback"></span>
            </div>
            <div class="form-group col-md-6">
            <label><b>Procedimiento administrativo </b></label>
            <select class="selectpicker form-control " id="tproceso" name="tproceso" data-live-search="true" data-width="100%" data-dropup-auto="false" data-size="5" {{isset($expediente)?'disabled':''}}>
                <option value="{{null}}">TODOS</option>
                @foreach($proceso as $val)
                <option value="{{$val->id}} " {{ old('tproceso')==$val->id?'selected':'' }} data-subtext="{{$val->codigo}}">{{$val->nombre}}</option>
                @endforeach
            </select>
            </div>
            <div class="form-group col-md-3">
            <label><b>Fecha inicio</b></label>
            <div class="input-group">                                  
              <input type="text" id="tfechai" name="tfechai" class="form-control form-control-sm" data-inputmask="'alias': 'dd/mm/yyyy'" data-mask placeholder="dd/mm/yyyy"  aria-describedby="basic-addon3" value="{{now()->format('d/m/Y')}}">
              <div class="input-group-append">
                <span class="input-group-text" id="basic-addon3"><i class="far fa-calendar-alt"></i></span>
              </div>
            <span id="error-tfechai" class="invalid-feedback"></span>
            </div>
            </div>
            <div class="form-group col-md-3">
            <label><b>Fecha fin</b></label>
            <div class="input-group">                                  
              <input type="text" id="tfechaf" name="tfechaf" class="form-control form-control-sm" data-inputmask="'alias': 'dd/mm/yyyy'" data-mask placeholder="dd/mm/yyyy"  aria-describedby="basic-addon3" value="{{now()->format('d/m/Y')}}">
              <div class="input-group-append">
                <span class="input-group-text" id="basic-addon3"><i class="far fa-calendar-alt"></i></span>
              </div>
            <span id="error-tfechaf" class="invalid-feedback"></span>
            </div>
            </div>
            <div class="form-group col-md-3">
            <label><b>&nbsp;</b></label>
            <div class="input-group">
            <button type="submit" class="btn btn-dark btn-sm col-md-6 col-sm-6 col-6"><i class="fas fa-search"></i> Buscar</button>
            </div>
            </div>
        </div> 
    </div> 
</form>
<div class="table-responsive">
    <table class="table table-bordered table-hover" id="avanzada_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 >TIP.DOC.</th>
            <th >NUMERO</th>
            <th >ASUNTO</th>
            <th >FOLIOS</th>
            <th >FECHA INCIO</th>
            <th >DIAS</th>
            <th >FECHA DERIVACION</th>
            <th >DERIVADO A</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="recuperar();"><i class="fas fa-undo-alt"></i> Recuperar expediente</a>   
<li class="dropdown-divider"></li>          
  <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/expedientedespachado.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