@extends('layouts.user')

{{-- Web site Title --}}
@section('title')
    {{ $title }}
@stop

@section('styles')
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
@stop

{{-- Content --}}
@section('content')
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <i class="material-icons">assignment</i>
                {{ $title }}
            </h4>
            <span class="pull-right">
                <i class="fa fa-fw fa-chevron-up clickable"></i>
                <i class="fa fa-fw fa-times removepanel clickable"></i>
            </span>
        </div>
        <div class="panel-body">
            @include('user.invoice_excel_export.partials._filter-form')
            <div id="dataTable" class="collapse">
                <hr>
                <table id="dataInvoice" class="table table-bordered">
                    <thead>
                        <tr>
                            <th>{{ trans('invoice.no') }}</th>
                            <th>{{ trans('invoice.invoice_number') }}</th>
                            <th>{{ trans('invoice.invoice_date') }}</th>
                            <th>{{ trans('invoice.client') }}</th>
                            <th>{{ trans('invoice.due_date') }}</th>
                            <th>{{ trans('invoice.total') }}</th>
                            <th>{{ trans('invoice.unpaid_amount') }}</th>
                            <th>{{ trans('invoice.status') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@stop

{{-- Scripts --}}
@section('scripts')
    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
    <script src="/vendor/datatables/buttons.server-side.js"></script>
    <script>
        var dateFormat = '{{ isset($jquery_date) ? $jquery_date : "MMMM D,GGGG" }}';
        var dbDateFormat = 'YYYY-MM-DD';

        // Daterange
        $('input[name="daterange"]').daterangepicker({
            autoUpdateInput: false,
            locale: {
                format: dateFormat,
                cancelLabel: 'Clear'
            }
        });

        $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format(dateFormat) + ' / ' + picker.endDate.format(dateFormat));
            $('#dateFrom').val(picker.startDate.format(dbDateFormat));
            $('#dateTo').val(picker.endDate.format(dbDateFormat));
        });

        $('input[name="daterange"]').on('cancel.daterangepicker', function() {
            $(this).val('');
            $('#dateFrom').val('');
            $('#dateTo').val('');
        });

        // Search invoices
        $('#searchInvoices').on('click', function(e) {
            e.preventDefault();
            showDataTable();
        });

        // Clear filter button
        $('#clearFilter').on('click', function(e) {
            e.preventDefault();
            clearDataTable();
        });

        // Generate table with invoices
        var oTableInv;
        function showDataTable() {
            oTableInv = $('#dataInvoice').DataTable({
                destroy: true,
                processing: true,
                serverSide: true,
                bFilter: false,
                bLengthChange : false,
                autoWith: true,
                order: [],
                columns: [
                    {"data": "DT_Row_Index", "name": "index", "className": "text-center", "targets": "_all"},
                    {"data": "invoice_number", "name": "invoice_number"},
                    {"data": "invoice_date", "name": "invoice_date"},
                    {"data": "client", "name": "client"},
                    {"data": "due_date", "name": "due_date"},
                    {"data": "final_price", "name": "total"},
                    {"data": "unpaid_amount", "name": "unpaid_amount"},
                    {"data": "status", "name": "status"}
                ],
                columnDefs: [
                    { "width": "1%", "targets": 0 },
                    { "width": "10%", "targets": [1, 2, 3, 4] },
                    { "width": "6%", "targets": [5, 6] },
                    { "width": "8%", "targets": 7 }
                ],
                ajax: {
                    url: "{{ url($type) }}" +  '/data',
                    type: 'POST',
                    data: function (d) {
                        d._token = '{{csrf_token()}}';
                        d.date_from = $('input[name=date_from]').val();
                        d.date_to = $('input[name=date_to]').val();
                        d.client = $('input[name=client]').val();
                        d.source = $('select[name=source]').val();
                        d.payment_method = $('select[name=payment_method]').val();
                    }
                }
            });

            // Export to excel
            $('button[name="export"]').on('click', function(e) {
                var url = $(e.target).data('action');
                var params = oTableInv.ajax.params();

                window.location = url + '?' + $.param(params);
            });

            $('#dataTable').show();
            $('#exportToExcel').prop('disabled', false);
        }

        function clearDataTable() {
            $('input:hidden').val('');
            $('#filterForm').trigger('reset');
            $('#exportToExcel').prop('disabled', true);


            oTableInv.destroy();
            $('#dataInvoice tbody').empty();

            $('#dataTable').hide();
        }
    </script>
@stop