@php
    $field['value'] = old_empty_or_null($field['name'], []) ?? ($field['value'] ?? ($field['default'] ?? []));
    // make sure the value is always an array, even if stored as JSON in database
    $field['value'] = is_string($field['value']) ? json_decode($field['value'], true) : $field['value'];
    if (!empty($field['value'])) {
        // when repeatable is used to create relations the value returned from those relations
        // would be collections, contrary to when saved as json in database and casted as array
        if (is_a($field['value'], \Illuminate\Support\Collection::class)) {
            $field['value'] = $field['value']->toArray();
        }
    }

    if ($field['reorder'] !== false) {
        switch (gettype($field['reorder'])) {
            case 'string':
                $field['subfields'] = Arr::prepend($field['subfields'], [
                    'name' => $field['reorder'],
                    'type' => 'hidden',
                    'attributes' => [
                        'data-reorder-input' => true,
                    ],
                ]);
                usort($field['value'], fn($a, $b) => $a[$field['reorder']] <=> $b[$field['reorder']]);
                break;
            case 'array':
                $field['subfields'] = Arr::prepend($field['subfields'], $field['reorder']);
                usort($field['value'], fn($a, $b) => $a[$field['reorder']['name']] <=> $b[$field['reorder']['name']]);
                break;
        }
    }
@endphp

<div class="row" data-init-function="bpFieldApplicationFieldsElement">
    <div class="col mb-5 mb-xl-8">
        <div class="container-repeatable-elements">
            <div data-repeatable-holder="{{ $field['name'] }}" data-af-list>
                @if (!empty($field['value']))
                    @foreach ($field['value'] as $key => $row)
                        @include($crud->getFirstFieldView('inc.application_fields.item'), [
                            'repeatable_row_key' => $key,
                        ])
                    @endforeach
                    @php
                        // the $row variable still exists. We don't need it anymore the loop is over, and would have impact in the following code.
                        unset($row);
                    @endphp
                @endif
                <template id="af-row-tpl">
                    @include($crud->getFirstFieldView('inc.application_fields.item-template'), [
                        'repeatable_row_key' => '#ROWKEY',
                    ])
                </template>
            </div>
        </div>
    </div>
    <div class="w-50px">
    </div>
    <div class="w-200px">
        <h3 class="fw-bold">Ajouter un champ</h3>
        <div class="d-flex flex-column align-items-start sticky-top py-5">
            <button class="btn btn-sm btn-light-primary mb-2 flex-grow-0" type="button" data-af-action="add"
                data-af-field-type="Text">
                <i class="bi bi-type"></i> Réponse courte
            </button>
            <button class="btn btn-sm btn-light-primary mb-2 flex-grow-0" type="button" data-af-action="add"
                data-af-field-type="TextArea">
                <i class="bi bi-text-paragraph"></i> Paragraphe
            </button>
            <button class="btn btn-sm btn-light-primary mb-2 flex-grow-0" type="button" data-af-action="add"
                data-af-field-type="Email">
                <i class="bi bi-envelope-at"></i> Email
            </button>
            <hr />
            <button class="btn btn-sm btn-light-primary mb-2 flex-grow-0" type="button" data-af-action="add"
                data-af-field-type="Select">
                <i class="bi bi-menu-button-fill"></i> Liste de choix
            </button>
            <button class="btn btn-sm btn-light-primary mb-2 flex-grow-0" type="button" data-af-action="add"
                data-af-field-type="Checkbox">
                <i class="bi bi-ui-checks"></i> Cases à cocher
            </button>
            <hr />
            <button class="btn btn-sm btn-light-primary mb-2 flex-grow-0" type="button" data-af-action="add"
                data-af-field-type="DateTime">
                <i class="bi bi-calendar3"></i> Date / Durée
            </button>
            <button class="btn btn-sm btn-light-primary mb-2 flex-grow-0" type="button" data-af-action="add"
                data-af-field-type="File">
                <i class="bi bi-file-earmark-text"></i> Fichier
            </button>
            <button class="btn btn-sm btn-light-primary mb-2 flex-grow-0" type="button" data-af-action="add"
                data-af-field-type="AcceptanceCheckbox">
                <i class="bi bi-check-square"></i> Case d'acceptation
            </button>
        </div>
    </div>
</div>

