@extends ('layouts.app')

@section('title') {{ __('Etichette') }} @endsection

@section('breadcrumbs')
<x-breadcrumbs>
    <x-breadcrumb-item type="active" icon='fas fa-tags'>{{ __('Etichette') }}</x-breadcrumb-item>
</x-breadcrumbs>
@endsection

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

        <x-section-header>
            <i class="fas fa-tags"></i> {{ __('Etichette') }}

            <x-slot name="toolbar">
            </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>{{ __('ID') }}</th>
                                <th>{{ __('Etichetta') }}</th>
                                <th>{{ __('Completata') }}</th>
                                <th>{{ __('Disattivata') }}</th>
                                <th class="text-end">{{ __('Azioni') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer">
        <div class="row">
            <div class="col-7">
                <div class="float-left">

                </div>
            </div>
            <div class="col-5">
                <div class="float-end">

                </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("labels.index") }}',
                },
                columns: [{
                        data: 'id',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'description_raw',
                        orderable: false,
                    },
                    {
                        data: 'is_completed',
                        render: function(data) {
                            return data ? '<i class="fas fa-check text-success"></i>' : '<i class="fas fa-times text-danger"></i>';
                        },
                    },

                    {
                        data: 'is_disabled',
                        render: function(data) {
                            return data ? '<i class="fas fa-check text-success"></i>' : '<i class="fas fa-times text-danger"></i>';
                        },
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
@endpush