@extends ('layouts.app')

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

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

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

        <x-section-header>
            <i class="fa-solid fa-list"></i> {{ __('Categorie') }}
            <x-slot name="toolbar">
                @can('create', App\Models\Category::class)
                    <x-buttons.create route='{{ route("categories.create") }}' title="{{__('Nuova categoria')}}" :small=true />
                @endcan
            </x-slot>
        </x-section-header>

        <div class="row mt-4">
            <div class="col">
                <ul class="nav nav-tabs nav-tabs-with-hash" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" data-coreui-toggle="tab" data-coreui-target="#lists" type="button" role="tab" aria-controls="lists" aria-selected="true">{{ __('Lista') }}</button>
                    </li>
                    <li class="nav-item" role="presentation">
                      <button class="nav-link" data-coreui-toggle="tab" data-coreui-target="#hierarchy" type="button" role="tab" aria-controls="hierarchy" aria-selected="false">{{ __('Gerarchia') }}</button>
                    </li>
                </ul>
                <div class="tab-content p-2" id="myTabContent">
                    <div class="tab-pane fade show active" id="lists" role="tabpanel" aria-labelledby="lists-tab" tabindex="0">
                        <div class="table-responsive">
                            <table id="datatable" class="table table-hover ">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{ __('Nome') }}</th>
                                        <th>{{ __('Descrizione') }}</th>
                                        <th>{{ __('Foto') }}</th>
                                        <th>{{ __('Attivo') }}</th>
                                        <th>{{ __('Nuovo') }}</th>
                                        <th>{{ __('Colore') }}</th>
                                        <th class="text-end">{{ __('Azioni') }}</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="hierarchy" role="tabpanel" aria-labelledby="hierarchy-tab" tabindex="1">
                        <div class="float-end">
                            <button id="close" class="btn btn-secondary btn-sm ms-auto" data-toggle="tooltip" data-placement="top" title="{{ __('Chiudi le categorie') }}">
                                <i class="fas fa-compress-arrows-alt"></i> {{ __('Chiudi') }}
                            </button>
                            <button id="open" class="btn btn-secondary btn-sm" data-toggle="tooltip" data-placement="top" title="{{ __('Espandi le categorie') }}">
                                <i class="fas fa-expand-arrows-alt"></i> {{ __('Apri') }}
                            </button>
                        </div>
                        <div id="categories-list"></div>
                    </div>
                </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>

@include('categories.partials.indesign_modal')
@endsection

