@if($acc == "list" )
    @include('_layouts.breadcumb')
    <div class="content">
        <div class="panel panel-warning">
            <!-- panel head -->
            <div class="panel-heading">
                <div class="panel-title">
                    <h3><i class="fa fa-windows"></i>{{" ", $title }}</h3>
                </div>
            </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="col-md-3">
                                Fecha
                                <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-6">
                                <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>
                        </form>
                        <div class="clearfix"></div>
                        <div class="tab-content" style="width: 95%;">
                            <div class="tab-pane active" id="producto">
                                @if( Input::get('fecha_rango') )
                                    <hr />
                                    <h2>Informe por Productos</h2>
                                    <table class="tableData table table-bordered" id="table-1" data-order="[[ 4, &quot;desc&quot; ]]" >
                                        <thead>
                                        <tr class="replace-inputs">
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        <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>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                @endif
                                <table class="table table-hover">
                                </table>
                            </div>
                            <div class="tab-pane" id="regiones">

                                @if( Input::get('fecha_rango') )
                                    <hr />
                                    <h2>Informe por Regiones</h2>
                                    <table class="tableData table table-bordered" id="table-2">
                                        <thead>
                                        <tr class="replace-inputs">
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th width="3%">REGIONAL</th>
                                            <th width="15%">PRODUCTOS</th>
                                            <th width="3%">VISITAS</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($region as $row2)
                                            <tr>
                                                <td>{{ $row2->regional }}</td>
                                                <td>{{ $row2->nombre }}</td>
                                                <td>{{ $row2->visitas }}</td>
                                            </tr>
                                        @endforeach
                                        </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="tableData table table-bordered" id="table-3">
                                        <thead>
                                        <tr class="replace-inputs">
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th width="3%">NIT</th>
                                            <th width="15%">CLIENTE</th>
                                            <th width="3%">VISITAS</th>
                                            <th width="3%">DETALLES</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($cliente as $row)
                                            <tr>
                                                <td>{{ $row->cliente_nit }}</td>
                                                <td>{{ $row->sucursal_nombre }}</td>
                                                <td>{{ $row->visitas }}</td>
                                                <td>
                                                    <a href="/mercadeo/informes/productos/{{ $row->cliente_nit }}?fecha_rango={{ Input::get('fecha_rango') }}"
                                                       data-toggle="modal-ajax-big"
                                                       onclick="showMessage('CARGANDO INFORMES')"
                                                       class="btn btn-primary">
                                                        <i class="fa fa-2x fa-eye"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </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="tableData table table-bordered" id="table-5">
                                        <thead>
                                        <tr class="replace-inputs">
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th width="15%">CATEGORIA</th>
                                            <th width="3%">VISITAS</th>
                                            <th width="1%">SUBCATEGORIAS</th>
                                            <th width="1%">CLIENTES</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($categoria as $row)
                                            <tr>
                                                <td>{{ $row->categoria }}</td>
                                                <td>{{ $row->visitas }}</td>
                                                <td>
                                                    <a href="/mercadeo/informes/subcategoria/{{ $row->categoria }}?fecha_rango={{ Input::get('fecha_rango') }}"
                                                       data-toggle="modal-ajax-big"
                                                       onclick="showMessage('CARGANDO INFORMES')"
                                                       class="btn btn-primary">
                                                        <i class="fa fa-2x fa-pie-chart"></i>
                                                    </a>
                                                </td>
                                                <td>
                                                    <a href="/mercadeo/informes/clientes-categoria/{{ $row->categoria }}?fecha_rango={{ Input::get('fecha_rango') }}"
                                                       data-toggle="modal-ajax-big"
                                                       onclick="showMessage('CARGANDO INFORMES')"
                                                       class="btn btn-primary">
                                                        <i class="fa fa-2x fa-user"></i>
                                                    </a>

                                                </td>
                                            </tr>
                                        @endforeach
                                        </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="tableData table table-bordered" id="table-7">
                                        <thead>
                                        <tr class="replace-inputs">
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th width="15%">PROVEEDOR</th>
                                            <th width="3%">VISITAS</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($proveedor as $row)
                                            <tr>
                                                <td>{{ $row->proveedor }}</td>
                                                <td>{{ $row->visitas }}</td>
                                            </tr>
                                        @endforeach
                                        </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="tableData table table-bordered" id="table-10">
                                        <thead>
                                        <tr class="replace-inputs">
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th width="15%">MARCAS</th>
                                            <th width="3%">VISITAS</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($marcas as $row)
                                            <tr>
                                                <td>{{ $row->marca }}</td>
                                                <td>{{ $row->visitas }}</td>
                                            </tr>
                                        @endforeach
                                        </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="tableData table table-bordered" id="table-8">
                                        <thead>
                                        <tr class="replace-inputs">
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th width="15%">NIT</th>
                                            <th width="15%">SUCURSAL</th>
                                            <th width="1%">VISITAS</th>
                                            <th width="1%">FECHAS</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($clientes_ecommerce as $row)
                                            <tr>
                                                <td>{{ $row->cliente_nit }}</td>
                                                <td>{{ $row->sucursal_nombre }}</td>
                                                <td>{{ $row->visitas }}</td>
                                                <td>
                                                    <a href="/mercadeo/informes/data-clientes/{{ $row->cliente_nit }}?fecha_rango={{ Input::get('fecha_rango') }}"
                                                       data-toggle="modal-ajax-big"
                                                       onclick="showMessage('CARGANDO INFORMES')"
                                                       class="btn btn-primary">
                                                        <i class="fa fa-2x fa-calendar"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </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="tableData table table-bordered" id="table-9">
                                        <thead>
                                        <tr class="replace-inputs">
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th width="10%">REGIONAL</th>
                                            <th width="3%">VISITAS</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($regional_ecommerce as $row)
                                            <tr>
                                                <td>{{ $row->regional }}</td>
                                                <td>{{ $row->visitas }}</td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                @endif
                                <table class="table table-hover">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

