@extends('plantilla')

@section('titulo', "Listado de incidentes")

@section('scripts')
<link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/datatables.min.js') }}"></script>
@endsection
@section('breadcrumb')
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/home">Inicio</a></li>
<li class="breadcrumb-item">Incidentes</li>
</ol>
@endsection
@section('contenido')
<div class="row">
    <div class="form-group col-lg-12">
        <input type="button" class="btn btn-success btn-nuevo" value="Nuevo incidente" onclick="location.href = 'incidente/nuevo';">
    </div>
</div>
<div class="row">
    <div class="form-group col-lg-1">
        <label>Asignado a</label>
    </div>
     <div class="form-group col-lg-2">
        <select id="lstUsuarioAsig" name="lstUsuarioAsig" class="form-control" onchange="fcargarGrilla()">
            <option value="">Todos</option>
            @for ($i = 0; $i < count($array_usuario); $i++)
                <option value="{{ $array_usuario[$i]->id }}">{{ $array_usuario[$i]->nombre }} {{ $array_usuario[$i]->apellido }}</option>
            @endfor
        </select>
    </div>
    <div class="form-group col-lg-1">
        <label>Fecha desde</label>
    </div>
    <div class="form-group col-lg-2">
        <input type="date" id="txtFechaDesde" name="txtFechaDesde" class="form-control" onchange="fcargarGrilla()"/>
    </div>
    <div class="form-group col-lg-1">
        <label>Fecha hasta</label>
    </div>
    <div class="form-group col-lg-2">
        <input type="date" id="txtFechaHasta" name="txtFechaHasta" class="form-control" onchange="fcargarGrilla()"/>
    </div>
    <div class="form-group col-lg-3">
        <input type="checkbox" id="chkVerCerrados" name="chkVerCerrados" onchange="fcargarGrilla();"><label for="chkVerCerrados"> &nbsp;Ver incidentes cerrados</label>
    </div>
</div>
<table id="grilla" class="display">
    <thead>
        <tr>
            <th>ID</th>
            <th style="width:250px;">Título</th>
            <th>Estado</th>
            <th>Prioridad</th>
            <th>Solicitante</th>
            <th>Asignado a</th>
            <th>Categoría</th>
            <th>Fecha apertura</th>
            <th>Fecha modificación</th>
        </tr>
    </thead>
</table>
<script>
    fcargarGrilla();

    function fcargarGrilla(){
        var asignado = $("#lstUsuarioAsig").val();
        var fecha_desde = $("#txtFechaDesde").val();
        var fecha_hasta = $("#txtFechaHasta").val();
        var estado = $("#chkVerCerrados").prop("checked");

        $('#grilla').dataTable().fnDestroy();
        var dataTable = $('#grilla').DataTable({
            "processing": true,
            "serverSide": true,
            "bFilter": true,
            "bInfo": true,
            "bSearchable": true,
            "pageLength": 25,
            "order": [[ 7, "desc" ]],
            "columnDefs": [
                {
                    "targets": [4],
                    "searchable": false,
                    "orderable": false
                },
                 {
                    "targets": [5],
                    "searchable": false,
                    "orderable": false
                }
            ],
            "ajax": "{{ asset('/incidentes/cargarGrilla') }}" + "?asig="+asignado + "&desde="+fecha_desde + "&hasta="+fecha_hasta + "&est="+estado,
        });
    }

</script>
@endsection