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

@section('body')
<section style="background:#FFF; padding:5px 20px 10px 20px;">
    <div class="row">
        <div class="col-xs-12 hidden-print">
            <div class="right-buttons">
                <div class="pull-right" style="margin-top:5px">
                    <button class="btn btn-warning" id="print-report"><i class="fa fa-fw fa-print"></i>PRINT</button>
                </div>

                <div class="pull-right" style="margin-top:5px; margin-left:2px; margin-right:2px">
                    <button class="btn btn-success" id="fetch-report">VIEW</button>
                </div>                 
                
                <div class="pull-right" style="width:100px; margin:5px">
                	<select id="bill-month" class="form-control select2 select2-hidden-accessible" data-placeholder="Bill Month" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        @foreach($month AS $b)
                        <option value="{{ $b->bill_month }}">{{ sprintf("%02d", $b->bill_month) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="pull-right" style="width:120px; margin:5px">
                    <select id="bill-year" class="form-control select2 select2-hidden-accessible" data-placeholder="Bill Year" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        @foreach($year AS $y)
                        <option value="{{ $y->bill_year }}">{{ $y->bill_year }}</option>
                        @endforeach
                    </select>
                </div>       
            </div>
            <h2 class="page-header">
                Summary of Customer's Advance Payment <span style="font-size: 16px;" class="text-muted">&emsp;Please enter bill month and year.</span>
            </h2>            
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12" id="report-container">
        </div>
    </div> 
</section>
@endsection


@section('scripts')
<script type="text/javascript">
	$(document).ready(function() {
        $('#fetch-report').click(function() {
            $year  = $('#bill-year').val();
            $month = $('#bill-month').val();

            if($year != "" && $month != "") {
                $.ajax({
                    url: $app_url + '/reports/advance-payment-report',
                    type: 'get',
                    dataType: 'html',
                    data: { 
                        'year'  : $year,
                        'month' : $month
                    },
                    beforeSend: function() {
                        $('#fetch-report').text("Fetching records...");
                    },
                    success: function(data) {
                        $('#report-container').html(data);
                    },
                    error: function() {
                        $('#fetch-report').text('VIEW');
                    },
                    complete: function() {
                        $('#fetch-report').text("VIEW");
                    }
                });
            }
        });

        $('#print-report').click(function() {
            window.print();
        });
	});
</script>
@endsection