@props([
    'name',
    'title' => '',
    'columns' => [],
    'class' => '',
    'model',
    'is_readonly' => false,
    'initEmpty' => false,
    'hideFirstTrash' => false,
    'notAllowToAdd' => false,
    'deleteOld' => true,
])

<div class="col-md-12">
    <label>{{ $title }}</label>
</div>

<div id="kt_{{ $name }}_repeater">
    <div class="form-group">
        <div data-repeater-list="{{ $name }}">
            @php
                // data: old repeater data
                // columns: fields
                $data = $model ? collect(old($name, $model[$name]?->toArray())) : collect([]);
                if ($data->isEmpty()) {
                    $data = [
                        [
                            'id' => null,
                        ],
                    ];

                    foreach ($columns as $column => $columnData) {
                        $data[0][$column] = '';
                    }
                }
            @endphp
            @foreach ($data as $i => $row)
                <div data-repeater-item class="mb-2">
                    <div class="card">
                        <div class="card-body">
                            <div class="form-group row">
                                <input type="hidden" name="id" value="{{ $row['id'] }}" class="row-id"/>
                                @foreach ($columns as $column => $columnData)
                                    @php
                                        $newAttributes = clone $attributes;
                                        foreach ($columnData[2] as $key => $value) {
                                            $newAttributes[$key] = $value;
                                        }

                                        if (isset($model[$name]) && strpos($column, '_') !== false && count($model[$name]) > 0) {
                                            $keys = explode('_', $column);
                                            if (in_array($keys[1], ['ar', 'en'])) {
                                                $columnValue = $row[$keys[0]][$keys[1]];
                                            } else {
                                                $columnValue = $row[$column];
                                            }
                                        } elseif (isset($newAttributes['columnValue'])) {
                                            $keys = explode('`][`', trim($newAttributes['columnValue'], '[]`'));
                                            $columnValue = $row[$keys[0]][$keys[1]];
                                        } else {
                                            $columnValue = $row[$column];
                                        }
                                    @endphp
                                    <div class="{{ $class }}">
                                        <div class="w-100">
                                            <x-dynamic-component :component="'ui::form.' . $columnData[0]"
                                                                 :label="$columnData[1]"
                                                                 :name="$name . '[' . $i . '][' . $column . ']'"
                                                                 :attributes="$newAttributes" class="ctm-repeater"
                                                                 :selected='$columnValue'
                                                                 :value='$columnValue' :data-selected='$columnValue'/>
                                        </div>
                                    </div>
                                @endforeach
                                <div class="col-1 trash-icon mx-5 {{ $hideFirstTrash && $i === 0 ? $name . '_trash d-none' : '' }}
                                 {{ $is_readonly ? $name . '_trash d-none' : '' }}"
                                     style="align-self: end;">
                                    <a href="javascript:;" data-repeater-delete class="btn custom-btn float-end"
                                       style="width:40px;float: inline-end !important;">
                                        <img src="{{ Module::asset('ui:metrohsm/assets/public/delete.svg') }}"
                                             alt="trash"/>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

        </div>
    </div>

    <div class="row">
        <div class="col-12" style="display: flex; justify-content: end; margin-top: 20px;">
            @if (!$notAllowToAdd)
                <a href="javascript:;" data-repeater-create class="btn btn-light-success"
                   data-trash="{{ $name . '_trash' }}" style="margin-left: 17px;">
                    <i class='ki-duotone ki-plus-circle fs-2 pe-0'>
                        <span class='path1'></span>
                        <span class='path2'></span>
                    </i>
                </a>
            @endif
        </div>
    </div>
</div>

@push('scripts')
    <script src="{{ Module::asset('ui:metrohsm/assets/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script>
    <script type="text/javascript">
        function initializeSelect2ForItem($item) {
            $item.find("select").each(function () {
                if (!$(this).hasClass('select2-hidden-accessible')) {
                    $(this).select2({
                        dropdownParent: $(this).closest('.card-body')
                    });
                }
            });
        }

        function initializeDatePickerForItem() {
            <x-ui::supports.datePickerData />
        }

        function showFunction(item) {
            const $item = $(item);
            initializeSelect2ForItem($item);
            initializeDatePickerForItem();

            autosize($(item).find("textarea"));
            $(".ctm-repeater").each(function (index, item) {
                item = $(item);
                if (item.attr("name")) {
                    item.attr("id", item.attr("name"));
                    item.parent().find(".errorMessage").attr("class", 'errorMessage error_' + item.attr("name")
                        .replace(/\[/g, '.').replace(/\]/g, ''));
                }
            });

            if (!$(item).find('.row-id').val()) {
                $(item).find('.trash-icon').removeClass('d-none');
            }
        }

        function callShow() {
            $(this).slideDown();
            showFunction(this);
        }

        function hideFunction(elm) {
        }

        function callHide(deleteElement) {
            const idInput = $(this).find('.row-id');
            // Only prevent deletion if deleteOld is false and the row has an ID
            if (!{{ $deleteOld ? 'true' : 'false' }} && idInput.val()) {
                return false;
            }
            $(this).slideUp(deleteElement);
            hideFunction(this);
        }

        function initializeRepeater(name) {
            const repeaterId = `#kt_${name}_repeater`;
            const repeater = $(repeaterId);

            // Initialize the repeater
            repeater.repeater({
                initEmpty: false,
                defaultValues: {},
                show: callShow,
                hide: callHide,
                ready: function () {
                    // Initialize Select2 for existing items
                    repeater.find('[data-repeater-item]').each(function () {
                        initializeSelect2ForItem($(this));
                    });

                    // Handle trash icons for existing items if deleteOld is false
                    if (!{{ $deleteOld ? 'true' : 'false' }}) {
                        repeater.find('[data-repeater-item]').each(function() {
                            if ($(this).find('.row-id').val()) {
                                $(this).find('.trash-icon').addClass('d-none');
                            }
                        });
                    }
                }
            });

            repeater.find('select').trigger('change');
        }


        $(document).ready(function () {
            initializeRepeater('{{ $name }}');
        });

        $('body').on('click', '[data-repeater-create]', function () {
            @if ($hideFirstTrash)
            $(`.${$(this).attr('data-trash')}`).each(function (index) {
                if (index > 0) {
                    $(this).removeClass('d-none');
                }
            })
            @endif
        })
    </script>
@endpush