@extends('layouts.layout-2')

@section('content')
    <h4 class="font-weight-bold py-2 mb-2">
        {{ __('navigation.payment_links') }} / {{ __('navigation.overview') }}
    </h4>

    {{-- Status-Legende --}}
    <div class="card mb-3">
        <div class="card-body">
            <h6 class="card-title mb-3">{{ __('tables.status') }} - {{ __('legend') }}</h6>
            <div class="row">
                @foreach(\App\Services\OrderPaymentService::getStatusBadgeClasses() as $statusKey => $badgeClass)
                    <div class="col-md-3 mb-2">
                        <span class="badge badge-pill badge-{{ $badgeClass }}">
                            {{ __('payment.' . $statusKey) }}
                        </span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-datatable table-responsive">
            <table class="datatable-users table table-striped table-bordered">
                <thead>
                <tr>
                    <th>#</th>
                    <th>{{__('tables.date')}}</th>
                    <th>{{__('tables.amount')}}</th>
                    <th>{{__('tables.status')}}</th>
                    <th>{{__('tables.art')}}</th>
                    <th>{{__('tables.firstname')}}</th>
                    <th>{{__('tables.lastname')}}</th>
                    <th>{{__('tables.email')}}</th>
                    <th>{{__('delete')}}</th>

                </tr>
                </thead>
            </table>
        </div>
    </div>
    <script>
        $( document ).ready(function() {
            $('.datatable-users').dataTable({
                "processing": true,
                "serverSide": true,
                "ajax": '{!! route('user_order_payment_links_datatable') !!}',
                "order": [[1, "desc" ]],
                "columns": [
                    { data: 'id', searchable: false },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'total', name: 'total' },
                    { data: 'status', name: 'status' },
                    { data: 'type', name: 'type' },
                    { data: 'billing_firstname', name: 'billing_firstname', orderable: false  },
                    { data: 'billing_lastname', name: 'billing_lastname', orderable: false  },
                    { data: 'billing_email', name: 'billing_email', orderable: false   },
                    { data: 'delete', name: 'delete', orderable: false   },
                ],
                "bLengthChange": false,
                "iDisplayLength": 100,
                "language": {
                    "url": "/js/datatables-{{ \App::getLocale() }}.json"
                }
            });

        });
    </script>
@endsection