@extends('soap.layout.main')

@section('content')


    <div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor-desktop m-grid--desktop m-body">
        <div class="m-grid__item m-grid__item--fluid  m-grid m-grid--ver	 m-container--responsive m-container--xxl m-page__container">
            <div class="m-grid__item m-grid__item--fluid m-wrapper">
                <div class="m-content">

                <div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    ACCOUNT STATEMENT
                                    <!-- <small>
                                        data loaded from remote data source
                                    </small> -->
                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <a href="{{ route('invoices.export') }}">Export to Excel</a>
                        </div>
                    </div>
                    <div class="m-portlet__body">

                        <div class="custom-filter-btn">
                            <p><b>Filter: </b></p>
                        </div>
                        <div class="custom-filter-btn">
                            <p id="filter-all-invoices" class="link">All Invoices</p>
                        </div>
                        <div class="custom-filter-btn">
                            <p id="filter-unpaid-invoices" class="link underline">Unpaid Invoices</p>
                        </div>
                        <div class="custom-filter-btn">
                            <p id="filter-paid-invoices" class="link">Paid Invoices</p>
                        </div>

                        <!--begin: Table DataTable -->
                        <div class="table-responsive">
                            <table class="table table-striped" id="invoices-table">
                                <thead>
                                    <tr>
                                        <th>Booking No:</th>
                                        <th>Document No:</th>
                                        <th><i class="fa fa-download" aria-hidden="true"></i></th>
                                        <th><i class="fa fa-download" aria-hidden="true"></i></th>
                                        <th>Date:</th>
                                        <th>Created By: </th>
                                        <th>Currency:</th>
                                        <th>Amount Total: </th>
                                        <th>Amount Paid:</th>
                                        <th>BGN Remaining Balance:</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <!--end: Table DataTable -->
                    </div>
                </div>

            </div>
            </div>
        </div>
    </div>

@stop



@push('scripts')
<script>
    $(function() {
        $('#invoices-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            pageLength: 50,
            ajax: '{!! route('invoices.unpaid') !!}',
            order: [[5, 'desc']],
            columns: [
                { data: 'booking_no', name: 'booking_no' },
                { data: 'document_no', name: 'document_no' },

                { data: 'download_en', name: 'download_en' , orderable: false, searchable: false},
                { data: 'download_bg', name: 'download_bg' , orderable: false, searchable: false},

                { data: 'date', name: 'date' },
                { data: 'person', name: 'person' },
                { data: 'currency', name: 'currency' },
                { data: 'amount', name: 'amount' },
                { data: 'amount_payed', name: 'amount_payed' },
                { data: 'amount_to_pay_lcy', name: 'amount_to_pay_lcy' }
            ],
            "language": {
                "search": "Search by Booking / Document No"
            }
        });
    });
    $('#filter-all-invoices').click(function(e) {
        $('.link').removeClass('underline')
        $(this).addClass('underline')
        $('#invoices-table').DataTable().destroy()
        $('#invoices-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            pageLength: 50,
            ajax: '{!! route('invoices.data') !!}',
            columns: [
                { data: 'booking_no', name: 'booking_no' },
                { data: 'document_no', name: 'document_no' },

                { data: 'download_en', name: 'download_en' , orderable: false, searchable: false},
                { data: 'download_bg', name: 'download_bg' , orderable: false, searchable: false},

                { data: 'date', name: 'date' },
                { data: 'person', name: 'person' },
                { data: 'currency', name: 'currency' },
                { data: 'amount', name: 'amount' },
                { data: 'amount_payed', name: 'amount_payed' },
                { data: 'amount_to_pay_lcy', name: 'amount_to_pay_lcy' }
            ],
            "language": {
                "search": "Search by Booking / Document No"
            }
        });
    })
    $('#filter-unpaid-invoices').click(function() {
        $('.link').removeClass('underline')
        $(this).addClass('underline')
        $('#invoices-table').DataTable().destroy()
        $('#invoices-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            pageLength: 50,
            ajax: '{!! route('invoices.unpaid') !!}',
            columns: [
                { data: 'booking_no', name: 'booking_no' },
                { data: 'document_no', name: 'document_no' },

                { data: 'download_en', name: 'download_en' , orderable: false, searchable: false},
                { data: 'download_bg', name: 'download_bg' , orderable: false, searchable: false},

                { data: 'date', name: 'date' },
                { data: 'person', name: 'person' },
                { data: 'currency', name: 'currency' },
                { data: 'amount', name: 'amount' },
                { data: 'amount_payed', name: 'amount_payed' },
                { data: 'amount_to_pay_lcy', name: 'amount_to_pay_lcy' }
            ],
            "language": {
                "search": "Search by Booking / Document No"
            }
        });
    })
    $('#filter-paid-invoices').click(function() {
        $('.link').removeClass('underline')
        $(this).addClass('underline')
        $('#invoices-table').DataTable().destroy()
        $('#invoices-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            pageLength: 50,
            ajax: '{!! route('invoices.paid') !!}',

            columns: [
                { data: 'booking_no', name: 'booking_no' },
                { data: 'document_no', name: 'document_no' },

                { data: 'download_en', name: 'download_en' , orderable: false, searchable: false},
                { data: 'download_bg', name: 'download_bg' , orderable: false, searchable: false},

                { data: 'date', name: 'date' },
                { data: 'person', name: 'person' },
                { data: 'currency', name: 'currency' },
                { data: 'amount', name: 'amount' },
                { data: 'amount_payed', name: 'amount_payed' },
                { data: 'amount_to_pay_lcy', name: 'amount_to_pay_lcy' }
            ],
            "language": {
                "search": "Search by Booking / Document No"
            }
        });
    })
</script>
@endpush