@extends ('layouts.app')

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

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

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

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

            <x-slot name="toolbar">
                @can('create', App\Models\ClimaboxBrand::class)
                    <x-buttons.create route='{{ route("climaboxBrands.create") }}' title="{{__('Nuovo marchio 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>#</th>
                                <th>{{ __('Nome') }}</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,
                ordering: false,
                rowReorder: {dataSrc: 'position'},
                ajax: {
                    url: '{{ route("climaboxBrands.index") }}',
                },
                columns: [
                    {
                        data: null,
                        width: '2%',
                        searchable: false,
                        orderable: false,
                        render: function(data, type, full, meta) {
                            return '<i class="fas fa-bars"></i>'
                        }
                    },
                    {
                        data: 'name',
                        orderable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            dataTable.on('row-reorder', function (e, details) {
                if(details.length) {
                    Tools.blockUI();
                    let rows = [];
                    details.forEach(element => {
                        rows.push({
                            id: dataTable.row(element.node).data().id
                        });
                    });
                    $.ajax({
                        headers: {
                            'x-csrf-token': '{{csrf_token()}}'
                        },
                        method: 'POST',
                        url: "{{ route('climaboxBrands.reorder') }}",
                        data: { rows }
                    }).done(function () {
                        iziToast.success({
                            title: '{{ __("Riordinamento effettuata con successo") }}',
                        });
                        dataTable.ajax.reload()
                    }).fail(function(data) {
                        iziToast.error({
                            title: '{{ __("Errore durante il riordinamento dei prodotti della categoria") }}',
                        });
                    }).always(function (dataOrjqXHR, textStatus, jqXHRorErrorThrown) {
                        Tools.unblockUI();
                    })
                }
            });

        });
    </script>
@endpush