@extends('layouts.master')
@section('title','Okul Panel İşlemleri')
@section('content')
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        @include('panelpages.menu')
        <div class="col-sm-4">
          <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('video')}}">Video İşlemleri</a></li>

          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <!-- Main content -->
  <section class="content">
    <div class="col-md-12">
      <div class="card shadow mb-4">
          <div class="card-header py-3 text-center">
              <h4 class="m-0 font-weight-bold text-primary">Video Ekle</h4>
          </div>
          <div class="card-body">
            @include('panelpages.hatakontrol')
           
                <div class="form-row">
                    <div class="form-group text-center col-md-6 col-6">
                        <div class="custom-control custom-radio">
                          <input class="custom-control-input" type="radio" id="customRadio1" name="customRadio" value="video" checked="">
                          <label for="customRadio1" class="custom-control-label">Video Yükleyeceğim</label>
                        </div>                        
                      
                      </div>
                      <div class="form-group text-center col-md-6 col-6">
                      <div class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio" id="customRadio2" value="url" name="customRadio">
                        <label for="customRadio2" class="custom-control-label">Video Bağlantısı Yazacağım</label>
                      </div>
                      </div>
                    </div>  
                      <div id="linkdiv">
                        <form action="{{ route('panelVideoUpload') }}" method="POST" enctype="multipart/form-data">
                          @csrf
                          <div class="form-row"  >
                            <div class="form-group col-12 " >
                              <label for="title">Video Bağlantı Adresi</label>
                              <input title="" type="text" class="form-control" id="url" name="url" placeholder="Video bağlantı linkini buraya yazınız veya yapıştırınız."
                              value="">
                          </div>                
                      
                             <button type="submit" class="btn btn-block btn-primary">Kaydet</button>
                            </div>         
                        </form>
                      </div>
                      <div class="col-12" id="videodiv">
                        
                          
                             <div class="card-body shadow">
                                
                               
                                    <p class="mesaj text-center fs-4 fw-bold text-info " id="mesaj"></p>             
                              
                                <form method="post" action="{{route('panelVideoUpload') }}" enctype="multipart/form-data"
                                class="dropzone shadow p-3 mb-5 bg-body rounded " id="dropzone">
                                  @csrf
                                   
                               </form>
                             </div>
            
            
            
                          
                            </div>
                    
           




          </div>
      </div>

  </div>
    <div class="card">
      <div class="card-header">
       <div class="row">
        <div class="col-md-10 col-sm-8 mt-1">
          <h3 class="card-title text-info fw-bold fs-4">Aktif Video Listesi</h3>
         </div>

         <div class="col-md-2 col-sm-4 mt-1 text-right">

            <a type="button" href="#" class="text-decoration-none btn-sm btn-danger deleteAll-click">Tüm Videoları Sil</a>
          </div>


       </div>

      </div>

      <!-- /.card-header -->



       <div class="card-body">
        <table id="example1" class="table table-bordered table-striped">
          <thead>
          <tr>

            <th>#</th>
            <th style="width:120px !important">İşlemler</th>             
            <th>Dosya Adı</th>
            <th>Onay Tarihi</th>             
            <th>Yükleyem</th>
            <th>Durum</th>

          </tr>
          </thead>
          <tbody>
            @php($sira=0)
            @foreach ($resimler as $resim)
            @php($sira++)
            <tr>
                <td>{{ $sira }}</td>
                 <td>
                    <a title="Onayla" class="mb-1 btn btn-sm btn-outline-info onay-click"
            id="{{ $resim->id }}" durum="{{$resim->durum}}"><i class="fas fa-spell-check"></i></a>
                    <a title="Sil" class="mb-1 btn btn-sm btn-outline-danger delete-click"
                    id="{{ $resim->id }}"><i class="fas fa-trash-alt"></i></a>
                 </td>
               
                
                
                 <td>{{$resim->name}}</td>                
                 <td>{{Carbon\Carbon::parse($resim->created_ad)->format('d.m.Y')}}</td>
                 <td>{{$resim->getKim->name}}</td>
                 <td>@if($resim->durum==0) Onay Bekliyor @else Onaylandı @endif</td>
            </tr>
                
            @endforeach
          </tbody>
        </table>

      </div>

      <!-- /.card-body -->
    </div>
  </section>
  <!-- /.content -->
  <div class="modal" id="deleteModal">
    <div class="modal-dialog modal-md ">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h5 class="modal-title">Video Sil</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>


            <div class="modal-body" id="body">

                <p>Seçmiş olduğunuz video silinecektir, Onaylıyormusunuz?</p>

            </div>


            <div class="modal-footer">
                <form method="POST" action="{{ route('resimDelete') }}">
                    @csrf
                    <input type="hidden" name="id" id="delete_id" />
                    <button id="deleteBtn" type="submit" class="btn btn-primary">Sil</button>
                </form>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button>
            </div>


        </div>


    </div>
  </div>
  <div class="modal" id="deleteAllModal">
    <div class="modal-dialog modal-md ">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h5 class="modal-title">Tüm Videoları Sil</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>


            <div class="modal-body" id="body">

                <p>Tüm Videolar silinecektir, Onaylıyormusunuz?</p>

            </div>


            <div class="modal-footer">

              <a type="button" href="{{route('videoAllDelete')}}" class=" btn btn-primary">Sil</a>

                <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button>
            </div>


        </div>


    </div>
  </div>
  <div class="modal" id="onayModal">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header  bg-info">
                <h5 class="modal-title">Video Onayla</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="body">

              <form method="POST" action="{{ route('videoOnay') }}">
                @csrf
                <input type="hidden" name="onay_id" id="onay_id" />
            
                <div class="form-row">
                   
                  
                      <div class="form-group col-12 text-center">                        
                        <div class="embed-responsive embed-responsive-4by3">
                            <iframe id="resimurl" class="embed-responsive-item" src=""></iframe>
                          </div>
                      </div>
                        <div class="form-group col-12 text-center">                        
                         <p><a class="btn btn-sm" href="" target="_blank" id="resimurl2" >Videoyu izlemek için tıklayın...</a></p>
                      </div>
                <div class="form-group col-12">
                  <label for="title">Video Dosyası</label>
                <input class="form-control" type="file" name="mfile">
                </div>
                  <div class="col-12 mb-2">
                    <select class="form-control durum" name="durum" id="durum" required>
                      <option value="">Seçim Yapınız</option>
                      <option value="0">Yayından Kaldır</option>
                      <option value="1">Yayınla</option>
                     </select>

                  </div>
                  <div class="col-12">
                    <button id="onayBtn" type="submit" class="btn btn-primary">Onayla</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button>
                  </div>

                </div>
            </form>

            </div>


            <div class="modal-footer">


            </div>


        </div>


    </div>
  </div>
