{{-- Segmento 1 & 2: Dropzone e Metadados do Arquivo --}}
<div class="row g-3">
    <div class="col-md-6 col-12">
        <div class="gallery-segment h-100" id="upload-drop-segment-{{ $pickerId }}">
            <h5 class="gallery-segment-title"><i class="bi bi-cloud-arrow-up me-1"></i> 1. Novo Arquivo</h5>

            <div id="upload-fields-container-{{ $pickerId }}">
                @include('v2-service-media::components.media-input', [
                    'name' => 'gallery_file_' . $pickerId,
                    'label' => 'Arraste ou clique para carregar',
                    'accept' => $mimeTypes,
                    'help' => 'Formatos suportados: ' . $mimeTypes . '. Máximo 10MB.',
                    'required' => false,
                    'withAlt' => false,
                    'currentUrl' => '',
                    'currentAlt' => '',
                    'noPicker' => true
                ])
            </div>

            {{-- Cropper para imagens --}}
            <div id="gallery-cropper-wrapper-{{ $pickerId }}" style="display: none;">
                <div style="max-height: 220px; overflow: hidden; background: #eee; margin-bottom: 10px; border-radius: 4px; border: 1px solid #ddd;">
                    <img id="gallery-cropper-image-{{ $pickerId }}" style="max-width: 100%; display: block; margin: 0 auto;">
                </div>
                <div class="text-center mb-2">
                    <button type="button" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1" id="btn-cropper-rotate-{{ $pickerId }}" title="Rotacionar 90°">
                        <i class="bi bi-arrow-clockwise"></i> Rotacionar
                    </button>
                </div>
            </div>

            {{-- Feedback para áudio --}}
            <div id="gallery-audio-wrapper-{{ $pickerId }}" style="display: none; text-align: center; padding: 20px; background: #ebf5fb; border-radius: 4px; border: 1px solid #aed6f1; margin-bottom: 10px;">
                <i class="bi bi-file-earmark-music display-4 text-info" aria-hidden="true"></i>
                <h6 class="mt-2 fw-bold text-info" style="font-size: 0.9rem;">Áudio Carregado</h6>
                <p class="small text-muted" id="gallery-audio-filename-{{ $pickerId }}"></p>
            </div>

            {{-- Feedback para planilha --}}
            <div id="gallery-excel-wrapper-{{ $pickerId }}" style="display: none; text-align: center; padding: 20px; background: #e8f8f5; border-radius: 4px; border: 1px solid #a3e4d7; margin-bottom: 10px;">
                <i class="bi bi-file-earmark-excel display-4 text-success" aria-hidden="true"></i>
                <h6 class="mt-2 fw-bold text-success" style="font-size: 0.9rem;">Planilha Carregada</h6>
                <p class="small text-muted" id="gallery-excel-filename-{{ $pickerId }}"></p>
            </div>

            {{-- Feedback para documento --}}
            <div id="gallery-document-wrapper-{{ $pickerId }}" style="display: none; text-align: center; padding: 20px; background: #fdf2e9; border-radius: 4px; border: 1px solid #fadbd8; margin-bottom: 10px;">
                <i class="bi bi-file-earmark-pdf display-4 text-danger" aria-hidden="true"></i>
                <h6 class="mt-2 fw-bold text-danger" style="font-size: 0.9rem;">Documento Carregado</h6>
                <p class="small text-muted" id="gallery-document-filename-{{ $pickerId }}"></p>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-12">
        <div class="gallery-segment h-100 d-flex flex-column">
            <h5 class="gallery-segment-title"><i class="bi bi-universal-access me-1"></i> 2. Metadados</h5>

            <div class="mb-3 flex-grow-1">
                <label for="upload-media-alt-{{ $pickerId }}" class="form-label fw-bold small">Texto Alternativo</label>
                <input type="text" id="upload-media-alt-{{ $pickerId }}" class="form-control form-control-sm" placeholder="Descreva a imagem para leitores de tela">
            </div>
            <div class="mb-3 flex-grow-1">
                <label for="upload-media-desc-{{ $pickerId }}" class="form-label fw-bold small">Descrição / Legenda</label>
                <input type="text" id="upload-media-desc-{{ $pickerId }}" class="form-control form-control-sm" placeholder="Nome ou legenda da mídia">
            </div>
            <div class="form-check mb-3">
                <input type="checkbox" class="form-check-input" id="upload-media-shared-{{ $pickerId }}" checked>
                <label class="form-check-label small" for="upload-media-shared-{{ $pickerId }}">Compartilhar com outros módulos</label>
            </div>

            <div class="mt-auto text-end">
                <button type="button" class="btn btn-success btn-sm fw-bold d-inline-flex align-items-center gap-1 px-4" id="btn-register-upload-{{ $pickerId }}" style="display: none;">
                    <i class="bi bi-check-lg"></i> Registrar
                </button>
            </div>
        </div>
    </div>
</div>