<style>

ul#sortable {
    padding: 15px;
}

#sortable li {
    display: block;
    margin: 0 0 30px;
    padding: 0 5px;
}

li.sort-item {
    width: 33.33%;
    height: 130px;
}
li.sort-item:first-child { 
    width: 100%;
    height: 280px;
    margin: 0 !important;
}

li.sort-item:first-child .box .content-img.grid {
    width:100%;
}

li.sort-item:first-child .box .content-img.grid {
    height: 240px;
}

body.dragging, body.dragging * {
  cursor: move !important;
}

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

.container-imagens .container-exluir {
    z-index: 2;
    position: relative;
    right: -18px;
    width: 20px;
    height: 20px;
    padding: 1px 4px;
    border-radius: 5px;
    margin-bottom: -20px;
    cursor: pointer;
    float: right;
    top: 2px;
    color: #fff;
}

.container-imagens .container-move {
    z-index: 2;
    position: relative;
    right: 32px;
    width: 20px;
    height: 22px;
    padding: 0px 2px;
    border-radius: 6px;
    margin-bottom: -20px;
    cursor: pointer;
    float: right;
    top: 7px;
    background: #52b249;
    color: #fff;
}

#sortable li.placeholder {
  margin: 0 0 30px;
  padding: 0 5px;
  position: relative;;
  position: relative;
  border: 1px dashed blue;
  height: 130px;
  width: 33.33%;
  text-align: center;
  /** More li styles **/
}

#sortable li:nth-child(1).placeholder, #sortable li:nth-child(1).dragged + li:nth-child(2).placeholder
{
    width: 100%;
    height: 240px;
}

#sortable li:nth-child(1).dragged + li:nth-child(2).sort-item {
    width: 100%;
    height: 280px;
    margin: 0 !important;   
}

#sortable li:nth-child(1).dragged + li:nth-child(2).sort-item .box .content-img.grid {
    height: 240px;
    width: 100%;
} 



