@extends('layouts.app')

@section('content')

<style>
.buttonGroup i {
    margin: 3px;
}    
</style>

<div class="container">
    <div class="row">
        <div>
            <div class="panel panel-primary">
                <div class="panel-heading">OLTs</div>
                <div class="panel-body">
                    <div class="actions">
                        <a href="/olts/new"><button type="button" class="btn btn-success">Nueva OLT</button></a>
                    </div>
                    <br>
                    <br>

                    <table id="olt_list" class="table table-striped table-bordered dt-responsive" style="width:100% !important" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Etiqueta</th>
                                <th>IP</th>
                                <th>Puerto</th>
                                <th>Cantidad de Puertos PON</th>       						
                                <th>Modelo</th>
                                <th>Marca</th>
                                <th>Acciones</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" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" 
          integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" 
          crossorigin=""/>

     <link rel="stylesheet" type="text/css" href="/css/buttons-dataTables.min.css"/> 
           
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" 
        integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" 
        crossorigin=""></script>

<script>

$(document).ready(function() {

    $('#olt_list').DataTable( {
        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
        "order": [[ 1, "asc" ]],
        stateSave: true,
        "ajax":{
        "url": "/olts/list",
        "type": "GET"
        },
        "columns": [
            {"data":"etiqueta"},
            {"data":"ip"},
            {"data":"puerto"},
            {"data":"cantidad_puertos_pon"},
            {"data":"modelo"},
            {"data":"marca"},
            {
                "orderable":false,  
                "targets" : 7,                
                "render": function (data, type, row) {  
                            return  '<div align="center" class="buttonGroup" data-id='+row.id+'>'+
                                        '<i class="fa fa-pencil editar" title="Editar"></i> ' +
                                        '<i class="fa fa-trash-o eliminar" title="Eliminar"></i>'+
                                    '</div>';
                }   
            }

        ],
        "language": {
            "url":"/js/Spanish.json"
        } 

    });

    $("#olt_list").on("click", ".editar", function() {
        console.log( "Hola! quiero editar con este ID: " + $(this).closest("div").data("id") );
    });

    $("#olt_list").on("click", ".eliminar", function() {
        console.log( "Hola! quiero eliminar con este ID: " + $(this).closest("div").data("id") );
    });

});
</script>
@endsection