@extends('layouts.frontend')
@section('content')
<link href="{{ asset('assets/bsetec/static/css/front/style.css') }}" rel="stylesheet">
<link href="{{ asset('assets/bsetec/static/css/front/sub-style.css') }}" rel="stylesheet">
<link href="{{ asset('assets/bsetec/static/css/front/common.css') }}" rel="stylesheet">
<style type="text/css">
.form-group{ margin:25px 0px; }
.leftnopad{padding-left:0px !important;} 
</style>
<div class="create-course">
<div class="container">
<div class="row">
    <div class="col-lg-12">
            @include('course.courseheader')
        </div>
    <div class="col col-sm-3 multi_development">
      @include('course.createsidebar')
    </div>
<!--<div class="col col-lg-9">

      <div class="lach_dev resp-tab-content course_tab"> 
        <div class="slider_divsblocks">
          <div>
            {!! Form::open(array('url'=>'course/updatecourse', 'method' => 'post', 'class'=>'form-horizontal saveLabel','files' => true , 'parsley-validate'=>'','novalidate'=>' ')) !!}
            {!! Form::hidden('course_id', $course->course_id )  !!}
            {!! Form::hidden('step', $step )  !!}
            <div class="col_space">
              <div class="lach_dev resp-tab-content course_tab"> 
              <div id="test_error"></div>
              <div id="video_div"></div>
              <div id="video_up">
                <div id="video_prograss"></div>
                <input id="testVideo" type="file" name="testVideo" data-url="{!! url('course/testvideo/'.$course->course_id) !!}" />
              </div>
              </div>
            </div>
            {!! Form::close() !!}

          </div>
        </div>
      </div> 
      
    </div> -->
<div class="col-xs-12 col-sm-9">
    <div class="block2 clearfix">
    <div class="promo_block">
    <h2> {!! Lang::get('core.Test_Video')!!}</h2>
    <!-- <p>{!! Lang::get('core.test_video')!!}:</p> -->
    <!-- <a href="#">Test Video Guide</a> -->
    </div>
    <div class="subblock">
    <div class="video_block">
    <label>{!! Lang::get('core.Video_Preview') !!}:</label>
    <div class="block3">

    <div class="text_block">
        <strong id="_link" style="display:none;">{!! Lang::get('core.test_video_txt')!!} »</strong>
    <div id="video_div" class="video_b">
    <div id="video_prograss"></div>
    <div id='_video'>
    @if(count($testvideos)>0)
    @if($course->test_video != NULL && $course->test_video != 0 && $testvideos['0']->processed !=0)
    @if($testvideos['0']->aws_url != NULL)
    <video id='my_video' class='video-js vjs-default-skin' controls preload='auto' width='570' height='264' data-setup='{}'><source src="{{ $testvideos['0']->aws_url.$filename.'.mp4' }}" type="video/mp4"><source src="{{ $testvideos['0']->aws_url.$filename.'.webm' }}" type="video/webm"><source src="{{ $testvideos['0']->aws_url.$filename.'.ogv' }}" type="video/ogg"></video>
    @else
    <video id='my_video' class='video-js vjs-default-skin' controls preload='auto' width='570' height='264' data-setup='{}' controlslist='nodownload' oncontextmenu='return false;'><source src="{{ asset('/uploads/videos/'.$filename.'.mp4') }}" type="video/mp4"><source src="{{ asset('/uploads/videos/'.$filename.'.webm') }}" type="video/webm"><source src="{{ asset('/uploads/videos/'.$filename.'.ogv') }}" type="video/ogg"></video>

    @endif
    @endif
    @endif
    
    @if(count($testvideos)>0)
