@extends('layouts.app')

@section('content')
<div class="container" style="width:98% !important">
    <div class="row">
        <div>
            <div class="panel panel-primary">

                <div class="panel-heading">Datos de Contacto de Clientes Activos</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>Código Cliente</th>
                                    <th>Nombre</th>
                                    <th>Nodo</th>
                                    <th>Plan</th>
                                    <th>Tecnología</th>
                                    <th>NAP</th>
                                    <th>Teléfono Fijo</th>
                                    <th>Celular 1</th>
                                    <th>Celular 2</th>
                                    <th>Celular 3</th>
                                    <th>Email 1</th>
                                    <th>Email 2</th>
                                </tr>
                            </thead>
                        </table>
                </div>

            </div>
        </div>
    </div>
</div>
@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>
<link rel="stylesheet" type="text/css" href="/css/buttons-dataTables.min.css"/> 
<script>
$(document).ready(function() {
    
    var d = new Date();
    var filename = "Datos de Contacto de Clientes Activos (Actualizados al " + d.toISOString().substring(0, 10) +")";

    $('#tabla').DataTable( {

        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
        stateSave: true,
        
        "ajax":{
            "url": "/clientes/contacto/data",
            "type": "GET"
        },

        "initComplete": function (settings, json) {
        console.log(json);
        },

        "columns": [
            {"data":"codigo"},
            {"data":"nombre"},
            {"data":"nodo"},
            {"data":"plan"},
            {"data":"tecnologia"},
            {"data":"NAP"},
            {"data":"telefono_fijo"},
            {"data":"celular1"},
            {"data":"celular2"},
            {"data":"celular3"},
            {"data":"email1"},
            {"data":"email2"},
        ],
        "responsive": true,
        "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