@extends('adminlte::page')

@section('title_postfix', ' - Imagens > Produtos')

@section('content_header')
  <h1>Imagens — Produtos</h1>
@stop

@section('content')

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

      <form action="{{ config('app.url') }}/products" method="POST" enctype="multipart/form-data" class="dropzone" id="fileupload">
        @csrf
        <div class="dz-message"><h4>Arraste as imagens para esta caixa ou clica aqui para fazer o upload.</h4></div>
        <div class="fallback">
          <input name="file" type="file" multiple accept="image/jpeg, image/png, image/jpg" />
        </div>
      </form>

    </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