provider.blade.php

@extends('layouts.master')

@section('css')
<!-- Bootstrap Datepicker min css -->
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" rel="stylesheet">
<!-- Css for this page -->
<link href="{{ asset('css/payerCss.css') }}" rel="stylesheet">
<!-- DataTable fixedHeader css -->
<link href="//cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css" rel="stylesheet">
<!-- DataTable css -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/sl-1.2.6/datatables.min.css"/>

<style>
#payer-table_filter
{
  display: none!important;
}
</style>

@endsection

@section('content')

<div class="row" style="margin: 0px;">
    <div class="col-lg-3 offset-lg-1" style="padding-top:2%;">
        <h5><b>Топ 10 даватели</b></h5>
    </div>
    <div class="col-lg-7" style="padding-top:2%; text-align:center">
        <div class="row">
            <label for="dateFrom" class="col-lg-1" style="padding-top:1%;">Од:</label>
            <div class="input-group col-lg-4">
                <input type="text" id="dateFrom" class="form-control col-lg-8 form-control-1  from" placeholder="<?=date("M, Y", mktime(0, 0, 0, date('m')-1, 1, date('Y')))?>" >
                <div class="input-group-append" style="">
                            <span onclick="getFocusFrom()" class="input-group-text" id="basic-addon1"><i class="far fa-calendar-alt"></i></span>
                </div>
            </div>
            <label for="dateTo" class="col-lg-1" style="padding-top:1%;">До: </label>
            <div class="input-group col-lg-4">
                <input type="text" id="dateTo" class="form-control col-lg-8 form-control-1  to" placeholder="<?=date("M, Y")?>">
                <div class="input-group-append" style="">
                            <span onclick="getFocusTo()" class="input-group-text" id="basic-addon1"><i class="far fa-calendar-alt"></i></span>
                </div>
            </div>
            <div class="col-lg-2" style="padding-right:0px; text-align:center">
                <a href="#" style="color: #343a40" id="column_chart"><i class="far fa-chart-bar fa-2x" style="padding:1%"></i></a>
                <a href="#" id="pie_chart" style="color: #343a40"><i class="fas fa-chart-pie fa-2x" style="padding:1%"></i></a>
            </div>
        </div>
    </div>
</div>

<div class="row" style="width: 100%; margin: 0px;" >
    <hr class="col-lg-10" >
</div>
<div class="row" style="width: 100%; margin: 0px; " >
    <div id="loading" class="col-lg-12">
        <div class="loader offset-lg-6">
        </div>
    </div>
    <div id="column" class="PayersColumnChart offset-lg-1 col-lg-10" style="padding: 0px; text-align: center"></div>
    <div id="pie" class="PayersPieChart offset-lg-1 col-lg-10" style="display:none;"></div>
</div>


<div class="row" style="width:100%;background-color: #eeeeee; padding:2%; text-align:center; padding-left: 0px; padding-right:0px; margin:0px;">

    <div class="col-lg-3">
        <h3>Трансакции</h3>
        <h1 class="transactions">{{$num_transactions}} </h1>
    </div>
    <div class="col-lg-3">
        <h3>Јавни установи</h3>
        <h1 class="transactions">{{$num_budget_entities}}</h1>
    </div>
    <div class="col-lg-3">
        <h3>Компании</h3>
        <h1 class="transactions">{{$num_legal_entities}} </h1>
    </div>
    <div class="col-lg-3">
        <h3>Поединци</h3>
        <h1 class="transactions">{{ number_format(round($num_people))}} </h1>
    </div>

</div>

<div class="row" style="padding-left: 4%; padding-top: 2%; width: 100%; margin: 0px;">
    <div class="col-lg-2">
        <h5><b>Даватели</b> </h5>
    </div>
</div>
<div class="row" style="width: 100%; margin: 0px;" >
    <hr class="col-lg-11" >
</div>
<div class="row" style="padding-bottom: 0.5%; width: 100%; margin: 0px;">

    <div class="col-lg-3">
        <div class="row"  style="margin: 0px;">
            <div class="col-lg-4 offset-lg-2" style="text-align:center">
                <label for="showRowsNumber">Прикажи:</label>
            </div>
            <select id="showRowsNumber" name="payer-table_length" aria-controls="payer-table" class="col-lg-3 custom-select custom-select-sm form-control-sm">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>

        </div>
    </div>


    <div class="col-lg-3 offset-lg-6">
        <div class="row" style="text-align:center; margin: 0px;">
            <div class="col-lg-6" style="padding-left: 0px; padding-right: 0px; padding-top: 1%; text-align:center">
                <input id="myInputTextField" type="text" placeholder=" пребарај" class="form-control " >
            </div>
            <div class="col-lg-4" style="padding-left: 0px; padding-right: 0px; padding-top: 1%; text-align:center">
                <a style="color: #343a40" href="{{route('transactions export')}}"><i class="far fa-file-excel fa-2x offset-lg-2"></i></a>
            </div>
        </div>
    </div>
