@inject('request', 'Illuminate\Http\Request')
@extends('layouts.iconbar')

@section('title')
@lang('global.invoices.title')
@endsection

@section('breadcrumbs')
{{ Breadcrumbs::render(\Request::route()->getName()) }}
@endsection
@section('create-button1')
<a href="{{ route('admin.invoices.create') }}" id="addToTable" class="btn btn-info waves-effect waves-classic" type="button">
    <i class="icon md-plus" aria-hidden="true"></i> @lang('global.invoices.fields.new')
</a>
@endsection
@section('content')
<div class="page-content">
    <div class="panel">
        <header class="panel-heading">
            <div class="panel-actions"></div>
            <h3 class="panel-title">List View</h3>
        </header>
        <div class="panel-body">
            <div class="alert alert-danger" style="display:none;"></div>
            <table class="table table-hover dataTable table-striped w-full" id="invoice_table">
                <thead>
                    <tr>
                        <th>@lang('global.invoices.fields.invoice_number')</th>
                        <th>@lang('global.invoices.fields.company_name')</th>
                        <th>@lang('global.invoices.fields.internal_job_id')</th>
                        <th>@lang('global.invoices.fields.status')</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@stop

@section('javascript')
<script type="text/javascript">
    jQuery(function() {
        window.invoice_table = jQuery('#invoice_table').DataTable({
            "dom": 'frtip',
            "searching": false,
            "info": true,
            "ordering": true,
            "destroy": true,
            processing: true,
            serverSide: true,
            colReorder: true,
            "pageLength": 50,
            oLanguage: {
                sProcessing: "<i class='fa fa-fw fa-spin fa-spinner' style='font-size:25px;'></i>"
            },
            ajax: {
                url: '{{url("/admin/invoices/data")}}',
                type: 'get',
                beforeSend: function() {
                    // blockMainContent();
                },
                complete: function() {
                    // unBlockMainContent();
                },
                "dataSrc": function(json) {
                    return json.data;
                },
            },
            columns: [{
                    data: 'invoice_number',
                    name: 'invoice_number'
                },
                {
                    data: 'company.company_name',
                    name: 'company.company_name'
                },
                {
                    data: 'internal_job_id',
                    name: 'internal_job_id'
                },
                {
                    data: 'status',
                    name: 'status',
                    class: 'ce'
                },
                {
                    data: 'actions',
                    name: 'actions',
                    searchable: false,
                    orderable: false
                },
            ]
        });
    });

    function approveInvoice(me) {
        var action = $(me).data('href');
        $.ajax({
            url: action,
            type: 'post',
            beforeSend: function() {
                initiateBlockUi();
            },
            complete: function() {
                stopBlockUi();
            },
            success: function(data) {
                if (data.success) {
                    window.invoice_table.ajax.reload();
                }

            },
            error: function(result) {
                var data = result.responseJSON;
                if (!data.success) {
                    $(".errorsdiv").html(data.html);
                    $('html, body').animate({
                        scrollTop: $(".errorsdiv").offset().top - 250
                    }, 2000);
                }
                stopBlockUi();

            },
        });
    }
</script>
@endsection