@php
    $title = __('Articoli fuori catalogo');
@endphp

@extends ('layouts.app')

@section('title') {{ $title }} @endsection

@section('breadcrumbs')
<x-breadcrumbs>
    <x-breadcrumb-item type="active" icon='fas fa-book'>{{ $title }}</x-breadcrumb-item>
</x-breadcrumbs>
@endsection

@section('content')
<div class="card">
    <div class="card-body">

        <x-section-header>
            <i class="fas fa-book"></i> {{ $title }}
            <x-slot name="toolbar">
                @can('assignCategories', App\Models\Article::class)
                    <x-buttons.create route='{{ route("articles.categories.create") }}' title="{{__('Nuovo articolo')}}" :small=true />
                @endif
            </x-slot>
        </x-section-header>

        <div class="row mt-4">
            <div class="col">
                <div class="table-responsive">
                    <table id="datatable" class="table table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>{{ __('Code') }}</th>
                                <th>{{ __('Descrizione') }}</th>
                                <th>{{ __('Categoria') }}</th>
                                <th class="text-end">{{ __('Azioni') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push ('after-scripts')
    <script type="module">
        $(document).ready(function() {
            const dataTable = $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                autoWidth: true,
                responsive: true,
                ajax: {
                    url: '{{ route("articles.categories.index") }}',
                },
                columns: [{
                        data: 'id',
                        visible: false,
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'code',
                    },
                    {
                        data: 'description',
                        orderable: true
                    },
                    {
                        data: 'categories',
                        orderable: false,
                        searchable: false,
                        render(h) {
                            return h;
                        },
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
@endpush