@extends ('layouts.app')

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

@section('breadcrumbs')
<x-breadcrumbs>
    <x-breadcrumb-item type="active" icon='fa-solid fa-boxes-stacked'>{{ __('Climabox') }}</x-breadcrumb-item>
</x-breadcrumbs>
@endsection

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

        <x-section-header>
            <i class="fa-solid fa-boxes-stacked"></i> {{ __('Climabox') }}

            <x-slot name="toolbar">
                @can('create', App\Models\Climabox::class)
                    <x-buttons.create route='{{ route("climaboxes.create") }}' title="{{__('Nuovo climabox')}}" :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>{{ __('Codice') }}</th>
                                <th>{{ __('Articolo') }}</th>
                                <th>{{ __('Attivo') }}</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("climaboxes.index") }}',
                },
                columns: [
                    {
                        data: 'code'
                    },
                    {
                        data: 'article.code',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'is_active',
                        orderable: false,
                        searchable: false,
                        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