@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

<style type="text/css">
    section.paid-septage-fee{
        background : #FFF;
        padding    : 5px 20px 10px 20px;
        height     : 85%;
        font-size  : 14px;
    }	

    table{
    	font-size: 14px;
    }

    .select2-selection__arrow, 
    .select2-selection__clear{
        display : none;
    }  

    .page-header{
        margin-bottom: 10px !important;
    }   

    address{
        margin-bottom: 10px !important;
    }       

    div.dataTables_filter input {
        font-size: 14px !important;        
    }    

    th.text-wrap{
        word-wrap: break-word;
        min-width: 50px;
        max-width: 50px;       
        vertical-align: middle !important;
    }

    table.dataTable thead > tr > th,
    .table > thead > tr > th{
        border-bottom  : 1px solid #fafafa;
        padding        : 8px 5px;
        padding-right  : 3px !important;
        vertical-align : middle;
        white-space    : nowrap;
    }

    table tbody tr td{
        padding : 2.5px 5px !important;
        border: 0;
        white-space: nowrap;
        border-bottom: 1px solid #fafafa;
        font-size: 9pt;
    }      

    .t-title{
        font-style: italic;
    }

    .box-tools{
        margin-top: 3px;
        padding-right: 3px;
    }      
</style>

@section('body')
    <section class="paid-septage-fee">

        <div class="pull-right box-tools">
            <button class="btn btn-default" id="btn-excel" disabled="true">
                <i class="fa fa-file-excel-o text-success"></i>&nbsp;Excel
            </button>
        </div>                        

        <div class="pull-right box-tools">
            <button class="btn btn-default" id="btn-clear">
                <i class="fa fa-fw fa-eraser text-muted"></i>&nbsp;Clear
            </button>
        </div>    

        <div class="pull-right box-tools">
            <button class="btn btn-default" id="btn-generate">
                <i class="fa fa-fw fa-recycle text-primary"></i>&nbsp;Generate
            </button>
        </div>      

        <div class="pull-right box-tools">
            <input type="text" class="form-control pull-right" id="date-range" placeholder="Enter date range" readonly>
        </div>

<!--         <div class="pull-right box-tools">
            <button class="btn btn-default" id="btn-set-final">
                <i class="fa fa-fw fa-check text-success"></i>&nbsp;Set as Final
            </button>
        </div>         -->

<!--         <div class="pull-right box-tools">
            <button class="btn btn-default" id="btn-summary" style="display: none;">
                <i class="fa fa-bar-chart text-danger"></i>&nbsp;Sharing of Fees
            </button>
        </div>      -->                  

        <h2 class="page-header">
            Paid Septage Fee  <span style="font-size: 16px;" class="text-muted show-date-range">&emsp;Please enter date range.</span>    
            <!-- <span style="font-size: 16px; color:red; font-style: italic; display: nonex;" class="show-label-final">&emsp; Not Final</span> -->
        </h2>

        <div class="row">

            <div class="col-xs-12">
                <!-- <span class="t-title">Customers <b style="color: red;">With</b> Septic Tank</span> -->
                <div class="">
                    <table class="table table-condensed table-bordered table-hover t-septage-detailed" id="t-septage-detailed">
                        <thead>
                            <tr class="table-header-bg">
                                <th class="text-wrap">BillNo.</th>
                                <th class="text-wrap">BillType</th>
                                <th class="text-wrap">BillMonth</th>
                                <th class="text-wrap">BillYear</th>
                                <th class="text-wrap">BookCode</th>
                                <th class="text-wrap">AccountNo.</th>
                                <th class="text-wrap">CustomerName</th>
                                <th class="text-wrap">Class</th>
                                <th class="text-wrap">TotalCuM</th>
                                <th class="text-wrap">SeptageFee</th>
                                <th class="text-wrap">CollectionDate</th>
                                <th class="text-wrap">AlterationDate</th>
                                <th class="text-wrap">Adjustment</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
<!--                         <tfoot>
                            <tr style="font-weight: bold;" class="success">
                                <td>Total Bills</td>
                                <td class="row-count">&nbsp;</td>
                                <td colspan="6">&nbsp;</td>
                                <td>Total Septage</td>
                                <td class="total-septage">&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                            </tr>
                        </tfoot> -->
                    </table>
                </div>             
            </div>                        
        </div>


    </section>
@endsection


