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

<style type="text/css">
    section.unpaid-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="unpaid-septage-fee">

        <div class="pull-right box-tools">
            <button class="btn btn-default" id="btn-excel">
                <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">
            Unpaid 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">AlterationDate</th> --}}
                                <th class="text-wrap">BillAmount</th>
                                <th class="text-wrap">TotalDue</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() {
        // $('#report-generate').click(function() {
        //     $year  = $('#bill-year').val();
        //     $month = $('#bill-month').val();

     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      : "alt_date",
                                        //     className : "text-center"
                                        // },
                                        {
                                            data      : "total_due",
                                            className : "text-center"
                                        },
                                        {
                                            data      : "bill_amount",
                                            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>");

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

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

                var table_class_name = 't-septage-detailed';
                var file_name        = 'UnpaidSeptageFee ' + 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   : 'Unpaid Septage Fee',
                        sheetHeader : $column
                }]

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


    </script>
@endsection