@extends('layouts.layout-2')

@section('content')
    <div class="card mb-3" id="invoice-stats-card">
        <div class="card-body py-3">
            <div class="row align-items-center">
                <div class="col-auto text-muted small">
                    <i class="fa fa-chart-bar mr-1"></i> Statistik:
                    <span class="font-weight-bold text-dark" id="stats-invoice-period">
                        {{ $filter_months[session('invoice_filter_month')] ?? '' }} {{ session('invoice_filter_year') }}
                    </span>
                </div>
                <div class="col text-right d-flex justify-content-end">
                    <div class="mr-4 text-center">
                        <div class="text-muted" style="font-size:0.75rem;">Anzahl Rechnungen</div>
                        <div class="h5 mb-0 font-weight-bold text-primary" id="stats-invoice-count">
                            <i class="fa fa-spinner fa-spin fa-sm"></i>
                        </div>
                    </div>
                    <div class="text-center">
                        <div class="text-muted" style="font-size:0.75rem;">Gesamtsumme</div>
                        <div class="h5 mb-0 font-weight-bold text-success" id="stats-invoice-total">
                            <i class="fa fa-spinner fa-spin fa-sm"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <h5 class="card-header">
            Finanzen / Rechnungen
        </h5>
        <div class="card-body p-0">
            {!! Form::open([
                'action' => route('admin_payments_invoice'),
                'class' => 'form-horizontal',
                'id' => 'form_filter_payment_invoices',
            ]) !!}

            <div class="form-row align-items-center px-4 pb-2 pt-3">
                <div class="col-12 col-sm-4 col-md-4 col-lg-4 mb-1">
                    <input class="form-control on_keyup_invoice" name="invoice_filter_name" type="text"
                        value="{{ session('invoice_filter_name') }}" placeholder="Name">
                </div>

                <div class="col-6 col-sm-4 col-md-4 col-lg-4 mb-1">
                    <select class="custom-select on_change_invoice" name="invoice_filter_month">
                        @foreach ($filter_months as $key => $value)
                            <option value="{{ $key }}" @if (session('invoice_filter_month') == $key) selected @endif>
                                {{ $value }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-sm-4 col-md-4 col-lg-4 mb-1">
                    <select class="custom-select on_change_invoice" name="invoice_filter_year">
                        @foreach ($filter_years as $key => $value)
                            <option value="{{ $value }}" @if (session('invoice_filter_year') == $value) selected @endif>
                                {{ $value }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            {!! Form::close() !!}

            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-style table table-striped table-bordered" id="datatable-invoice">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{ __('tables.in_no') }}</th>
                            <th>{{ __('tables.invoice') }}</th>
                            <th>{{ __('tables.amount') }}</th>
                            <th>{{ __('tables.status') }}</th>
                            <th>{{ __('First name') }}</th>
                            <th>{{ __('Last name') }}</th>
                            <th>{{ __('E-Mail') }}</th>
                            <th>{{ __('tables.date') }}</th>
                            <th>{{ __('tables.art') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        function loadInvoiceStats() {
            var month = $('select[name=invoice_filter_month]').val();
            var year = $('select[name=invoice_filter_year]').val();
            var name = $('input[name=invoice_filter_name]').val();
            $.getJSON('{!! route('admin_payments_invoice_stats') !!}', {
                invoice_filter_month: month,
                invoice_filter_year: year,
                invoice_filter_name: name
            }, function(data) {
                $('#stats-invoice-count').text(data.count);
                $('#stats-invoice-total').text(data.total + ' €');
                var monthName = $('select[name=invoice_filter_month] option:selected').text();
                $('#stats-invoice-period').text(monthName + ' ' + year);
            });
        }

        $(document).ready(function() {
            loadInvoiceStats();

            var oTable = $('#datatable-invoice').DataTable({
                "processing": true,
                "serverSide": true,
                "stateSave": true,
                "searching": false,
                ajax: {
                    url: '{!! route('admin_payments_invoice_datatable') !!}',
                    data: function(d) {
                        d.invoice_filter_name = $('input[name=invoice_filter_name]').val();
                        d.invoice_filter_month = $('select[name=invoice_filter_month]').val();
                        d.invoice_filter_year = $('select[name=invoice_filter_year]').val();
                    }
                },
                "order": [
                    [0, "desc"]
                ],
                "columns": [{
                        data: 'id',
                        searchable: false
                    },
                    {
                        data: 'full_number',
                        name: 'full_number'
                    },
                    {
                        data: 'invoice',
                        name: 'invoice',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'total_shipping',
                        name: 'total_shipping',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'txaction',
                        name: 'txaction',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'shopping_order.shopping_user.billing_firstname',
                        name: 'shopping_order.shopping_user.billing_firstname',
                        orderable: false
                    },
                    {
                        data: 'shopping_order.shopping_user.billing_lastname',
                        name: 'shopping_order.shopping_user.billing_lastname',
                        orderable: false
                    },
                    {
                        data: 'shopping_order.shopping_user.billing_email',
                        name: 'shopping_order.shopping_user.billing_email',
                        orderable: false
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'status',
                        name: 'status',
                        searchable: false
                    },
                ],
                "bLengthChange": false,
                "iDisplayLength": 100,
                "language": {
                    "url": "/js/datatables-{{ \App::getLocale() }}.json"
                }
            });
            $('select.on_change_invoice').on('change', function() {
                oTable.draw();
                loadInvoiceStats();
            });

            $('input.on_keyup_invoice').on('keyup', function() {
                oTable.draw();
                loadInvoiceStats();
            });
        });
        /*$('#filter_sales_year').on('change', function(){
            $('#form_filter_payment_invoices').submit();
        });*/
    </script>
@endsection