@if($testvideos['0']->processed == 0 )
<div class="video_notification">{!! Lang::get('core.video_process')!!}</div>
@endif
@endif
    </div>
    </div>


    </div>
       <p><b>{!! Lang::get('core.test_video_hints') !!}</b></p>
       <p>{!! Lang::get('core.test_video_msg')!!}</p>
       </div>
       <div class="upload_type clearfix">
    <label>{!! Lang::get('core.edit_video')!!}:</label>
    <div class="format_type clearfix">
      <div class="format"> <span id="test_error">{!! Lang::get('core.video_use')!!}</span>
        <div class="progress progress-striped progress_upload" id="progress_bar" style="display:none;">
        <div class="progress-bar progress-bar-warning active" id="progress_bar_p"></div>
        <p id="file_name"></p>
        </div>
      </div> 
    </div>
    <div class="button-block clearfix">
      <div class="change_btn">
      <button id='cancel_btn' style="display:none;">{!! Lang::get('core.cancel')!!}</button>
        <input type="button"  style="display:none;" id="promo_delete" onClick='promo_delete();' value="{!! Lang::get('core.cancel')!!}" />
      </div>

      <div id="video_up"> 
        <div class="fileUpload btn btn-primary"> 
          <span>{!! Lang::get('core.Upload_video')!!}</span>  
          <input id="testVideo" type="file" name="testVideo" data-url="{!! url('course/testvideo/'.$course->course_id) !!}" class="upload"/>
        </div> 
      </div>
      {!! Form::hidden('course_id', $course->course_id,array('id'=>'course_id') )  !!}
      {!! Form::hidden('video_name', $filename ,array('id'=>'video_name') )  !!}
      {!! Form::hidden('step', $step,array('id'=>'step') )  !!}
      <input type='hidden' id='video_type' name='video_type' />
    </div>
    @php ( $youtube = \bsetecHelpers::ifInstalled('youtube') )
    @if($youtube>0)
    <div class="youtube_class">
        <label>{!! Lang::get('core.youtube_id') !!}</label>
        <span>{!! Lang::get('core.youtube_note')  !!}</span>
      <div class="you_btn"> <input type="button" value="ADD" id="click"> </div> 
      <div class="you_txt">
        <input type="text" value="{!! $course->youtube_id !!}" name="id" id="url_id" pattern="[a-zA-Z0-9_-]{11}" title="Something Went Wrong Please Check Your Yotube Id And Try Again !">
        <label id="youtube_error" style="display: none;color: red;"></label>
        </div>
      <div id="div_video"> </div>
    </div>
    @endif
    </div>
    </div>  
    </div>
    </div>
  </div>
</div>
</div>
</div>
<script type="text/javascript" src="{{ asset('assets/bsetec/js/plugins/fileupload/jquery.ui.widget.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/bsetec/js/plugins/fileupload/jquery.fileupload.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/bsetec/js/plugins/fileupload/jquery.fileupload-process.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/bsetec/js/plugins/fileupload/jquery.fileupload-validate.js') }}"></script>
<script type="text/javascript">
var uploadProcess = null;
var error = $("#test_error");
var progress_bar = $("#progress_bar");
var cancel_btn = $("#cancel_btn");
var progress_bar_p = $('#progress_bar_p');
var delete_btn = $("#promo_delete");
var video_div = $("#video_div");
var video_prograss = $('#video_prograss');
var courseID = $('#course_id').val();
var courseStep = $('#step').val();
var link_tag =  $('#_link');

$(document).ready(function(){
@if($course->test_video != NULL && $course->test_video != 0)
    delete_btn.show();
    $("#video_up").hide();
    link_tag.hide();
    video_div.addClass('video_upload');
    @else
    delete_btn.hide();
    $("#video_up").show();
    link_tag.show();
    @endif
 });
$(function () {
$('#testVideo').fileupload({
        dataType:'json',
        formData : {course_id:courseID,step:courseStep},
        add:function(e,data){
            var file=data.files[0];
            var uploadErrors = false;
            var acceptFileTypes = /(\.|\/)(mp4|flv|ogg|ogv|avi|wmv|x-ms-wmv|webm|ogx|x-msvideo)$/i;
            if((data.originalFiles[0]['type'].length || data.originalFiles[0]['type'].length==0) && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                error.text('{!! Lang::get("core.image_file_type_error")!!}').addClass('error_msg');
                return false;
            }
            if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
                error.text('{!! Lang::get("core.image_big_size")!!}').addClass('error_msg');
                return false;
            }
            uploadProcess = data.submit();
            link_tag.hide();
            video_prograss.show();
            progress_bar_p.css('width','0%');
            $("#progress_bar").show(); 
            $("#video_up").hide();
            $("#file_name").text(file.name);
            cancel_btn.show();
        },
        progress: function (e, data) {
            error.removeClass('error_msg').hide();
            var percentage = parseInt(data.loaded / data.total * 100,10);
            progress_bar_p.css('width',percentage+'%');
            video_prograss.html("{!! Lang::get('core.img_uploading')!!} "+ percentage + '%');
        },
        processfail: function (e, data) {
            file_name = data.files[data.index].name;
            error.text(data.files[data.index].error).addClass('error_msg');
        },
        done: function(e, data){
            error.removeClass('error_msg').hide();
            return_data = data.result;
            v_html = "";
            if(return_data.status){
                v_html +="<div class='video_notification'>"+return_data.video_path+"</div></div>";
                $('#video_name').val(return_data.video_name);
                $('#video_type').val(return_data.video_type);
            }else{
                error.addClass('error_msg').text("{!! Lang::get('core.uploading_failed')!!}");
            }
            video_prograss.html("{!! Lang::get('core.uploading_full')!!}");
            $("#video_up,#video_prograss").hide();
            $('#_video').html(v_html);
            video_div.addClass('video_upload');
            progress_bar_p.removeClass('active');
            $("#file_name").text("{!! Lang::get('core.video_completed')!!}");
            cancel_btn.hide();
            delete_btn.show();
    },
    });
    $('body').on('click','#cancel_btn', function (e) {
       uploadProcess.abort();
       $("#video_div").removeClass('video_upload');
       error.toggle();
       cancel_btn.hide();
       $('#_video').html("");
       link_tag.show();
       video_prograss.hide();
       $("#video_up,#progress_bar").toggle();
    });
});

