@extends('layouts.app')

@push('tab_style')
    <link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet">
@endpush
@push('tab_script')
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.5/jspdf.plugin.autotable.js"></script>
    <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
@endpush
    
@section('content')
<div class="container">
    <div id="dados" class="d-none" >{{ $base }}</div>
    <div id="tipo" class="d-none" >{{ $tipo }}</div>
    <div id="columns" class="d-none" >{{ $columns }}</div>
    
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="table-info">
                    <div class="row">
                        <div class="col-sm-9">
                            <h4 class="card-title">{{ $opt['title'] }}</h4>
                            <div><strong>Filtro: </strong>{{ $opt['filtro'] }}</div>
                        </div>
                        <div class="col-sm-3 my-auto text-right">
                            <button id="download-csv" class="btn btn-outline-info" data-toggle="tooltip" data-placement="top" title="Csv"><i class="fas fa-file-csv"></i></i></button>
                            <button id="download-xlsx" class="btn btn-outline-success"  data-toggle="tooltip" data-placement="top" title="Excel"><i class="far fa-file-excel"></i></i></button>
                            <button id="download-json" class="btn btn-outline-warning" data-toggle="tooltip" data-placement="top" title="Json"><i class="fas fa-file-download"></i></button>
                            <button id="download-pdf" class="btn btn-outline-danger" data-toggle="tooltip" data-placement="top" title="Pdf"><i class="far fa-file-pdf"></i></button>
                            <button id="print-table" class="btn btn-outline-dark" data-toggle="tooltip" data-placement="top" title="Imprimir"><i class="fas fa-print"></i></button>
                        </div>
                    </div>
                </div>
                <div class="card-body-tab" id="example-table">                   
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('tab-script')
<script type="text/javascript">
    var pt = {
                "pt-br":{
                    "columns":{
                        "name":"Nome", //replace the title of column name with the value "Name"
                    },
                    "ajax":{
                        "loading":"Carregando", //ajax loader text
                        "error":"Erro", //ajax error text
                    },
                    "groups":{ //copy for the auto generated item count in group header
                        "item":"item", //the singular  for item
                        "items":"itens", //the plural for items
                    },
                    "pagination":{
                        "page_size":"Tam Pag.", //label for the page size select element
                        "first":"Primeira", //text for the first page button
                        "first_title":"Primeira Página", //tooltip text for the first page button
                        "last":"Ultima",
                        "last_title":"Última Página",
                        "prev":"Aterior",
                        "prev_title":"Página Anterior",
                        "next":"Próxima",
                        "next_title":"Próxima Página",
                    },
                    "headerFilters":{
                        "default":"filter column...", //default header filter placeholder text
                        "columns":{
                            "name":"filter name...", //replace default header filter text for column name
                        }
                    }
                }
            };

    $(document).ready(function() {
        var cont = $('#dados').html();
        var col  = $('#columns').html();
        var tit  = $('.card-title').html();
        var tipo  = $('#tipo').html();

        console.log(tipo);
        console.log(col);

        var tabledata = JSON.parse(cont);
        var colunas = JSON.parse(col); console.log(colunas);

        var table = new Tabulator("#example-table", {
            data:tabledata, //assign data to table
            layout:"fitColumns", //fit columns to width of table (optional)
            columns:colunas,
            langs: pt,
            locale:true,
            pagination:"local",
            printAsHtml:true,
            printHeader:"<h3>"+ tit + "<h3>",
            printFooter:"<h4>"+Date().toString()+"<h4>",
            paginationSize:10,
            movableColumns:false,
            groupBy: tipo == 5 ? ["produto", "lote"] : ["produto"],
            groupStartOpen:[false, false],
            groupHeader:[
                function(value, count, data, group){ //generate header contents for gender groups 
                    total = 0;
                    rows = tabulatorGetGroupData(group);
                    for (var i = 0; i < rows.length; i++) {
                        total += parseFloat(rows[i].data.saldo);
                    }
                    var tot = total.toFixed(2).replace('.',',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
                    tot += rows[0].data.unidade == 'Litro' ? ' l' : (rows[0].data.unidade == 'Kg' ? ' Kg' : ' Unidades');
                               
                    return "Produto: " + value + "<span style='color:#00d; margin-left:10px;'>  - Saldo: " + tot + "</span>";
                },
                function(value, count, data, group){ //generate header contents for color groups
                    return "Lote: " + value + "<span style='color:#1D8423; margin-left:10px;'>  -  (" + count + " itens)</span>";
                },
            ],
        });
        
        function tabulatorGetGroupData(group) {
            var rows = [];
            var groupList = group._group;
            rows = tabulatorGetGroupDataList(groupList);
            return rows;
        }

        function tabulatorGetGroupDataList(groupList) {
            var rows = groupList.rows;
            for (var i = 0; i < groupList.groupList.length; i++) {
                rows = rows.concat(tabulatorGetGroupDataList(groupList.groupList[i]));
            }
            return rows;
        }

        $("#download-csv").click(function(){
            table.download("csv", tit+".csv",{delimiter:";"},{bom:true});
        });

        $("#download-xlsx").click(function(){
            table.download("xlsx", tit+".xlsx", {sheetName:tit});
        });

        //trigger download of data.json file
        $("#download-json").click(function(){
            table.download("json", tit+".json");
        });

        $("#print-table").on("click", function(){
            table.print(false, true);
        });


        //trigger download of data.pdf file
        $("#download-pdf").click(function(){
            table.download("pdf", tit+".pdf", {
                orientation:"portrait", //set page orientation to portrait
                title:tit, //add title to report
            });
        });
    });
</script>
@stop