@php
    $title = __('Modifica') . ' ' . $category->name;
@endphp

@extends('layouts.app')

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

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

@section('content')
    <div class="card">
        <div class="card-body">
            <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="#main-tab" type="button" role="tab" aria-controls="main" aria-selected="true">
                        <i class="fa-regular fa-file-lines"></i>
                        {{ __('Principale') }}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                <button class="nav-link" data-coreui-toggle="tab" data-coreui-target="#products-tab" type="button" role="tab" aria-controls="products-tab" aria-selected="false">
                        <i class="fa-solid fa-fan"></i>
                        {{ __('Prodotti') }}
                    </button>
                </li>
            </ul>
            <div class="tab-content p-2 tab-content p-2 border border-top-0" id="myTabContent">
                <div class="tab-pane fade show active" id="main-tab" role="tabpanel" aria-labelledby="main-tab" tabindex="0">
                    {{ html()->modelForm($category, 'PATCH', route('categories.update', $category))->class('form-horizontal')->acceptsFiles()->open() }}
                        <x-form>
                            <x-slot name="title">
                                <i class="fa-solid fa-list"></i> {{ $title }}
                            </x-slot>
                            @include ("categories.partials.form")
                        </x-form>
                    {{ html()->closeModelForm() }}
                </div>
                <div class="tab-pane fade" id="products-tab" role="tabpanel" aria-labelledby="products-tab" tabindex="1">
                    <button id="add-products" class="btn btn-secondary float-end" type="button">
                        <i class="fas fa-link pr-4"></i>
                        {{ __('Associa articolo') }}
                    </button>
                    <table id="datatable-products" class="table table-hover table-responsive-sm w-100">
                        <thead>
                            <tr>
                                <th></th>
                                <th>{{ __('Nome') }}</th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="products-modal" tabindex="-1" data-backdrop="static" data-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-body pt-3 pb-1">
                    <div class="row mb-3">
                        <button id="product_search" class="btn btn-primary ms-2 col col-auto" data-toggle="tooltip" data-placement="top" title="{{ __('Cerca gli articoli') }}">
                            <i class="fas fa-search pr-4"></i> {{ __('Filtra') }}
                        </button>
                    </div>

                    <table id="add-products-datatable" class="table table-responsive-sm w-100">
                        <thead>
                            <tr>
                                <th></th>
                                <th>{{ __('Nome') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="save-products">{{ __('Aggiungi') }}</button>
                    <button type="button" class="btn btn-secondary" data-coreui-dismiss="modal">{{ __('Chiudi') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push ('after-scripts')
<script type="text/javascript">
    $(document).ready(function() {
            let productDataTable = null;
            let dataTable = null;

            function getDataTableArticleData(){
                return (dataTable ? (dataTable.rows().data().toArray()) : []).map(function(item) {
                    return item.id;
                });
            }

            dataTable = $('#datatable-products').DataTable({
                language: {
                    url: '{{ asset('vendor/datatable/it-IT.json') }}'
                },
                processing: true,
                serverSide: true,
                autoWidth: true,
                responsive: true,
                searching: true,
                ordering: false,
                order: false,
                rowReorder: {dataSrc: 'position'},
                paging: false,
                ajax: {
                    url: "{{ route('categories.products', [$category]) }}"
                },
                columns: [
                    {data: null, width: '2%', searchable: false, orderable: false, render: function(data, type, full, meta) {
                        return '<i class="fas fa-bars"></i>'
                    }},
                    {data: 'name', name: 'name'},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ],
            });

            let productModalObj = $('#products-modal');

            $('#add-products').on('click', function (e) {
                e.preventDefault();
                productModalObj.modal('show');
            });

            productModalObj.on('show.coreui.modal', function (e) {
                if ($.fn.dataTable.isDataTable(productDataTable)) {
                    // Refresho il datatable per avere i dati aggiornati
                    productDataTable.ajax.reload();
                } else {
                    productDataTable = $('#add-products-datatable').DataTable({
                        language: {
                            url: '{{ asset('vendor/datatable/it-IT.json') }}'
                        },
                        processing: true,
                        serverSide: true,
                        autoWidth: true,
                        responsive: true,
                        searching: true,
                        select: {
                            style: 'multi',
                            selector: 'td:first-child'
                        },
                        ordering: false,
                        ajax: {
                            url: '{{ route('products.getProducts') }}',
                            data: function(data) {
                                data.ids_to_esclude = getDataTableArticleData();
                            }
                        },
                        columns: [
                            {
                                targets: 0,
                                data: null,
                                defaultContent: '',
                                orderable: false,
                                className: 'select-checkbox'
                            },
                            { data: 'name'}
                        ],
                    });
                }
            });

            $('#save-products').click(function() {
                let selectedIds = productDataTable.rows({ selected: true }).data().toArray().map(a => a.id);
                $.post({
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    url: '{{ route("categories.addProducts", $category) }}',
                    type: 'POST',
                    data: {'product_ids': selectedIds}
                }).done(function(data) {
                    iziToast.success({
                        title: '{{ __("Prodotti aggiunti correttamente") }}',
                    });
                    productModalObj.modal('hide');
                    dataTable.ajax.reload()
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    iziToast.error({
                        message: '{{ __("Errore aggiunta prodotti alla categoria") }}'
                    });

                });
            });

            $('body').on('click', '.remove-from-category', function (e) {
                e.preventDefault();
                Tools.blockUI();
                $.post({
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    url: $(this).attr('href')
                }).done(function(data) {
                    iziToast.success({
                        title: '{{ __("Prodotto rimosso correttamente") }}',
                    });
                    dataTable.ajax.reload()
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    iziToast.error({
                        message: '{{ __("Errore rimozione prodotto dalla categoria") }}'
                    });
                }).always(function (dataOrjqXHR, textStatus, jqXHRorErrorThrown) {
                    Tools.unblockUI();
                })



            });

            $('#product_search').click(function() {
                productDataTable.draw(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('categories.productsReorder', [$category]) }}",
                        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