@extends('layouts.layout-2')

@section('content')
    <div class="card">
        <h6 class="card-header">
            Zahlungen / Rechnungen
        </h6>
            <div class="col-sm-6 mb-0 mt-2">
                {!! Form::open(['url' => route('admin_payments_invoice'), 'class' => 'form-horizontal', 'id'=>'form_filter_sales_year']) !!}

                <label class="form-label" for="filter_sales_year">Filter Jahr</label>
                <select class="custom-select" name="filter_sales_year" id="filter_sales_year">
                    @foreach($years as $year)
                        <option value="{{$year}}" @if($active_year == $year) selected @endif>{{$year}}</option>
                    @endforeach
                </select>
                {!! Form::close() !!}

            </div>
   
        <div class="card-datatable table-responsive pt-0">
            <table class="datatables-style table table-striped table-bordered" id="datatable-invoice">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>{{__('Vorname')}}</th>
                    <th>{{__('Nachname') }}</th>
                    <th>{{__('E-Mail') }}</th>
                    <th>{{__('Betrag') }}</th>
                    <th>{{__('Datum') }}</th>
                    <th>{{__('Order')}}</th>
                    <th>{{__('Status')}}</th>
                    <th>{{__('Rechnung')}}</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

    </div>

    <script>

        $( document ).ready(function() {
            var oTable = $('#datatable-invoice').DataTable({
                    "processing": true,
                    "serverSide": true,
                    ajax: {
                        url: '{!! route( 'admin_payments_invoice_datatable') !!}',
                        data: function(d) {
                            d.filter_sales_year = $('select[name=filter_sales_year]').val();
                        }
                    },
                    "order": [[0, "desc" ]],
                    "columns": [
                        { data: 'id', searchable: false },
                        { data: 'shopping_user.billing_firstname', name: 'shopping_user.billing_firstname', orderable: false },
                        { data: 'shopping_user.billing_lastname', name: 'shopping_user.billing_lastname', orderable: false },
                        { data: 'shopping_user.billing_email', name: 'shopping_user.billing_email', orderable: false },
                        { data: 'total_shipping', name: 'total_shipping' },
                        { data: 'created_at', name: 'shopping_orders.created_at' },
                        { data: 'shipping_order', name: 'shipping_order', orderable: false },
                        { data: 'txaction', name: 'txaction', searchable: false  },
                        { data: 'invoice', name: 'invoice', orderable: false, searchable: false  },
                    ],
                    "bLengthChange": false,
                    "iDisplayLength": 100,
                    "language": {
                        "url": "/js/German.json"
                    }
                });
            $('#filter_sales_year').on('change', function(){
                oTable.draw();
            });
        });



        /*$('#filter_sales_year').on('change', function(){
            $('#form_filter_sales_year').submit();
        });*/

    
    </script>
@endsection