@extends('layouts.layout-2')

@section('content')
    <h4 class="font-weight-bold py-3 mb-4">
        {{ __('Angebote') }}
    </h4>
    <p class="text-muted">Filter &amp; Aktionen erweitert Ticket B1. Die Tabelle nutzt die Route <code>data_table_offers</code>.</p>

    <div class="card">
        <div class="table-responsive-track" id="datatables-offers-scroll">
            <div class="table-responsive-thumb" id="datatables-offers-thumb"></div>
        </div>
        <div class="card-datatable table-responsive" id="datatables-offers-table">
            <table class="datatables-offers table table-striped table-bordered" id="datatables-offers">
                <thead>
                <tr>
                    <th style="max-width: 60px;">&nbsp;</th>
                    <th>ID</th>
                    <th>Nr.</th>
                    <th>Kontakt</th>
                    <th>Status</th>
                    <th>Erstellt von</th>
                    <th>Erstellt am</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

    <script>
        $(function () {
            var table = $('#datatables-offers').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{!! route('data_table_offers') !!}',
                order: [[1, 'desc']],
                columns: [
                    {data: 'action_edit', name: 'action_edit', orderable: false, searchable: false},
                    {data: 'id', name: 'offers.id'},
                    {data: 'offer_number', name: 'offers.offer_number'},
                    {data: 'contact_name', name: 'contact_name', orderable: false, searchable: false},
                    {data: 'status_badge', name: 'offers.status', orderable: true, searchable: false},
                    {data: 'created_name', name: 'created_name', orderable: false, searchable: false},
                    {data: 'created_at_fmt', name: 'offers.created_at', searchable: false}
                ],
                bLengthChange: false,
                iDisplayLength: 100,
                language: {url: '/js/German.json'},
                drawCallback: function () {
                    if (typeof dataTableScrollTrack === 'function') {
                        dataTableScrollTrack('#datatables-offers');
                    }
                }
            });
        });
    </script>
@endsection