function promo_delete() {
    video_name = $('#video_name').val();
    courseID = $('#course_id').val();
    $.ajax({
        url:'{!! url('').'/course/testvideo'!!}',
        data:{video_file:video_name,course_id:courseID},
        type:"DELETE",
        success:function(res){
            if(res == "success"){ 
             delete_btn.hide();
           video_prograss.hide();
           $("#video_div").removeClass('video_upload');
           $("#video_up,.text_block strong").toggle();
           $("#progress_bar").hide();
             error.show();

             $('#_video').html("");
             link_tag.show();
            } 
        },
        fail:function(){
            alert("error");
        }
    });    
}
</script>
<script type="text/javascript">

$( "#click" ).click(function() {

var video_id = $('#url_id').val();
if(video_id == '' || !(/^([a-zA-Z0-9_-]){11}$/.test(video_id)))
{
 $('#youtube_error').show();
 $('#youtube_error').html('Please Give Valid Youtube Id');
  return;
}

  $.get("{{url('checkyoutubeid')}}?video_id="+video_id)
  .done(function( data ) {
    if(data == "0")
    {
      $('#youtube_error').show();
      $('#youtube_error').html('Something Went Wrong Please Check Your Yotube Id And Try Again !');
      return false;
    }else{
      $('#youtube_error').hide();
      $('#youtube_error').html('');

      get_url = "{!! \URL::to('') !!}";
      var cid = $('#course_id').val();
        $.get( get_url+"/course/youtubeupload/"+video_id+"/"+cid)
        .done(function( data ) {
          if(data = 1)
          {
            toastr.success("Sucess", "Saved successfully");
            msg()
            $('#youtube_error').hide();
            location.reload();
          }
          else
          {
            /*toastr.error("Error", "Something went wrong please check your Yotube id and try again !");
            msg()*/
          $('#youtube_error').show();
          $('#youtube_error').html('Something Went Wrong Please Check Your Yotube Id And Try Again !');
          } 
        });
    }
  });
});

function msg(){
        toastr.clear();
        toastr.options = {
        "closeButton": true,
        "debug": false,
        "positionClass": "toast-bottom-right",
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "300",
        "timeOut": "300",
        "extendedTimeOut": "300",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
      }
}


 $( document ).ready(function() {
  var check_url = $('#url_id').val();
  get_url = "{!! \URL::to('') !!}";
  if(check_url != ''){
    var url = $('#url_id').val();
    $.post( get_url+"/api_youtube/getvideo.php", { videoid: url, type: "Download" })
    .done(function( data ) {
       var json = $.parseJSON(data);
        document.getElementById('div_video').innerHTML = '<video controls id="video_ctrl" width="400px" height="300px" controlslist="nodownload" oncontextmenu="return false;"><source src="'+get_url+'/api_youtube/'+json.url+'" type="video/mp4"></video>';
    });
  }
  });
</script>
<style>
.youtube_class {
    clear: both;
    padding-top: 10px;
}
.you_txt {
    float: left;
    margin-left: 11px;
    margin-top: 9px;
    width: 70.32%;
}
.youtube_class video {
    border: 3px solid #444;
    border-radius: 3px;
    height: auto;
    margin-top: 10px;
    padding: 0;
    width: 100%;
}
.you_btn > input {
    background-color: #428bca;
    border: medium none;
    border-radius: 3px;
    color: #fff;
    font-size: 16px;
    padding: 6px 10px;
    text-align: center;
    width: 80%;
}
.you_txt > input {
    border: 1px solid #e1e1e1;
    margin: 0;
    padding: 8px 10px;
    width: 100%;
}
</style>
@php ( $cnt = \bsetecHelpers::ifInstalled('rtl') )
@if($cnt!=1)
  <style>
  .you_btn {
    float: right;
    margin-top: 9px;
    width: 28%;
    margin-right: -9px;
}
  </style>
@endif
@stop