@section('footer')

    <script type="text/javascript">
        var table = $("#table-1").dataTable({
            "oLanguage": {
                "sUrl": "/layout/data/dataTables.es.txt"
            },
            "bAutoWidth": false,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '/mercadeo/informes/visita-ecommerce/json',
            "sPaginationType": "bootstrap",
            "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "bStateSave": true,
            "sDom": "<'row'<'col-xs-4 col-left'l><'col-xs-8 col-right'<'export-data'T>f>r>t<'row'<'col-xs-6 col-left'i><'col-xs-6 col-right'p>>",
            "oTableTools": {},
            "fnDrawCallback": function () {
                $.getScript("/layout/assets/js/neon-custom.js");
            }
        });
        table.columnFilter({
            "sPlaceHolder": "head:after",
            aoColumns: [
                {type: "text"},
                {type: "text"},
                {type: "text"},
                {type: "text"}
            ]
        });

    </script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            var table1 = setDataTables("#table-2", true);
            table1.columnFilter({
                "sPlaceHolder": "head:after"
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var table1 = setDataTables("#table-3", true);
            table1.columnFilter({
                "sPlaceHolder": "head:after"
            });
        });
    </script>
    <script type="text/javascript">
        var table = setDataTables("#table-4",true);
        table.columnFilter({
            "sPlaceHolder" : "head:after"
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var table1 = setDataTables("#table-5", true);
            table1.columnFilter({
                "sPlaceHolder": "head:after"
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var table1 = setDataTables("#table-6", true);
            table1.columnFilter({
                "sPlaceHolder": "head:after"
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var table1 = setDataTables("#table-7", true);
            table1.columnFilter({
                "sPlaceHolder": "head:after"
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var table1 = setDataTables("#table-8", true);
            table1.columnFilter({
                "sPlaceHolder": "head:after"
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var table1 = setDataTables("#table-9", true);
            table1.columnFilter({
                "sPlaceHolder": "head:after"
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var table1 = setDataTables("#table-10", true);
            table1.columnFilter({
                "sPlaceHolder": "head:after"
            });
        });
    </script>
    <script>
        $('#fecha_rango').daterangepicker(
                {
                    ranges: {
                        'Hoy': [moment(), moment()],
                        '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()]
                    },
                    endDate: moment(),
                    format: 'YYYY-MM-DD',
                    separator: ' | ',
                    locale: {
                        applyLabel: 'Aplicar',
                        cancelLabel: 'Cancelar',
                        fromLabel: 'Desde',
                        toLabel: 'Hasta',
                        weekLabel: 'S',
                        customRangeLabel: 'Otro Rango'
                    }
                }
        );
    </script>


@stop
@endif