@if($acc == "list" )
    @include('layouts.breadcumb')
@section('header')

    <link rel="stylesheet" href="/plugins/datatables/jquery.dataTables.min.css">
    <link rel="stylesheet" href="/plugins/datatables/dataTables.bootstrap.min.css">

@stop
    <div class="row">
        <div class="panel panel-warning panel-border">
            <!-- panel head -->
            <div class="panel-heading">

            </div>
            <div class="panel-body">
               <div>
                   @if( Input::has('fecha_rango')=="" )
                    <div   class="alert alert-warning"  role="alert">
                        <span class="glyphicon glyphicon-info-sign" aria-hidden="aa"></span>
                        Debe seleccionar un rango de fecha para generar informe
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                   @endif

               </div>

                <div class="clearfix"></div>

                <div class="tabs-vertical-env">
                    <ul class="nav tabs-vertical" style="width: 5%;"><!-- available classes "right-aligned" -->
                        <li rel="tooltip" data-placement="right" data-original-title="PRODUCTOS" class="active"><a href="#producto" data-toggle="tab"><i class="fa fa-2x fa-wrench"></i></a></li>
                        <li rel="tooltip" data-placement="right" data-original-title="CLIENTES"><a href="#cliente" data-toggle="tab"><i class="fa fa-2x fa-user"></i></a></li>
                        <li rel="tooltip" data-placement="right" data-original-title="PRODUCTOS POR REGIONES"><a href="#regiones" data-toggle="tab"><i class="fa fa-2x fa-globe"></i></a></li>
                        <li rel="tooltip" data-placement="right" data-original-title="CATEGORIAS"><a href="#categoria" data-toggle="tab"><i class="fa fa-2x fa-bar-chart"></i></a></li>
                        <li rel="tooltip" data-placement="right" data-original-title="PROVEEDORES"><a href="#proveedor" data-toggle="tab"><i class="fa fa-2x fa-truck"></i></a></li>
                        <li rel="tooltip" data-placement="right" data-original-title="MARCAS"><a href="#marcas" data-toggle="tab"><i class="fa fa-2x fa-cubes"></i></a></li>
                        <li rel="tooltip" data-placement="right" data-original-title="CLIENTES ECOMMERCE"><a href="#clientes_ecommerce" data-toggle="tab"><i class="fa fa-2x fa-users"></i></a></li>
                        <li rel="tooltip" data-placement="right" data-original-title="REGIONAL ECOMMERCE"><a href="#regional_ecommerce" data-toggle="tab"><i class="fa fa-2x fa-map-marker"></i></a></li>
                    </ul>
                    <div class="tab-content" style="width: 95%;">
                        <form class="form-inline" method="get" role="form" enctype="multipart/form-data" class="validate">
                            <div class="form-group col-md-10 no-padding">
                            <div class="form-group  col-md-6">
                                <label>Fecha</label>
                                <div class="input-group">
                                    <input readonly type="text" name="fecha_rango" id="fecha_rango" value="{{  Input::get('fecha_rango') }}" class="form-control input-lg" /><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                                </div>

                            </div>
                            <div class="col-md-4">
                                <br>
                                <button onclick="showMessage('CARGANDO VISITAS, ESPERE POR FAVOR ')" type="submit" id="VerInformesButton" class="btn btn-warning btn-lg ">Ver Informe<i class="entypo-search"></i></button>
                            </div>
                            <div class="clearfix"></div>
                            <br>
                            </div>
                        </form>
                        <div class="clearfix"></div>
                        <div class="tab-content" style="width: 100%;">
                            <div class="tab-pane active" id="producto">
                                @if( Input::get('fecha_rango') )
                                    <hr />
                                    <h2>Informe por Productos</h2>
                                    <table class="table table-striped table-colored-bordered table-bordered-inverse table-hover table-responsive" id="table-1" data-order="[[ 4, &quot;desc&quot; ]]" >
                                        <thead>

                                        <tr>
                                            <th width="15%">PRODUCTOS</th>
                                            <th width="3%">CODIGO</th>
                                            <th width="3%">UNIDAD</th>
                                            <th width="3%">VISITAS</th>
                                            <th width="3%">DETALLAR</th>

                                        </tr>
                                        <tr class="filter-column-tr">
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                    </table>
                                @endif
                            </div>
                            <div class="tab-pane" id="regiones">

                                @if( Input::get('fecha_rango') )
                                    <hr />
                                    <h2>Informe por Regiones</h2>
                                    <table class="table table-striped table-colored-bordered table-bordered-inverse table-hover table-responsive" id="table-2">
                                        <thead>

                                        <tr>
                                            <th width="3%">REGIONAL</th>
                                            <th width="15%">PRODUCTOS</th>
                                            <th width="3%">VISITAS</th>
                                        </tr>
                                        <tr class="filter-column-tr">
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                @endif
                                <table class="table table-hover">
                                </table>
                            </div>
                            <div class="tab-pane" id="cliente">
                                @if( Input::get('fecha_rango') )
                                    <hr />
                                    <h2>Informe por Clientes</h2>
                                    <table class="table table-striped table-colored-bordered table-bordered-inverse table-hover table-responsive" id="table-3">
                                        <thead>

                                            <tr>
                                                <th width="3%">NIT</th>
                                                <th width="15%">CLIENTE</th>
                                                <th width="3%">VISITAS</th>
                                                <th width="3%">DETALLES</th>
                                            </tr>
                                            <tr class="filter-column-tr">
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                @endif
                                  <table class="table table-hover">
                                  </table>
                               </div>
                            <div class="tab-pane " id="categoria">

                                @if( Input::get('fecha_rango') )
                                    <hr />
                                    <h2>Informe por Categorias</h2>


                                    <table class="table table-striped table-colored-bordered table-bordered-inverse table-hover table-responsive" id="table-4">
                                        <thead>

                                        <tr>
                                            <th width="15%">CATEGORIA</th>
                                            <th width="3%">VISITAS</th>
                                            <th width="1%">SUBCATEGORIAS</th>
                                            <th width="1%">CLIENTES</th>
                                        </tr>
                                        <tr class="filter-column-tr">
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                @endif
                                <table class="table table-hover">
                                </table>
                            </div>
                            <div class="tab-pane " id="proveedor">
                                @if( Input::get('fecha_rango') )
                                    <hr />
                                    <h2>Informe por Proveedores</h2>
                                    <table class="table table-striped table-colored-bordered table-bordered-inverse table-hover table-responsive" id="table-5">
                                        <thead>

                                        <tr>
                                            <th width="15%">PROVEEDOR</th>
                                            <th width="3%">VISITAS</th>
                                        </tr>
                                        <tr class="filter-column-tr">
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                @endif
                                <table class="table table-hover">
                                </table>
                            </div>
                            <div class="tab-pane " id="marcas">

                                @if( Input::get('fecha_rango') )
                                    <hr />
                                    <h2>Informe por Marcas</h2>
                                    <table class="table table-striped table-colored-bordered table-bordered-inverse table-hover table-responsive" id="table-6">
                                        <thead>

                                        <tr>
                                            <th width="15%">MARCAS</th>
                                            <th width="3%">VISITAS</th>
                                        </tr>
                                        <tr class="filter-column-tr">
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                @endif
                                <table class="table table-hover">
                                </table>
                            </div>
                            <div class="tab-pane " id="clientes_ecommerce">
                                @if( Input::get('fecha_rango') )
                                    <hr />
                                    <h2>Informe de Login por Clientes</h2>
                                    <table class="table table-striped table-colored-bordered table-bordered-inverse table-hover table-responsive" id="table-7">
                                        <thead>

                                        <tr>
                                            <th width="15%">NIT</th>
                                            <th width="15%">SUCURSAL</th>
                                            <th width="1%">VISITAS</th>
                                            <th width="1%">FECHAS</th>
                                        </tr>
                                        <tr class="filter-column-tr">
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>

                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                @endif
                                <table class="table table-hover">
                                </table>
                            </div>
                            <div class="tab-pane " id="regional_ecommerce">
                                @if( Input::get('fecha_rango') )
                                    <hr />
                                    <h2>Informe de Login por Regiones</h2>
                                    <table class="table table-striped table-colored-bordered table-bordered-inverse table-hover table-responsive" id="table-8">
                                        <thead>

                                        <tr>
                                            <th width="10%">REGIONAL</th>
                                            <th width="3%">VISITAS</th>
                                        </tr>
                                        <tr class="filter-column-tr">
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                @endif
                                <table class="table table-hover">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
           </div>
        </div>
    </div>