@push ('after-scripts')
    <script type="module">
        var categoriesListObj = $('#categories-list');
        var categoriesDatatableObj = $('#datatable');

        function filterObject(nodes) {
            return nodes.map(function(node) {
                return {
                    id: node.id,
                    children: node.children.length > 0 ? filterObject(node.children) : []
                }
            });
        };

        categoriesDatatableObj.DataTable({
            processing: true,
            serverSide: true,
            autoWidth: true,
            responsive: true,
            stateSave: true,
            stateSaveCallback: function (settings, data) {
                localStorage.setItem('DataTables_' + settings.sInstance, JSON.stringify(data));
            },
            stateLoadCallback: function (settings) {
                return JSON.parse(localStorage.getItem('DataTables_' + settings.sInstance));
            },
            ajax: '{{ route("categories.index") }}',
            columns: [{
                    data: 'id',
                    visible: false,
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'name'
                },
                {
                    data: 'description'
                },
                {
                    data: null,
                    render(h, i, y, x) {
                        return h.image_url ? '<img style="width: 100px;" src="' + h.image_url + '">' : null;
                    },
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'is_active',
                    render(h, i, y, x) {
                        return h ? '<i class="fa fa-check"></i>' : null;
                    },
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'is_new',
                    render(h, i, y, x) {
                        return h ? '<i class="fa fa-check"></i>' : null;
                    },
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'color',
                    render(h) {
                        return (!h) ? null : '<span class="badge text-bg-primary" style="background-color: ' + h + '!important;">' + h + '</span>';
                    },
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

        var jstreePlugins = ["contextmenu"];
        @can('reorder', App\Models\Category::class)
            jstreePlugins.push("dnd");
        @endcan

        categoriesListObj.jstree({
            "core": {
                "check_callback": true,
                'themes': {
                    'name': 'proton',
                    'responsive': true
                },
                'data' : {
                    'url': '{{ route('categories.categoryTree') }}'
                },
                'multiple': false
            },
            "plugins": jstreePlugins,
            "contextmenu": {
                "items": function($node, buildContextMenu) {
                    var actions = {};
                    if($node.id){
                        let url = 'categories/'+$node.id+'/actions';
                        Tools.blockUI();
                        $.ajax({
                            url: url,
                            data: {
                                _token: CSRF_TOKEN
                            }
                        }).done(function(data) {

                            if(data.edit){
                                actions.edit = {
                                    "label": "{{ __('Modifica') }}",
                                    "icon": "fas fa-wrench",
                                    "action": function(obj) {
                                        window.location.href = data.edit
                                    }
                                }
                            }

                            if(data.delete){
                                actions.delete = {
                                    "label": "{{ __('Cancella') }}",
                                    "icon": "fas fa-trash-alt",
                                    "action": function(obj) {
                                        if (confirm("{{ __('Sei sicuro?') }}") == true) {
                                            Tools.blockUI();
                                            $.ajax({
                                                url: data.delete,
                                                type: 'DELETE',
                                                data: {
                                                    _token: CSRF_TOKEN
                                                }
                                            }).done(function(dataAction) {
                                                $("#categories-list").jstree('delete_node', $node);
                                            }).fail(function(dataAction) {
                                                $.growl.error({
                                                    title: '',
                                                    message: dataAction.responseJSON.message
                                                });
                                            }).always(function (dataOrjqXHR, textStatus, jqXHRorErrorThrown) {
                                                Tools.unblockUI();
                                            });
                                        };
                                    }
                                }
                            }

                            if(data.create){
                                actions.create = {
                                    "label": "{{ __('Aggiungi sottocategoria') }}",
                                    "icon": "fas fa-plus-circle",
                                    "action": function(obj) {
                                        window.location.href = data.create
                                    }
                                }
                            }

                            if(data.indesign){
                                actions.indesign = {
                                    "label": "{{ __('Generazione InDesign') }}",
                                    "icon": "fas fa-file-export",
                                    "action": function(obj) {
                                        $('#indesignForm').attr('action', data.indesign);
                                        $('#indesignModal').modal('show');
                                    }
                                }
                            }

                            buildContextMenu(actions);

                        }).fail(function(data) {
                            buildContextMenu(actions)
                        }).always(function (dataOrjqXHR, textStatus, jqXHRorErrorThrown) {
                            Tools.unblockUI();
                        });
                    }else{
                        return actions;
                    }
                }
            }
        });

        categoriesListObj.on("move_node.jstree ", function(e, data) {
            Tools.blockUI();
            var nodes = categoriesListObj.jstree().get_json();
            // rimuovo l'attributo icon
            nodes = filterObject(nodes);
            $.ajax({
                type: 'POST',
                url: '{{ route('categories.reorganize') }}',
                data: {
                    _token: CSRF_TOKEN,
                    'nodes': nodes
                }
            }).done(function(data, textStatus, jqXHR) {
                iziToast.success({
                    message: 'Operazione effettuata con successo',
                });
            }).fail(function(jqXHR, textStatus, errorThrown) {
                iziToast.error({
                    message: jqXHR.responseJSON ? jqXHR.responseJSON.message : textStatus
                });
                categoriesListObj.jstree('refresh');
            }).always(function (dataOrjqXHR, textStatus, jqXHRorErrorThrown) {
                Tools.unblockUI();
            });
        });

        $('#close').on('click', function(e) {
            e.preventDefault();
            categoriesListObj.jstree('close_all');
        });

        $('#open').on('click', function(e) {
            e.preventDefault();
            categoriesListObj.jstree('open_all');
        });
    </script>
@endpush