</style>
<!--inicio etapa-3 -->
<div class="etapa-3" data-title="Etapa 3 - Concluindo">   

    <!--inicio step-8 -->
    <div class="step">
        <div class="row">
            <div class="col-lg-6 pr-40">
                <div class="container-info">
                    <div class="content-title">
                        <h2>Cadastro<span>de imóveis</span></h2>
                    </div>
                    <p>Pesquisas indicam que a qualidade das fotos tem um forte poder de influência nas vendas de imóveis, inclusive podendo sugerir um aumento no valor do imóvel anunciado.</p> 
                    <p>Pensando nisso, o COMDONO oferece aos donos do imóvel um serviço gratuito de fotos profissionais. Caso se interesse, agende as fotos do seu imóvel com a nossa equipe. Basta clicar no botão ao lado - Solicitar fotos profissionais. O COMDONO entrará em contato o mais breve possível.</p>
                    <p>Se já tiver as fotos do imóvel, basta fazer o upload no box ao lado.</p>
                </div>
            </div>
            <div class="col-lg-6 pl-40">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="content-subtitle">
                            <h3>Fotos do imóvel</h3>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" name="fotos_profissionais" class="custom-control-input" id="fotos_profissionais" <?php e($imovel->fotos_profissionais == "on" ? "checked" : ""); ?>>
                        <label class="custom-control-label" for="fotos_profissionais">Solicitar fotos profissionais</label>
                    </div>
                </div>
            	<div class="form-group box-agendamento" <?php e(($imovel->fotos_profissionais !== "on") ? "style='display: none;'" : "style='display: block;'"); ?>>
            	    <p>Qual o melhor horário para entrar em contato com você?</p>
            		<div class="custom-control custom-radio">
            			<input type="radio" id="manha" data-valor="manha" name="melhor_horario" class="custom-control-input" value="manhã" <?php e($imovel->melhor_horario == "manhã" ? "checked" : ""); ?>>
            			<label class="custom-control-label" for="manha">Manhã</label>
                    </div>
            		<div class="custom-control custom-radio">
            			<input type="radio" id="almoco" data-valor="almoco" name="melhor_horario" class="custom-control-input" value="almoço" <?php e($imovel->melhor_horario == "almoço" ? "checked" : ""); ?>>
            			<label class="custom-control-label" for="almoco">Almoço</label>
            		</div>
            		<div class="custom-control custom-radio">
            			<input type="radio" id="final_da_tarde" data-valor="final_da_tarde" name="melhor_horario" class="custom-control-input" value="final da tarde" <?php e($imovel->melhor_horario == "final da tarde" ? "checked" : ""); ?>>
            			<label class="custom-control-label" for="final_da_tarde">Final da tarde</label>
            		</div>
            		<div class="custom-control custom-radio">
            			<input type="radio" id="horario_comercial" data-valor="horario_comercial" name="melhor_horario" class="custom-control-input" value="horário comercial" <?php e($imovel->melhor_horario == "horário comercial" ? "checked" : ""); ?>>
            			<label class="custom-control-label" for="horario_comercial">Entre 8h e 20h</label>
            		</div>
            	</div>
                <div class="form-group box-galeria" <?php e(($imovel->fotos_profissionais !== "on") ? "style='display: block;'" : "style='display: none;'"); ?>>
                    <!-- Redirect browsers with JavaScript disabled to the origin page -->
    				<noscript>
    					<input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/">
    				</noscript>
    				<div class="container-imagens">
    				    <div class="box-grid">
    				        <ul id="sortable" class="row files">
    				            <?php if(!empty($imagens)){?>
    				            <?php for($i=0; $i < count($imagens); $i++){ ?>
    				                <li class="sort-item" data-id="<?php e($imagens[$i]->id_img); ?>" data-name="<?php e($imagens[$i]->imagem); ?>">
    				                    <div class="box">
    				                        <div class="container-move icon icon-move">
    				                            <i class="fa fa-arrows" aria-hidden="true"></i>
    				                        </div>
        				                    <div class="container-exluir icon act-click" data-id="<?php e($imagens[$i]->id_img); ?>">
        				                        <i class="fa fa-times" aria-hidden="true"></i>
        				                    </div>
        				                    <div class="container-exluir pergunta excluir_foto" data-pergunta="<?php e($imagens[$i]->id_img); ?>" data-url="<?php echo base_url('comdono/ajax/galeria_ajax/deletar?file='.$imagens[$i]->imagem); ?>">
        				                        Remover?
        				                    </div>
            				                <a href="<?php e($img_base.$imagens[$i]->imagem); ?>" title="<?php e($imagens[$i]->imagem); ?>" download="<?php e($imagens[$i]->imagem); ?>" data-gallery="" class="previewLink" >
            				                    <div class="content-img grid" style="background-image: url('<?php e($img_base.'/'.$imagens[$i]->imagem); ?>');"></div>
    					            	    </a>
    				            	    </div>
    				            	    <div class="add-legenda">
    				            	        <input class="descricao_imagem" type="text" name="descricao" value="<?php e(@$imagens[$i]->descricao); ?>" data-imagem="<?php e($imagens[$i]->imagem); ?>" placeholder="Adicionar Legenda">
    				            	    </div>
    				                </li>
    				            <?php } } ?>
    				                
    				        </ul>
    				        <div class="btn-upload not-sortable">
                				            <div class="fileupload-buttonbar">
                            					<div class="fileupload-buttons">
                        						    <div class="container-upload fileupload_div">
                        								<button type="button" class="btn btn-success box-upload fileinput-button">
                        								    <div class="ico arrow">
                        								        <i class="material-icons">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                                                       <path fill="none" d="M0 0h24v24H0V0z"/>
                                                                       <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
                                                                    </svg>
                                                                </i>
                        								    </div>
                        								    <div class="ico space">
                        								        <i class="material-icons">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                                                       <path fill="none" d="M0 0h24v24H0V0z"/>
                                                                       <path d="M18 9v4H6V9H4v6h16V9h-2z"/>
                                                                    </svg>
                                                                </i>
                        								    </div>
                        									<p>Clique ou arraste e solte<span>as fotos aqui</span></p>
                        									<input id="fileupload" type="file" name="files[]" multiple>
                        								</button>
                        							</div>
                            					</div>
                            				</div>
                        				</div>
 
    				        <!--<div class="row files">
    				            <?php if(!empty($imagens)){?>
    				            <?php for($i=0; $i < count($imagens); $i++){ ?>
    				            <div class="<?php e(($i==0) ? 'col-lg-12' : 'col-6 col-sm-4 col-md-4 col-lg-4 mb-15'); ?> item">
    				                <div class="box">
    				                    <div class="container-exluir icon act-click" data-id="<?php e($imagens[$i]->id_img); ?>">
    				                        <i class="material-icons">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        				                            <path fill="none" d="M0 0h24v24H0V0z"/>
        				                            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
        				                        </svg>
                                            </i>
    				                    </div>
    				                    <div class="container-exluir pergunta excluir_foto" data-pergunta="<?php e($imagens[$i]->id_img); ?>" data-url="<?php echo base_url('comdono/ajax/galeria_ajax/deletar?file='.$imagens[$i]->imagem); ?>">
    				                        Remover?
    				                    </div>
        				                <a href="<?php e($img_base.$imagens[$i]->imagem); ?>" title="<?php e($imagens[$i]->imagem); ?>" download="<?php e($imagens[$i]->imagem); ?>" data-gallery="" class="previewLink" >
        				                    <div class="content-img <?php e(($i==0) ? 'principal' : 'grid'); ?>" style="background-image: url('<?php e($img_base.'/'.$imagens[$i]->imagem); ?>');"></div>
					            	    </a>
				            	    </div>
				            	    <div class="add-legenda">
				            	        <input class="descricao_imagem" type="text" name="descricao" value="<?php e(@$imagens[$i]->descricao); ?>" data-imagem="<?php e($imagens[$i]->imagem); ?>" placeholder="Adicionar Legenda">
				            	    </div>
    				            </div>
    				            <?php } } ?>
    				            
				            </div>-->
    				    </div>
    				</div>
    				<!-- The blueimp Gallery widget -->
					<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls"  data-hide-page-scrollbars="false" data-filter=":even">
						<div class="slides"></div>
						<h3 class="title"></h3>
						<a class="prev">‹</a>
						<a class="next">›</a>
						<a class="close">×</a>											
					</div>
                    <!-- The template to display files available for download -->
                    <!-- ------- NÃO REMOVER O ESPAÇO EM BRANCO ENTRE AS TAGS ------- -->
                    <script id="template-download" type="text/x-tmpl"> </script>
                    <!-- ------- NÃO REMOVER O ESPAÇO EM BRANCO ENTRE AS TAGS ------- -->
                </div>
            </div>
        </div>
    </div>
</div>