@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(trans('hilbit.month_end_debtor.form_title')) !!}</h3>       
    </div>
        
        
    {!! Form::open(['id' => 'fm-month-end-invoice']) !!}
    {!! Form::hidden('invoice_date', null, ['id' => 'invoice_date']) !!}
    <div class="panel-body">

        @include('errors.list')
        
        <div class="row">
            <div class="col-md-5">
                <div id="invoice-options">    
                        
                    <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_debtor_code', 'Start debtor:', ['class' => 'control-label col-sm-4']) !!}
                                <div class="col-sm-8  small-bottom-padding">
                                {!! Form::select('start_debtor_code', $debtor_list, null, ['class' => 'form-control']) !!}
                                </div>
                            </div>
                                    
                            <div class = "form-group">
                                {!! Form::label('end_debtor_code', 'End debtor:', ['class' => 'control-label col-sm-4']) !!}
                                <div class="col-sm-8 small-bottom-padding">
                                {!! Form::select('end_debtor_code', $debtor_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>        
                    </div>
                           
                    <div class="row">
                        <div class="col-md-12">
                            <hr>
                            <div class = "form-buttons pull-right">
                                <button id="btn-list-due" type = "button" class ="btn btn-primary btn-sm"><span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                                   list due
                                </button>
                            </div>
                        </div>      
                    </div>
                        
                </div>      <!-- invoice-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 all
                            </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 selection
                            </button>
                        </div>
                    </div>
                </div>
           
           
                <!-- Bootstrap table component -->
                <!-- data-toggle = "table" activates Bootstrap table -->
                
                {{--  data-select-item-name specifies name of form field of selected items (agreement[])
                      data-id-field is the field to be added to the agreement[] array
                      agreement[] 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-month-end-invoices"
                       data-id-field="id"      
                       data-undefined-text=""
                       data-toolbar="#invoice-toolbar"
                       data-select-item-name="client_debtor[]"> 
                 
                    <thead>
                        <tr>
                            <th data-checkbox="true"></th>
                            <th data-field="client_code">Client Code</th>
                            <th data-field="client_name">Client Name</th>
                            <th data-field="debtor_code">Debtor Code</th>
                            <th data-field="debtor_name">Debtor Name</th>
                            <th data-field="button"></th>
                        </tr>
                    </thead>
            
                </table> 
            </div>     <!-- col-md-7 -->
        </div>      <!-- row -->
    </div>      <!-- panel-body -->
    {!! Form::close() !!}            
</div>  <!--panel panel-default -->

@stop


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

    var hilbitInvoicing = hilbitInvoicing || {};
    
    hilbitInvoicing = function()
    {
        
        /************************************************************************************
        *
        * Set the invoice_date hidden field value
        *
        ************************************************************************************/
        var setInvoiceDate = function(invoice_date)
        {
            $('#invoice_date').val(invoice_date);            
        };
        
        
        /************************************************************************************
        *
        * Get the invoice date from the month picker and convert to DD/MM/YYYY form
        * Need this date for viewing pro forma invoices and for generating invoice pdf's
        *
        ************************************************************************************/
        var getInvoiceDate = function()
        {
            return $('#invoice-monthpicker').data("DateTimePicker").date().format('DD/MM/YYYY');
        };
        
        
        /************************************************************************************
        *
        * List invoices due for the selected options
        *
        ************************************************************************************/
        var listDue = function()
        {
            var form = '#fm-month-end-invoice';
            var post_url =  "{{ url('api/month-end-debtor-statement/fetch-due') }}";
            var form_data = $(form).serializeArray();
            var invoice_date;
            
            hilbit.ui.removeAlerts();
            
            if (!$(form).valid())
            {
                return;
            }
            
            hilbitInvoicing.setVueProps({'can_preview' : false, 'can_generate' : false, 'can_download' : false});
            
            // update invoice date for previewing or generating invoices
            invoice_date = hilbitInvoicing.getInvoiceDate();
            hilbitInvoicing.setInvoiceDate(invoice_date);
           
            $.ajax({
                method: "POST",
                url: post_url,
                data: form_data
            })   
            .done(function(response)
            {
                if (response.message !== '')
                {
                    hilbit.ui.alertMessage('hilbit-alert-message-text', response.message, 'info', true);
                }
                // Replace table data with due invoices
                $('#tbl-month-end-invoices').bootstrapTable('load', response.items);
                
                // Set table options for the selected items
                // Selected values correspond to agreement id's when table contains list of
                // due invoices 
                $('#tbl-month-end-invoices').bootstrapTable('refreshOptions', {
                    idField: 'id',
                    selectItemName: 'client_debtor[]'
                });
                
                // Show preview and generate buttons
                if ((response.items).length)
                {
                    hilbitInvoicing.setVueProps({'can_preview' : true, 'can_generate' : true, 'can_download' : false});
                }
                
            })
              
            .fail( function(jqXHR, textStatus, errorThrown)
            {
            // in hilbit-global.js
                hilbit.ui.handleAjaxFail(jqXHR, textStatus, errorThrown);
            }); 
        };
        
        
        /************************************************************************************
        *
        * View selected pro-forma invoices
        *
        ************************************************************************************/
        var viewProForma = function()
        {
            var form = '#fm-month-end-invoice';
            var monthyear = $("#month_end_date").val();
            var url = "{{ url('month-end-debtor-statement/view-proforma?month_end_date=') }}" + monthyear;
            
            //If no selections display error message, otherwise display selected invoices
            //in new window
            $selections = $('#tbl-month-end-invoices').bootstrapTable('getSelections');
            if ($selections.length == 0)
            {
               hilbit.ui.alertMessage('hilbit-alert-message-text', "{{ ucfirst(trans('hilbit.invoicing.first_select_preview')) }}", 'error', true);
            }
            else
            {
                $(form).attr('target', '_blank');
                $(form).attr('action', url);
                $(form).submit();        
            }    
        };
        
        
        /************************************************************************************
        *
        * Generate ALL PDFs
        *
        ************************************************************************************/
        var generatePDFs = function()
        {
            
            // Select all invoices - need to do this to add all invoices to post data
            $('#tbl-month-end-invoices').bootstrapTable('checkAll');
            
            var form = '#fm-month-end-invoice';
            var monthyear = $("#month_end_date").val();
            var url = "{{ url('month-end-debtor-statement/view-proforma?month_end_date=') }}" + monthyear + "&generatepdf=1";
            
            //If no selections display error message, otherwise display selected invoices
            //in new window
            $selections = $('#tbl-month-end-invoices').bootstrapTable('getSelections');
            if ($selections.length == 0)
            {
               hilbit.ui.alertMessage('hilbit-alert-message-text', "{{ ucfirst(trans('hilbit.invoicing.first_select_preview')) }}", 'error', true);
            }
            else
            {
                $(form).attr('action', url);
                $(form).attr('target', '_blank');
                $(form).submit();        
            }     
        };
        
         
        /************************************************************************************
        *
        * Download selected PDF's
        *
        ************************************************************************************/
        var downloadPDFs = function()
        {   
            var form = '#fm-month-end-invoice';
            var url = "{{ url('month-end-invoice/download-pdfs') }}";
            var form_data;
            
            //If no selections display error message, otherwise zip and download selected invoices
            $selections = $('#tbl-month-end-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-invoicing-vue.js for invoicing_vue
        *
        ************************************************************************************/
        var setVueProps = function(props)
        {
            hilbit.utils.setVueProps(invoicing_vue, props);
        };
        
        
        return {
            setInvoiceDate : setInvoiceDate,
            getInvoiceDate : getInvoiceDate,
            listDue : listDue,
            generatePDFs : generatePDFs,
            viewProForma : viewProForma,
            downloadPDFs : downloadPDFs,
            setVueProps : setVueProps
        }
        
    }();
    
    $(function () {
        
        hilbit.ui.attachFormValidation('fm-month-end-invoice');
        hilbit.ui.attachMonthPicker();
        $('#invoice-monthpicker').data("DateTimePicker").date(new Date());
       
        // Hide agreement type select field if 'all agreement type' checkbox is ticked
        hilbit.reports.setSelect('agreement_type_id',!$('#cb_all_agreement_types').is(':checked'));
        
        $('#cb_all_agreement_types').click(function()
        {
            hilbit.reports.setSelect('agreement_type_id',!$('#cb_all_agreement_types').is(':checked'));
        });
        
        $('#btn-list-due').on("click", function(event)
        {
            hilbitInvoicing.listDue();  
        });
        
        
        $('#btn-view-selected').on("click", function(event)
        {
            hilbitInvoicing.viewProForma();
            
        });
        
        
        $('#btn-generate').on("click", function(event)
        {
            hilbitInvoicing.generatePDFs(); 
        });
        
            
        $('#btn-download').on("click", function(event)
        {
            hilbitInvoicing.downloadPDFs();   
        });
        
        
        $('#tbl-month-end-invoices').on('click','[name="btn-view"]',function(event)
        { 
            var client_debtor_id = $(this).data("client_debtor_id");
            
            // Tick the checkbox of the row containing the clicked button
            $('#tbl-month-end-invoices').bootstrapTable('uncheckAll');
            $('#tbl-month-end-invoices').bootstrapTable('checkBy', {field:'id', values:[client_debtor_id]});
            hilbitInvoicing.viewProForma();
            
        }); 
        
    });
    
</script>
    
@stop