@php
    function renderField($field) {
        $type = $field['type'] ?? 'text';
        $name = $field['name'] ?? '';
        $label = $field['label'] ?? '';
        $value = $field['value'] ?? '';
        $required = $field['required'] ?? false;
        $options = $field['options'] ?? [];
        $upload_text = $field['upload_text'] ?? '';
        $suffix = $field['suffix'] ?? '';
        $attributes = $field['attributes'] ?? [];
        $html = '';
        switch ($type) {
            case 'text':
            case 'number':
            case 'password':
            case 'date':
            case 'time':
            case 'datetime':
                $inputType = $type === 'password' ? 'password' : ($type === 'number' ? 'number' : ($type === 'date' ? 'date' : ($type === 'time' ? 'time' : ($type === 'datetime' ? 'datetime-local' : 'text'))));
                $html .= "<label for='{$name}'>{$label}".($required ? ' <span class=\"text-danger\">*</span>' : '')."</label>";
                $html .= "<input type='{$inputType}' class='form-control' name='{$name}' id='{$name}' value='".e($value)."' ".($required ? 'required' : '').">";
                if ($suffix) $html .= "<span class='ml-1'>{$suffix}</span>";
                break;
            case 'select':
                $html .= "<label for='{$name}'>{$label}".($required ? ' <span class=\"text-danger\">*</span>' : '')."</label>";
                $html .= "<select class='form-control' name='{$name}' id='{$name}' ".($required ? 'required' : '').">";
                $html .= "<option value=''>Select</option>";
                foreach ($options as $k => $v) {
                    $selected = ($value == $k) ? 'selected' : '';
                    $html .= "<option value='".e($k)."".$selected.">".e($v)."</option>";
                }
                $html .= "</select>";
                break;
            case 'checkbox':
                $checked = $value ? 'checked' : '';
                $html .= "<div class='form-check'>";
                $html .= "<input type='checkbox' class='form-check-input' name='{$name}' id='{$name}' value='1' {$checked}>";
                $html .= "<label class='form-check-label' for='{$name}'>{$label}</label>";
                $html .= "</div>";
                break;
            case 'checkbox_group':
                $html .= "<label>{$label}</label><div class='row'>";
                foreach ($field['fields'] as $cb) {
                    $cb_checked = $cb['value'] ? 'checked' : '';
                    $cb_name = $cb['name'] ?? '';
                    $cb_label = $cb['label'] ?? '';
                    $html .= "<div class='col-md-3'><div class='form-check'>";
                    $html .= "<input type='checkbox' class='form-check-input' name='{$cb_name}' id='{$cb_name}' value='1' {$cb_checked}>";
                    $html .= "<label class='form-check-label' for='{$cb_name}'>{$cb_label}</label>";
                    $html .= "</div></div>";
                }
                $html .= "</div>";
                break;
            case 'textarea':
                $html .= "<label for='{$name}'>{$label}</label>";
                $html .= "<textarea class='form-control' name='{$name}' id='{$name}' rows='3'>".e($value)."</textarea>";
                break;
            case 'image_upload':
                $html .= "<label>{$label}</label>";
                $html .= "<div class='mb-2'><input type='file' class='form-control-file' name='{$name}' id='{$name}' accept='image/*'></div>";
                if ($value) {
                    $html .= "<img src='".e($value)."' alt='Profile Photo' class='img-thumbnail mb-2' style='max-width:120px;'>";
                }
                if ($upload_text) {
                    $html .= "<div><small class='text-muted'>{$upload_text}</small></div>";
                }
                break;
            case 'file':
                $html .= "<label>{$label}</label>";
                $html .= "<input type='file' class='form-control-file' name='{$name}' id='{$name}'>";
                break;
            case 'dropzone':
                $html .= "<label>{$label}</label>";
                $html .= "<div class='dropzone' id='dropzone-{$name}'></div>";
                break;
            case 'hidden':
                $html .= "<input type='hidden' name='{$name}' value='".e($value)."'>";
                break;
            case 'html':
                $html .= $value;
                break;
            case 'include':
                $html .= view($value, ['field' => $field])->render();
                break;
            case 'group':
                $html .= "<div class='row'>";
                foreach ($field['fields'] as $gfield) {
                    $html .= "<div class='col-md-6 mb-3'>".renderField($gfield)."</div>";
                }
                $html .= "</div>";
                break;
            case 'anchor':
                $icon = $field['icon'] ?? '';
                $href = $field['href'] ?? '#';
                $attr = '';
                if (!empty($field['attributes'])) {
                    foreach ($field['attributes'] as $k => $v) {
                        $attr .= $k.'="'.$v.'" ';
                    }
                }
                $html .= "<a href='{$href}' {$attr}>";
                if ($icon) {
                    $html .= "<i class='{$icon}'></i> ";
                }
                // Only show text if set and not empty
                if (isset($field['text']) && trim($field['text']) !== '') {
                    $html .= $label ?: $field['text'];
                }
                $html .= "</a>";
                break;
            default:
                $html .= "<input type='text' class='form-control' name='{$name}' id='{$name}' value='".e($value)."'>";
        }
        return $html;
    }
@endphp

