@extends('layouts.dashboardnew')

@section('content')

<div class="container-fluid principal">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    
                    <form method="post" action="{{route('tienda-save-adicional', $id)}}"
                    enctype="multipart/form-data" class="dropzone" id="dropzone">
                        {{ csrf_field() }}
                        
                        <div class="dz-message" data-dz-message>
                            <img src="{{asset('fondo/upload.jpg')}}" class="img-fluid" alt="subir archivo" style="width: 150px; height: 130px;">
                            <h5>Arrastre o Pulse aqui las imagenes</h5>
                            <h6>Dimension de 300 x 300 pixeles, formato PNG,JPG,JPEG.</h6>
                        </div>
                        
                    </form>
                    
                </div>
            </div>
        </div>
    </div>
</div> 


<div class="container-fluid principal">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    
                    <h3 class="text-black text-center">Imagenes del Producto</h3>
                    
                    @if($atributos->count() > 0)
                    
                        <div class="row">
                          @foreach($atributos as $atrib)
                          <div class="col-md-3">
                             <div class="card">
                                 
                                <img class="img-fluid" src="{{ asset('adicional/'.$atrib->foto) }}" alt="">
                                
                                  <div class="card-body text-center">
                                      
                                      <a class="btn btn-danger text-white" href="{{route('tienda-eliminar-adicional', $atrib->id)}}">
                                          <i class="fa fa-trash"></i>
                                      </a>
                                      
                                  </div>
                             </div>
                          </div>     
                          @endforeach
                        </div>
                        
                    @endif
                    
                </div>
            </div>
        </div>
    </div>
</div> 


@endsection

@push('script')
<script type="text/javascript">

    Dropzone.options.dropzone = {
       
        //dictDefaultMessage: 'Arrastre o Pulse aqui las imagenes',
        dictFallbackMessage: 'Lo sentimos su navegador no es compatible',
        dictCancelUploadConfirmation: 'Esta seguro que desea cancelar la subida del archivo ?',
        dictCancelUpload: 'Cancelar',
        dictRemoveFile: 'Eliminar',
        paramName: 'archivo',
        maxFilesize: 5,
       
        maxfilesexceeded: function(file) {
            
            confirm("A superado el maximo de archivos subidos");    
            this.removeAllFiles();
           
        },
        
        addRemoveLinks: true,
        acceptedFiles: ".jpeg,.jpg,.png,.gif",
        timeout: 5000,
        
        
        error: function(file, response){
            return false;
        }
            
    }
   
</script>
@endpush