@extends('layouts.main')
@section('title', 'Gestión de reclamos')
@section('icon', 'fa fa fa-user')


@section('content')
    <meta name="csrf-token" content="{{ Session::token() }}">
    <meta name="base_url" content="{{ url('/index.php/') }}">
    <meta name="permiso" content="{{ $control_total }}">

    <script src="{{ asset('js/mantenedorReclamo.js') }}" type="text/javascript"></script>
    <div class="row ">
        <div class="col-lg-12 col-sm-12">
            <div class="panel-group" style="margin-left: 5px;">

                <!-- Filtros de busqueda-->
                <div class="panel panel-default">
                    <div class="panel-body">
                        <h4 class="panel-title">
                            <button class="btn btn-block btn-primary collapsed" type="button" id="btnDatos"
                                data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Filtros de
                                Búsqueda</button>
                        </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse">
                        <div class="row" style="margin-left: 30px;">
                            <input type="hidden" value="{{ csrf_token() }}" id="token">
                            <div class="col-md-3">
                                <div class="form-group row">
                                    <label for="cboProyecto_search"
                                        class="control-label col-sm-3 input-sm ">Proyecto:</label>
                                    <div class="col-sm-9">
                                        <select class='form-control input-sm' id='cboProyecto_search'
                                            name="cboProyecto_search" style="width: 100%">
                                            <option value="-1">Todos</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group row">
                                    <label for="cboEtapa_search" class="control-label col-md-3 input-sm ">Etapa</label>
                                    <div class="col-md-9">
                                        <select class='form-control input-sm' id='cboEtapa_search' name="cboEtapa_search">
                                            <option value="-1">Todos</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group row">
                                    <label for="cboCliente_search" class="control-label col-sm-2 input-sm ">Cliente:</label>
                                    <div class="col-sm-10">
                                        <select class='form-control input-sm' id='cboCliente_search'
                                            name="cboCliente_search" style="width: 100%">
                                            <option value="-1">Todos</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group row">
                                    <label for="cboCategoria" class="control-label col-md-3 input-sm ">Categoria:</label>
                                    <div class="col-md-9" style="margin-left: -10px;">
                                        <select class='form-control input-sm' id='cboCategoria' name="cboCategoria">
                                            <option value="-1">Todos</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group row">
                                    <label for="txtDesde_search" class="control-label col-sm-3 input-sm">Fecha
                                        Inicio:</label>
                                    <div class="col-sm-9">
                                        <div class='input-group date' id='dtptxtDesde_search'>
                                            <input type='date' class="form-control input-sm" id="txtDesde_search"
                                                name="txtDesde_search" />
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group row">
                                    <label for="txtHasta_search" class="control-label col-md-3 input-sm">Fecha
                                        Fin:</label>
                                    <div class="col-md-9">
                                        <div class='input-group date' id='dtptxtHasta_search'>
                                            <input type='date' class="form-control input-sm" id="txtHasta_search"
                                                name="txtHasta_search" />
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group row">
                                    <label for="txtNroReclamo_insert" class="control-label col-md-3 input-sm ">Cod.
                                        Reclamo:</label>
                                    <div class="col-md-9">
                                        <input type="text" class='form-control input-sm' maxlength="50" requiered
                                            id='txtNroReclamo_insert' name="txtNroReclamo_insert">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group row">
                                    <label for="cboEstado_search" class="control-label col-md-3 input-sm ">Estado:</label>
                                    <div class="col-md-9">
                                        <select class='form-control input-sm multiple' id='cboEstado_search'
                                            name="cboEstado_search" multiple>
                                            <option value="-1" selected>Todos</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class='col-md-3'>
                                <div class="form-group row">
                                    <button type="button" id="btnBuscar" class="btn btn-sm btn-primary btn-md col-md-4"
                                        onclick="rec.mantenedorReclamo.showReclamos()">Buscar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--                <br>-->
                </div>

                <br>

                <!-- Cuadro (Al dia - Por vercer - vencidos - regular -alta)-->
                <div class='row' style="margin-left: 21%;">
                    <div class="col-md-12">
                        <table class="table3" border="1" cellspacing="0" cellpadding="1">
                            <tr>
                                <td>
                                    <!-- Fila de los titulos -->
                                    <div class="row">
                                        <div class='col-md-12'>
                                            <div class="form-group">
                                                <div class="col-md-6">
                                                    <label for="txtAntiguedad" class="control-label input-sm"
                                                        style="margin-left: 43%;">Reclamos Abiertos</label>
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="txtAntiguedad" class="control-label input-sm"
                                                        style="margin-left: 42%;">Prioridad</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Fila de los cuadors con la cantidad -->
                                    <div class="row">
                                        <div class='col-md-12'>
                                            <div class="form-group" style="margin-left: 22px;">
                                                <div class="col-md-2 indicador">
                                                    <a class="quick-btn" href="#">
                                                        <i class="glyphicon glyphicon-ok" style="font-size: 24px;"></i>
                                                        <span>Al dia</span>
                                                        <span class="label label-success lbIndicador" data-value="1"
                                                            data-tipo="vencimiento" id="lbAlDia"
                                                            style="font-size: 15px;"></span>
                                                    </a>
                                                </div>
                                                <div class="col-md-2 indicador">
                                                    <a class="quick-btn" href="#">
                                                        <i class="glyphicon glyphicon-time" style="font-size: 24px;"></i>
                                                        <span>Por vencer</span>
                                                        <span class="label label-warning lbIndicador" data-value="0"
                                                            data-tipo="vencimiento" id="lbPorVencer"
                                                            style="font-size: 15px;"></span>
                                                    </a>
                                                </div>
                                                <div class="col-md-2 indicador">
                                                    <a class="quick-btn" href="#">
                                                        <i class="glyphicon glyphicon-remove"
                                                            style="font-size: 24px;"></i>
                                                        <span>Vencidos</span>
                                                        <span class="label label-danger lbIndicador" data-value="-1"
                                                            data-tipo="vencimiento" id="lbVencido"
                                                            style="font-size: 15px;"></span>
                                                    </a>
                                                </div>
                                                <div class="col-md-1">
                                                </div>
                                                <div class="col-md-2 indicador">
                                                    <a class="quick-btn" href="#">
                                                        <i class="glyphicon glyphicon-refresh"
                                                            style="font-size: 24px;"></i>
                                                        <span>Regular</span>
                                                        <span class="label label-success lbIndicador" data-value="1"
                                                            data-tipo="prioridad" id="lbReclamoPRegular"
                                                            style="font-size: 15px;">0</span>
                                                    </a>
                                                </div>
                                                <div class="col-md-2 indicador">
                                                    <a class="quick-btn" href="#">
                                                        <i class="glyphicon glyphicon-arrow-up"
                                                            style="font-size: 24px;"></i>
                                                        <span>Alta</span>
                                                        <span class="label label-danger lbIndicador" data-value="2"
                                                            data-tipo="prioridad" id="lbReclamoPAlta"
                                                            style="font-size: 15px;">0</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <br>

                <!-- Opcion para agregar nuevo reclamo -->
                <div style="margin-left: 41%;">
                    <div class='col-md-6'>
                        <div class="form-group row">
                            <button type="button" class="btn btn-sm btn-success btn-md col-md-5 col-md-offset-1"
                                id="btnAgregarReclamo">Agregar Reclamo</button>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>



    <!-------------------TABLA RECLAMO----------------------------->
    <!-- Tabla id="tablaReclamo" -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover table-responsive compact table-striped nvlReporte" id="tablaReclamo"></table>
        </div>
    </div>


    <!-----------Modal Eliminar------------>
    <div class="col-lg-12 col-sm-12">
        <div class="modal fade bs-example-modal-md" role="dialog" aria-labelledby="modalEliminar" id="modalEliminar">
            <div class="modal-dialog modal-md" role="document" style="width: 50%">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title centrar" id="TitleEliminarReclamo">Eliminar Reclamo</h4>
                        <label type="hidden" id="codReclamo"></label>
                    </div>
                    <div class="modal-body" style="margin-left: 40px;">
                        <div class="row">
                            <input type="hidden" value="{{ csrf_token() }}" id="token">
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <label for="cboModalidad" class="control-label col-md-2 input-sm ">¿Por que estas
                                        eliminando el reclamo?</label>
                                    <div class="col-md-9">
                                        <textarea class="form-control" id="txtComentario_delete" name="txtComentario_delete"
                                            placeholder="Ingresar comentarios" style="height: 90px"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-md btn-danger nuevo"
                            onclick="rec.mantenedorReclamo.anular()">Eliminar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-----------Modal Historial de Estados------------>
    <div class="modal fade bs-example-modal-md" role="dialog" aria-labelledby="modalEstados" id="modalEstados">
        <div class="modal-dialog modal-md" role="document" style="width: 70%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title centrar" id="TitleHistorial">Historial Reclamo</h4>
                    <label type="hidden" id="codReclamo2"></label>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-10 col-md-offset-1">
                            <table class="table table-hover table-responsive compact table-striped tblListaEstado">
                                <thead>
                                    <tr>
                                        <th>Estado</th>
                                        <th class="centrar">Fecha Estimada</th>
                                        <th class="centrar">Fecha Coordinación</th>
                                        <th class="centrar">Fecha Real</th>
                                        <th>Comentarios</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-md btn-info" id="btnRetrocedeEstado">Retroceder Estado</button>
                    <button type="button" class="btn btn-md btn-primary" data-dismiss="modal"
                        aria-label="Close">Salir</button>
                </div>
            </div>
        </div>
    </div>


    <!-----------Modal Presupuesto asociado al reclamo ------------>
    <div class="modal fade bs-example-modal-md" role="dialog" aria-labelledby="modalPresupuesto" id="modalPresupuesto">
        <div class="modal-dialog modal-md" role="document" style="width: 70%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title centrar" id="TitlePresupuesto">Presupuesto asociado al reclamo</h4>
                    <label type="hidden" id="codReclamo2"></label>
                </div>
                <div class="modal-body" style="padding:30px;">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group row">
                                <label class="control-label col-md-4 input-sm ">Presupuesto:</label>
                                <label class="control-label col-md-8 input-sm " id="txtPresupuesto"></label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group row">
                                <label class="control-label col-md-6 input-sm ">Costo:</label>
                                <label class="control-label col-md-6 input-sm " id="txtCosto"></label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group row">
                                <label class="control-label col-md-6 input-sm ">Fecha de aprobación:</label>
                                <label class="control-label col-md-6 input-sm " id="txtFechaAprobacion"></label>
                            </div>
                        </div>
                        <div class="col-md-12" style="padding: 10px;">
                            <table id="tblPresupuesto" class="table table-hover table-responsive compact table-striped ">
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-md btn-success" id="btnAsignarCosto">Guardar</button>
                    <button type="button" class="btn btn-md btn-primary" data-dismiss="modal"
                        aria-label="Close">Salir</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@yield('contenido_general')

@section('script')
@endsection