@props(['name' => 'images[]', 'id' => 'image-uploader', 'label' => 'Afbeeldingen toevoegen'])

<div class="tech-image-upload">
    <label class="block text-sm font-medium mb-2" style="color:var(--tech-text)">{{ $label }}</label>
    <input id="{{ $id }}" class="tech-image-uploader" type="file" name="{{ $name }}" accept="image/jpeg,image/png,image/webp,image/gif">
    <p class="mt-2 text-xs" style="color:var(--tech-text-muted)">Meerdere afbeeldingen tegelijk. JPG, PNG, WEBP of GIF · maximaal 10 MB per afbeelding.</p>
</div>

@once
    @push('styles')
        <link rel="stylesheet" href="{{ asset('vendor/fileuploader/jquery.fileuploader.min.css') }}">
        <link rel="stylesheet" href="{{ asset('vendor/fileuploader/jquery.fileuploader-theme-thumbnails.css') }}">
        <style>
            .tech-image-upload .fileuploader { margin:0; padding:0; background:transparent; border-radius:0; font-family:'Figtree',sans-serif; }
            .tech-image-upload .fileuploader-theme-thumbnails .fileuploader-items { margin-top:0; }
            .tech-image-upload .fileuploader-input { border:1px dashed var(--tech-border-strong); background:var(--tech-surface-soft); border-radius:12px; padding:8px; }
            .tech-image-upload .fileuploader-input-inner { color:var(--tech-text-soft); font-family:'Figtree',sans-serif; }
            .tech-image-upload .fileuploader-thumbnails-input-inner { background:var(--tech-surface-soft); border:1px dashed var(--tech-border-strong); color:var(--man-orange); border-radius:10px; }
            .tech-image-upload .fileuploader-item-inner { background:var(--tech-surface-soft); border-color:var(--tech-border); border-radius:10px; }
            .tech-image-upload .fileuploader-item .content-holder h5,
            .tech-image-upload .fileuploader-item .content-holder span { color:var(--tech-text); }
            .tech-image-upload .fileuploader-input .fileuploader-input-button { background:var(--man-orange) !important; color:#fff !important; border-radius:9px !important; box-shadow:none !important; padding:11px 17px !important; }
            .tech-image-upload .fileuploader-input .fileuploader-input-button:hover { background:var(--man-orange-hover) !important; }
            .tech-image-upload .fileuploader-input .fileuploader-input-caption { background:var(--tech-surface) !important; color:var(--tech-text-soft) !important; border-color:var(--tech-border) !important; border-radius:9px !important; box-shadow:none !important; }
            .tech-image-upload .fileuploader-items .fileuploader-item { border-color:var(--tech-border) !important; }
            .tech-image-upload .fileuploader-items .fileuploader-item .column-title,
            .tech-image-upload .fileuploader-items .fileuploader-item .column-title a { color:var(--tech-text) !important; }
        </style>
    @endpush
    @push('scripts')
        <script src="{{ asset('vendor/fileuploader/jquery.min.js') }}"></script>
        <script src="{{ asset('vendor/fileuploader/jquery.fileuploader.min.js') }}"></script>
        <script>
            jQuery(function($){
                $('.tech-image-uploader').each(function(){
                    var input = $(this);
                    if ($.fileuploader.getInstance(input[0])) return;
                    input.fileuploader({
                        limit: 20,
                        maxSize: 10,
                        extensions: ['jpg','jpeg','png','webp','gif'],
                        addMore: true,
                        theme: 'thumbnails',
                        thumbnails: {
                            popup: 'scale'
                        },
                        captions: {
                            button: 'Bestanden kiezen',
                            feedback: 'Sleep afbeeldingen hierheen',
                            feedback2: 'Afbeeldingen gekozen',
                            drop: 'Sleep afbeeldingen hierheen',
                            removeConfirmation: 'Afbeelding verwijderen?',
                            errors: {
                                filesLimit: 'Je kunt maximaal ${limit} afbeeldingen kiezen.'
                            }
                        }
                    });
                });
            });
        </script>
    @endpush
@endonce