@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.report.client_invoice.form_title')) !!}</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/client-invoice/output', 'id' => 'fm-invoice-report']) !!}
                    {!! Form::hidden('export', 0, ['id' => 'export']) !!}
        
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">     
                                {!! Form::label('start_date', 'Start date:', ['class' => 'control-label col-sm-4']) !!}
                                <div class="col-sm-8 small-bottom-padding">
                                    <div class="input-group datepicker">
                                        {!! Form::formattedDate('start_date', ['class' => 'form-control','type'=> 'text']) !!}
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                         </span>
                                    </div>
                                </div>
                            </div>
                                
                            <div class="form-group">     
                                {!! Form::label('end_date', 'End date:', ['class' => 'control-label col-sm-4']) !!}
                                <div class="col-sm-8">
                                    <div class="input-group datepicker">
                                        {!! Form::formattedDate('end_date', ['class' => 'form-control','type'=> 'text']) !!}
                                        <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_agreement_code', 'Start agreement:', ['class' => 'control-label col-sm-4']) !!}
                                <div class="col-sm-8  small-bottom-padding">
                                {!! Form::select('start_agreement_code', $agreement_list, null, ['class' => 'form-control']) !!}
                                </div>
                            </div>
                                    
                            <div class = "form-group">
                                {!! Form::label('end_agreement_code', 'End agreement:', ['class' => 'control-label col-sm-4']) !!}
                                <div class="col-sm-8 small-bottom-padding">
                                {!! Form::select('end_agreement_code', $agreement_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('client_id', 'Client :', ['class' => 'control-label col-sm-4']) !!}
                                <div class="col-sm-8">
                                    <div class="small-bottom-padding">
                                    {!! Form::checkbox('all_client', 1, true, ['id' => 'cb_all_client'])  !!} All
                                    </div>
                                    {!! Form::select('client_id[]', $client_list, null, ['class' => 'form-control', 'multiple', 'id' => 'client_id']) !!} 
                                </div>
                            </div>

                            <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 class="form-group">
                                {!! Form::label('include_history', 'Include history?', ['class' => 'control-label col-sm-4']) !!}
                                <div class="col-sm-8">
                                    {!! Form::checkbox('include_history',1, true, ['id' => 'cb_include_history'])  !!}
                                </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-warning btn-sm"><span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                                   list invoices
                                </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_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(['id' => 'fm-invoice-download']) !!}
                <!-- 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="invoice_id"      
                       data-undefined-text=""
                       data-toolbar="#invoice-toolbar"
                       data-select-item-name="invoice[]"> 
                 
                    <thead>
                        <tr>
                            <th data-checkbox="true"></th>
                            <th data-field="invoice_id" data-visible="false"></th>
                            <th data-field="invoice_no">Invoice No</th>
                            <th data-field="generate_date">Generate Date</th>  
                            <th data-field="client_code">Client Code</th>
                            <th data-field="client_name">Client Name</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('api/reports/client-invoice/list') }}";
            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)
            {
                if (response.message !== '')
                {
                    hilbit.ui.alertMessage('hilbit-alert-message-text', response.message, 'info', true);
                }
                
                // Replace table data with invoice listing
                $('#tbl-invoices').bootstrapTable('load', response.items);
                
                // Show download button
                if ((response.items).length)
                {
                    hilbitInvoiceReport.setVueProps({'can_download' : true});
                }
                
            })
              
            .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.attachDatePicker('invoice-report-options');
        
        $('#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-preview').click(function()
        {
            $('#export').val(0);
            $('#fm-invoice-report').attr('target', '_blank');
            $('#fm-invoice-report').submit();
        });
        
        
        $('#btn-list').click(function()
        {
            hilbitInvoiceReport.listInvoices();    
        });
        
        
        $('#fm-invoice-report').submit(function()
        {
             // Hide the generate button
            hilbitInvoiceReport.setVueProps({'can_generate': false});    
        });
        
   
        $('#btn-download').on("click", function(event)
        {
            hilbitInvoiceReport.downloadPDFs();   
        });
        
    });
    
</script>
    
@stop