@php
$consorciados = App\Consorciado::get();
@endphp

<div
    style="position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 60vh;
  word-wrap: break-word;
  background-color: #FFF;
  background-clip: border-box;border: 1px solid rgba(0,0,0,.125);
border-radius: 5px;
">

    <div class="card-header" style="padding: 12px;
        background-color: rgba(0,0,0,.03); margin-bottom: 20px;
        color:#000; font-weight: bold; border-top-left-radius: 10px; border-top-right-radius: 10px;">
        2. {{ $passo2 }}
    </div>

    <section class="flex items-start justify-start w-full min-height-[50vh]">
        @if(isset($tipo) && $tipo === 'anexos-solicitacoes') 
            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding-bottom: 2rem;">
                <div id="alteracao_contratual_pessoa_juridica" class="col-md-12">
                    <div class="col-md-12" style="margin-top: 10px;">
                        <label class="control-label" for="textinput">Documento de Identificação do Requerente do Pedido de Vista*<span class="text-sm text-neutral-200">( Obrigatório )</span></label>
                    </div>
    
    
                    <div class="col-md-12">
                        <input type="hidden" id="temp_documento_de_identificacao" name="temp_documento_de_identificacao" value="">
                        <input id="documento_de_identificacao" type="file" name="documento_de_identificacao" required accept=".pdf,.jpg,.jpeg,.png,.rar,.zip" style="display: none;">
                        <label for="documento_de_identificacao" 
                            style="display: inline-flex; align-items: center; padding: 1rem; width: 336px; background-color: #f8f9fa; border-radius: 3px; border: 1px solid #d4d4d4; cursor: pointer;"
                            class="upload-label" 
                            data-input-id="documento_de_identificacao">
                            <span>Buscar arquivo</span>
                            <span class="nameFile" style="color:#969ca8; font-size: 1.2rem; margin-left: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; display: inline-block;">
                                Nenhum arquivo selecionado
                            </span>
                        </label>
                        @error('temp_documento_de_identificacao')
                        <div>
                            <span class="text-red-700">{{ $message }}</span>
                        </div>
                        @enderror
                    </div>
                </div>


                <div id="alteracao_contratual_pessoa_juridica" class="col-md-12">
                    <div class="col-md-12" style="margin-top: 10px;">
                        <label class="control-label" for="textinput">Procuração ou Anuência do Requerente do Processo, com cópia do documento de identificação.</label>
                    </div>
        
        
                    <div class="col-md-12">
                        <input type="hidden" id="temp_procuracao" name="temp_procuracao" value="">
                        <input id="procuracao" type="file" name="procuracao" required accept=".pdf,.jpg,.jpeg,.png,.rar,.zip" style="display: none;">
                        <label for="procuracao" 
                            style="display: inline-flex; align-items: center; padding: 1rem; width: 336px; background-color: #f8f9fa; border-radius: 3px; border: 1px solid #d4d4d4; cursor: pointer;"
                            class="upload-label" 
                            data-input-id="procuracao">
                            <span>Buscar arquivo</span>
                            <span class="nameFile" style="color:#969ca8; font-size: 1.2rem; margin-left: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; display: inline-block;">
                                Nenhum arquivo selecionado
                            </span>
                        </label>
                        @error('procuracao')
                        <div>
                            <span class="text-red-700">{{ $message }}</span>
                        </div>
                        @enderror
                    </div>
                </div>
            </div>
        @else
        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding-bottom: 2rem;">
            <div id="alteracao_contratual_pessoa_juridica" class="col-md-12">
                <div class="col-md-12" style="margin-top: 10px;">
                    <label class="control-label" for="textinput">Cópia do documento de identificação do requerente <span class="text-sm text-neutral-200">( Obrigatório )</span></label>
                </div>


                <div class="col-md-12">
                    <input type="hidden" id="temp_documento_de_identificacao" name="temp_documento_de_identificacao" value="">
                    <input id="documento_de_identificacao" type="file" name="documento_de_identificacao" required accept=".pdf,.jpg,.jpeg,.png,.rar,.zip" style="display: none;">
                    <label for="documento_de_identificacao" 
                        style="display: inline-flex; align-items: center; padding: 1rem; width: 336px; background-color: #f8f9fa; border-radius: 3px; border: 1px solid #d4d4d4; cursor: pointer;"
                        class="upload-label" 
                        data-input-id="documento_de_identificacao">
                        <span>Buscar arquivo</span>
                        <span class="nameFile" style="color:#969ca8; font-size: 1.2rem; margin-left: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; display: inline-block;">
                            Nenhum arquivo selecionado
                        </span>
                    </label>
                    @error('documento_de_identificacao')
                    <div>
                        <span class="text-red-700">{{ $message }}</span>
                    </div>
                    @enderror
                </div>
            </div>

            <div id="alteracao_contratual_pessoa_juridica" class="col-md-12">
                <div class="col-md-12" style="margin-top: 10px;">
                    <label class="control-label" for="textinput">Ofício de Requerimento</label>
                </div>


                <div class="col-md-12">
                    <input type="hidden" id="temp_documento_comprobatorio" name="temp_documento_comprobatorio" value="">
                    <input id="documento_comprobatorio" type="file" name="documento_comprobatorio" required accept=".pdf,.jpg,.jpeg,.png,.rar,.zip" style="display: none;">
                    <label for="documento_comprobatorio" 
                        style="display: inline-flex; align-items: center; padding: 1rem; width: 336px; background-color: #f8f9fa; border-radius: 3px; border: 1px solid #d4d4d4; cursor: pointer;"
                        class="upload-label" 
                        data-input-id="documento_comprobatorio">
                        <span>Buscar arquivo</span>
                        <span class="nameFile" style="color:#969ca8; font-size: 1.2rem; margin-left: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; display: inline-block;">
                            Nenhum arquivo selecionado
                        </span>
                    </label>
                    @error('documento_comprobatorio')
                    <div>
                        <span class="text-red-700">{{ $message }}</span>
                    </div>
                    @enderror
                </div>
            </div>
        </div>
        @endif
    </section>

    <div class="absolute bottom-0 left-0 w-full px-10 mb-10">
        <p>Formatos aceitos: PDF, JPG, JPEG, PNG, RAR e ZIP</p>
    </div>
</div>

<script>
    $(document).ready(function () {
            // Função para atualizar o nome do arquivo
            function updateFileName(inputId) {
                const inputFile = $('#' + inputId);
                const nameFileSpan = inputFile.next('label').find('.nameFile');
                const fileName = inputFile[0].files.length > 0 ? inputFile[0].files[0].name : 'Nenhum arquivo selecionado';
                nameFileSpan.text(fileName);
            }
        
            // Adicionar eventos de drag para cada campo de upload
            $(".upload-label").each(function () {
                const inputId = $(this).data('input-id');
                const inputFile = $("#" + inputId);
        
                // Eventos de Drag
                $(this).on('dragover', function (e) {
                    e.preventDefault();
                    $(this).css('background-color', '#e9ecef');  
                });
        
                $(this).on('dragleave', function () {
                    $(this).css('background-color', '#f8f9fa');  
                });
        
        
                // Evento de change (para quando o arquivo for selecionado)
                inputFile.change(function () {
                    tempRemoveFile(inputId);
                    updateFileName(inputId); 
                    tempUploadFile(this.files[0], inputId);
                });
            });               
            @php $tempFiles = ['documento_de_identificacao', 'procuracao', 'documento_comprobatorio'] @endphp
            @include('scripts.docTempFiles');
        });
</script>
@include('scripts.tempFiles')