@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('banner-save')}}"
                    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 1080 x 400 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">Banner</h3>
                    
                    @if(Auth::user()->rol_id == 0)
                    <div class="col-md-12 mb-3">
                        <div class="row">
                            <div class="col-md-3 mt-2">
                                <a class="btn btn-info btn-block text-white" data-toggle="modal" data-target="#destacado"> Banner destacado </a>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    @if($banner->count() > 0)
                    
                        <div class="row">
                          @foreach($banner as $baner)
                          <div class="col-md-3">
                             <div class="card">
                                 
                                <img class="img-fluid" src="{{ asset('anuncios/banner/'.$baner->imagen) }}">
                                
                                    <div class="card-body text-center">
                                        
                                        <h5 class="card-title">
                                       
                                        @if($baner->destacado == 0)
                                            Banner Lateral
                                        @elseif($baner->destacado == 1)
                                            Banner Destacado
                                        @endif
                                       
                                        </h5>
                                        
                                        <a class="btn btn-danger text-white" href="{{route('banner-eliminar', $baner->id)}}">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                            
                                    </div>
                             </div>
                          </div>     
                          @endforeach
                        </div>
                        
                    @endif
                    
                </div>
            </div>
        </div>
    </div>
</div> 



<div class="modal fade" id="destacado" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Banner destacado</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{route('banner-destacado')}}" method="post" enctype="multipart/form-data">
          {{ csrf_field() }} 

            
            <div class="col-md-12">
                <div class="alert alert-info" role="alert">
                   <h6>Dimension de 1080 x 400 pixeles, formato PNG,JPG,JPEG.</h6>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="input-group mb-3">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" name="imagen">
                        <label class="custom-file-label">Seleccione un archivo</label>
                    </div>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group">   
                  <button type="submit" class="btn btn-primary btn-block">Aceptar</button>
                </div>
            </div>
            
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
      </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',
        
        addRemoveLinks: true,
        acceptedFiles: ".jpeg,.jpg,.png",
        timeout: 5000,
        
        
        error: function(file, response){
            return false;
        }
            
    }
   
</script>
@endpush