</div>

<div class="row" style="padding:2%; padding-top:0px; margin: 0px; overflow-x: auto;">
    <table class="table display" style="width: 100%" id="payer-table">
        <thead>
            <tr>
                <th>Ime </th>
                <th>Smetka </th>
                <th>EDB </th>
                <th>Iznos </th>
            </tr>
        </thead>
    </table>
</div>
<?= Lava::render('ColumnChart','Payers_column', 'column')?>
<?= Lava::render('PieChart','Payers_pie', 'pie')?>

@endsection

@push('scripts')
<!-- Bootstrap-datepicker min js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<!-- DataTable js -->
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/sl-1.2.6/datatables.min.js"></script>
<script>
// Needed variables for view functionalitty
var type = 'column';
var currentTime = new Date();
var fromDate;
var toDate;
var fromMonth;
var fromYear;
var toMonth;
var toYear;
var months = {
            'Jan' : '1',
            'Feb' : '2',
            'Mar' : '3',
            'Apr' : '4',
            'May' : '5',
            'Jun' : '6',
            'Jul' : '7',
            'Aug' : '8',
            'Sep' : '9',
            'Oct' : '10',
            'Nov' : '11',
            'Dec' : '12'
        }
//TODO on load
$(window).on('load', function() {

    //Hide the load animation on graph
    $('#loading').hide();
    //Create search inputs for every column of Payers DataTable
    $('#payer-table thead tr').clone(true).appendTo('#payer-table thead');
    $('#payer-table thead tr:eq(1) th').each(function (i) {
        var title = $(this).text();
        $(this).html('<input class="form-control" type="text" placeholder="'+title+'" />');
        $('input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search(this.value)
                    .draw();
            }
        } );
    });
    //Init from datePicker and set format
    $('.from').datepicker({
        autoclose: true,
        minViewMode: 1,
        format: 'M, yyyy'
        });
    //Init to datePicker and set format
    $('.to').datepicker({
        autoclose: true,
        minViewMode: 1,
        format: 'M, yyyy'
        });
    var counter = 1;

    //TODO on change dateFrom datepicker
    $('#dateFrom').on('change', function(){

        dateFrom = $('#dateFrom').val().trim().split(",");
        fromMonth = dateFrom[0].substr(0,3);
        fromYear = dateFrom[1].trim();
        if($('#dateTo').val() == '')
            {
                toMonth = 12;
                toYear = currentTime.getFullYear();
            }
        else
            {
                dateTo = $('#dateTo').val().trim().split(",");
                toMonth = dateTo[0];
                toMonth = months[toMonth];
                toYear = dateTo[1].trim();
            }
        if(type == 'pie' && (counter % 3 == 0)){
            $.getJSON("{{route('payers transactions chart api')}}?fromMonth="+months[fromMonth]+"&fromYear="+fromYear+"&toMonth="+toMonth+"&toYear="+toYear+"", function (dataTableJson) {
                lava.loadData('Payers_pie', dataTableJson, function (chart) {
                });
            });
        }
        if(type == 'column' && (counter % 3 == 0)) {
            $.getJSON("{{route('payers transactions chart api')}}?fromMonth="+months[fromMonth]+"&fromYear="+fromYear+"&toMonth="+toMonth+"&toYear="+toYear+"", function (dataTableJson) {
                lava.loadData('Payers_column', dataTableJson, function (chart) {

                    if((dataTableJson.rows).length == 0)
                        lava.charts.ColumnChart.Payers_column.options.animation.duration = 0;
                    else
                        lava.charts.ColumnChart.Payers_column.options.animation.duration = 2000;
                    lava.charts.ColumnChart.Payers_column.redraw();

                });
            });
        }
        counter++;
    });

    //TODO on change dateTo datepicker
    $('#dateTo').on('change', function(){
     dateTo = $('#dateTo').val().trim().split(",");
     toMonth = dateTo[0];
     toYear = dateTo[1].trim();
    if($('#dateFrom').val() == '')
        {
             fromMonth = 1;
             fromYear = currentTime.getFullYear();
        }
    else
        {
             dateFrom = $('#dateFrom').val().trim().split(",");
             fromMonth = dateFrom[0];
             fromMonth = months[fromMonth];
             fromYear =  dateFrom[1].trim();
        }
        if(type == 'pie' && (counter % 3 == 0)){
            $.getJSON("{{route('payers transactions chart api')}}?fromMonth="+fromMonth+"&fromYear="+fromYear+"&toMonth="+months[toMonth]+"&toYear="+toYear+"", function (dataTableJson) {
                lava.loadData('Payers_pie', dataTableJson, function (chart) {

                });
            });
        }
        if(type == 'column' && (counter % 3 == 0))
        {
            $.getJSON("{{route('payers transactions chart api')}}?fromMonth="+fromMonth+"&fromYear="+fromYear+"&toMonth="+months[toMonth]+"&toYear="+toYear+"", function (dataTableJson) {
                lava.loadData('Payers_column', dataTableJson, function (chart) {
                });
            });
        }
        counter++;
})
    //Init DataTable
    var table = $('#payer-table').DataTable({
            processing: true,
            serverSide: true,
            select: true,
            ajax: '{!! route('transactions payers datatable api') !!}',
            columns: [
                { data: 'naziv', name: 'mf_legal_entities.naziv' },
                { data: 'smetka_davac', name: 'smetka_davac'},
                { data: 'edb', name: 'mf_legal_entities.edb'},
                { data: 'iznos', name: 'iznos'},

            ],
            responsive: true,
            orderCellsTop: true,
            fixedHeader: true,
            "language": {
                "processing": "Се процесира"
                },
            "bLengthChange": false,

    });

    //Table on click row
    table.on('select', function ( e, dt, type, indexes ) {
    if ( type === 'row' ) {
        var data = table.rows(indexes).data();
        var smetka_davac = data[0].smetka_davac;
        var url = "{{ route('payers specific entity page', ":smetka_davac") }}";
        url = url.replace(":smetka_davac", smetka_davac);
        window.location = url;
    }
    });
    //Custom search
    $('#myInputTextField').keyup(function(){
        table.search($(this).val()).draw();
    });

});
//TODO on click on column chart icon
$('#column_chart').on('click', function() {

    if($('#dateFrom').val() == '')
    {
        fromMonth = 'Jan';
        fromYear = currentTime.getFullYear();
    }
    else
    {
        dateFrom = $('#dateFrom').val().trim().split(",");
        fromMonth = dateFrom[0].substr(0,3);
        fromYear = dateFrom[1].trim();
    }
    if($('#dateTo').val() == '')
    {
        toMonth = 'Dec';
        toYear = currentTime.getFullYear();

    }
    else
    {
        dateTo = $('#dateTo').val().trim().split(",");
        toMonth = dateTo[0].substr(0,3);
        toYear = dateTo[1].trim();
    }
    type = 'column';
    $('#pie').css('display', 'none');
    $('#column').css('display', 'block');
    $.getJSON("{{route('payers transactions chart api')}}?fromMonth="+months[fromMonth]+"&fromYear="+fromYear+"&toMonth="+months[toMonth]+"&toYear="+toYear+"", function (dataTableJson) {
        lava.loadData('Payers_column', dataTableJson, function (chart) {
        });
    });
});
//TODO on click on pie chart icon
$('#pie_chart').on('click', function() {
    if($('#dateFrom').val() == '')
    {
        fromMonth = 'Jan';
        fromYear = currentTime.getFullYear();
    }
    else
    {
        dateFrom = $('#dateFrom').val().trim().split(",");
        fromMonth = dateFrom[0].substr(0,3);
        fromYear = dateFrom[1].trim();
    }
    if($('#dateTo').val() == '')
    {
        toMonth = 'Dec';
        toYear = currentTime.getFullYear();
    }
    else
    {
        dateTo = $('#dateTo').val().trim().split(",");
        toMonth = dateTo[0].substr(0,3);
        toYear = dateTo[1].trim();
    }
    type = 'pie';
    $('#column').css('display', 'none');
    $('#pie').css('display', 'block');
    $.getJSON("{{route('payers transactions chart api')}}?fromMonth="+months[fromMonth]+"&fromYear="+fromYear+"&toMonth="+months[toMonth]+"&toYear="+toYear+"", function (dataTableJson) {
        lava.loadData('Payers_pie', dataTableJson, function (chart) {

        });
    });
});


//Show Length pagination dataTable
$('#showRowsNumber').on('change', function(){
    var value = $('#showRowsNumber').val();
        $('#payer-table').DataTable().page.len(value).draw();

});

// From Datepicker get Focus on click on button
function getFocusFrom() {
    $('#dateFrom').focus();
}
// To Datepicker get Focus on click on button
function getFocusTo() {
    $('#dateTo').focus();
}
</script>
@endpush