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

<style type="text/css">
    .box-tools{
        margin-top: 3px;
        padding-right: 3px;
    }
</style>

@section('body')
<div class="box box-default">
    <div class="box-body">
        <div class="row">
            <div class="col-xs-12">
                <label class="text-primary" style="font-size:16px; margin-top:6px">Special Collection Report</label>
                
                <div class="pull-right box-tools">
                    <button class="btn btn-default" id="report-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="report-clear" onclick="location.reload();">
                        <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="report-generate">
                        <i class="fa fa-fw fa-recycle text-primary"></i>&nbsp;Generate
                    </button>
                </div>                             

                {{-- <div class="pull-right box-tools" style="width:200px">
                    <input type="text" class="form-control pull-right" id="date-range" placeholder="Enter date range">    
                </div>              --}}

                <div class="pull-right box-tools" style="width:110px">
                    <select id="bill-month" class="form-control select2 select2-hidden-accessible" data-placeholder="Bill Month" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        @foreach($months AS $m)
                        <option value="{{ $m }}">{{ sprintf("%02d", $m) }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="pull-right box-tools" style="width:110px">
                    <select id="bill-year" class="form-control select2 select2-hidden-accessible" data-placeholder="Bill Year" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        @foreach($years AS $y)
                        <option value="{{ $y }}">{{ $y }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- <div class="pull-right box-tools">
                    <select id="select-report-type" 
                            name             = "select-report-type" 
                            class            = "form-control select2 select2-hidden-accessible" 
                            data-placeholder = "Select Report Type" 
                            style            = "width: 160px;"
                            aria-hidden      = "true">
                        <option value=""></option>
                        <option value="1">Current Bill</option>
                        <option value="2">All Bills</option>
                        <option value="3">All Bills Except Current</option>
                    </select>
                </div>       --}}

                {{-- <div class="pull-right box-tools">
                    <select id="select-due-date" 
                            name             = "select-due-date" 
                            class            = "form-control select2 select2-hidden-accessible" 
                            data-placeholder = "Select Due Date" 
                            style            = "width: 130px;"
                            aria-hidden      = "true">
                        <option value=""></option>
                        <option value="teller">Before</option>
                        <option value="collector">After</option>
                    </select>
                </div>      --}}
            </div>
        </div>
        <hr style="margin-top:6px; margin-bottom:8px">
        <div class="row">
            <div class="col-xs-12">
                <div id="report-container">
                    @include('reports.special-collection.report')
                </div>
            </div>  
        </div>
    </div>
</div>
@endsection


@section('scripts')
<script src="{{ URL::asset('js/reports/JsonExportExcel.min.js') }}"></script>
<script src="{{ URL::asset('js/elite.js') }}"></script>
<script type="text/javascript">
	$(document).ready(function(){

        $('#report-generate').click(function() {
            GetBooks(function(response){
                showBoxLoadingState();	
                
                load_per_book(response);
            });	

        });
        
        function load_per_book(data) {
            setTimeout(function(){	
				var $bookIds 	= [];
				var $startIndex = 0;

				$.each(data, function(index){			
					var $d = data[index];
					$bookIds.push($d.id);
				});

				var $bills = [];

				var i = $startIndex;

                // $bookIds.length
				while(i < $bookIds.length){
					$.ajax({
						url   : $app_url + '/reports/special-collection-report-get',
						type  : 'GET',
						async : false,
						data  : {
		    				'book_id' 	: $bookIds[i]
						},
						success : function(response, status, xhr){
                            console.log(response);
							$bills.push(response);
							i++;									
						},
						error : function(xhr){
							$status = xhr.status;
						}
					});		
				}

				console.log('ALL books loaded.');				
				load_table($bills);				
			}, 1000);	
        }

        function load_table(data) {
            var table = $('#table-collections > tbody');
            console.log(data);
            
            $.each(data, function(index) {
                var d = data[index];
                var count = 0;
                var acct_number = '';  

                $.each(d, function(index) {
                    var q = d[index];

                    // CHECK IF SAME CUSTOMER
                    if (acct_number != q.acct_number) {
                        count = 0;
                    }

                    
                    // CHECK IF WITHIN DUE
                    if (q.within_due == "YES") {
                        count++;
                        acct_number = q.acct_number;
                    }
                    else {
                        // CHECK IF ADVANCES
                        if (number_format(cast(q.advance)) > number_format(cast(0)) && q.status == 'P') {
                            count++;
                        }
                        else {
                            count = 0;
                        }
                    }

                    table.append("<tr>"
                        + "<td>" 
                            + q.company
                        + "</td>"
                        + "<td>" 
                            + q.branch
                        + "</td>"
                        + "<td>" 
                            + q.acct_number
                        + "</td>"
                        + "<td>" 
                            + q.customer_name
                        + "</td>"
                        + "<td>" 
                            + q.bill_year
                        + "</td>"
                        + "<td>" 
                            + q.bill_month
                        + "</td>"
                        + "<td>" 
                            + q.acct_class + '-' + q.acct_subclass
                        + "</td>"
                        + "<td>" 
                            + q.total_cum
                        + "</td>"
                        + "<td>" 
                            + q.bill_amount
                        + "</td>"
                        + "<td>" 
                            + q.others
                        + "</td>"
                        + "<td>" 
                            + q.advance
                        + "</td>"
                        + "<td>" 
                            + q.is_min
                        + "</td>"
                        + "<td>" 
                            + q.min_rate
                        + "</td>"
                        + "<td>" 
                            + q.min_amt
                        + "</td>"
                        + "<td>" 
                            + q.within_due
                        + "</td>"
                        + "<td>" 
                            + q.promo
                        + "</td>"
                        + "<td>" 
                            + count
                        + "</td>"
                    +"</tr>");
                });
            });

            $('#report-excel').prop('disabled', true);
            $('#report-excel').prop('disabled', false);
            removeBoxLoadingState();
        }

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

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

        // $('#date-range').on('cancel.daterangepicker', function(ev, picker) {
        //     $(this).val('');
        // });
    })
    // .on('click', '#report-generate', function() {
    //     var bill_year  = $('#bill-year option:selected').val();
    //     var bill_month = $('#bill-month option:selected').val();

    //     if(bill_year && bill_month) {
    //         $.ajax({
    //             url: $app_url + '/reports/special-collection-report-get',
    //             type: 'get',
    //             dataType: 'html',
    //             data: { 
    //                 'bill_year'  : bill_year,
    //                 'bill_month' : bill_month
    //             },
    //             beforeSend: function() {
    //                 $('#report-excel').prop('disabled', true);
    //                 showBoxLoadingState();
    //             },
    //             success: function(data) {
    //                 $('#report-excel').prop('disabled', false);
    //                 $('#report-container').html(data);
    //             },
    //             error: function() {
    //                 removeBoxLoadingState();
    //             },
    //             complete: function() {
    //                 removeBoxLoadingState();
    //             }
    //         });
    //     }
    // })
    .on('click', '#report-excel', function () {
        var option = {};

        var bill_month = $('#bill-month').val();
        var bill_year = $('#bill-year').val();

        var table_id_name = 'table-collections';
        var file_name = 'Special Collection ' + "{{ strtoupper(session('branch_name')) }}";

        var header  = $('.table > thead');
        var details = $('#'+table_id_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);
        });

        file_name = file_name + '@' + new Date().toLocaleString();
        option.fileName = file_name.trim();
        option.datas = [{
                sheetData   : row,
                sheetName   : 'Special Collection',
                sheetHeader : column
        }]

        var toExcel=new ExportJsonExcel(option);
        toExcel.saveExcel();
    });
</script>
@endsection