@extends('adminlte::page')

@section('title_postfix', ' - Galeria')

@section('content_header')
  <h1>Galeria</h1>
@stop


@section('content')

  <!--<div class="box box-primary" style="margin-top: 2em">-->

<div class="box-body">
    <ul class="nav nav-tabs">
        @foreach($gallery_category as $category)
            <li class="{{ $category['folder'] == $gallery_category[0]['folder'] ? 'active' : '' }}">
                <a data-toggle="tab" href="#category_{{ $category['folder'] }}">{{ $category['name'] }}</a>
            </li>
        @endforeach
    </ul>
    <div class="tab-content">
        @foreach($gallery_category as $category)
            <div id="category_{{ $category['folder'] }}" class="tab-pane fade {{ $category['folder'] == $gallery_category[0]['folder'] ? 'in active' : '' }}">
                <br>
               <form action="{{ config('app.url') }}/gallery/upload/{{ $category['folder'] }}" method="POST" enctype="multipart/form-data" class="dropzone">

                    @csrf
                    <div>
                        <div class="dz-message">
                            <h4>Arraste os ficheiros para esta caixa ou clique aqui para fazer o upload para a galeria de {{ $category['name'] }}.</h4>
                        </div>
                        <div class="fallback">
                            <input name="file" type="file" multiple accept="image/jpeg, image/png, image/jpg" />
                        </div>
                    </div>
                </form>
                <br><br>
                <label for="code">Ficheiros <span style="color: indianred">* </span></label>
                <br>
                @foreach($directories as $file)
                    @if(strpos($file['file'], $category['folder']) === 0)
                        <input type="hidden" name="del" value="{{ $file['file'] }}">
                        <input style="cursor: pointer; width:100px;" type="image" src="../../../gallery/{{ $file['file'] }}" alt="">
                    @endif
                @endforeach
                <br><br>
             <form action="{{ config('app.url') }}/gallery/fl" method="POST">
    @csrf
     <input type="hidden" name="category" value="{{ $category['folder'] }}">
    <div class="form-group">
        <select class="form-control m-bot15" required name="del">
            @foreach($directories as $file)
                @if(strpos($file['file'], $category['folder']) === 0)
                    <!-- Display the file name in the option text -->
                    <option value="{{ $file['file'] }}">{{ basename($file['file']) }}</option>
                @endif
            @endforeach
        </select>
        <br><br>
    </div>
    <button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i>&nbsp;Apagar</button>
</form>
            </div>
        @endforeach
    </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>

@endsection