@extends('adminlte::page')

@section('title_postfix', ' - Imagens do Menu')

@section('content_header')
  <h1>Imagens do Menu</h1>
@stop


@section('content')

  <div class="box box-primary" style="margin-top:2px;">
    <div class="box-body">

      @if(session('message'))
      <div class="alert alert-success" role="alert">Alterado com sucesso.</div>
      @endif
              @if(session('messagedel'))
      <div class="alert alert-success" role="alert">Eliminado com sucesso.</div>
      @endif
              @if(session('messagenotdel'))
      <div class="alert alert-error" role="alert">Erro a eliminar.</div>
      @endif
         <label for="code">Ficheiros para o menu.  <span style="color: indianred">*</span></label>
 <form action="{{ config('app.url') }}/gallerymenu/i" method="POST" enctype="multipart/form-data"   class="dropzone"  id="fileupload"   >
        @csrf
        
          <div>
           
        <div class="dz-message"><h4>Arraste os ficheiros para esta caixa ou clique aqui para fazer o upload.</h4></div>
        <div class="fallback">
              
          <input   name="file" type="file" multiple accept="image/jpeg, image/png, image/jpg" />
        </div>
          </div>

      </form>

      <br><br>
  
      <br><br>
       <label for="code">IMAGENS. </label>
       <br>
         @foreach($directories as $file)
         
        
         <img style="cursor: pointer ; width:200px;" src="../../../gallery_menu/{{ $file }}" data-toggle="tooltip" data-placement="bottom" title="{{ $file }}" />
       
         
<!--          <form class="form-inline" id="frm" style="display: inline;" action="{{ config('app.url') }}/gallerymenu/fl" method="POST" >
       <img style="width:100px;" class="imgtodel" src="../../../gallerymenu/{{ $file }}" />
                <input type="hidden"   name="del" id="" value="{{ $file }}">
       <input  style="cursor: pointer ; width:100px;" type="image" src="../../../gallery_menu/{{ $file }}"  name="" id="">
         </form>-->

         @endforeach
         <br><br>    
<form action="{{ config('app.url') }}/gallerymenu/fl" method="POST" >
        @csrf
        
          <div>
               <div class="form-group">

          <select class="form-control m-bot15" required name="del">

  

        @foreach($directories as $file)
            <option value="{{ $file }}">{{ $file }}</option>    
  @endforeach
  

</select>
          <br><br>
      
          </div>
  
        <button type="submit"class="btn btn-danger"><i class="fa fa-trash"></i>&nbsp;Apagar</button>
      
      
    </div>
        </form>
  </div>
<div class="modal" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Apagar a imagem ?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>A imagem será removida da sua galeria.</p>
      </div>
      <div class="modal-footer">
            <button type="button" class="btn btn-seccuess" data-dismiss="modal">Manter</button>
        <button type="button" id="btndel" class="btn btn-danger">Apagar</button>
      </div>
    </div>
  </div>
</div>
@stop

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css">
<style>
  .dropzone {
    border:2px dashed #999999;
    border-radius: 10px;
  }
  .dropzone .dz-default.dz-message {
    height: 171px;
    background-size: 132px 132px;
    margin-top: -101.5px;
    background-position-x:center;

  }
  .dropzone .dz-default.dz-message span {
    display: block;
    margin-top: 145px;
    font-size: 20px;
    text-align: center;
  }
</style>



@endsection

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>
@endsection