@php ($attributes = (isset($value['attributes']) ? $value['attributes'] : []))
@php ($attributes['id'] = (isset($attributes['id']) ? $attributes['id'] : $key))
@php ($attributes['class'] = (isset($attributes['class']) ? $attributes['class'] : 'form-control form-control-lg'))
@php ($attributes['class'] .= ($errors->has($key) ? ' is-invalid' : ''))
@php ($floatOff = ['file', 'radio', 'checkbox', 'editor', 'custom', 'switch'])
@php ($labelWidth = (isset($value['label_width']) ? $value['label_width'] : 'col-lg-3 col-md-6 col-sm-6 col-xs-12 text-right'))
@php ($fieldWidth = (isset($value['field_width']) ? $value['field_width'] : 'col-12'))
@php ($value['value'] = isset($value['value']) ? $value['value'] : null)
@if($coverClass)
<div class="{{ $coverClass }}">
@endif
    <div class="{{ $fieldWidth }}{{ $value['type'] == 'dropzone' ? ' m-auto' : '' }}">
        <div class="{{ !in_array($value['type'], $floatOff) ? 'project-form form-line' : 'mb-3' }} {{ $errors->has($key) ? 'error' : '' }} {{$value['type'] == 'text_label' ? 'd-flex' : ''}}">
            @if(isset($value['label']) && $value['label'])
                <label for="{{ $attributes['id'] }}" class="form-label {{ isset($value['label_class']) && $value['label_class'] ? $value['label_class'] : 'mb-0' }}">{!! $value['label'] . (isset($attributes['required']) ? ' <span class="text-danger">*</span>' : '') !!}</label>
            @endif
            @if(isset($value['help']) && $value['help'])
                <a href="javascript:void(0)" class="position-absolute-i {{ in_array($value['type'], ['select', 'multiselect', 'select_with_optgroups', 'number']) ? 'select-help' : '' }}" data-toggle="tooltip" title="{{ htmlentities($value['help']) }}"><i class="{{ \Config::get('settings.icon_help') }}"></i></a>
            @endif
            @if($value['type'] != 'anchor')
                @if(isset($value['icon']) && $value['icon'])
                    <i class="{{ $value['icon'] }} position-absolute-i"></i>
                @endif
            @endif
            @if($value['type'] == 'text')
                {!! html()->text($key, $inputValue)->attributes($attributes) !!}
            @elseif($value['type'] == 'color')
                {!! html()->input('color', $key, $inputValue ?? '#ffffff')->attributes($attributes) !!}
            @elseif($value['type'] == 'text_with_prefix') 
               <div class="input-group flex">
                    @if(isset($value['prefix']) && $value['prefix'])  
                        @if($value['prefix']['type'] == 'select')
                        {!! html()->select($value['prefix']['name'], $value['prefix']['options'], $value['prefix']['value'])->attributes($value['prefix']['attributes']) !!}
                        @endif
                    @endif
                    {!! html()->text($key, $inputValue)->attributes($attributes) !!}
               </div>
            @elseif($value['type'] == 'label')
                @php ($attributes['readonly'] = 'true')
                @php ($attributes['disabled'] = 'true')
                {!! html()->text($key, $inputValue)->attributes($attributes) !!}
            @elseif($value['type'] == 'text_label')
                @if(isset($value['value']) && !empty($value['value']))
                    <div class="html-header-label">
                        <h5 class="{{$value['class'] ?? 'mt-4'}}">{{ $value['value'] }}
                        @if(isset($value['attributes']['help']) && ((is_array($value['attributes']['help']) && array_key_exists($k, $value['attributes']['help']) && $value['attributes']['help'][$k]) || (is_string($value['attributes']['help']) && $value['attributes']['help'])))
                            <a href="javascript:void(0)" data-toggle="tooltip" title="{{ is_array($value['attributes']['help']) ? $value['attributes']['help'][$k] : $value['attributes']['help'] }}">
                                <i class="{{ \Config::get('settings.icon_help') }} fs-4"></i>
                            </a>
                        @endif
                        </h5>
                    </div>
                @endif
            @elseif($value['type'] == 'email')
                {!! html()->email($key, $inputValue)->attributes($attributes) !!} 
            @elseif($value['type'] == 'number')
                {!! html()->number($key, $inputValue)->attributes($attributes) !!}
            @elseif($value['type'] == 'date')
                {{-- @php($attributes['class'] .= ' datepicker') --}}
                {!! html()->date($key, $inputValue)->attributes($attributes) !!}
            @elseif($value['type'] == 'time')
               {{-- */ @php($attributes['class'] .= ' timepicker') --}}
                {!! html()->time($key, $inputValue)->attributes($attributes) !!}
            @elseif($value['type'] == 'datetime')
               {{-- @php($attributes['class'] .= ' datetimepicker') --}}
                {!! html()->datetime($key, $inputValue)->attributes($attributes) !!}
            @elseif($value['type'] == 'password')
                {!! html()->password($key)->attributes($attributes) !!}
            @elseif($value['type'] == 'textarea')
                {!! html()->textarea($key, $inputValue)->attributes($attributes) !!}
            @elseif($value['type'] == 'editor')
                @php ($attributes['class'] .= ' editor')
                {!! html()->textarea($key, $inputValue)->attributes($attributes) !!}
                @once
                    @push('page_script')
                    <script src="{{ asset('admin-form-plugins/tinymce/tinymce.min.js')}}" ></script>
                    <script>
                        tinymce.init({
                            selector:'.editor',
                            theme: "modern",
                            height: 300,
                            plugins: [
                                "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                                "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                                "save table contextmenu directionality emoticons template paste textcolor"
                            ],
                            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
                            style_formats: [
                                {title: 'Bold text', inline: 'b'},
                                {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
                                {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
                                {title: 'Example 1', inline: 'span', classes: 'example1'},
                                {title: 'Example 2', inline: 'span', classes: 'example2'},
                                {title: 'Table styles'},
                                {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
                            ]
                        });
                    </script>
                    @endpush
                @endonce
            @elseif($value['type'] == 'select')
            @php($attributes['class'] = (!isset($attributes['class']) || strpos($attributes['class'], 'select2') === false) ? $attributes['class'] . ' select2' : $attributes['class'])
                @if(is_array($value['options']) && !empty($value['options']))
                    @php($value['options'] = $value['options'])
                @endif
                {!! html()->select($key, $value['options'], $value['value'])->attributes($attributes) !!}
            @elseif($value['type'] == 'select_with_optgroups')
                @php($selectAttributes = isset($value['attributes']) ? $value['attributes'] : [])
                @php($selectAttributes['class'] = isset($selectAttributes['class']) ? $selectAttributes['class'] : 'form-control form-control-lg select2')
                @php($formattedOptions = [])
                @php(
                    is_array($value['options']) && !empty($value['options']) ? array_walk($value['options'], function($option) use (&$formattedOptions) {
                        if(isset($option['children']) && is_array($option['children']) && !empty($option['children'])) {
                            $formattedOptions[$option['label']] = $option['children'];
                        }
                    }) : null
                )
                
                @if(isset($selectAttributes['multiple']) && $selectAttributes['multiple'])
                    {!! html()->select($key, $formattedOptions, $value['value'])->multiple()->attributes($selectAttributes) !!}
                @else
                    {!! html()->select($key, $formattedOptions, $value['value'])->attributes($selectAttributes) !!}
                @endif
            @elseif($value['type'] == 'multiselect')
                @php($attributes['multiple'] = 'true')
                @php($attributes['class'] .= ' select2')
                {!! html()->select($key, $value['options'], $value['value'])->multiple()->attributes($attributes) !!}
            @elseif($value['type'] == 'copy_mapping')
                @php(
                    $fromOptions = isset($value['from_options']) ? $value['from_options'] : $value['options'] ?? []
                )
                @php(
                    $toOptions = isset($value['to_options']) ? $value['to_options'] : $value['options'] ?? []
                )
                @php(
                    $mappings = isset($value['value']) ? (is_array($value['value']) ? $value['value'] : []) : []
                )
                @php(
                    $firstMapping = !empty($mappings) ? $mappings[0] : ['from' => '', 'to' => '']
                )
                <div class="copy-mapping-container" id="{{ $attributes['id'] }}_container">
                    <div class="copy-mapping-pairs field-map-list">
                        <div class="copy-mapping-pair row field-map">
                            <div class="col-md-5 copy-from-field mb-2">
                                <label>Copy From</label>
                                <select name="{{ $key }}[0][from][]" id="copy_from_field_0" class="form-control select2 copy-from-field" data-parent="{{ $attributes['id'] }}">
                                    <option value="">Select field</option>
                                    @foreach($fromOptions as $groupName => $group)
                                        @if(is_array($group))
                                            <optgroup label="{{ $groupName }}">
                                                @foreach($group as $optionValue => $optionLabel)
                                                    <option value="{{ $optionValue }}" {{ isset($firstMapping['from']) && $firstMapping['from'] == $optionValue ? 'selected' : '' }}>{{ $optionLabel }}</option>
                                                @endforeach
                                            </optgroup>
                                        @else
                                            <option value="{{ $groupName }}" {{ isset($firstMapping['from']) && $firstMapping['from'] == $groupName ? 'selected' : '' }}>{{ $group }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-1 text-center mapping-arrow mt-4 mb-2">
                                <i class="mdi mdi-arrow-right-bold {{ isset($firstMapping['from']) && isset($firstMapping['to']) && $firstMapping['from'] && $firstMapping['to'] ? 'text-success' : 'text-danger' }}"></i>
                            </div>
                            <div class="col-md-5 copy-to-field mb-2">
                                <label>Copy To</label>
                                <select name="{{ $key }}[0][to][]" id="copy_to_field_0" class="form-control select2 copy-to-field" data-parent="{{ $attributes['id'] }}">
                                    <option value="">Select field</option>
                                    @foreach($toOptions as $groupName => $group)
                                        @if(is_array($group))
                                            <optgroup label="{{ $groupName }}">
                                                @foreach($group as $optionValue => $optionLabel)
                                                    <option value="{{ $optionValue }}" {{ isset($firstMapping['to']) && $firstMapping['to'] == $optionValue ? 'selected' : '' }}>{{ $optionLabel }}</option>
                                                @endforeach
                                            </optgroup>
                                        @else
                                            <option value="{{ $groupName }}" {{ isset($firstMapping['to']) && $firstMapping['to'] == $groupName ? 'selected' : '' }}>{{ $group }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-12">
                            <button type="button" class="green-btn-inner waves-effect btn-sm-custom add-mapping-pair" data-parent="{{ $attributes['id'] }}">
                                <i class="mdi mdi-plus-circle"></i> Add
                            </button>
                        </div>
                    </div>
                </div>
                <template id="field-map-template">
                    <div class="copy-mapping-pair row field-map mt-2">
                        <div class="col-md-5 copy-from-field mb-2">
                        <select name="{{ $key }}[__INDEX__][from][]" id="copy_from_field"
                                class="form-control select2 copy-from-field" data-parent="{{ $attributes['id'] }}">
                            <option value="">Select field</option>
                            @foreach($fromOptions as $groupName => $group)
                            @if(is_array($group))
                                <optgroup label="{{ $groupName }}">
                                @foreach($group as $optionValue => $optionLabel)
                                    <option value="{{ $optionValue }}">{{ $optionLabel }}</option>
                                @endforeach
                                </optgroup>
                            @else
                                <option value="{{ $groupName }}">{{ $group }}</option>
                            @endif
                            @endforeach
                        </select>
                        </div>

                        <div class="col-md-1 text-center mapping-arrow mt-1 mb-2">
                        <i class="mdi mdi-arrow-right-bold text-danger"></i>
                        </div>

                        <div class="col-md-5 copy-to-field mb-2">
                        <select name="{{ $key }}[__INDEX__][to][]" id="copy_to_field"
                                class="form-control select2 copy-to-field" data-parent="{{ $attributes['id'] }}">
                            <option value="">Select field</option>
                            @foreach($toOptions as $groupName => $group)
                            @if(is_array($group))
                                <optgroup label="{{ $groupName }}">
                                @foreach($group as $optionValue => $optionLabel)
                                    <option value="{{ $optionValue }}">{{ $optionLabel }}</option>
                                @endforeach
                                </optgroup>
                            @else
                                <option value="{{ $groupName }}">{{ $group }}</option>
                            @endif
                            @endforeach
                        </select>
                        </div>

                        <div class="col-md-1">
                        <button type="button" class="btn btn-sm btn-danger remove-mapping-pair">
                            <i class="mdi mdi-close"></i>
                        </button>
                        </div>
                    </div>
                </template>

            @elseif($value['type'] == 'tag')
                @php($attributes['data-live-search'] = "true")
                @php($attributes['data-size'] = 5)
                @if(!isset($attributes['plain']) || (isset($attributes['plain']) && $attributes['plain']))
                    @php($attributes['class'] .= ' tags-input')
                @endif
                @if(is_array($value['options']) && !empty($value['options']))
                    @php($value['options'] = $value['options'])
                @endif
                {!! html()->select($key, $value['options'], $inputValue)->attributes($attributes) !!}
            @elseif($value['type'] == 'autocomplete')
                @php($attributes['class'] .= ' select2-ajax-autocomplete')
                @php($selectedOptions = [])
                @if(is_array($inputValue) && !empty($inputValue))
                    @foreach($inputValue as $selectedId)
                        @php($selectedOptions[$selectedId] = 'Loading...') {{-- Will be populated by JS --}}
                    @endforeach
                @endif
                {!! html()->select($key, $selectedOptions, $inputValue)->attributes($attributes) !!}
                @once
                    @push('page_script')
                    <script>
                        $(document).ready(function() {
                            $('.select2-ajax-autocomplete').each(function() {
                                var $this = $(this);
                                var ajaxUrl = $this.data('ajax-url');
                                var minInputLength = $this.data('minimum-input-length') || 2;
                                
                                $this.select2({
                                    width: '100%',
                                    ajax: {
                                        url: ajaxUrl,
                                        dataType: 'json',
                                        delay: 300,
                                        data: function(params) {
                                            return {
                                                q: params.term,
                                                page: params.page
                                            };
                                        },
                                        processResults: function(data, params) {
                                            params.page = params.page || 1;
                                            return {
                                                results: data.results,
                                                pagination: {
                                                    more: data.pagination.more
                                                }
                                            };
                                        }
                                    },
                                    minimumInputLength: minInputLength,
                                    placeholder: $this.data('placeholder') || 'Type to search...',
                                    allowClear: true,
                                    multiple: $this.prop('multiple') || false
                                });
                                
                                // Load existing selected values
                                if($this.val() && $this.val().length > 0) {
                                    var selectedIds = Array.isArray($this.val()) ? $this.val() : [$this.val()];
                                    $.ajax({
                                        url: ajaxUrl,
                                        data: { ids: selectedIds.join(',') },
                                        success: function(response) {
                                            if(response.results) {
                                                $this.empty();
                                                $.each(response.results, function(i, item) {
                                                    var option = new Option(item.text, item.id, true, true);
                                                    $this.append(option);
                                                });
                                                $this.trigger('change');
                                            }
                                        }
                                    });
                                }
                            });
                        });
                    </script>
                    @endpush
                @endonce
            @elseif($value['type'] == 'tag-custom')
                @php($attributes['class'] .= ' tags-input')
                @php($attributes['data-role'] = 'tagsinput')
                {!! html()->text($key, $inputValue)->attributes($attributes) !!}
                @once
                    @push('page_css')
                        <link rel="stylesheet" href="{{ asset('assets/tags-input/bootstrap-tagsinput.css') }}">
                    @endpush
                    @push('page_script')
                    <script src="{{ asset('assets/tags-input/bootstrap-tagsinput.min.js') }}"></script>
                    <script type="text/javascript">
                        $(".tags-input").tagsinput({});
                    </script>
                    @endpush
                @endonce
            @elseif($value['type'] == 'radio')
                <div class="clearfix"></div>
                <div class="row">
                @foreach($value['options'] as $k => $option)
                    <div class="{{ isset($value['attributes']['width']) ? $value['attributes']['width'] : 'col-lg-6 col-md-12 col-sm-12 col-xs-12' }}">
                        <div class="custom-control custom-radio custom-radio-primary project-checkbox">
                            {{ html()
                                ->radio($key)
                                ->value($k)
                                ->checked($value['value'] == $k ? true : false)
                                ->attributes([
                                    'class' => $key .' custom-control-input',
                                    'id' => $key . '-' . $k,
                                    'name' => isset($value['attributes']['name']) ? $value['attributes']['name'] :  $key,
                                ]) }}
                            <label class="custom-control-label" for="{{ $key . '-' . $k }}">{{ $option }}</label>
                        </div>
                    </div>
                @endforeach
                </div>
            @elseif($value['type'] == 'checkbox')
                <div class="clearfix"></div>
                <div class="{{ isset($value['field_row']) ? $value['field_row'] : 'row' }}">
                    @foreach($value['options'] as $k => $option)
                    <div class="{{ isset($value['attributes']['width']) ? $value['attributes']['width'] : 'col-lg-6 col-md-12 col-sm-12 col-xs-12' }}">
                        <div class="custom-control custom-checkbox project-checkbox">
                            @php(
                                $checkboxAttributes = [
                                    'class' => $key .' custom-control-input ' . (isset($value['attributes']['class']) ? $value['attributes']['class'] : ''),
                                    'id' => $key . '-' . $k,
                                ]
                            )
                            @if (isset($value['attributes']['disabled']) && is_array($value['attributes']['disabled']) && array_key_exists($k, $value['attributes']['disabled']) && $value['attributes']['disabled'][$k])
                                @php($checkboxAttributes['disabled'] = 'disabled')
                            @elseif (isset($value['attributes']['disabled']) && $value['attributes']['disabled'] === true)
                                @php($checkboxAttributes['disabled'] = 'disabled')
                            @endif
                            {{ html()
                                ->checkbox(isset($value['attributes']['name']) ? $value['attributes']['name'] : $key .'[]')
                                ->value($k)
                                ->checked((is_array($value['value']) && in_array($k, $value['value'])) ? true : false)
                                ->attributes($checkboxAttributes) }}
                            <label class="custom-control-label" for="{{ $key . '-' . $k }}">{{ $option }}</label>
                            @if(isset($value['attributes']['help']) && ((is_array($value['attributes']['help']) && array_key_exists($k, $value['attributes']['help']) && $value['attributes']['help'][$k]) || (is_string($value['attributes']['help']) && $value['attributes']['help'])))
                                <a href="javascript:void(0)" data-toggle="tooltip" title="{{ is_array($value['attributes']['help']) ? $value['attributes']['help'][$k] : $value['attributes']['help'] }}">
                                    <i class="{{ \Config::get('settings.icon_help') }} fs-4"></i>
                                </a>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            @elseif($value['type'] == 'switch')
                <div class="row d-flex">
                    @foreach($value['options'] as $k => $option)
                    <div class="{{ isset($value['attributes']['width']) ? $value['attributes']['width'] : 'col-lg-6 col-md-12 col-sm-12 col-xs-12 ' }}">
                        <div class="square-switchs d-flex gap-2 align-items-center">
                            <input type="checkbox" name="{{ (isset($value['attributes']['name']) ? $value['attributes']['name'] : $key) }}"
                             value="{{ $k }}" id="{{ $key . '-' . $k }}" {{ (is_array($value['value']) && in_array($k, $value['value'])) || $value['value'] == $k ? 'checked' : '' }} class="{{ $key }}"  switch="dark"/>
                            <label for="{{ $key . '-' . $k }}" data-on-label="" data-off-label=""></label>
                        <span>{{ $option }}</span>
                        </div>
                    </div>
                    @endforeach
                </div>
            @elseif($value['type'] == 'color')
                <div class="input-group colorpicker-default" title="Using format option">
                    {!! html()->text($key, $inputValue)->attributes($attributes) !!}
                    <span class="input-group-append">
                        <span class="input-group-text colorpicker-input-addon"><i></i></span>
                    </span>
                </div>
                @once
                    @push('page_css')
                        <link rel="stylesheet" href="{{ asset('assets/libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css') }}">
                    @endpush
                    @push('page_script')
                        <script src="{{ asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
                        <script src="{{ asset('assets/libs/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js') }}"></script>
                        <script type="text/javascript">
                            $(".colorpicker-default").colorpicker({
                                format: "hex"
                            });
                        </script>
                    @endpush
                @endonce
            @elseif($value['type'] == 'dropzone')
                @php($maxFiles = isset($value['attributes']['max_files']) ? $value['attributes']['max_files'] : 1)
                @php($isSingleFile = $maxFiles == 1)
                @php($acceptedFileTypes = isset($value['attributes']['accepted_file_types']) ? $value['attributes']['accepted_file_types'] : 'jpeg,jpg,png,pdf,doc,docx')
                @php($cropperEnabled = isset($value['attributes']['cropper']) && $value['attributes']['cropper'])
                @php($placeholder = $value['attributes']['placeholder'] ?? 'your files')
                @php($buttonText = $value['button_text'] ?? 'BROWSE')
                @php(
                    $acceptedMimeTypes = implode(',', array_map(function($ext) { 
                        return '.'.trim($ext); 
                    }, explode(',', $acceptedFileTypes)))
                )
                <div class="dropzone-wrapper" id="dropzone-wrapper-{{ $key }}">
                    <div class="dropzone-container" id="dropzone-{{ $key }}">
                        <div class="dropzone-previews-container {{ $isSingleFile ? 'single-file' : 'multi-file' }}" id="dropzone-previews-{{ $key }}"></div>
                        <div class="dropzone-message {{ $isSingleFile ? 'single-mode' : '' }}">
                            <div class="dropzone-default-message">
                                <p class="mb-2">Drag and drop {{ $placeholder }} here to upload, or</p>
                                <button type="button" class="green-btn-inner waves-effect dropzone-browse-btn">
                                    <i class="mdi mdi-upload-outline me-1"></i> {{ $buttonText }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <input type="hidden" name="{{ $key }}" id="{{ $key }}" value="{{ isset($value['value']) ? (is_string($value['value']) ? $value['value'] : json_encode($value['value'])) : '' }}">
                
                @once
                    @push('page_css')
                        <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
                        <link rel="stylesheet" href="{{ asset('assets/css/dropzone-cropper-custom.css') }}" type="text/css" />
                        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
                    @endpush
                @endonce
                
                @push('page_script')
                @once
                <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
                <script src="{{ asset('admin-form-plugins/dropzone-cropper-integration.js') }}"></script>
                @endonce
                <script>
                $(document).ready(function() {
                    // Initialize dropzone
                    var dzKey = "dropzone-{{ $key }}";
                    // Prevent double-init: if already present in registry or on element, reuse
                    var existingDz = (window.activeDropzones && window.activeDropzones[dzKey]) || (document.getElementById(dzKey) && document.getElementById(dzKey).dropzone);
                    // Resolve previews container element explicitly to avoid null selector issues
                    var previewsEl = document.getElementById('dropzone-previews-{{ $key }}') || document.getElementById(dzKey);
                    const {{ $key }}Dropzone = existingDz || initializeDropzone("dropzone-{{ $key }}", {
                        maxFiles: {{ $maxFiles }},
                        acceptedFiles: "{{ $acceptedMimeTypes }}",
                        previewsContainer: previewsEl,
                        clickable: "#dropzone-{{ $key }} .dropzone-browse-btn",
                        dictDefaultMessage: "Drag and drop {{ $placeholder }} here to upload",
                        createImageThumbnails: true,
                        previewTemplate: `
                            <div class="dz-preview dz-file-preview">
                                <div class="dz-image"><img data-dz-thumbnail style="height: 145px; width: 145px;" /></div>
                                <div class="dz-details">
                                    <div class="dz-filename"><span data-dz-name title="" class="dz-filename-text"></span></div>
                                </div>
                                <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                                <div class="dz-error-message"><span data-dz-errormessage></span></div>
                                <a class="dz-remove" href="javascript:void(0);" data-dz-remove><i class="fas fa-times"></i></a>
                            </div>
                        `,
                        init: function() {
                            const myDropzone = this;
                            
                            // Load existing files if available
                            const existingFilesInput = $("#{{ $key }}").val();
                            if (existingFilesInput) {
                                try {
                                    let existingFiles;
                                    // Hide the message in single file mode
                                    if ({{ $isSingleFile ? 'true' : 'false' }}) {
                                        $("#dropzone-{{ $key }} .dropzone-message").hide();
                                    }

                                    // Check if it's a JSON string and parse it
                                    if (existingFilesInput.startsWith('{') || existingFilesInput.startsWith('[')) {
                                        existingFiles = JSON.parse(existingFilesInput);
                                        
                                        // Convert to array if it's a single object
                                        if (!Array.isArray(existingFiles)) {
                                            existingFiles = [existingFiles];
                                        }
                                        
                                        // Add each file to the dropzone
                                        existingFiles.forEach(function(fileData) {
                                            // Create a mock file object for Dropzone
                                            const mockFile = { 
                                                name: fileData.name || '',
                                                size: fileData.size || '',
                                                type: fileData.type || 'image/jpeg',
                                                dataURL: fileData.dataURL || fileData.url || fileData
                                            };
                                            
                                            // Add the file to Dropzone and ensure it's tracked
                                            myDropzone.displayExistingFile(mockFile, mockFile.dataURL);
                                            mockFile.status = Dropzone.SUCCESS;
                                            mockFile.accepted = true;
                                            if (!myDropzone.files.includes(mockFile)) {
                                                myDropzone.files.push(mockFile);
                                            }
                                            
                                            // Check if it's an image
                                            const isImage = (mockFile.type && /image\/(jpeg|jpg|png)/i.test(mockFile.type)) || 
                                                           (typeof mockFile.dataURL === 'string' && mockFile.dataURL.startsWith('data:image'));
                                                           
                                            // For non-image files, replace thumbnail with appropriate icon
                                            if (!isImage) {
                                                const fileExt = (mockFile.name || '').split('.').pop().toLowerCase();
                                                const imgElement = $(mockFile.previewElement).find('.dz-image img');
                                                const iconClass = getFileIconClass(fileExt);
                                                
                                                imgElement.replaceWith(`<i class="${iconClass}" style="font-size: 3rem; margin-top: 20px;"></i>`);
                                            }
                                            
                                            // Handle long filenames
                                            const filenameElement = $(mockFile.previewElement).find('.dz-filename-text');
                                            if (filenameElement.length) {
                                                filenameElement.text(truncateFilename(mockFile.name || '', 15));
                                                filenameElement.attr('title', mockFile.name || '');
                                            }
                                        });
                                        
                                    } else if (existingFilesInput) {
                                        // Handle plain string (likely a URL)
                                        const mockFile = { 
                                            name: '',
                                            size: 0,
                                            type: 'image/jpeg',
                                            dataURL: existingFilesInput
                                        };

                                        myDropzone.displayExistingFile(mockFile, existingFilesInput);
                                        mockFile.status = Dropzone.SUCCESS;
                                        mockFile.accepted = true;
                                        if (!myDropzone.files.includes(mockFile)) {
                                            myDropzone.files.push(mockFile);
                                        }
                                        // Update filename (empty in this case) safely
                                        const filenameElement = $(mockFile.previewElement).find('.dz-filename-text');
                                        if (filenameElement.length) {
                                            filenameElement.text(truncateFilename(mockFile.name || '', 15));
                                            filenameElement.attr('title', mockFile.name || '');
                                        }
                                        
                                    }
                                } catch (e) {
                                    console.error('Error loading existing files:', e);
                                }
                            }
                            
                            this.on("addedfile", function(file) {
                                // Hide the message when a file is added if it's single mode
                                if ({{ $isSingleFile ? 'true' : 'false' }} && this.files.length > 1) {
                                    this.removeFile(this.files[0]);
                                }
                                
                                if ({{ $isSingleFile ? 'true' : 'false' }}) {
                                    $("#dropzone-{{ $key }} .dropzone-message").hide();
                                }

                                // Handle long filenames by truncating and adding tooltip
                                const filenameElement = $(file.previewElement).find('.dz-filename-text');
                                const filename = file.name;
                                filenameElement.text(truncateFilename(filename, 15));
                                filenameElement.attr('title', filename);
                                
                                @if($cropperEnabled)
                                // Check if the file is an image that can be cropped
                                const isImage = file.type.match(/image\/(jpeg|jpg|png)/i);
                                if (isImage) {
                                    const reader = new FileReader();
                                    reader.onload = function(e) {
                                        if (typeof Cropper === 'undefined') {
                                            console.error('Cropper library not loaded. Please refresh and try again.');
                                            return;
                                        }
                                        
                                        $("#cropper_modal").modal("show");
                                        
                                        fileId = file.upload.uuid;
                                        // console.log(fileId);
                                        window.lastFileId = fileId;

                                        $('#cropper_modal').data('fileId', fileId);
                                        
                                        // Clear existing croppers
                                        if (croppers[fileId]) {
                                            croppers[fileId].destroy();
                                            delete croppers[fileId];
                                        }
                                        
                                        // Create image element
                                        const image = document.createElement("img");
                                        image.src = e.target.result;
                                        image.style.maxWidth = "100%";
                                        
                                        $(".croppie-modal-wrap").empty().append(image);
                                        
                                        // Get responsive settings based on screen size
                                        const screenWidth = window.innerWidth;
                                        let minCropBoxSize, containerSize, autoCropArea, viewMode, zoomRatio;
                                        
                                        // Mobile optimization
                                        if (screenWidth < 480) {
                                            minCropBoxSize = 120;
                                            containerSize = 200;
                                            autoCropArea = 0.9;
                                            viewMode = 1;
                                            zoomRatio = 0.05;
                                        } 
                                        // Small tablets
                                        else if (screenWidth < 576) {
                                            minCropBoxSize = 150;
                                            containerSize = 250;
                                            autoCropArea = 0.85;
                                            viewMode = 1;
                                            zoomRatio = 0.05;
                                        }
                                        // Tablets
                                        else if (screenWidth < 768) {
                                            minCropBoxSize = 180;
                                            containerSize = 300;
                                            autoCropArea = 0.8;
                                            viewMode = 1;
                                            zoomRatio = 0.1;
                                        }
                                        // Large tablets
                                        else if (screenWidth < 992) {
                                            minCropBoxSize = 200;
                                            containerSize = 350;
                                            autoCropArea = 0.8;
                                            viewMode = 1;
                                            zoomRatio = 0.1;
                                        }
                                        // Desktop
                                        else {
                                            minCropBoxSize = 220;
                                            containerSize = 400;
                                            autoCropArea = 0.75;
                                            viewMode = 1;
                                            zoomRatio = 0.1;
                                        }
                                        
                                        // Initialize Cropper with responsive settings
                                        croppers[fileId] = new Cropper(image, {
                                            aspectRatio: 1, // Circle for avatar
                                            viewMode: viewMode,
                                            dragMode: 'move',
                                            autoCropArea: autoCropArea,
                                            restore: false,
                                            guides: true,
                                            center: true,
                                            highlight: false,
                                            cropBoxMovable: true,
                                            cropBoxResizable: true,
                                            toggleDragModeOnDblclick: false,
                                            minContainerWidth: containerSize,
                                            minContainerHeight: containerSize,
                                            minCropBoxWidth: minCropBoxSize,
                                            minCropBoxHeight: minCropBoxSize,
                                            zoomOnWheel: true,
                                            wheelZoomRatio: zoomRatio,
                                            responsive: true,
                                            checkOrientation: true,
                                            background: true,
                                            modal: true,
                                            initialZoomRatio: 0.8
                                        });
                                        
                                        // Fit image to container after initialization
                                        setTimeout(function() {
                                            const containerWidth = $('.cropper-container').width();
                                            const containerHeight = $('.cropper-container').height();
                                            const imageData = croppers[fileId].getImageData();
                                            
                                            // Calculate zoom to fit (while preserving aspect ratio)
                                            const horizontalRatio = containerWidth / imageData.naturalWidth;
                                            const verticalRatio = containerHeight / imageData.naturalHeight;
                                            
                                            // Use screen size to determine optimal zoom factor - prevent over-zooming
                                            let zoomFactor;
                                            
                                            if (window.innerWidth < 480) {
                                                zoomFactor = 0.8; // Mobile - prevent over-zoom
                                            } else if (window.innerWidth < 768) {
                                                zoomFactor = 0.75; // Tablet
                                            } else {
                                                zoomFactor = 0.7; // Desktop
                                            }
                                            
                                            const optimalZoom = Math.min(horizontalRatio, verticalRatio) * zoomFactor;
                                            
                                            // Apply zoom
                                            croppers[fileId].zoomTo(optimalZoom);
                                            
                                            // Center the image
                                            croppers[fileId].moveTo(
                                                (containerWidth - imageData.width * optimalZoom) / 2,
                                                (containerHeight - imageData.height * optimalZoom) / 2
                                            );
                                        }, 200); // Small delay to ensure container is properly sized
                                    };
                                    reader.readAsDataURL(file);
                                }
                                @endif
                                // Show appropriate icon for non-image files
                                if (!isImage) {
                                    const fileExt = file.name.split('.').pop().toLowerCase();
                                    const imgElement = $(file.previewElement).find('.dz-image img');
                                    const iconClass = getFileIconClass(fileExt);
                                    
                                    // Replace thumbnail with an icon for non-image files
                                    imgElement.replaceWith(`<i class="${iconClass}" style="font-size: 3rem; margin-top: 20px;"></i>`);
                                }
                            });
                            
                            this.on("removedfile", function(file) {
                                if ({{ $isSingleFile ? 'true' : 'false' }} && this.files.length === 0) {
                                    $("#dropzone-{{ $key }} .dropzone-message").show();
                                }
                                
                                // Update hidden input
                                const fileData = [];
                                myDropzone.files.forEach(function(file) {
                                    if (file.dataURL) {
                                        fileData.push({
                                            name: file.name,
                                            size: file.size,
                                            type: file.type,
                                            dataURL: file.dataURL
                                        });
                                    }
                                });
                                if({{ $isSingleFile ? 'true' : 'false' }}) {
                                    $("#{{ $key }}").val((fileData.length > 0) ? JSON.stringify(fileData[0]) : '');
                                } else {
                                    $("#{{ $key }}").val((fileData.length > 0) ? JSON.stringify(fileData) : '');
                                }
                            });
                            
                            // Handle form submission
                            $("form").on("submit", function(e) {
                                const fileData = [];
                                myDropzone.files.forEach(function(file) {
                                    if (file.dataURL) {
                                        fileData.push({
                                            name: file.name,
                                            size: file.size,
                                            type: file.type,
                                            dataURL: file.dataURL
                                        });
                                    }
                                });
                                if({{ $isSingleFile ? 'true' : 'false' }}) {
                                    $("#{{ $key }}").val((fileData.length > 0) ? JSON.stringify(fileData[0]) : '');
                                } else {
                                    $("#{{ $key }}").val((fileData.length > 0) ? JSON.stringify(fileData) : '');
                                }
                                return true;
                            });
                        }
                    });
                    
                    // Store reference to this dropzone
                    if (typeof activeDropzones !== 'undefined') {
                        activeDropzones["dropzone-{{ $key }}"] = {{ $key }}Dropzone;
                    }
                });
                </script>
                @endpush
            @elseif($value['type'] == 'file')
                @php ($fileInputName = $key)
            @if(array_key_exists("cropper", $attributes) && $attributes['cropper'])
                @php ($cropRatio = (isset($attributes['ratio']) && $attributes['ratio']) ? $attributes['ratio'] : '400x300')
                @php ($attributes['onclick'] = "readImage(this, '". $cropRatio ."')")
                @php ($fileInputName .= '_input')
            @endif
            @if(!isset($attributes['id']))
                @php ($attributes['id'] = $key)
            @endif
            @php ($attributes['class'] .= ' custom-file-input')
            @if(isset($attributes['multiple']) && $attributes['multiple'])
                <div class="d-flex gallery-panel mt-2" id="posted_photo_image" @if(isset($attributes['data-max-mb'])) data-max-mb="{{ (int)$attributes['data-max-mb'] }}" @endif>
                    @if(isset($value['value']))
                        @foreach($value['value'] as $f => $file)
                            @php($file = isset($file['original']) ? $file : \App\Models\Masters\File::file($file))
                            @if(in_array($file['file_mime'], \App\Models\Masters\File::$fileValidations['image']['file_mimes']))
                                <div class="gallery-block animate" id="{{ $key . $f . '_preview' }}">
                                    <img src="{{ $file['thumb'] }}">
                                    <a href="javascript:void(0);" class="gallery-close delete-attachment-form" data-id="{{ $file['id'] }}"><i class="mdi mdi-close-circle"></i></a>
                                </div>
                            @elseif($file['file_mime'])
                                <div class="gallery-block animate" id="{{ $key . $f . '_preview' }}">
                                    <a href="{{ $file['original'] }}" target="_blank" style="color: #16C4C0;"><i class="bx bx-file fa-4x"></i></a>
                                    <a href="javascript:void(0);" class="gallery-close delete-attachment-form" data-id="{{ $file['id'] }}"><i class="mdi mdi-close-circle"></i></a>
                                </div>
                            @endif
                        @endforeach
                    @endif
                    <div class="gallery-block add-gellery" data-name="{{ $key }}">
                        <i class="dripicons-plus"></i>
                    </div>
                </div>
                @once
                    @push('page_script')
                    <script type="text/javascript">
                        var no_file = 1;
                        const processImages = async (input) => {
                            if (input.files && input.files[0]) {
                                for (var i = 0; i < input.files.length; ++i) {
                                    var reader = new FileReader();
                                    reader.onload = function(e) {
                                        var image_div = (e.target.result.startsWith('data:application'))
                                            ? '<div id="' + no_file + '_preview" class="gallery-block animate" style="display: none;"> <i style="color: #16C4C0;" class="bx bx-file fa-4x"></i><a href="javascript:void(0);" class="gallery-close" data-id="' + no_file + '_preview"><i class="mdi mdi-close-circle"></i></a></div>'
                                            : '<div id="' + no_file + '_preview" class="gallery-block animate" style="display: none;"> <img src="' + e.target.result + '" class="img-responsive" style="height: auto; width: 100%; float: left;" /><a href="javascript:void(0);" class="gallery-close" data-id="' + no_file + '_preview"><i class="mdi mdi-close-circle"></i></a></div>';
                                        $("#posted_photo_image").prepend(image_div);
                                        no_file = no_file + 1;
                                    };
                                    reader.readAsDataURL(input.files[i]);
                                }
                            }
                            return true;
                        }

                        function enforceMultiFileSizeLimit(input){
                            var rawAttr = $('#posted_photo_image').attr('data-max-mb');
                            if(!rawAttr) return true; // No limit configured
                            var maxMb = parseInt(rawAttr,10);
                            if(isNaN(maxMb) || maxMb <= 0) return true; // invalid config -> skip
                            var maxBytes = maxMb * 1024 * 1024;
                            if(input && input.files){
                                for(let i=0;i<input.files.length;i++){
                                    if(input.files[i].size > maxBytes){
                                        if(typeof showAlert === 'function'){ showAlert('File size limit exceeds ('+maxMb+'MB).'); } else { alert('File size limit exceeds ('+maxMb+'MB).'); }
                                        $(input).val('');
                                        return false;
                                    }
                                }
                            }
                            return true;
                        }
                        function readURL(input) {
                            if(!enforceMultiFileSizeLimit(input)) return;
                            processImages(input).then(function() {
                                setTimeout(function() {
                                    animateZoomIn();
                                }, 200);
                            });
                        }

                        $("body").on("click", ".add-gellery", function() {
                            var name = $(this).data('name');
                            no_file = no_file + 1;
                            var file = '<input name="' + name + '[]" id="listing_photo' + no_file + '" multiple="true" onchange="readURL(this);" type="file" style="display:none;"/>';
                            $("#posted_photo_image").append(file);
                            $("#listing_photo" + no_file).click();
                        });

                        $("body").on('click', '.gallery-close', function() {
                            var file_no = $(this).data('id');
                            $("#posted_photo_image").find("#" + file_no).remove();
                        });
                    </script>
                    @endpush
                @endonce
            @else
                @php($originalFileName = '')
                @if($value['value'] && isset($value['value']['file_name_original']))
                    @php($originalFileName = $value['value']['file_name_original'])
                @endif

                @php($value['value'] = isset($value['value']['original']) ? $value['value'] : \App\Models\Masters\File::file($value['value']))

                @if(array_key_exists("preview", $attributes) && $attributes['preview'])
                    @php ($attributes['onchange'] = "readImage(this)")
                @endif
                {{-- Append unified preview handler (keeps any existing onchange like cropper) --}}
                @php ($attributes['onchange'] = isset($attributes['onchange']) ? rtrim($attributes['onchange'], ';') . ';handleSingleFileUnifiedPreview(this)' : 'handleSingleFileUnifiedPreview(this)')
                    <div class="custom-dropzone">
                        <div class="custom-dropzone-inner {{ (isset($value['attributes']['ratio']) && $value['attributes']['ratio'] == 1) ? 'square-dropzone' : ((isset($value['attributes']['ratio']) && $value['attributes']['ratio'] == 1.6) ? 'rectangle-dropzone' : '') }}" id="{{ $key . '_preview' }}">
                            <input type="hidden" name="{{ $key . '_preview_image' }}" id="{{ $key . '_preview_image' }}" value="{{ $value['value']['thumb'] }}">
                            {!! html()->file($fileInputName)->attributes($attributes) !!}
                            <div class="single-file-preview d-flex align-items-center gap-3 mt-2 px-2 py-2 w-60 @if(!$value['value']['file_mime']) d-none @endif" id="{{ $key }}_single_preview">
                                <div class="preview-thumb" @if($originalFileName) title="{{ $originalFileName }}" @endif>
                                    @if($value['value']['file_mime'])
                                        @if(in_array($value['value']['file_mime'], \App\Models\Masters\File::$fileValidations['image']['file_mimes']))
                                            <img src="{{ $value['value']['thumb'] }}" alt="preview" class="img-thumbnail" style="max-height:80px; width:auto;" @if($originalFileName) title="{{ $originalFileName }}" @endif>
                                        @else
                                            <i class="bx bx-file fa-3x" style="color:#16C4C0;" @if($originalFileName) title="{{ $originalFileName }}" @endif></i>
                                        @endif
                                    @endif
                                </div>
                                <div class="preview-meta flex-grow-1 w-50">
                                    <div class="file-name small text-truncate" style="word-break:break-all;" @if($originalFileName) title="{{ $originalFileName }}" @endif>{{ $originalFileName }}</div>
                                    <div class="mt-1 action-buttons @if(!$value['value']['file_mime']) d-none @endif">
                                        @if($value['value']['file_mime'])
                                            <a href="{{ $value['value']['original'] }}" target="_blank" class="btn btn-outline-primary btn-sm me-1 download-existing" data-toggle="tooltip" title="Download">
                                                <i class="mdi mdi-download"></i>
                                            </a>
                                        @endif
                                        {{--
                                        <button type="button" class="btn btn-outline-danger btn-sm single-file-delete" data-target="{{ $key }}" data-toggle="tooltip" title="Delete">
                                            <i class="mdi mdi-delete"></i>
                                        </button>
                                        --}}
                                    </div>
                                </div>
                            </div>
                            <div class="custom-dz-message custom-needsclick">
                                <div class="upload-icon">
                                    <i class="display-4 bx bxs-cloud-upload"></i>
                                </div>
                                <h4 class="c-dzone-upload-btn-title">{{ isset($attributes['placeholder']) ? $attributes['placeholder'] : "Upload " . $value['label'] }}</h4>
                            </div>
                        </div>
                    </div>
                    @once
                        @push('page_script')
                        <script type="text/javascript">

                            function resetSingleFilePreview(target){
                                var $dropzoneInner = $('#'+target+'_preview');
                                if(!$dropzoneInner.length) return;
                                var $fileInput = $dropzoneInner.find('input[type=file]');
                                var $preview = $('#'+target+'_single_preview');
                                if($preview.length){
                                    $preview.addClass('d-none');
                                    var $thumb = $preview.find('.preview-thumb');
                                    var $name = $preview.find('.file-name');
                                    $thumb.empty().removeAttr('title data-original-title data-initial-filename');
                                    $name.text('').removeAttr('title data-original-title data-initial-filename');
                                    $preview.find('.action-buttons').addClass('d-none');
                                }
                                $('#'+target+'_preview_image').val('');
                                if($fileInput.length){ $fileInput.val(''); }
                            }
                            function handleSingleFileUnifiedPreview(input){
                                if(!input || !input.files || !input.files[0]) return;
                                var rawAttr = $(input).attr('data-max-mb');
                                if(rawAttr){
                                    var maxMb = parseInt(rawAttr,10);
                                    if(!isNaN(maxMb) && maxMb > 0){
                                        var maxBytes = maxMb * 1024 * 1024;
                                        if(input.files[0].size > maxBytes){
                                            if(typeof showAlert === 'function'){ showAlert('File size limit exceeds ('+maxMb+'MB).'); } else { alert('File size limit exceeds ('+maxMb+'MB).'); }
                                            $(input).val('');
                                            return;
                                        }
                                    }
                                }
                                var file = input.files[0];
                                var $container = $(input).closest('.custom-dropzone-inner');
                                if(!$container.length) return;
                                var $previewWrapper = $container.find('.single-file-preview');
                                if(!$previewWrapper.length) return;
                                var $thumbHolder = $previewWrapper.find('.preview-thumb').empty();
                                var $fileNameEl = $previewWrapper.find('.file-name').text(file.name);
                                var $actions = $previewWrapper.find('.action-buttons').removeClass('d-none');
                                var $hiddenPreview = $container.find('input[type=hidden][id$="_preview_image"]');
                                $container.css({'background':'transparent','background-image':'none'});
                                if(file.type && file.type.startsWith('image/')){
                                    var reader = new FileReader();
                                    reader.onload = function(e){
                                        var img = $('<img>', {src:e.target.result, class:'img-thumbnail', style:'max-height:80px; width:auto;', title:file.name});
                                        $thumbHolder.append(img);
                                        $thumbHolder.attr('title', file.name);
                                        $fileNameEl.attr('title', file.name);
                                        if($hiddenPreview.length){ $hiddenPreview.val(e.target.result); }
                                    };
                                    reader.readAsDataURL(file);
                                } else {
                                    $thumbHolder.append('<i class="bx bx-file fa-3x" style="color:#16C4C0;" title="'+$('<div/>').text(file.name).html()+'"></i>');
                                    $thumbHolder.attr('title', file.name);
                                    $fileNameEl.attr('title', file.name);
                                    if($hiddenPreview.length){ $hiddenPreview.val(''); }
                                }
                                $previewWrapper.removeClass('d-none');
                            }
                            $(document).on('click', '.single-file-delete', function(e){
                                e.stopPropagation();
                                resetSingleFilePreview($(this).data('target'));
                            });
                            $(document).on('click', '.download-existing', function(e){
                                e.stopPropagation();
                            });
                            function initSingleFileInputGuards($ctx){
                                $ctx = $ctx || $(document);
                                $ctx.find('.custom-dropzone-inner input[type=file]').each(function(){
                                    var $inp = $(this);
                                    if(!$inp.data('guarded')){
                                        $inp.css({position:'absolute',left:'-9999px',width:'1px',height:'1px',opacity:0,'pointer-events':'none'}).attr('tabindex','-1');
                                        $inp.data('guarded',1);
                                    }
                                });
                            }
                            initSingleFileInputGuards();
                            if($.fn.tooltip){ $('[data-toggle="tooltip"]').tooltip({container:'body'}); }

                            $(document).off('click.customFileTrigger').on('click.customFileTrigger','.custom-dropzone-inner',function(e){
                                if($(e.target).closest('.action-buttons, .single-file-delete, .download-existing').length) return;
                                if($(e.target).is('a,button,input,label') || $(e.target).closest('a,button,label').length) return;
                                if(!$(e.target).closest('.custom-dz-message, .preview-thumb, .custom-dropzone-inner').length) return;
                                var $fileInput = $(this).find('input[type=file]').first();
                                if(!$fileInput.length) return;
                                // Re-entry guard
                                if($fileInput.data('opening')) return;
                                $fileInput.data('opening',true);
                                setTimeout(function(){ $fileInput.removeData('opening'); },300);
                                if($fileInput[0] && typeof $fileInput[0].click === 'function') { $fileInput[0].click(); }
                            });
                        </script>
                        @endpush
                    @endonce
                    @if(isset($value['help']))
                    <small>{!! $value['help'] !!}</small>
                    @endif
                @endif
            @elseif($value['type'] == 'custom')
                {!! $value['value'] !!}
            @elseif($value['type'] == 'anchor')
                <div class="form-anchor-wrapper {{ $value['div_class'] ?? '' }}">
                    <a href="{{ $value['attributes']['href'] ?? 'javascript:void(0);' }}" 
                    @if(isset($value['attributes']) && is_array($value['attributes']))
                        @foreach($value['attributes'] as $attrKey => $attrValue)
                            {{ $attrKey }}="{{ $attrValue }}"
                        @endforeach
                    @endif
                    >
                        @if(!empty($value['prefix']))<i class="{{ $value['prefix'] }}"></i>@endif
                        @if(!empty($value['text']))<span>{{ $value['text'] }}</span>@endif
                        @if(!empty($value['suffix']))<i class="{{ $value['suffix'] }}"></i>@endif
                    </a>
                </div>
            @endif
        </div>

        @if ($errors->has($key))
            <label class="invalid-feedback text-danger error">{{ $errors->first($key) }}</label>
        @endif
    </div>
@if($coverClass)
</div>
@endif