@extends('layouts.app')

@section('title', 'Tools')

@section('content')
    <style>
        .mes {
            color: #ed5565;
            list-style-type: none;
        }

        .tooltipsy {
            padding: 5px;
            max-width: 200px;
            color: #303030;
            background-color: #f5f5b5;
            border: 1px solid #deca7e;
        }

    </style>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row equal">
            <div class="ibox">
                <div class="ibox-content">
                    <h2>Letture Distributore</h2>

                    {{-- ************** CAMPO DI RICERCA --}}
                    <div class="input-group">
                        <input type="text" placeholder="ricerca POD per tipologia flussi " id="pod"
                            class="input form-control">
                        <span class="input-group-btn">
                            <button onclick="cercaPod('0')" type="button" class="btn btn btn-primary"> <i
                                    class="fa fa-search"></i> ORARI </button>
                            <button onclick="cercaPod('1')" type="button" class="btn btn btn-primary"> <i
                                    class="fa fa-search"></i> NON ORARI </button>
                        </span>
                    </div> 

                    {{-- ************** SELETTORE TIPOLOGIA FLUSSO --}}
                    {{-- <div style="padding: 20px 20px 20px 0px;">

                        <table width="1%" cellspacing="15" cellpadding="15">
                            <tbody>
                                <tr>
                                    <td style="padding: 0px 5px 5px 0px;"><span class="label label-primary"
                                            style="font-size: 1.1em;">PDO</span></td>
                                    <td style="padding: 0px 5px 5px 5px;"><span class="label label-primary"
                                            style="font-size: 1.1em;">PDO2G</span></td>
                                    <td style="padding: 0px 5px 5px 5px;"><span class="label label-primary"
                                            style="font-size: 1.1em;">PNO</span></td>
                                    <td style="padding: 0px 5px 5px 5px;"><span class="label label-primary"
                                            style="font-size: 1.1em;">PNO2G</span></td>
                                    <td style="padding: 0px 5px 5px 5px;"><span class="label label-primary"
                                            style="font-size: 1.1em;">RFO</span></td>
                                    <td style="padding: 0px 5px 5px 5px;"><span class="label label-primary"
                                            style="font-size: 1.1em;">RFO2G</span></td>
                                    <td style="padding: 0px 5px 5px 5px;"><span class="label label-primary"
                                            style="font-size: 1.1em;">RNO2G</span></td>
                                    <td style="padding: 0px 5px 5px 5px;"><span class="label label-primary"
                                            style="font-size: 1.1em;">RSN2G</span></td>
                                    <td style="padding: 0px 5px 5px 5px;"><span class="label label-primary"
                                            style="font-size: 1.1em;">S2G</span></td>
                                    <td style="padding: 0px 5px 5px 5px;"><span class="label label-primary"
                                            style="font-size: 1.1em;">SNM2G</span></td>
                                    <td style="padding: 0px 5px 5px 5px;"><span class="label label-primary"
                                            style="font-size: 1.1em;">SOF</span></td>
                                    <td style="padding: 0px 5px 5px 5px;"><span class="label label-primary"
                                            style="font-size: 1.1em;">SOS</span></td>
                                    <td style="padding: 0px 5px 5px 5px;"><span class="label label-primary"
                                            style="font-size: 1.1em;">VNO2G</span></td>
                                </tr>
                            </tbody>
                        </table>

                    </div> --}}

                    {{-- ************** TABELLA DATI --}}
                    <div class="clients-list">
                        <div class="slimScrollDiv">
                            <div class="full-height-scroll" style="overflow: hidden; width: auto; height: 100%;">
                                <div class="table-responsive">

                                    {{-- ************** DATI --}}
                                    <table class="table table-striped table-hover" id="tableclient">
                                        <thead>
                                            <tr>
                                                <th>Pod</th>
                                                <th>CodFlusso</th>
                                                <th>DataMisura</th>
                                                <th>EaF1</th>
                                                <th>EaF2</th>
                                                <th>EaF3</th>
                                                <th>ErF1</th>
                                                <th>ErF2</th>
                                                <th>ErF3</th>
                                                <th>EaM</th>
                                                <th>ErM</th>
                                                <th>Ka</th>
                                                <th>MatrAtt</th>
                                                <th>MeseAnno</th>
                                                <th>PotDisp</th>
                                                <th>PotImp</th>
                                                <th>PotF1</th>
                                                <th>PotF2</th>
                                                <th>PotF3</th>
                                                <th>PotM</th>
                                                <th>Tensione</th>
                                                <th>TipoDato</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>
            </div>

        </div>

    </div>
