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

@section('body')
<style type="text/css">
    .form-group {
        margin-left: 3px
    }
    /*.box-tools{
        margin-top: 3px;
        padding-right: 3px;
    }*/
</style>

<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="form-group pull-right">
                    <button class="btn btn-default" id="print-report" disabled="true"><i class="fa fa-print text-warning"></i>PRINT</button>
                </div>

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

                <div class="form-group pull-right">
                    <button class="btn btn-default" id="generate-report"><i class="fa fa-fw fa-recycle text-primary"></i> GENERATE</button>
                </div>                 
                
                <div class="form-group pull-right">
                    <input id="date-range" type="text" class="form-control pull-right">
                </div>

                <h2 class="page-header" style="margin-top:6px; border: none;">ADVANCE PAYMENT SUMMARY <span style="font-size: 16px;" class="text-muted">&emsp;Please select date range</span></h2>

                <hr>
            </div>            
        </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">
	// initialize date range picker
	$('#date-range').daterangepicker();

    // clear 
    $('#clear-search').click(function(){
        location.reload(true);
        showBoxLoadingState();
    });

	$(document).ready(function() {

        $('#generate-report').on('click', function(){
            $('#print-report').prop('disabled', false);

            var $date_range = $('#date-range').val();
            $.ajax({
                url: $app_url + '/reports/advance-payment-summary-report',
                type: 'get',
                dataType: 'html',
                data: {
                    'date_range'  : $date_range 
                },
                beforeSend: function() {
                    showBoxLoadingState();
                },
                success: function(data) {
                    $('#report-container').html(data);
                    $('#generate-report').prop('disabled', true);
                },
                error: function() {
                    removeBoxLoadingState()
                },
                complete: function() {
                    removeBoxLoadingState();
                }
            });
        });

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