{{-- ICON UPLOAD FIELD (SVG only, drag & drop + preview box + remove icon) --}}
<div @include('admin.panel.inc.field_wrapper_attributes')>
    <label class="form-label fw-bolder">{!! $field['label'] !!}</label>
    @include('admin.panel.fields.inc.translatable_icon')

    {{-- Dropzone / preview box --}}
    <div id="{{ $field['name'] }}_dropzone"
        class="border border-2 border-dashed rounded p-3 text-center bg-white d-flex align-items-center justify-content-center flex-column position-relative"
        style="min-height:150px; cursor:pointer; transition: background-color 0.2s;">

        {{-- Placeholder / Preview --}}
        <div id="{{ $field['name'] }}_preview"
            class="w-50 h-50 d-flex align-items-center justify-content-center position-relative">
            @if (isset($field['value']) && $field['value'] != null)
                @php
                    $url = isset($field['disk'])
                        ? asset(\Storage::disk($field['disk'])->url($field['value']))
                        : asset(\Storage::url($field['value']));
                @endphp
                <img src="{{ $url }}" alt="SVG Preview" style="max-width: 100%; max-height: 100%;">
                {{-- Remove icon --}}
                <span id="{{ $field['name'] }}_remove_icon"
                    class="position-absolute top-0 end-0 p-1 px-2 btn btn-sm btn-danger rounded-sm-circle text-white"
                    style="cursor:pointer; font-size:0.8rem;">
                    &times;
                </span>
            @else
                <p class="mb-0 text-muted"><i class="fa fa-upload"></i> Drag & Drop SVG here or click</p>
            @endif
        </div>
    </div>

    <input type="file" id="{{ $field['name'] }}_file_input" name="{{ $field['name'] }}" accept=".svg"
        style="display:none;" value="{{ old($field['name']) ? old($field['name']) : $field['value'] ?? '' }}">

    {{-- Hint --}}
    @if (isset($field['hint']))
        <div class="form-text">{!! $field['hint'] !!}</div>
    @endif
</div>

@push('crud_fields_scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const dropzone = document.getElementById("{{ $field['name'] }}_dropzone");
            const fileInput = document.getElementById("{{ $field['name'] }}_file_input");
            const preview = document.getElementById("{{ $field['name'] }}_preview");
            const removeIcon = document.getElementById("{{ $field['name'] }}_remove_icon");

            // Click opens file dialog
            dropzone.addEventListener("click", () => fileInput.click());

            // Drag highlight
            dropzone.addEventListener("dragover", e => {
                e.preventDefault();
                dropzone.style.backgroundColor = "#f0f0f0";
            });
            dropzone.addEventListener("dragleave", () => {
                dropzone.style.backgroundColor = "white";
            });

            // Drop file
            dropzone.addEventListener("drop", e => {
                e.preventDefault();
                dropzone.style.backgroundColor = "white";
                if (e.dataTransfer.files.length) {
                    fileInput.files = e.dataTransfer.files;
                    showPreview(e.dataTransfer.files[0]);
                }
            });

            // Handle input change
            fileInput.addEventListener("change", e => {
                if (fileInput.files.length) {
                    showPreview(fileInput.files[0]);
                }
            });

            function showPreview(file) {
                preview.innerHTML = '';
                if (file.type === "image/svg+xml") {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const img = document.createElement("img");
                        img.src = e.target.result;
                        img.style.maxWidth = "100%";
                        img.style.maxHeight = "100%";
                        preview.appendChild(img);

                        // Add remove icon
                        const span = document.createElement("span");
                        span.innerHTML = "&times;";
                        span.classList.add("position-absolute", "top-0", "end-0", "bg-danger", "text-white",
                            "d-flex", "align-items-center", "justify-content-center");
                        span.style.width = "24px";
                        span.style.height = "24px";
                        span.style.borderRadius = "50%";
                        span.style.cursor = "pointer";
                        span.style.fontSize = "14px";
                        span.style.lineHeight = "1";

                        span.id = "{{ $field['name'] }}_remove_icon_new";

                        span.addEventListener("click", function(e) {
                            e.stopPropagation();
                            fileInput.value = "";
                            preview.innerHTML =
                                '<p class="mb-0 text-muted"><i class="fa fa-upload"></i> Drag & Drop SVG here or click</p>';
                            $("<input type='hidden' name='{{ $field['name'] }}' value=''>")
                                .insertAfter(fileInput);
                        });

                        preview.appendChild(span);
                    }
                    reader.readAsDataURL(file); // display as image
                } else {
                    preview.innerHTML = '<p class="text-danger">Only SVG files allowed.</p>';
                }
            }

            // Existing remove icon
            if (removeIcon) {
                removeIcon.addEventListener("click", e => {
                    e.stopPropagation();
                    fileInput.value = "";
                    preview.innerHTML =
                        '<p class="mb-0 text-muted"><i class="fa fa-upload"></i> Drag & Drop SVG here or click</p>';
                    $("<input type='hidden' name='{{ $field['name'] }}' value=''>").insertAfter(fileInput);
                });
            }
        });
    </script>
@endpush