@extends('layouts.master')

@section('navBar')
    @include('layouts.navBar')
@stop

@section('mainMenu')
    @include('layouts.mainMenu')
@stop

@section('content')
    <div id="demo-settings" class="col-xs-12">
        <a id="demo-settings-toggler" class="fa fa-pencil"></a>
        <h5 class="header">Invoice Profile</h5>

        <div class="row" id="editPanel">
        </div>
    </div>

    <div id="delete-confirmation" class="modal modal-alert modal-danger fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <i class="fa fa-times-circle"></i>
                </div>
                <div class="modal-title" id="confirmDeletionTitle"></div>
                <div class="modal-body">Confirm to delete this invoice</div>
                <div class="modal-footer">
                    <a id="confirmDeletionLink"
                       class="btn btn-danger" data-dismiss="modal">Confirm Deletion</a>
                </div>
            </div>
        </div>
    </div>

    <div class="panel-group" id="accordion-invoice">
        <div class="panel">
            <div class="panel-heading">
                <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion-invoice"
                   href="#accordionAddInvoice">
                    Add New Invoice
                </a>
            </div>

            <div id="accordionAddInvoice" class="panel-collapse collapse">
                <div class="panel-body">
                    <div id="formAddInvoice"></div>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-invoice"
                   href="#panelInvoicesList">
                    Invoice List
                </a>
            </div>

            <div id="panelInvoicesList" class="panel-collapse in">
                <div class="panel-body no-padding panelOverFlow" id="invoicesList">
                    <div class="panel-body no-padding">
                        <table cellpadding="0" cellspacing="0" border="0" class="table table-striped"
                               id="invoicesTable">
                            <thead>
                            <tr>
                                <th><i class="fa fa-pencil"></i></th>
                                <th>id</th>
                                <th>reference</th>
                                <th>invoiceDate</th>
                                <th>net</th>
                                <th>vat</th>
                                <th>total</th>
                                <th>status</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function generateFormInvoiceItem(action) {
            var divShow = '';
            var invoiceId = '';
            if (action == 'add') {
                divShow = $('#addInvoiceItemList');
                invoiceId = $('#addInvoiceId').val();
            }
            if (action == 'update') {
                divShow = $('#updateInvoiceItemList');
                invoiceId = $('#updateInvoiceId').val();
            }
            $.post('{{URL::action("InvoiceController@generateFormInvoiceItem")}}', {
                invoiceId: invoiceId,
                action: action,
                _token: '{{csrf_token()}}'
            }).done(function (data) {
                divShow.html(data);
            }).fail(function (data) {
                new PNotify({
                    title: 'Form generate failed!',
                    text: '',
                    type: 'error',
                    icon: 'fa fa-times'
                });
            });
        }

        function generateFormAddInvoice() {
            $.post('{{URL::action("InvoiceController@generateFormAddInvoice")}}', {
                _token: '{{csrf_token()}}'
            }).done(function (data) {
                $('#formAddInvoice').html(data);
                generateFormInvoiceItem('add');
            });
        }
        generateFormAddInvoice();

        $(document).on('click', '.delete-invoice', function () {
            confirmDeletionInitPost($(this).data("url"), $(this).data("id"), $(this).data("name"), $_token, refreshInvoice)
        });
        $(document).on('click', '.edit-invoice', function () {
            generateInvoiceDetail($(this).data("url"), $(this).data("id"), $_token)
        });
        $(document).on('click', '.delete-invoice-item-add', function () {
            confirmDeletionInitPost($(this).data("url"), $(this).data("id"), $(this).data("name"), $_token, refreshInvoiceItemAdd);
        });
        $(document).on('click', '.delete-invoice-item-update', function () {
            confirmDeletionInitPost($(this).data("url"), $(this).data("id"), $(this).data("name"), $_token, refreshInvoiceItemUpdate);
        });

        var $_token = "{{ csrf_token() }}", invoiceTable;

        invoicesTable = $('#invoicesTable').dataTable(
                {
                    processing: true,
                    serverSide: true,
                    bProcessing: true,
                    order: [[1, "desc"]],
                    ajax: {
                        "url": "{{URL::action("InvoiceController@generateInvoiceList")}}",
                        "type": "POST",
                        "data": function (data) {
                            data._token = $_token;
                        }
                    },
                    columns: [
                        {data: 'edit', name: 'edit', orderable: false, searchable: false},
                        {data: 'id', name: 'id'},
                        {data: 'reference', name: 'reference'},
                        {data: 'invoiceDate', name: 'invoiceDate'},
                        {data: 'net', name: 'net'},
                        {data: 'vat', name: 'vat'},
                        {data: 'total', name: 'total'},
                        {data: 'status', name: 'status'}
                    ],
                    iDisplayLength: 25
                });


        $('#invoicesTable_wrapper .table-caption').text('Invoice List');
        $('#invoicesTable_wrapper .dataTables_filter input').attr('placeholder', 'Search...');

        function refreshInvoice() {
            invoicesTable.api().ajax.reload();
        }

        function refreshInvoiceItemAdd() {
            generateFormInvoiceItem('add');
            refreshInvoice();
        }

        function refreshInvoiceItemUpdate() {
            generateFormInvoiceItem('update');
            refreshInvoice();
        }

        function generateInvoiceDetail(url, id) {
            loadingOverlay();
            $.post(url, {
                invoiceId: id,
                _token: '{{csrf_token()}}'
            }).done(function (data) {
                loadingRemove();
                $('#editPanel').html(data);
                $('#demo-settings').addClass('open');
                generateFormInvoiceItem('update');
            }).fail(function (data) {
                loadingRemove();
                new PNotify({
                    title: 'Reading detail failed!',
                    text: '',
                    type: 'error',
                    icon: 'fa fa-times'
                });
            });
        }
    </script>

@stop