@php $mediaType = $media->types->first(); @endphp

<div class="kt-card">
    <div class="kt-card-content">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">

            {{-- Dropzone (gauche) --}}
            @can('edit-media')
            <div>
                @if($mediaType)
                <form action="{{ route('admin.crm.media.images.upload', $media) }}"
                    id="media-dropzone"
                    class="dropzone border border-dashed border-border rounded-lg cursor-pointer hover:border-primary transition-colors h-full">
                    @csrf
                    <div class="dz-message flex flex-col items-center gap-2 py-6">
                        <div class="flex items-center justify-center size-10 rounded-full bg-primary/10">
                            <i class="ki-outline ki-cloud-download text-primary text-xl"></i>
                        </div>
                        <div class="text-center">
                            <p class="text-sm font-semibold text-mono mb-0.5">Glisser-déposer ici</p>
                            <p class="text-xs text-secondary-foreground">JPEG, PNG, WebP — 10 Mo max</p>
                        </div>
                        <button type="button" class="kt-btn kt-btn-sm kt-btn-primary mt-1">
                            Parcourir
                        </button>
                    </div>
                </form>
                @else
                <div class="rounded-lg border border-dashed border-border p-6 text-center text-sm text-secondary-foreground">
                    Assignez un type de média à ce support avant d'ajouter des visuels.
                </div>
                @endif
            </div>
            @endcan

            {{-- Galerie (droite) --}}
            <div>
                @if ($media->images->isEmpty())
                    <p class="text-sm text-secondary-foreground italic" id="no-images-msg">
                        Aucun visuel pour ce média.
                    </p>
                @endif

                <div class="flex flex-wrap gap-3" id="images-gallery">
                    @foreach ($media->images as $image)
                    <div class="relative group shrink-0" id="image-{{ $image->id }}">
                        <img src="{{ $image->thumb_url }}"
                            alt="{{ $media->name }}"
                            class="w-[100px] h-[100px] object-cover rounded-md border border-border cursor-pointer"
                            onclick="window.open('{{ $image->url }}', '_blank')">
                        @can('edit-media')
                        <button type="button"
                            class="absolute top-1 end-1 size-6 rounded-full bg-destructive text-white opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
                            data-kt-modal-toggle="#modal_confirm_delete"
                            data-confirm-url="{{ route('admin.crm.media.images.destroy', $image) }}"
                            data-confirm-name="Visuel #{{ $image->id }}">
                            <i class="ki-outline ki-cross text-xs"></i>
                        </button>
                        @endcan
                    </div>
                    @endforeach
                </div>
            </div>

        </div>
    </div>
</div>


@push('styles')
<link rel="stylesheet" href="{{ asset('assets/vendors/dropzone/dropzone.min.css') }}">
<style>
.dropzone { border: 1px dashed #e7e3e4 !important; }
.dropzone:hover, .dropzone.dz-drag-hover { border-color: var(--color-primary) !important; }
.dropzone .dz-message { margin: 0; }
</style>
@endpush

@can('edit-media')
@if($mediaType)
@push('scripts')
<script src="{{ asset('assets/vendors/dropzone/dropzone.min.js') }}"></script>
<script>
Dropzone.autoDiscover = false;

const baseDeleteUrl = '{{ route('admin.crm.media.images.destroy', 0) }}';

const dz = new Dropzone('#media-dropzone', {
    paramName: 'file',
    maxFilesize: 10,
    acceptedFiles: 'image/*',
    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
    params: { media_type_id: {{ $mediaType->id }} },
    success: function(file, response) {
        if (response.success) {
            const noMsg = document.getElementById('no-images-msg');
            if (noMsg) noMsg.remove();

            const gallery = document.getElementById('images-gallery');
            const deleteUrl = baseDeleteUrl.replace('/0', '/' + response.id);

            const div = document.createElement('div');
            div.id = 'image-' + response.id;
            div.className = 'relative group shrink-0';
            div.innerHTML = `
                <img src="${response.thumb_url}"
                    class="w-[100px] h-[100px] object-cover rounded-md border border-border cursor-pointer"
                    onclick="window.open('${response.url}', '_blank')">
                <button type="button"
                    class="absolute top-1 end-1 size-6 rounded-full bg-destructive text-white opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
                    data-kt-modal-toggle="#modal_confirm_delete"
                    data-confirm-url="${deleteUrl}"
                    data-confirm-name="Visuel #${response.id}">
                    <i class="ki-outline ki-cross text-xs"></i>
                </button>`;
            gallery.prepend(div);
            this.removeFile(file);
        }
    }
});
</script>
@endpush
@endif
@endcan