@php
    $hasDateTime = false;
    $hasCropper = false;
    $hasDropzone = false;
    if(isset($form['groups'])) {
        foreach($form['groups'] as $group) {
            foreach($group['fields'] as $field) {
                if(in_array($field['type'], ['date','time','datetime'])) $hasDateTime = true;
                if(!empty($field['attributes']['cropper'])) $hasCropper = true;
                if($field['type'] === 'dropzone') $hasDropzone = true;
            }
        }
    }
@endphp

<form method="POST" action="{{ isset($form['route']) ? route($form['route'], $form['route_param'] ?? []) : '' }}" enctype="multipart/form-data" class="{{ $form['class'] ?? '' }}">
    @csrf
    @if(isset($id) && $id)
        @method('PUT')
    @endif
    @if(isset($form['groups']) && is_array($form['groups']))
        @foreach($form['groups'] as $group)
            <div class="card mb-3" @if(isset($group['visual']['border']) && $group['visual']['border']) style="border:2px solid #e0e0e0;" @endif>
                <div class="card-header bg-light font-weight-bold">{{ $group['label'] ?? '' }}</div>
                <div class="card-body">
                    <div class="row">
                        @foreach($group['fields'] as $field)
                            <div class="col-md-6 mb-3">{!! renderField($field) !!}</div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endforeach
    @endif
    <div class="text-center mt-4">
        @if(isset($form['custom_buttons']))
            @foreach($form['custom_buttons'] as $button)
                @if(isset($button['type']) && $button['type'] == 'anchor')
                    <a {!! isset($button['attributes']) ? \App\Helpers\Helper::getAttr($button['attributes']) : '' !!}>{!! $button['text'] !!}</a>
                @else
                    <button type="{{ isset($button['type']) ? $button['type'] : 'submit' }}" {!! isset($button['attributes']) ? \App\Helpers\Helper::getAttr($button['attributes']) : '' !!}>{!! $button['text'] !!}</button>
                @endif
            @endforeach
        @else
            <button type="submit" class="btn btn-danger btn-lg waves-effect">Save Changes</button>
        @endif
    </div>
</form>
@if($hasDateTime)
    @include('admin.components.date-time-picker')
@endif
@if($hasDropzone)
    @push('page_css')
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css">
    @endpush
    @push('page_script')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
        <script>
            Dropzone.autoDiscover = false;
            $(function(){
                $('.dropzone').each(function(){
                    new Dropzone(this, { url: '#', maxFiles: 1 });
                });
            });
        </script>
    @endpush
@endif
@if($hasCropper)
    @push('page_css')
        <link rel="stylesheet" href="{{ asset('assets/js/cropper/cropper.css') }}">
    @endpush
    @push('page_script')
        <div class="modal fade rewards-cop-mod" id="cropper_modal" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Crop uploaded image</h4>
                    </div>
                    <div class="modal-body text-center">
                        <div class="container">
                            <div class="row" id="upload-from-computer">
                                <div class="col-md-12 m-auto">
                                    <input type="hidden" name="inputtype" id="inputType" value="">
                                    <div class="docs-demo">
                                        <div class="img-container">
                                            <img src="#" id="imgPreview" alt="Picture" style="max-height: 70vh">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row" id="upload-from-library"></div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <div class="rows" id="actions">
                            <div class="docs-buttons ">
                                <div class="btn-groups">
                                    <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotate(-45)">
                                            <span class="bx bx-rotate-left"></span>
                                        </span>
                                    </button>
                                    <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotate(45)">
                                            <span class="bx bx-rotate-right"></span>
                                        </span>
                                    </button>
                                    <label class="btn btn-primary btn-upload mt-2" for="inputImage" title="Upload image file">
                                        <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
                                        <span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
                                            <i class="bx bx-cloud-upload"></i> Upload
                                        </span>
                                    </label>
                                    <button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 4096 }">
                                        <span class="docs-tooltip">
                                            <i class="bx bx-crop"></i> Crop
                                        </span>
                                    </button>
                                    <button type="button" class="btn btn-danger" data-dismiss="modal" id="closeCropModal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="{{ asset('assets/js/cropper/cropper.js') }}"></script>
        <script src="{{ asset('assets/js/cropper/main.js') }}"></script>
        <script>
            // Dynamically trigger cropper for dropzone/file fields with cropper attribute
            $(function(){
                // For dropzone with cropper
                $('.dropzone').each(function(){
                    var dz = Dropzone.forElement(this);
                    if(!dz) return;
                    dz.on('addedfile', function(file) {
                        // Only trigger cropper if cropper attribute is set
                        var hasCropper = $(dz.element).closest('.col-md-6, .form-group').find('[data-cropper]').length > 0 || $(dz.element).data('cropper');
                        if(hasCropper && file.type.match('image.*')) {
                            var reader = new FileReader();
                            reader.onload = function(e) {
                                $('#imgPreview').attr('src', e.target.result);
                                $('#cropper_modal').modal('show');
                            };
                            reader.readAsDataURL(file);
                        }
                    });
                });
                // For normal file input with cropper
                $(document).on('change', 'input[type=file][data-cropper]', function(e){
                    var input = this;
                    if(input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#imgPreview').attr('src', e.target.result);
                            $('#cropper_modal').modal('show');
                        };
                        reader.readAsDataURL(input.files[0]);
                    }
                });
            });
        </script>
    @endpush
@endif
@push('page_script')
    <script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
@endpush
@if(isset($form['include_scripts']))
    @push('page_script')
        {!! $form['include_scripts'] !!}
    @endpush
@endif