@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="generate-report"><i class="fa fa-fw fa-recycle"></i> GENERATE REPORT</button>
                </div>                 

                <div class="pull-right" style="width:130px; margin:5px">
                    <select id="book_id" class="form-control select2 select2-hidden-accessible" data-placeholder="Filter by Book" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        <option value="all">All Books</option>
                        @foreach($books AS $b)
                        <option value="{{ $b->id }}">{{ $b->code }}</option>
                        @endforeach
                    </select>
                </div> 
                <div class="pull-right" style="width:200px; margin:5px">
                    <select id="arrears_condition" class="form-control select2 select2-hidden-accessible" data-placeholder="Report Type" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        <option value="no-months">Number of Months</option>
                        <option value="over-gd">Arrears over GD</option>
                    </select>
                </div> 
                <div class="pull-right" style="width:210px; margin:5px">
                    <select id="arrears_months" class="form-control select2 select2-hidden-accessible" data-placeholder="Arrears (Number of Months)" style="width: 100%;" aria-hidden="true">
                  		<option></option>
                        <option value="1">1 month above</option>
                        <option value="2">2 months above</option>
                        <option value="3">3 months above</option>
                	</select>
                </div>               
            </div>

            <h2 class="page-header">
                Customers for Disconnection
            </h2>            
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12" id="report-container">
            <p class="text-center" id="report-title" style="visibility:hidden">HWRI Paombong</p>
        </div>
    </div> 
</section>
@endsection


@section('scripts')
<script type="text/javascript">
	$(document).ready(function() {
		$('#generate-report').click(function() {
            $arrears_months = $('#arrears_months').val();
            $arrears_condition = $('#arrears_condition').val();
            $book_id = $('#book_id').val();

			if($arrears_months != "" && $arrears_condition != "" && $book_id != "") {
				$.ajax({
					url: $app_url + '/reports/customers-for-disconnection-generate',
					type: 'get',
					dataType: 'html',
					data: {
                        'arrears_months': $arrears_months,
                        'arrears_condition': $arrears_condition,
                        'book_id': $book_id 
                    },
					beforeSend: function() {
						showBoxLoadingState();
					},
					success: function(data) {
                        $('#report-container').html(data);
					},
					complete: function() {
					   removeBoxLoadingState();
					}
				});
			}
		});

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