@php
    $title = __('Sostituzione codici articolo');
@endphp

@extends('layouts.app')

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

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

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

            <x-section-header>
                {{ $title }}
            </x-section-header>

            {{ html()->form('POST', route('articles.replacement.store'))->class('form-horizontal')->id('replacement-form')->open() }}
                <div class="row align-items-end">
                    <div class="form-group col-12 col-sm mb-3">
                        <label for="name">{{ __('Articolo da sostituire') }}</label>
                        <select name="article_from" class="select2-ajax form-control mr-2 {{ $errors->has('article_from') ? 'is-invalid' : '' }}"></select>
                        @if ($errors->has('article_from'))
                            <div class="invalid-feedback">{{ $errors->first('article_from') }}</div>
                        @endif
                    </div>
                    <div class="form-group col-12 col-sm-auto mb-3">
                        <i class="fa-solid fa-repeat fa-xl"></i>
                    </div>
                    <div class="form-group col-12 col-sm mb-3">
                        <label for="name">{{ __('Articolo sostituto') }}</label>
                        <select name="article_to" class="select2-ajax form-control mr-2 {{ $errors->has('article_to') ? 'is-invalid' : '' }}"></select>
                        @if ($errors->has('article_to'))
                            <div class="invalid-feedback">{{ $errors->first('article_to') }}</div>
                        @endif
                    </div>

                    <div id="contents-container" class="d-none form-group col-12 mb-3">
                        <label>{{ __('Contenuti che contengono il codice') }}</label>
                        <div id="contents-lists" class="border rounded p-2" style="min-height: 42px;">
                            <small class="text-muted" id="contents-help">{{ __('Seleziona prima un codice articolo per vedere i contenuti collegati.') }}</small>
                        </div>
                    </div>

                    <div class="form-group col-12 col-sm-auto mb-3">
                        <button class="btn btn-primary w-100" type="submit">
                            <i class="fa-solid fa-floppy-disk fa-fw"></i>&nbsp; {{ __('Sostituisci') }}
                        </button>
                    </div>

                </div>
            {{ html()->closeModelForm() }}
        </div>
    </div>
@endsection

@push ('after-scripts')
    <script type="module">
        // Fetch products when an article is selected in the first select2
    const contentsContainer = $('#contents-container');
    const contentsLists = $('#contents-lists');
    const contentsHelp = $('#contents-help');

        $(document).ready(function() {
            $('.select2-ajax').select2({
                theme: 'bootstrap-5',
                placeholder: '-- Seleziona --',
                language: "it",
                ajax: {
                    url: "{{ route('articles.index') }}",
                    dataType: 'json',
                    data: function (params) {
                        var payload = {
                            query: params.term,
                        }
                        return payload;
                    },
                    processResults: function (data) {
                        var rows = data.map(function(item){
                            return {
                                id: item._id,
                                text: item.code
                            }
                        })
                        return {
                            results: rows
                        };
                    }
                },
                minimumInputLength: 2,
            });

            $('#replacement-form').submit(function(event){
                if(!confirm("{{ __('Procedere con la sostituzione?') }}")){
                    event.preventDefault();
                }
            });


            $(document).on('select2:select', 'select[name="article_from"]', function (e) {
                const articleId = e.params.data.id;
                contentsLists.empty();
                contentsLists.append(`<small class="text-muted" id="contents-help">{{ __('Caricamento...') }}</small>`);

                $.ajax({
                    url: "{{ route('articles.get-contents-by-article') }}",
                    method: 'GET',
                    data: { article_id: articleId },
                    success: function(data) {
                        contentsLists.empty();
                        if (Array.isArray(data) && data.length > 0) {
                            // Group by product for readability
                            const byProduct = {};
                            data.forEach(c => {
                                if (!byProduct[c.product_id]) byProduct[c.product_id] = { name: c.product_name || `ID ${c.product_id}`, items: [] };
                                byProduct[c.product_id].items.push(c);
                            });

                            contentsLists.prepend(`<div class="mb-2"><button type="button" class="btn btn-sm btn-outline-secondary" id="select-all-contents">{{ __('Seleziona tutti') }}</button> <button type="button" class="btn btn-sm btn-outline-secondary" id="deselect-all-contents">{{ __('Deseleziona tutti') }}</button></div>`);

                            Object.keys(byProduct).forEach(pid => {
                                const group = byProduct[pid];
                                const groupId = `product-${pid}`;
                                group.items.forEach(item => {
                                    const contentId = `content-${item.id}`;
                                    contentsLists.append(`
                                        <div class="form-check ms-3">
                                                <input class="form-check-input" type="checkbox" name="contents[]" value="${item.id}" id="${contentId}">
                                                <label class="form-check-label" for="${contentId}">${group.name} - ${item.label}</label>
                                        </div>`);
                                });
                            });
                        } else {
                            contentsLists.append(`<small class="text-muted">{{ __('Nessun contenuto collegato a questo codice.') }}</small>`);
                        }

                        contentsContainer.removeClass('d-none');
                    },
                    error: function(){
                        contentsLists.empty().append(`<small class="text-danger">{{ __('Errore durante il caricamento dei contenuti.') }}</small>`);
                    }
                });
            });

            // Clear products if the article selection is cleared
            $(document).on('select2:clear', 'select[name="article_from"]', function () {
                contentsLists.empty().append(`<small class="text-muted">{{ __('Seleziona prima un codice articolo per vedere i contenuti collegati.') }}</small>`);
            });

            // Select/Deselect all helpers
            $(document).on('click', '#select-all-contents', function(){
                $('#contents-lists input[type="checkbox"]').prop('checked', true);
            });
            $(document).on('click', '#deselect-all-contents', function(){
                $('#contents-lists input[type="checkbox"]').prop('checked', false);
            });
        });
    </script>
@endpush