@section('footer')
    <script src="/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="/plugins/datatables/dataTables.bootstrap.js"></script>
    <script src="/plugins/bootstrap-filestyle/js/bootstrap-filestyle.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        setAjaxDatatable( '#table-1','/ecommerce/informes/visita-ecommerce/json?fecha_rango={{ Input::get('fecha_rango') }}' );
        setAjaxDatatable( '#table-2','/ecommerce/informes/visita-ecommerce/json2?fecha_rango={{ Input::get('fecha_rango') }}' );
        setAjaxDatatable( '#table-3','/ecommerce/informes/visita-ecommerce/json3?fecha_rango={{ Input::get('fecha_rango') }}' );
        setAjaxDatatable( '#table-4','/ecommerce/informes/visita-ecommerce/json4?fecha_rango={{ Input::get('fecha_rango') }}' );
        setAjaxDatatable( '#table-5','/ecommerce/informes/visita-ecommerce/json5?fecha_rango={{ Input::get('fecha_rango') }}' );
        setAjaxDatatable( '#table-6','/ecommerce/informes/visita-ecommerce/json6?fecha_rango={{ Input::get('fecha_rango') }}' );
        setAjaxDatatable( '#table-7','/ecommerce/informes/visita-ecommerce/json7?fecha_rango={{ Input::get('fecha_rango') }}' );
        setAjaxDatatable( '#table-8','/ecommerce/informes/visita-ecommerce/json8?fecha_rango={{ Input::get('fecha_rango') }}' );
    </script>


<script>
    $('#fecha_rango').daterangepicker(
            {
                ranges: {
                    'Ayer': [moment().subtract('days', 1), moment().subtract('days', 1)],
                    'Últimos 7 días': [moment().subtract('days', 6), moment()],
                    'Últimos 15 días': [moment().subtract('days', 14), moment()],
                    'Últimos 30 días': [moment().subtract('month', 1), moment()],
                    'Mes actual': [moment().startOf('month'), moment().endOf('month')],
                    'Mes anterior': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')],
                    'Ultimos 3 meses': [moment().subtract('month', 3), moment()],
                    'Ultimos 6 meses': [moment().subtract('month', 6), moment()],
                    'Año actual': [moment().startOf('year'), moment()]

                },

                locale: {
                    endDate: moment(),
                    format: 'YYYY-MM-DD',
                    separator: ' | ',
                    applyLabel: 'Aplicar',
                    cancelLabel: 'Cancelar',
                    fromLabel: 'Desde',
                    toLabel: 'Hasta',
                    weekLabel: 'S',
                    customRangeLabel: 'Otro Rango'
                }
            }
    );

</script>


@stop
@endif