@extends('app')

@section('content')
    
@include('flash::message')

@include('partials.alert')

<div class="panel panel-default">

    <div class="panel-heading">
        <h3 class="panel-title" id = "form_title">{!! ucwords('Month End Client Statement') !!}</h3>       
    </div>
    
    <div class="panel-body">

        @include('errors.list')
        
        <div class="row">
            <div class="col-md-5">
                <div id="invoice-report-options">
                
                    {!! Form::open(['url' => 'reports/statement/output', 'id' => 'fm-invoice-report', 'action' => 'post', 'target' => '_blank']) !!}
                    {!! Form::hidden('export', 0, ['id' => 'export']) !!}
        
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group" id="form-group-monthpicker">
                               {!! Form::label('month_end_date', 'Date:', ['class' => 'control-label col-sm-4']) !!}
                                <div class="col-sm-8 small-bottom-padding">
                                    <div class="input-group monthpicker" id="invoice-monthpicker">
                                        {!! Form::formattedDate('month_end_date', ['class' => 'form-control','type'=> 'text', 'required']) !!}
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                         </span>
                                    </div>
                                </div>
                            </div> 
                        </div>
                    </div>
                       
                    <hr class="dashed">
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class = "form-group">
                                {!! Form::label('start_client_code', 'Start client:', ['class' => 'control-label col-sm-4']) !!}
                                <div class="col-sm-8  small-bottom-padding">
                                {!! Form::select('start_client_code', $client_list, null, ['class' => 'form-control']) !!}
                                </div>
                            </div>
                                    
                            <div class = "form-group">
                                {!! Form::label('end_client_code', 'End client:', ['class' => 'control-label col-sm-4']) !!}
                                <div class="col-sm-8 small-bottom-padding">
                                {!! Form::select('end_client_code', $client_list, null, ['class' => 'form-control']) !!}
                                </div>
                            </div>
                    
                        </div>
                    </div>
                        
                    <hr class="dashed">
          
                    <div class="row">
                        <div class="col-md-12">
        
                            <div class="form-group">
                                {!! Form::label('agreement_type_id', 'Agreement type:', ['class' => 'control-label col-sm-4']) !!}
                                <div class="col-sm-8">
                                    <div class="small-bottom-padding">
                                        {!! Form::checkbox('all_agreement_types', 1, true, ['id' => 'cb_all_agreement_types'])  !!} All
                                        {!! Form::select('agreement_type_id', $agreement_type_list, null, ['class' => 'form-control', 'id' => 'agreement_type_id']) !!} 
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                {!! Form::label('agreement_status_id', 'Agreement status:', ['class' => 'control-label col-sm-4']) !!}
                                <div class="col-sm-8">
                                    <div class="small-bottom-padding">
                                        {!! Form::checkbox('all_agreement_status',1, true, ['id' => 'cb_all_agreement_status'])  !!} All
                                    </div>
                                    <span id=agreement-status-span">{!! Form::select('agreement_status_id[]', $agreement_status_list, null, ['class' => 'form-control', 'multiple', 'id' => 'agreement_status_id']) !!} </span>
                                </div>
                            </div>
                            
                        </div>        
                    </div>

                        
                    <div class="row">
                        <div class="col-md-12">
                            <hr>
                            <div class = "form-buttons pull-right">
                                <button id="btn-list" type = "button" class ="btn btn-primary btn-sm"><span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                                   list due
                                </button>
                                <!-- <button id = "btn-preview" type = "button" class = 'btn btn-primary btn-sm'><span class="glyphicon glyphicon-print" aria-hidden="true"></span>
                                   print/preview
                                </button>
                                <button id = "btn-export" type = "button" class = 'btn btn-success btn-sm'><span class="glyphicon glyphicon-export" aria-hidden="true"></span>
                                    export
                                </button> -->
                            
                            </div>
                        </div>   
                    </div>    
                    
                    {!! Form::close() !!}     
                </div>      <!-- invoice-report-options -->
            </div>      <!-- col-md-5 -->
            
            <div class="col-md-7">
                
                <div id="invoice-toolbar">
                    <div class="fixed-table-toolbar">
                        <div class="bars">
                            <button v-cloak v-show="can_preview" type="button" id="btn-view-selected" class="btn btn-success">preview selected</button>
                            <button v-cloak v-show="can_generate" type="button" id="btn-generate" class="btn btn-primary">
                                <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                                    generate selected
                            </button>
                            <button v-cloak v-show="can_download" type="button" id="btn-download" class="btn btn-danger">
                                <span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span>
                                    download selected
                            </button>
                        </div>
                    </div>
                </div>
           
                 {!! Form::open(['url' => 'month-end-client-statement/generate','id' => 'fm-invoice-download', 'target' => '_blank']) !!}
                <!-- Bootstrap table component -->
                <!-- data-toggle = "table" activates Bootstrap table -->
                
                {{--  data-select-item-name specifies name of form field of selected items (invoice[])
                      data-id-field is the field to be added to the invoice[] array
                      invoice[] will be included with form fields --}}
                <table data-toggle="table"
                       data-maintain-selected=true
                       data-height="500"
                       data-search="false"
                       data-advanced-search="false"
                       id="tbl-invoices"
                       data-id-field="agreement_id"      
                       data-undefined-text=""
                       data-toolbar="#invoice-toolbar"
                       data-select-item-name="agreementid[]"> 
                 
                    <thead>
                        <tr>
                            <th data-checkbox="true"></th>
                            <th data-field="agreement_id" data-visible="false"></th>
                            <th data-field="client_code">Client Code</th>
                            <th data-field="agreement_code">Agreement</th>
                            <th data-field="agreement_description">Description</th>
                            <th data-field="view_button"></th>
                        </tr>
                    </thead>
            
                </table>
                {!! Form::close() !!}  
            </div>     <!-- col-md-7 -->
        </div>      <!-- row -->
    </div>      <!-- panel-body -->
              
