@extends('layouts.dashboardnew')

@section('content')

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                
                @if(Auth::user()->rol_id == 0)
                    <div class="col-md-12 mb-3">
                        <div class="row">
                            <div class="col-md-3 col-6">
                                <div class="form-group mt-2">
                                    <a class="btn btn-info w-100" data-bs-toggle="modal" data-bs-target="#destacado"> Banner destacado </a>
                                </div>
                            </div>
                            
                            <div class="col-md-3 col-6">
                                <div class="form-group mt-2">
                                   <a class="btn btn-info w-100" data-bs-toggle="modal" data-bs-target="#anuncios"> Anuncios </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                    
                
                <form method="post" action="{{route('banner-save')}}" enctype="multipart/form-data" class="dropzone border border-info" 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 280 x 280 pixeles, formato PNG,JPG,JPEG.</h6>
                    </div>
                        
                </form>

            </div>
        </div>
    </div>
</div>


@if($banner->count() > 0)
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                
                <div class="row">
                    @foreach($banner as $baner)
                        <div class="col-md-2 col-6">
                            <article class="card_galery mb-3 mt-3">
                                <figure>
                                    <img src="{{ asset('anuncios/banner/'.$baner->imagen) }}">
                                    <figcaption>
                                        <h5>
                                            
                                            @if($baner->destacado == 0)
                                               Lateral
                                            @elseif($baner->destacado == 1)
                                               Destacado
                                            @elseif($baner->destacado == 2)
                                               Anuncios
                                            @endif
                                        
                                            <a class="text-white" href="{{route('banner-eliminar', $baner->id)}}">
                                              <i class="fa fa-trash"></i>
                                            </a>

                                            @if($baner->destacado == 2)
                                            <a class="text-white" data-bs-toggle="modal" data-bs-target="#anuncios_editar" onclick="editar_anuncios('{{ $baner->id }}',
                                            '{{ $baner->titulo }}','{{ $baner->descripcion }}','{{ $baner->enlace }}','{{ $baner->color }}')">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </a>
                                            @endif
                                            
                                        </h5>
                                    </figcaption>
                                </figure>
                            </article>
                        </div>
                    @endforeach
                </div>
                        
            </div>
        </div>
    </div>
</div>            	
@endif


<div id="destacado" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="recuperarLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="recuperarLabel">Banner destacado</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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 1100 x 380 pixeles, formato PNG,JPG,JPEG.</h6>
                        </div>
                    </div>
            
                    <div class="col-md-12">
                    	<div class="form-group mb-3">
                            <label>Seleccione una Imagen</label>
                            <input class="form-control" type="file" name="imagen" required>
                        </div>
                    </div>
            
                    <div class="col-md-12">
                        <div class="form-group mb-3">   
                          <button type="submit" class="btn btn-info w-100">Aceptar</button>
                        </div>
                    </div>
            
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>


<div id="anuncios" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="recuperarLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="recuperarLabel">Anuncios</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('banner-anuncios')}}" method="post" enctype="multipart/form-data">
                   {{ csrf_field() }} 
                    
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label>Título</label>
                            <input type="text" name="titulo" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label>Descripción</label>
                            <input type="text" name="descripcion" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label>Enlace (URL)</label>
                            <input type="url" name="enlace" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label>Color</label>
                            <input type="color" name="color" class="form-control" required>
                        </div>
                    </div>
            
                    <div class="col-md-12">
                        <div class="alert alert-info" role="alert">
                           <h6>Dimension de 575 x 260 pixeles, formato PNG,JPG,JPEG.</h6>
                        </div>
                    </div>
            
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label>Seleccione una Imagen</label>
                            <input class="form-control" type="file" name="imagen" required>
                        </div>
                    </div>
            
                    <div class="col-md-12">
                        <div class="form-group mb-3">   
                          <button type="submit" class="btn btn-info w-100">Aceptar</button>
                        </div>
                    </div>
            
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>



<div id="anuncios_editar" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="recuperarLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="recuperarLabel">Editar anuncio</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('banner-editar-anuncios')}}" method="post" enctype="multipart/form-data">
                   {{ csrf_field() }} 
                    
                    <input type="hidden" name="id" class="id">
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label>Título</label>
                            <input type="text" name="titulo" class="form-control titulo" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label>Descripción</label>
                            <input type="text" name="descripcion" class="form-control descripcion" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label>Enlace (URL)</label>
                            <input type="url" name="enlace" class="form-control enlace" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label>Color</label>
                            <input type="color" name="color" class="form-control color" required>
                        </div>
                    </div>
            
                    <div class="col-md-12">
                        <div class="alert alert-info" role="alert">
                           <h6>Dimension de 575 x 260 pixeles, formato PNG,JPG,JPEG.</h6>
                        </div>
                    </div>
            
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label>Seleccione una Imagen</label>
                            <input class="form-control" type="file" name="imagen">
                        </div>
                    </div>
            
                    <div class="col-md-12">
                        <div class="form-group mb-3">   
                          <button type="submit" class="btn btn-info w-100">Aceptar</button>
                        </div>
                    </div>
            
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('script')
<script type="text/javascript">
    
    function editar_anuncios(id, titulo, descripcion, enlace, color){
        $('.id').val(id);
        $('.titulo').val(titulo);
        $('.descripcion').val(descripcion);
        $('.enlace').val(enlace);
        $('.color').val(color);
    }

    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