{{-- =======================
    MÍDIAS EXISTENTES
======================= --}}
@if(isset($artista))
<div class="mb-3">
    <label>Fotos atuais</label>
    <div class="d-flex flex-wrap gap-2">
        @foreach($artista->midias->where('tipo','foto') as $foto)
            <div style="position:relative">
                <img src="{{ asset('storage/'.$foto->path) }}"
                     style="width:120px;height:120px;object-fit:cover;border-radius:6px">

                <button type="button"
                        class="btn btn-danger btn-sm btn-delete-midia"
                        data-id="{{ $foto->id }}"
                        style="position:absolute;top:2px;right:2px">
                    ×
                </button>
            </div>
        @endforeach
    </div>
</div>
@endif

<hr>

{{-- =======================
    NOVAS MÍDIAS
======================= --}}
<div class="form-group">
    <label>Adicionar Fotos</label>
    <input type="file" name="midias_fotos[]" class="form-control" multiple accept="image/*">
</div>

<div class="form-group">
    <label>Arquivos PDF</label>
    <input type="file" name="midias_pdfs[]" class="form-control" multiple accept="application/pdf">
</div>

<div class="form-group">
    <label>Vídeos (YouTube / Vimeo)</label>
    @for($i=0;$i<3;$i++)
        <input type="url" name="midias_videos[]" class="form-control mb-2" placeholder="https://">
    @endfor
</div>

@push('js')
<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.btn-delete-midia').forEach(btn => {
        btn.addEventListener('click', () => {
            if (!confirm('Remover esta mídia?')) return;

            fetch(`/artistas/midia/${btn.dataset.id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            }).then(() => btn.closest('div').remove());
        });
    });
});
</script>
@endpush