@extends('layouts.master')
@section('title','Ders 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('derspages.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('ders')}}">Ders İşlemleri</a></li>
                <li class="breadcrumb-item active"><a href="{{route('dersExcellEkle')}}">Excell ile Ekle</a></li>
              </ol>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="col-md-8 offset-md-2">
            <div class="card shadow mb-4">
                <div class="card-header py-3 text-center">
                  <h4 class="m-0 font-weight-bold text-primary">@yield('title')</h4>
               
                    <p class="fs-4 fw-bold mt-2">Örnek Excel Dosyalarını <b><a href="{{route('listDownload')}}">buradan indirebilirsiniz</a></b></p>
                  
                </div>
                 <div class="card-body shadow">
                    
                   
                        <p class="mesaj text-center fs-4 fw-bold text-info " id="mesaj"></p>             
                  
                    <form method="post" action="{{route('ders.import')}}" enctype="multipart/form-data"
                    class="dropzone shadow p-3 mb-5 bg-body rounded " id="dropzone">
                  @csrf
              </form>
            
                 </div>



                  </div>
                </div>
        
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  @endsection
@section('css')
<meta name="_token" content="{{csrf_token()}}" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css"> 
@endsection
@section('js')


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
<script type="text/javascript">
    Dropzone.prototype.defaultOptions.dictDefaultMessage = "Excell Dosyanızı buraya sürükleyip bırakınız!!";
    Dropzone.options.dropzone =
        {
            uploadMultiple:false,
            parallelUploads: 1,
            maxFilesize: 1,
            maxFiles: 1,
            renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();
                return time+file.name;
            },
            acceptedFiles: ".xls,.xlsx,.ods",
            addRemoveLinks: true,
            timeout: 50000,
            removedfile: function(file)
            {
                return Dropzone.confirm("Eklediğiniz dosya kaldırılıyor ", function() {
                    var name = file.upload.filename;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        type: 'POST',
                        url: '{{route('excellDelete')}}',
                        data: {filename: name},
                        success: function (data) {
                            console.log("Dosya Başarılı bir şekilde kaldırıldı!!");
                        },
                        error: function (e) {
                            console.log(e);
                        }
                    });
                    var fileRef;
                    return (fileRef = file.previewElement) != null ?
                        fileRef.parentNode.removeChild(file.previewElement) : void 0;
                });
            },
            
            success: function(data)
            {
                console.log(data.status);                
                    $('#mesaj').html('Dosyanız Başarılı Bir Şekilde Yüklendi,Öğrenci Listesine Yönlendiriliyorsunuz...');
                    
                    setTimeout(function(){
                        document.location = './ders';
                    },3000);
                
               
                
            },
            error: function(data)
            {
                console.log(data.status)
                
                $('#mesaj').html('Dosyanız yüklenirken hata oluştu, lütfen bekleyiniz.');
                setTimeout(function(){
                    document.location = './dersExcellEkle';
                 },3000);
               
                
            }
            

        };
</script>
@endsection