@section('scripts')
    <script src="{{ URL::asset('js/helper.js') }}"></script>
    <script src="{{ URL::asset('js/elite.js') }}"></script>
    <script src="{{ URL::asset('js/reports/JsonExportExcel.min.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function(){

            $("#btn-generate").click(function(){
                $dateRange = $("#date-range").val();

                $('#septage-date').prop('disabled', true);                
                $('h2.page-header > span.show-date-range').html('&emsp;'+$dateRange);

                ajaxcall($app_url+"/reports/paid-septage-fee-get","GET",{
                    date_range : $dateRange
                },function(response){

                    var t = $('#t-septage-detailed').DataTable({
                        data     : response.rb,
                        ordering : false,
                        paging   : false,
                        scrollY  : '65%',
                        "dom"    : "tf",
                        "oLanguage" : {
                            "sSearch" : ""
                        },                      
                        columns  : [
                                        {
                                            data      : "bill_number"
                                        },   
                                        {
                                            data      : "bill_type"
                                        },                                                                    
                                        {
                                            data      : "bill_month"
                                        },                                          
                                        {
                                            data      : "bill_year"
                                        },     
                                        {
                                            data      : "book_code"
                                        },                                                                                  
                                        {
                                            data      : "acct_number"
                                        },                          
                                        {
                                            data      : "custname",
                                            render    : function(data, type, row){
                                                return data.toUpperCase();
                                            }
                                        },    
                                        {
                                            data      : "acct_class"
                                        },                        
                                        {
                                            data      : "total_cum",
                                            className : "text-right"
                                        },                        
                                        {
                                            data      : "septage_fee",
                                            className : "text-right"
                                        },      
                                        {
                                            data      : "coll_date",
                                            className : "text-center"
                                        },
                                        {
                                            data      : "alt_date",
                                            className : "text-center"
                                        },
                                        {
                                            data      : "adjustment",
                                            className : "text-right",
                                            render    : function(data, type, row){
                                                return "";
                                            }
                                        },                                         
                        ]                    
                    });

                    var $totalSeptage = response.totalRB;
                    var $rowCount     = Object.keys(response.rb).length;//$("#t-septage-detailed > tbody > tr").length;

                    $('#t-septage-detailed > tbody').append("<tr style='font-weight: bold;'>"
                                                                + "<td style='font-size:14px;'>Total RB</td>"
                                                                + "<td style='font-size:14px;'>"
                                                                    + $rowCount
                                                                + "</td>"
                                                                + "<td>&nbsp;</td>"
                                                                + "<td>&nbsp;</td>"
                                                                + "<td>&nbsp;</td>"
                                                                + "<td>&nbsp;</td>"
                                                                + "<td>&nbsp;</td>"
                                                                + "<td>&nbsp;</td>"
                                                                + "<td style='text-align:right; font-size:14px;'>Total Septage</td>"
                                                                + "<td style='text-align:right; font-size:14px;'>"
                                                                    + number_format($totalSeptage)
                                                                + "</td>"                                                                
                                                           +"</tr>");
                    $('#t-septage-detailed > tbody').append("<tr><td colspan='13'>&nbsp;</td></tr>");

                    var $al = response.al;
                    var $rowCount = 0;
                    $.each($al, function(index){
                        var $a = $al[index];
                        if( $a.has_history == 1 && cast($a.adjustment) == 0 ){
                            // no adjustment made, ignore
                        }else{
                            $rowCount++;
                            $('#t-septage-detailed > tbody').append("<tr>"
                                                                        + "<td style='font-size:14px;'>"
                                                                            + $a.bill_number
                                                                        + "</td>"
                                                                        + "<td style='font-size:14px;'>"
                                                                            + $a.bill_type
                                                                        + "</td>"
                                                                        + "<td>"
                                                                            + $a.bill_month
                                                                        + "</td>"
                                                                        + "<td>"
                                                                            + $a.bill_year
                                                                        + "</td>"
                                                                        + "<td>"
                                                                            + $a.book_code
                                                                        + "</td>"
                                                                        + "<td>"
                                                                            + $a.acct_number
                                                                        + "</td>"
                                                                        + "<td>"
                                                                            + $a.custname.toUpperCase()
                                                                        + "</td>"
                                                                        + "<td>"
                                                                            + $a.acct_class
                                                                        + "</td>"
                                                                        + "<td style='text-align:right;'>"
                                                                            + $a.total_cum
                                                                        + "</td>"
                                                                        + "<td style='text-align:right;'>"
                                                                            + number_format($a.septage_fee)
                                                                        + "</td>" 
                                                                        + "<td style='text-align:center;'>"
                                                                            + $a.coll_date
                                                                        + "</td>"  
                                                                        + "<td style='text-align:center;'>"
                                                                            + $a.alt_date
                                                                        + "</td>"                                                                    
                                                                        + "<td style='text-align:right;'>"
                                                                            + number_format($a.adjustment)
                                                                        + "</td>"                                                                                                                                                                                                      
                                                                   +"</tr>");                             
                        }                       
                    }); 
                    $('#t-septage-detailed > tbody').append("<tr style='font-weight: bold;'>"
                                                                + "<td style='font-size:14px;'>Total AL</td>"
                                                                + "<td style='font-size:14px;'>"
                                                                    + $rowCount
                                                                + "</td>"
                                                                + "<td>&nbsp;</td>"
                                                                + "<td>&nbsp;</td>"
                                                                + "<td>&nbsp;</td>"
                                                                + "<td>&nbsp;</td>"
                                                                + "<td>&nbsp;</td>"
                                                                + "<td>&nbsp;</td>"
                                                                + "<td style='text-align:right; font-size:14px;'>Total Septage</td>"
                                                                + "<td style='text-align:right; font-size:14px;'>"
                                                                    + number_format(response.totalAL)
                                                                + "</td>"                                                                
                                                           +"</tr>");                    

                    $('#btn-generate').prop('disabled', true);
                    $("#btn-excel").prop('disabled', false);

                    $('div.dataTables_filter input').prop('placeholder', 'Search');                  
                    $('div.dataTables_filter input').css('margin-top', '10px');  
                    $('.table > thead > tr').find('th:eq(0)').removeClass('sorting_asc').removeClass('sorting_disabled');

                                            
                    // $("tfoot > tr > td.row-count").text($rowCount);
                    // $("tfoot > tr > td.total-septage").text(number_format($totalSeptage));

                    // $("#t-septage-detailed > tfoot").find("tr").remove();

                    // if($rowCount > 0){
                    //     $("#btn-summary").css("display","");
                    //     $summary = response.summary;
                    //     $("tfoot > tr > td.total-septage").data("res", $summary.RES);
                    //     $("tfoot > tr > td.total-septage").data("com", $summary.COM);
                    //     $("tfoot > tr > td.total-septage").data("gov", $summary.GOV);
                    // }

                },true);
            });

            $("#btn-clear").click(function(){
                location.reload();
            });

            $('#btn-excel').click(function(){
                var option={};

                var date   = $('#date-range').val();

                var table_class_name = 't-septage-detailed';
                var file_name        = 'PaidSeptageFee ' + date;

                var $header  = $('div.dataTables_scrollBody table.'+table_class_name+' > thead');
                var $details = $('.'+table_class_name).find('tbody > tr');

                var $column = $header.find('tr > th').map(function(index, value){
                    return $.trim($(value).text());
                }).get();
                
                var $row  = [];     

                $.each($details, function(){            
                    var $d    = $(this);
                    var $cell = {};

                    for(i=0; i<$column.length; i++){
                        $cell[$column[i]] = $d.find('td').eq(i).text();
                    }           
                    $row.push($cell);
                });

                option.fileName = file_name + '@' + new Date().toLocaleString();
                option.datas = [{
                        sheetData   : $row,
                        sheetName   : 'Paid Septage Fee',
                        sheetHeader : $column
                }]

                var toExcel=new ExportJsonExcel(option);
                toExcel.saveExcel();                
            });    

            $('#btn-summary').click(function(){

                var $summary = {
                    "res" : $("tfoot > tr > td.total-septage").data("res"),
                    "com" : $("tfoot > tr > td.total-septage").data("com"),
                    "gov" : $("tfoot > tr > td.total-septage").data("gov")
                };

                $.confirm({
                    content: function () {
                        var self = this;
                        return $.ajax({
                            url      : $app_url + '/reports/sharing-of-fees',
                            data     : {
                               summary : JSON.stringify($summary)
                            },
                            dataType : 'html',
                            method   : 'get'
                        }).done(function (response) {
                            self.setContent(response);
                            $('.jconfirm-content').addClass('page-body');
                        }).fail(function(){
                            self.setContent('Something went wrong.');
                        });
                    },
                    title       : 'SHARING OF FEES',
                    type        : 'blue',
                    columnClass : 'l',
                    draggable   : true,
                    buttons : {               
                        Excel : {
                            btnClass : 'btn-green',
                            text     : "<i class='fa fa-file-excel-o'></i> Export to Excel",
                            action   : function(){
                                            var option={};

                                            var date   = $('#date-range').val();

                                            var table_class_name = 't-share-fees';
                                            var file_name        = 'SharingOfFees ' + date;

                                            var $header  = $('table.'+table_class_name+' > thead');
                                            var $details = $('.'+table_class_name).find('tbody > tr');

                                            var $column = $header.find('tr > th').map(function(index, value){
                                                return $.trim($(value).text());
                                            }).get();
                                            
                                            var $row  = [];     

                                            $.each($details, function(){            
                                                var $d    = $(this);
                                                var $cell = {};

                                                for(i=0; i<$column.length; i++){
                                                    $cell[$column[i]] = $d.find('td').eq(i).text();
                                                }           
                                                $row.push($cell);
                                            });

                                            option.fileName = file_name + '@' + new Date().toLocaleString();
                                            option.datas = [{
                                                    sheetData   : $row,
                                                    sheetName   : 'Sharing Of Fees',
                                                    sheetHeader : $column
                                            }]

                                            var toExcel=new ExportJsonExcel(option);
                                            toExcel.saveExcel();                                 
                            }
                        },
                        Close : function(){
                        },                
                    },
                    onContentReady : function(){
                    }
                });                 
            });

            $("#btn-set-final").click(function(){
                $.confirm({
                    title     : "Set this as Final?",
                    draggable : true,
                    icon      : "fa fa-question-circle text-primary",
                    content   : "<br />Press YES to continue.",
                    buttons   : {
                        YES : {
                            btnClass : "btn-blue",
                            action : function(){
                                return false;
                            }
                        },
                        NO  : function(){

                        }
                    }
                });
            });


            // initialize daterangepicker
            $('#date-range').daterangepicker({
                autoUpdateInput : false,
                locale: {
                    cancelLabel: 'Clear'
                }            
            });

            // event onApply
            $('#date-range').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
                
            });

            // event onCancel
            $('#date-range').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });             
        });
    </script>
@endsection