</div>  <!--panel panel-default -->

@stop


@section('scripts')
    
<script src = "{!! asset('js/hilbit-invoice-report-vue.js') !!}"></script>    
    
<script>

    var hilbitInvoiceReport = hilbitInvoiceReport || {};
    
    hilbitInvoiceReport = function()
    {
        
        /************************************************************************************
        *
        * List invoices generated for the selected options
        *
        ************************************************************************************/
        var listInvoices = function()
        {
            var form = '#fm-invoice-report';
            var post_url =  "{{ url('reports/statement/output?ajax=1') }}";

            var monthenddate = $("#month_end_date").val();
            var monthenddatearr = monthenddate.split("/");
            var lastday = new Date(parseInt(monthenddatearr[1]), parseInt(monthenddatearr[0]), 0).getDate();
            
            if ($("input[name=agreement_ids]").length) {

                $("input[name=agreement_ids]").val("");
            }

            if ($("input[name=agreement_id]").length) {

                $("input[name=agreement_id]").val("");
            }

            if ($("input[name=generate]").length) {

                $("input[name=generate]").val("0");
            }
            
            if ($("input[name=start_date]").length) {

                $("input[name=start_date]").val("01/" + monthenddate);
            }
            else{

                $(form).append('<input name="start_date" value="01/' + monthenddate + '" type="hidden">');
            }

            if ($("input[name=as_at_date]").length) {

                $("input[name=as_at_date]").val(lastday + "/" + monthenddate);
            }
            else{

                $(form).append('<input name="as_at_date" value="' + lastday + '/' + monthenddate + '" type="hidden">');
            }

            if ($("input[name=all_client]").length) {

            }
            else{

                 $(form).append('<input name="all_client" value="1" type="hidden">');
            }

            if ($("input[name=all_client_types]").length) {

            }
            else{

                $(form).append('<input name="all_client_types" value="1" type="hidden">');
            }            
             
            var form_data = $(form).serializeArray();
            
            hilbit.ui.removeAlerts();
            
            if (!$(form).valid())
            {
                return;
            }
            
            // Hide the generate button
            hilbitInvoiceReport.setVueProps({'can_generate': false});
            
            $.ajax({
                method: "POST",
                url: post_url,
                data: form_data,

            })   
            .done(function(response)
            {
                
                // Replace table data with invoice listing
                $('#tbl-invoices').bootstrapTable('load', response);
                
                // Show download button
                if ((response).length)
                {
                    //hilbitInvoiceReport.setVueProps({'can_generate' : true});
                    $("#btn-generate").show();
                    $("#btn-view-selected").show();
                }
                
            })
              
            .fail( function(jqXHR, textStatus, errorThrown)
            {
            // in hilbit-global.js
                hilbit.ui.handleAjaxFail(jqXHR, textStatus, errorThrown);
            }); 
        };
        
         
        /************************************************************************************
        *
        * Download selected PDF's
        *
        ************************************************************************************/
        var downloadPDFs = function()
        {   
            var form = '#fm-invoice-download';
            var url = "{{ url('reports/client-invoice/download-pdfs') }}";
            var form_data;
            
            //If no selections display error message, otherwise zip and download selected invoices
            $selections = $('#tbl-invoices').bootstrapTable('getSelections');
            if ($selections.length == 0)
            {
                hilbit.ui.alertMessage('hilbit-alert-message-text', "{{ ucfirst(trans('hilbit.invoicing.first_select_download')) }}", 'error', true);
            }
            else    
            {
                $(form).attr('action', url);
                $(form).attr('target','_self');
                $(form).submit();     
            }
        };
        
        /************************************************************************************
        *
        * Set VUE properties
        * See hilbit-invoice-report-vue.js for invoice_report_vue
        *
        ************************************************************************************/
        var setVueProps = function(props)
        {
            hilbit.utils.setVueProps(invoice_report_vue, props);
        };
        
        
        return {
            downloadPDFs : downloadPDFs,
            setVueProps : setVueProps,
            listInvoices : listInvoices
        }
        
    }();
    
    $(function () {
        
        hilbit.ui.attachFormValidation('fm_invoice-report');
        hilbit.ui.attachMonthPicker();
        $('#invoice-monthpicker').data("DateTimePicker").date(new Date());
        
        $('#agreement_status_id').select2({
            placeholder: 'Click here to select agreement status'
        });

         $('#client_id').select2({
            placeholder: 'Click here to select clients'
        });
        
        hilbit.reports.setSelect('client_id',!$('#cb_all_client').is(':checked'));
        hilbit.reports.setSelect('agreement_status_id',!$('#cb_all_agreement_status').is(':checked'));
        hilbit.reports.setSelect('agreement_type_id',!$('#cb_all_agreement_types').is(':checked'));
        
        
        $('#cb_all_agreement_status').click(function()
        {
            hilbit.reports.setSelect('agreement_status_id',!$('#cb_all_agreement_status').is(':checked'));
        });
        
        $('#cb_all_agreement_types').click(function()
        {
            hilbit.reports.setSelect('agreement_type_id',!$('#cb_all_agreement_types').is(':checked'));
        });

        $('#cb_all_client').click(function()
        {
            hilbit.reports.setSelect('client_id',!$('#cb_all_client').is(':checked'));
        });
        
        $('#btn-export').click(function()
        {
            $('#export').val(1);
            $('#fm-invoice-report').attr('target', '_self');
            $('#fm-invoice-report').submit();
        });
        
        $('#btn-view-selected').click(function()
        {
            $('#export').val(0);
            $('#fm-invoice-report').attr('target', '_blank');

            var chkd = [];

            $("input[name='agreementid[]']:checked").each(function(){
                chkd.push($(this).val());
            });

            if (chkd.length) {

                var form = '#fm-invoice-report';

                var monthenddate = $("#month_end_date").val();
                var monthenddatearr = monthenddate.split("/");
                var lastday = new Date(parseInt(monthenddatearr[1]), parseInt(monthenddatearr[0]), 0).getDate();
                chkd = chkd.join();

                if ($("input[name=agreement_id]").length) {

                    $("input[name=agreement_id]").val("");
                }

                if ($("input[name=agreement_ids]").length) {

                    $("input[name=agreement_ids]").val(chkd);
                }
                else{

                    $(form).append('<input name="agreement_ids" value="' + chkd + '" type="hidden">');
                }

                if ($("input[name=start_date]").length) {

                    $("input[name=start_date]").val("01/" + monthenddate);
                }
                else{

                    $(form).append('<input name="start_date" value="01/' + monthenddate + '" type="hidden">');
                }

                if ($("input[name=generate]").length) {

                    $("input[name=generate]").val("");
                }

                if ($("input[name=as_at_date]").length) {

                    $("input[name=as_at_date]").val(lastday + "/" + monthenddate);
                }
                else{

                    $(form).append('<input name="as_at_date" value="' + lastday + '/' + monthenddate + '" type="hidden">');
                }

                if ($("input[name=all_client]").length) {

                }
                else{

                    $(form).append('<input name="all_client" value="1" type="hidden">');
                }

                if ($("input[name=all_client_types]").length) {

                }
                else{

                    $(form).append('<input name="all_client_types" value="1" type="hidden">');
                } 

                $(form).submit();

            }
            else{
                $("#error-message").html("<li>please select invoice.</li>");
                $("#error-message").show();
            }
        });
        
        $('#btn-generate').click(function()
        {
           
            var chkd = [];

            $("input[name='agreementid[]']:checked").each(function(){
                chkd.push($(this).val());
            });

            if (chkd.length) {

                var form = '#fm-invoice-report';

                var monthenddate = $("#month_end_date").val();
                var monthenddatearr = monthenddate.split("/");
                var lastday = new Date(parseInt(monthenddatearr[1]), parseInt(monthenddatearr[0]), 0).getDate();
                chkd = chkd.join();

                if ($("input[name=agreement_id]").length) {

                    $("input[name=agreement_id]").val("");
                }

                if ($("input[name=agreement_ids]").length) {

                    $("input[name=agreement_ids]").val(chkd);
                }
                else{

                    $(form).append('<input name="agreement_ids" value="' + chkd + '" type="hidden">');
                }

                if ($("input[name=start_date]").length) {

                    $("input[name=start_date]").val("01/" + monthenddate);
                }
                else{

                    $(form).append('<input name="start_date" value="01/' + monthenddate + '" type="hidden">');
                }

                if ($("input[name=generate]").length) {

                    $("input[name=generate]").val("1");
                }
                else{

                    $(form).append('<input name="generate" value="1" type="hidden">');
                }

                if ($("input[name=as_at_date]").length) {

                    $("input[name=as_at_date]").val(lastday + "/" + monthenddate);
                }
                else{

                    $(form).append('<input name="as_at_date" value="' + lastday + '/' + monthenddate + '" type="hidden">');
                }

                if ($("input[name=all_client]").length) {

                }
                else{

                    $(form).append('<input name="all_client" value="1" type="hidden">');
                }

                if ($("input[name=all_client_types]").length) {

                }
                else{

                    $(form).append('<input name="all_client_types" value="1" type="hidden">');
                } 

                $(form).submit();

            }
            else{
                $("#error-message").html("<li>please select invoice.</li>");
                $("#error-message").show();
            }
        });
        
        $('#btn-list').click(function()
        {
            hilbitInvoiceReport.listInvoices();    
        });
        
        
        $('#fm-invoice-report').submit(function()
        {
             // Hide the generate button
            hilbitInvoiceReport.setVueProps({'can_generate': true});    
        });
        
   
        $('#btn-download').on("click", function(event)
        {
            hilbitInvoiceReport.downloadPDFs();   
        });

        $('#tbl-invoices').on('click','[name="btn-view"]',function(event)
        { 

            var agreementid = $(this).data("agreement-id");
            
            var form = '#fm-invoice-report';

            var monthenddate = $("#month_end_date").val();
            var monthenddatearr = monthenddate.split("/");
            var lastday = new Date(parseInt(monthenddatearr[1]), parseInt(monthenddatearr[0]), 0).getDate();
            
            if ($("input[name=agreement_ids]").length) {

                $("input[name=agreement_ids]").val("");
            }

            if ($("input[name=generate]").length) {

                $("input[name=generate]").val("0");
            }

            if ($("input[name=agreement_id]").length) {

                $("input[name=agreement_id]").val(agreementid);
            }
            else{

                $(form).append('<input name="agreement_id" value="' + agreementid + '" type="hidden">');
            }
            
            if ($("input[name=start_date]").length) {

                $("input[name=start_date]").val("01/" + monthenddate);
            }
            else{

                $(form).append('<input name="start_date" value="01/' + monthenddate + '" type="hidden">');
            }

            if ($("input[name=as_at_date]").length) {

                $("input[name=as_at_date]").val(lastday + "/" + monthenddate);
            }
            else{

                $(form).append('<input name="as_at_date" value="' + lastday + '/' + monthenddate + '" type="hidden">');
            }

            if ($("input[name=all_client]").length) {

            }
            else{

                 $(form).append('<input name="all_client" value="1" type="hidden">');
            }

            if ($("input[name=all_client_types]").length) {

            }
            else{

                $(form).append('<input name="all_client_types" value="1" type="hidden">');
            } 

            $(form).submit();           
            
        }); 
        
    });
    
</script>
    
@stop