@extends('layouts.app')

<link rel="stylesheet" type="text/css" href="/css/bootstrap-multiselect.css"/>

@section('content')
<div class="container center-block" style="width:98% !important">
    <div class="row">
        <div>
            <div class="panel panel-primary pull-left">
                <div class="panel-heading">Clientes Gestión</div>
                <div class="panel-body">

                    <table id="tabla" class="table table-striped table-bordered dt-responsive" style="width:100% !important" cellspacing="0">
                        <thead>
                            <tr>

                                <th>Cliente</th>
                                <th>Código</th>
                                <th>Email 1</th>
                                <th>Estado Email 1</th>
                                <th>Email 2</th>
                                <th>Estado Email 2</th>
                                <th>IP</th>
                                <th>Plan</th>
                                <th>Nodo</th>
                                <th>Tecnología</th>

                            </tr>
                        </thead>

                        <tbody id = "tablaBody">
                        </tbody>
                    </table>

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

<script src="/js/bootstrap-multiselect.js"></script>
@endsection


@section('scripts')
<script src="/js/dataTables-buttons.min.js"></script>
<script src="/js/buttons-html5.min.js"></script>
<script src="/js/jszip.min.js"></script>
<script src="/js/pdfmake.min.js"></script>
<script src="/js/buttons.print.min.js"></script>
<script src="/js/vfs_fonts.js"></script>
<script>
$(document).ready(function() {
    var d = new Date();
    var filename = "Reporte Clientes Gestión (Actualizados al " + d.toISOString().substring(0, 10) +")";

    $('#tabla').DataTable( {
        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "order": [[ 1, "asc" ]],
        stateSave: true,
        "ajax":{
        "url": "/clientes_gestion/list",
        "type": "GET"
        },


        "columns": [
            {"data":"nombre"},
            {"data":"codigo"},
            {"data":"email"},
            {"data":"email_status"},
            {"data":"email2"},
            {"data":"email2_status"},
            {"data":"ip"},
            {"data":"plan"},
            {"data":"nodo"},
            {"data":"tecnologia"},
        ],


        "language": {
            "url":"/js/Spanish.json"
        },
        dom:    "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-5'i><'col-sm-7'p>>",
        buttons: [
            {
                extend: 'csvHtml5',
                title: filename,
            },
            {
                extend: 'excelHtml5',
                title: filename,
            },
            {
                extend: 'pdfHtml5',
                title: filename,
            }
        ],

    });
});
</script>
@endsection