@extends('admin.admin-template')
@section('title', $title)
@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('vendor/dropzone/dropzone.css')}}">
<script>
  const route_Des = "{{route('admin.lampiran.destroy')}}"
</script>
@endsection

@section('content')

  <div class="content-wrapper">

    <div class="dashboard-header d-flex flex-column grid-margin">
      <div class="d-flex align-items-center justify-content-between flex-wrap border-bottom pb-3 mb-3">
        <div class="d-flex align-items-center">
          <h4 class="mb-0 font-weight-bold">Lampiran</h4>
          <div class="d-none ml-3 mt-2 d-md-flex">
            <p class="text-muted mb-0 tx-13 cursor-pointer">Home</p>
            <i class="mdi mdi-chevron-right text-muted"></i>
            <p class="text-muted mb-0 tx-13 cursor-pointer">Lampiran</p>
          </div>
        </div>
        <div class="button-wrapper d-flex align-items-center mt-md-3 mt-xl-0">
          
        </div>
      </div>
    </div>


    <div class="row">
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
              <div class="card-body">

                <b>Lampiran </b><br>
                Berkas Rekaman<br><br>

                <form id="zone-upload" action="{{route('admin.lampiran.upload')}}" class='dropzone'>
                </form> 
                <br>

                <div class="table-responsive">
                  <table class="table table-sm">
                    <thead>
                      <tr>
                        <td>No</td>
                        <td>Lampiran</td>
                        <td>Action</td>
                      </tr>
                    </thead>
                    <tbody>

                      @foreach ($lampirans as $no => $lampiran)
                          <tr id="lampiran{{$lampiran->id}}">
                            <td>{{$no+1}}</td>
                            <td>{{$lampiran->lampiran}}</td>
                            <td>
                              <a target="_blank" href="{{route('admin.lampiran.download',['path'=>$lampiran->lampiran_path])}}" class="btn btn-outline-success btn-sm btn-icon-text">
                                <i class="mdi mdi-download btn-icon-prepend"></i>Download
                              </a>
                              <button class="btn btn-outline-danger btn-sm btn-icon-text" onclick="hapusRemove('{{route('admin.lampiran.delete',['id'=> $lampiran->id])}}', 'Apakah kamu yakin ingin menghapus lampiran', 'lampiran{{$lampiran->id}}')">
                                <i class="mdi mdi-close btn-icon-prepend"></i>Hapus
                              </button>
                            </td>
                          </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
               
              </div>
            </div>
        </div>
    </div>
  </div>
@endsection

@section('script')
<script src="{{asset('js/hapus.js')}}"></script>
<script src="{{asset('vendor/dropzone/dropzone-min.js')}}" type="text/javascript"></script>
<script>
    var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("content");

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(".dropzone",{ 
    maxFilesize: 3,  // 3 mb
    acceptedFiles: ".jpeg,.jpg,.png,.pdf,.doc,.docx",
    renameFile: function (file) {
        const newName = new Date().getTime() + '_' + file.name;
        return newName;
    }
});
myDropzone.on("sending", function(file, xhr, formData) {
  formData.append("_token", CSRF_TOKEN);
});

</script>
@endsection