</div>

@endsection
@section('css')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{asset('back')}}/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="{{asset('back')}}/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="{{asset('back')}}/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
    <!-- daterange picker -->
    <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>

    $(function() {
        $('.delete-click').click(function() {
            id = $(this)[0].getAttribute('id');
            $('#delete_id').val(id);
            $('#deleteModal').modal('show');
        });
        $('.deleteAll-click').click(function() {
            $('#deleteAllModal').modal('show');
        });
        // $('.onay-click').click(function() {

        //     id = $(this)[0].getAttribute('id');
        //     durum = $(this)[0].getAttribute('durum');
        //     $('#durum').val(durum).change();
        //     $('#onay_id').val(id);
        //     $('#onayModal').modal('show');
        // });
        $('.onay-click').click(function(){
            id = $(this)[0].getAttribute('id');
            durum = $(this)[0].getAttribute('durum');
          $.ajax({
             type: 'GET',
                   url: '{{route('resimEdit')}}',
                   data: {
                       id: id
                   },
                   success:function(data)
                   {
                //   console.log(data);
                            $('#id').val(data.id);                         
                             
                            $("#resimurl").attr("src", data.url);
                             $("#resimurl2").attr("href",data.url); 
                            $(".formbtn").text("Güncelle");
                            $('#durum').val(durum).change();
                             $('#onay_id').val(id);
                  }

           });
          
            $('#onayModal').modal('show');


       });

    });
    </script>
 <script>
    $(document).ready(function(){
        $("#linkdiv").hide();
    });
    </script>  
<script>
    $(document).ready(function(){
        $('#customRadio2').click(function(){
           
            $("#linkdiv").show();
            $("#videodiv").hide();
        });
    });
    </script>
    <script>
        $(document).ready(function(){
            $('#customRadio1').click(function(){
               
                $("#linkdiv").hide();
                $("#videodiv").show();
            });
        });
        </script>

<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 = "Video Dosyanızı buraya sürükleyip bırakınız!!";
    Dropzone.options.dropzone =
        {
            uploadMultiple:false,
            parallelUploads: 1,
            maxFilesize: 100,
            maxFiles: 1,
            renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();
                return time+file.name;
            },
            acceptedFiles: ".mp4,.mpeg-2,.mov,.avi,.mkv,.wmv,.webm,.html5",
            addRemoveLinks: true,
            timeout: 8000000,
            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: '',
                        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.');
                    
                    setTimeout(function(){
                        document.location = './video';
                    },3000);
                
               
                
            },
            error: function(data)
            {
                console.log(data)
                
                $('#mesaj').html('Dosyanız yüklenirken hata oluştu, lütfen bekleyiniz.');
                setTimeout(function(){
                    document.location = './video';
                 },3000);
               
                
            }
            

        };
</script>
<!-- DataTables  & Plugins -->
<script src="{{asset('back')}}/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="{{asset('back')}}/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="{{asset('back')}}/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="{{asset('back')}}/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="{{asset('back')}}/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="{{asset('back')}}/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="{{asset('back')}}/plugins/jszip/jszip.min.js"></script>
<script src="{{asset('back')}}/plugins/pdfmake/pdfmake.min.js"></script>
<script src="{{asset('back')}}/plugins/pdfmake/vfs_fonts.js"></script>
<script src="{{asset('back')}}/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="{{asset('back')}}/plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="{{asset('back')}}/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>





@include('layouts.table')


@endsection