@extends('layouts.master')
@section('title','Öğretmen Excell Dosyası ile Ekle')
@section('content')
 <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            @include('personelpages.menu')
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Anasayfa</a></li>
                <li class="breadcrumb-item active"><a href="{{route('ogretmen')}}">Öğretmen İşlemleri</a></li>
                <li class="breadcrumb-item active"><a href="{{route('ogretmenExcellEkle')}}">Öğretmen Excell Ekle</a></li>
              </ol>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-8 offset-md-2">
              <div class="card card-default">
                <div class="card-header">
                  <h3 class="card-title text-primary">@yield('title')</h3>
                </div>
                <div class="card-body">
                  <div id="actions" class="row">
                    <div class="col-lg-12">
                      <div class="btn-group w-100">
                        <span class="btn btn-success col fileinput-button">
                          <i class="fas fa-plus"></i>
                          <span>Dosya Ekle</span>
                        </span>
                        <button type="submit" class="btn btn-primary col start">
                          <i class="fas fa-upload"></i>
                          <span>Yükle</span>
                        </button>
                        <button type="reset" class="btn btn-warning col cancel">
                          <i class="fas fa-times-circle"></i>
                          <span>Yüklemeyi İptal Et</span>
                        </button>
                      </div>
                    </div>
                    <div class="col-lg-12 d-flex align-items-center mt-3">
                      <div class="fileupload-process w-100">
                        <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                          <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="table table-striped files" id="previews">
                    <div id="template" class="row mt-2">
                      <div class="col-auto">
                          <span class="preview"><img src="data:," alt="" data-dz-thumbnail /></span>
                      </div>
                      <div class="col d-flex align-items-center">
                          <p class="mb-0">
                            <span class="lead" data-dz-name></span>
                            (<span data-dz-size></span>)
                          </p>
                          <strong class="error text-danger" data-dz-errormessage></strong>
                      </div>
                      <div class="col-4 d-flex align-items-center">
                          <div class="progress progress-striped active w-100" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                          </div>
                      </div>
                      <div class="col-auto d-flex align-items-center">
                        <div class="btn-group">
                          <button class="btn btn-primary start">
                            <i class="fas fa-upload"></i>
                            <span>Başlat</span>
                          </button>
                          <button data-dz-remove class="btn btn-warning cancel">
                            <i class="fas fa-times-circle"></i>
                            <span>İptal Et</span>
                          </button>
                          <button data-dz-remove class="btn btn-danger delete">
                            <i class="fas fa-trash"></i>
                            <span>Sil</span>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                  Kurumunuzda çalışan öğtretmenleri excell dosyası ile toplu olarak yükleyebilirsiniz, 
                  örnek excell dosyasını indirmek için <a href="#">Tıklayınız</a>
                </div>
              </div>
              <!-- /.card -->
            </div>
          </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  @endsection
  @section('css')
  <link rel="stylesheet" href="{{asset('back')}}/plugins/dropzone/min/dropzone.min.css">
@endsection
@section('js')
<script src="{{asset('back')}}/plugins/dropzone/min/dropzone.min.js"></script>
<script>
 // DropzoneJS Demo Code Start
 Dropzone.autoDiscover = false

// Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
var previewNode = document.querySelector("#template")
previewNode.id = ""
var previewTemplate = previewNode.parentNode.innerHTML
previewNode.parentNode.removeChild(previewNode)

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
  url: "/target-url", // Set the url
  thumbnailWidth: 80,
  thumbnailHeight: 80,
  parallelUploads: 20,
  previewTemplate: previewTemplate,
  autoQueue: false, // Make sure the files aren't queued until manually added
  previewsContainer: "#previews", // Define the container to display the previews
  clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
})

myDropzone.on("addedfile", function(file) {
  // Hookup the start button
  file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file) }
})

// Update the total progress bar
myDropzone.on("totaluploadprogress", function(progress) {
  document.querySelector("#total-progress .progress-bar").style.width = progress + "%"
})

myDropzone.on("sending", function(file) {
  // Show the total progress bar when upload starts
  document.querySelector("#total-progress").style.opacity = "1"
  // And disable the start button
  file.previewElement.querySelector(".start").setAttribute("disabled", "disabled")
  //ajax start
 
    
          console.log('başarılı');
         $.ajax({
           type: 'GET',
                 url: '',
                 data: {
                   //  id: id
                 },
                 success:function(data)
                 {
                  // console.log(data);
                 
                 }

         })
       



  //ajax end
})

// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("queuecomplete", function(progress) {
  document.querySelector("#total-progress").style.opacity = "0";
  console.log('başarılı');
})

// Setup the buttons for all transfers
// The "add files" button doesn't need to be setup because the config
// `clickable` has already been specified.
document.querySelector("#actions .start").onclick = function() {
  myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED))
}
document.querySelector("#actions .cancel").onclick = function() {
  myDropzone.removeAllFiles(true)
}
// DropzoneJS Demo Code End
</script>

@endsection