@extends('adminlte::page')

@section('content_header')
    <h1>@lang('global.Registration') @lang('global.List')</h1>
@endsection

@section('content')

    <x-row>
        <x-col>
            <x-card>
                <x-slot name="tools">
                    <a href="{{ route('immatriculations.create') }}" class="btn btn-primary btn-xs">
                        <i class="fa fa-plus"></i> @lang('global.Add New')</a>
                </x-slot>
                <x-table id="immatriculations-table">
                    <thead>
                        <th>@lang('global.Annuaire')</th>
                        <th>@lang('global.Numberplate')</th>
                        <th>@lang('global.Car Vin')</th>
                        <th>@lang('global.Car Type')</th>
                        <th>@lang('global.Registered At')</th>
                        <th>@lang('global.Action')</th>
                    </thead>
                    <tbody></tbody>
                </x-table>
            </x-card>
        </x-col>
    </x-row>

@endsection

@push('js')
    <script>
        $(function () {
            window.dataTable = $('#immatriculations-table').DataTable({
                serverSide: true,
                processing: true,
                ajax: {
                    url: '{{ route('immatriculations.index') }}',
                    data: d => {

                    }
                },
                order: [[3, "desc"]],
                columns: [
                    {data: 'annuaire_id'},
                    {data: 'immat_no'},
                    {data: 'vin'},
                    {data: 'vehicle_type_id'},
                    {data: 'registered_at'},
                    {data: 'action', orderable: false, className: 'text-center'},
                ]
            });
        });
    </script>
@endpush