@push('crud_fields_scripts')
    @loadOnce('bpFieldApplicationFieldsElement')
        <script>
            function bpFieldApplicationFieldsElement(element) {
                class ApplicationFieldsManager {
                    constructor(container) {
                        this.container = $(container);
                        if (this.container.length == 0) {
                            console.error("Application Field can't find container " + container);
                            return;
                        }

                        this.rowTemplateContents = this.container.find('#af-row-tpl').eq(0).contents();
                        this.container.find('#af-row-tpl').remove();

                        this.listWrapper = this.container.find('[data-af-list]').eq(0);

                        this.AttachEventListeners();
                        this.CheckNameDirtyness();
                    }

                    CheckNameDirtyness() {
                        var _af = this;
                        this.container.find('[data-af-row]').each(function() {
                            var $labelInput = $(this).find('[name$="[label]"]');
                            var $nameInput = $(this).find('[name$="[name]"]');

                            var labelSlug = _af.Slugify($labelInput.val());

                            $nameInput.removeClass('is_dirty').addClass('is_pristine');
                            if ($nameInput.val() != labelSlug) {
                                $nameInput.removeClass('is_pristine').addClass('is_dirty');
                            }
                        });
                    }

                    Slugify(str) {
                        return String(str)
                            .normalize('NFKD') // split accented characters into their base characters and diacritical marks
                            .replace(/[\u0300-\u036f]/g,
                                '') // remove all the accents, which happen to be all in the \u03xx UNICODE block.
                            .trim() // trim leading or trailing whitespace
                            .toLowerCase() // convert to lowercase
                            .replace(/[^a-z0-9 -]/g, '') // remove non-alphanumeric characters
                            .replace(/\s+/g, '-') // replace spaces with hyphens
                            .replace(/-+/g, '-'); // remove consecutive hyphens
                    }

                    AttachEventListeners() {
                        var _af = this;
                        this.container.on('click', '[data-af-action=trash-row]', function() {
                            swal({
                                title: "Attention",
                                text: "Souhaitez-vous réellement supprimer cet élément?",
                                icon: "warning",
                                buttons: ["Annuler", "Supprimer"],
                                dangerMode: true,
                            }).then((value) => {
                                if (value) {
                                    var $row = $(this).parents('[data-af-row]');
                                    _af.DeleteRow($row);
                                }
                            });
                        });
                        this.container.on('click', '[data-af-action=move-up]', function() {
                            var $row = $(this).parents('[data-af-row]');
                            _af.MoveRowUp($row);
                        });
                        this.container.on('click', '[data-af-action=move-down]', function() {
                            var $row = $(this).parents('[data-af-row]');
                            _af.MoveRowDown($row);
                        });
                        this.container.on('click', '[data-af-action=add]', function() {
                            var fieldType = $(this).data('af-field-type');
                            _af.AddRow(fieldType);
                        });
                        this.container.on('keyup', '[name$="[label]"]', function(e) {
                            var key = e.charCode || e.keyCode || 0;
                            if (key == 13) {
                                e.preventDefault();
                                return;
                            }

                            var $row = $(this).parents('[data-af-row]');
                            var label = $(this).val();

                            var $nameInput = $row.find('[name$="[name]"]');

                            if ($nameInput.hasClass('is_pristine')) {
                                $nameInput.val(_af.Slugify(label));
                            }
                        });
                    }

                    DeleteRow($row) {
                        $row.nextAll().each(function() {
                            var $orderInput = $(this).find('[name$="[order]"]');
                            var newVal = $orderInput.val() - 1;
                            $orderInput.val(newVal);
                        })

                        $row.remove();
                    }

                    AddRow(fieldType) {
                        function ReplaceRowKeyPlaceholders($el, newkey) {
                            $el.find('input, select, hidden, textarea').each(function() {
                                var name = $(this).attr('name');
                                if (typeof name !== "undefined") {
                                    name = name.replace('#ROWKEY', currentListSize);
                                    $(this).attr('name', name);
                                }
                            });
                            $el.find('[bp-field-name]').each(function() {
                                var name = $(this).attr('bp-field-name');
                                if (typeof name !== "undefined") {
                                    name = name.replace('#ROWKEY', currentListSize);
                                    $(this).attr('bp-field-name', name);
                                }
                            });
                            $el.find('[data-toggle=collapse]').each(function() {
                                var href = $(this).attr('href');
                                if (typeof href !== "undefined") {
                                    href = href.replace('#ROWKEY', currentListSize);
                                    $(this).attr('href', href);
                                }
                                var ariaControl = $(this).attr('aria-controls');
                                if (typeof ariaControl !== "undefined") {
                                    ariaControl = ariaControl.replace('#ROWKEY', currentListSize);
                                    $(this).attr('aria-controls', href);
                                }
                            });
                            $el.find('.collapse').each(function() {
                                var id = $(this).attr('id');
                                if (typeof id !== "undefined") {
                                    id = id.replace('#ROWKEY', currentListSize);
                                    $(this).attr('id', id);
                                }
                            });
                        }

                        var newRow = this.rowTemplateContents.clone();
                        var currentListSize = this.listWrapper.children('[data-af-row]').length;
                        ReplaceRowKeyPlaceholders(newRow, currentListSize);

                        var kindSelect = $(newRow).find('[name$="[kind]"]');
                        kindSelect.val(fieldType);

                        var orderInput = $(newRow).find('[name$="[order]"]');
                        orderInput.val(currentListSize);

                        $(newRow).find('div[data-af-options-field-kind]').not('[data-af-options-field-kind="' + fieldType +
                            '"]').remove();

                        this.listWrapper.append(newRow);

                        initializeFieldsWithJavascript(newRow);
                    }

                    ExchangeInputVal($input1, $input2) {
                        var input1Val = $input1.val();
                        var input2Val = $input2.val();

                        $input1.val(input2Val);
                        $input2.val(input1Val);
                    }

                    MoveRowUp($row) {
                        var $prevRow = $row.prev('[data-af-row]');
                        if ($prevRow.length > 0) {
                            var $prevOrderInput = $prevRow.find('[name$="[order]"]');
                            var $currentOrderInput = $row.find('[name$="[order]"]');

                            this.ExchangeInputVal($currentOrderInput, $prevOrderInput);

                            $row.insertBefore($prevRow);
                        }
                    }

                    MoveRowDown($row) {
                        var $nextRow = $row.next('[data-af-row]');
                        if ($nextRow.length > 0) {
                            var $nextOrderInput = $nextRow.find('[name$="[order]"]');
                            var $currentOrderInput = $row.find('[name$="[order]"]');

                            this.ExchangeInputVal($currentOrderInput, $nextOrderInput);

                            $row.insertAfter($nextRow);
                        }
                    }
                }

                new ApplicationFieldsManager(element);
            }
        </script>
    @endLoadOnce
@endpush