@endsection

@section('scripts')
    <script>
        var tbldata;
        var tabellaL = $('#tableclient').dataTable({
            pageLength: 7
        });

        function populateTable() {

            tabellaL.fnDestroy();
            tbl = '';

            $.each(tbldata, function(key, val) {

                // console.log(val);
                cls = 'primary';

                //Parametri da popolare in base al JSON
                val.DataMisura = val.DataMisura ? val.DataMisura : '-';
                val.EaM = val.EaM ? val.EaM : '-';
                val.EaF1 = val.EaF1 ? val.EaF1 : '-';
                val.EaF2 = val.EaF2 ? val.EaF2 : '-';
                val.EaF3 = val.EaF3 ? val.EaF3 : '-';
                val.ErF1 = val.ErF1 ? val.ErF1 : '-';
                val.ErF2 = val.ErF2 ? val.ErF2 : '-';
                val.ErF3 = val.ErF3 ? val.ErF3 : '-';
                val.ErM = val.ErM ? val.ErM : '-';
                val.Ka = val.Ka ? val.Ka : '-';
                val.MatrAtt = val.MatrAtt ? val.MatrAtt : '-';
                val.MeseAnno = val.MeseAnno ? val.MeseAnno : '-';
                val.PotDisp = val.PotDisp ? val.PotDisp : '-';
                val.PotImp = val.PotImp ? val.PotImp : '-';
                if (val.PotImp == null) {
                    val.PotImp = '-'
                }
                val.PotF1 = val.PotF1 ? val.PotF1 : '-';
                val.PotF2 = val.PotF2 ? val.PotF2 : '-';
                val.PotF3 = val.PotF3 ? val.PotF3 : '-';
                val.PotM = val.PotM ? val.PotM : '-';
                val.Tensione = val.Tensione ? val.Tensione : '-';
                val.TipoDato = val.TipoDato ? val.TipoDato : '-';

                tbl += "<tr>" +
                    "<td>" + val.Pod + "</td>" +
                    "<td><span  class='label label-" + cls + "'>" + val.CodFlusso + "</span></td>" +
                    "<td>" + moment(val.DataMisura).format("DD/MM/YYYY") + "</td>" +
                    "<td>" + val.EaF1 + "</td>" +
                    "<td>" + val.EaF2 + "</td>" +
                    "<td>" + val.EaF3 + "</td>" +
                    "<td>" + val.ErF1 + "</td>" +
                    "<td>" + val.ErF2 + "</td>" +
                    "<td>" + val.ErF3 + "</td>" +
                    "<td>" + val.EaM + "</td>" +
                    "<td>" + val.ErM + "</td>" +
                    "<td>" + val.Ka + "</td>" +
                    "<td>" + val.MatrAtt + "</td>" +
                    "<td>" + val.MeseAnno + "</td>" +
                    "<td>" + val.PotDisp + "</td>" +
                    "<td>" + val.PotImp + "</td>" +
                    "<td>" + val.PotF1 + "</td>" +
                    "<td>" + val.PotF2 + "</td>" +
                    "<td>" + val.PotF3 + "</td>" +
                    "<td>" + val.PotM + "</td>" +
                    "<td>" + val.Tensione + "</td>" +
                    "<td>" + val.TipoDato + "</td>" +
                    "</tr>";

            });

            $('#tableclient').find('tbody').empty().append(tbl);
            $('.hastip').tooltipsy();

            $('#tableclient').dataTable({
                pageLength: 100,
                paging: true,
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ]
            });
        }

        function cercaPod(type) {
            pod = $('#pod').val();

            switch (type) {
                case '0':
                    console.log("ORARI")
                    $.getJSON("/api/dlettureOrarie/list", {
                            pod: pod
                        })
                        .done(function(json) {
                            tbldata = json;
                            populateTable();
                        })
                        .fail(function(jqxhr, textStatus, error) { 
                            var err = textStatus + ", " + error;
                            console.log("Request Failed: " + err);
                        });
                    break;

                case '1':
                console.log("NON ORARI")

                    $.getJSON("/api/dlettureNonOrarie/list", {
                            pod: pod
                        })
                        .done(function(json) {
                            tbldata = json;
                            populateTable();
                        })
                        .fail(function(jqxhr, textStatus, error) {
                            var err = textStatus + ", " + error;
                            console.log("Request Failed: " + err);
                        });
                    break;

                default:
                    break;
            }
        }
    </script>

@endsection