@extends('dashboard.layouts.master')

@section('css')
<!-- Sweet Alert -->
    <link href="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css">
<style type="text/css">
    .bg-easy{
        background-color: #F0ECE2 !important;
        /*border: 1px solid !important;*/
    }
    .bg-mid{
        background-color: #ACDBDF !important;
    }

    .bg-good{
        background-color: #dfdfe4 !important;
    }

    .text-black{
        color: #000000 !important;
    }
</style>
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">اسئلة المحاضرات</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item active">السؤال رقم {{$data->id}}</li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">

                    <div class="col-lg-12 dragable-card modal-btn-card" >
                        <div class="card text-black bg-good">
                            <div class="card-body ">
                                <blockquote class="card-blockquote mb-0" >
                                    <p><img width="30px" src="{{$data->student->profile_image_full_path}}"> <a target="_blank" href="{{route('admin.student-management.show', ['student_management' => $data->student->id])}}">{{ $data->student->name }}</a> <span style="float: left;">{{$data->created_from}}</span></p>
                                     <img width="100%" src="{{$data->image_full_path}}" class="ques-img img" alt="">
                                    <div class="review-des" style="margin-bottom: 20px;">
                                        <p>{{$data->question}}</p>
                                    </div>
                                    <footer class="blockquote-footer font-12 text-black">
                                        <cite title="Source Title" >{{$data->statusText()}} <span class="degree" style="float: left;">
                                            <!-- <a href="#" class="btn btn-danger"> رفض</a> -->
                                        </span></cite>
                                    </footer>
                                </blockquote>
                            </div>
                        </div>
                    </div>

                    @foreach($data->replies as $reply)
                    <div class="col-lg-12 dragable-card modal-btn-card" >
                        <div class="card text-black bg-good">
                            <div class="card-body ">
                                <blockquote class="card-blockquote mb-0" >
                                    <p><img width="30px" src="{{$data->sender}}"> {{ $reply->sender->name }} <span style="float: left;">{{$reply->created_from}}</span></p>
                                    @if($reply->audio)
                                    <audio controls >
                                      <source src="{{$reply->audio_full_path}}" type="audio/wav">
                                    </audio>
                                    @endif
                                    @if($reply->image)
                                     <img width="100%" src="{{$reply->image_full_path}}" class="ques-img img" alt="">
                                    @endif
                                    <div class="review-des" style="margin-bottom: 20px;">
                                        <p>{{$reply->answer}}</p>
                                    </div>
                                    <footer class="blockquote-footer font-12 text-black">
                                        <cite title="Source Title" >{{$reply->statusText()}} <span class="degree" style="float: left;">
                                            <a class="btn btn-danger delete-confirm" type="button" href="{{route('admin.lecture-questions.reply.destroy', $reply->id)}}" aria-haspopup="true" aria-expanded="false">
                                                {{trans('labels.delete')}}
                                            </a>
                                            @if($reply->canBeUpdated())
                                            <a class="btn btn-info" type="button" href="{{route('admin.lecture-questions.reply.edit', $reply->id)}}" aria-haspopup="true" aria-expanded="false">
                                                {{trans('labels.update')}}
                                            </a>
                                            @endif
                                        </span></cite>
                                    </footer>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                    @endforeach

                    <form id="reply" action="{{route('admin.lecture-questions.reply', $data->id)}}" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('patch')

                        <div class="row">
                            <button type="button" onclick="startRecording(this);">record</button>
                              <button  type="button" onclick="stopRecording(this);" disabled>stop</button>
                            
                              <!-- <h2>Recordings</h2> -->
                              <ul id="recordingslist"></ul>
<!--                               <h2>Log</h2>
 -->                                <pre id="log" style="display:none"></pre>
{{--                            <div class="form-group col-md-12">--}}
{{--                                <label>مقطع صوتي</label>--}}
{{--                                <input type="file" class="form-control" name="audio"/>--}}
{{--                            </div>--}}
                            <div class="form-group col-md-12">
                                <label>اضف صورة</label>
                                <input id="aFile_upload" type="file" class="form-control" name="image"/>
                                <div id="approvedFiles" style="color:red"></div>
                            </div>
                            <div class="form-group col-md-12">
                                <label>اكتب الرد</label>
                                <textarea class="form-control" name="reply"></textarea>

                            </div>
                            <input name="page" value="{{request('page')}}" type="hidden" />
                            <div class="form-group col-md-12 ">
                                <button type="submit" class="btn btn-primary"> @lang('labels.update')</button>
                                <a class="btn btn-danger refuse-confirm" type="button" href="{{route('admin.lecture-questions.reject', $data->id). '?page='.request('page')}}" aria-haspopup="true" aria-expanded="false">
                                    {{trans('labels.refuse')}}
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div> <!-- end col -->
    </div>
@endsection

@section('script')

<script>
  function __log(e, data) {
    log.innerHTML += "\n" + e + " " + (data || '');
  }

  var audio_context;
  var recorder;

  function startUserMedia(stream) {
    var input = audio_context.createMediaStreamSource(stream);
    __log('Media stream created.');

    // Uncomment if you want the audio to feedback directly
    //input.connect(audio_context.destination);
    //__log('Input connected to audio context destination.');

    recorder = new Recorder(input);
    __log('Recorder initialised.');
  }

  function startRecording(button) {
          try {
      // webkit shim
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
        // navigator.getUserMedia =  navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia;
      window.URL = window.URL || window.webkitURL;

      audio_context = new AudioContext;
    //   getAudioContext().resume();
      __log('Audio context set up.');
      __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
    } catch (e) {
      alert('No web audio support in this browser!');
    }

    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
      __log('No live audio input: ' + e);
    });

    // navigator.mediaDevices
    //   .getUserMedia({audio: true})
    //   .then((stream) => {
    //     /* use the stream */
    //     startUserMedia();
    //   })
    //   .catch((err) => {
    //     /* handle the error */
    //   });
    
    // recorder && recorder.record();
    // button.disabled = true;
    // button.nextElementSibling.disabled = false;
    // __log('Recording...');

    setTimeout(function(){ 
        recorder && recorder.record();
        button.disabled = true;
        button.nextElementSibling.disabled = false;
        __log('Recording...');
    }, 500);
  }

  function stopRecording(button) {
    recorder && recorder.stop();
    button.disabled = true;
    button.previousElementSibling.disabled = false;
    __log('Stopped recording.');

    // create WAV download link using audio data blob
    createDownloadLink();

    recorder.clear();
    // recorder.stop();
  }

  function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
      var url = URL.createObjectURL(blob);
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');
      var rm = document.createElement('a');
      var input = document.createElement('input');
      var fd = $('form');

      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      rm.href = '#';
      rm.className = 'btn btn-danger remove-audio fa fa-times';
      rm.innerHtml = 'remove audio';
      li.appendChild(au);
      li.appendChild(hf);
      li.appendChild(rm);
      input.setAttribute("type", "hidden");
      input.setAttribute("name", "audio");

        var reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function() {
            var base64data = reader.result;
            input.setAttribute("value", base64data);
        }

        li.appendChild(input);
        recordingslist.appendChild(li);
      var filename = new Date().toISOString();

      // $('form').append("audio_data",blob, filename);

      // console.log($('form').serializeArray());
    });
  }

  window.onload = function init() {
    // try {
    //   // webkit shim
    //   window.AudioContext = window.AudioContext || window.webkitAudioContext;
    //   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
    //   window.URL = window.URL || window.webkitURL;

    //   audio_context = new AudioContext;
    // //   getAudioContext().resume();
    //   __log('Audio context set up.');
    //   __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
    // } catch (e) {
    //   alert('No web audio support in this browser!');
    // }

    // navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
    //   __log('No live audio input: ' + e);
    // });
  };
</script>
<script src="{{asset('dashboard/recorder/dist/recorder.js')}}"></script>
<script src="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.js') }}"></script>

<script>
    $('.delete-confirm').click(function (event) {
        event.preventDefault();
        const url = $(this).attr('href');
        console.log(10);
        Swal.fire({
            title: "{{trans('labels.are_you_sure_deleting')}}",
            text: "{{trans('labels.you_wont_be_able_to_revert_this')}}",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "{{trans('labels.cancel')}}",
            confirmButtonColor: "#02a499",
            cancelButtonColor: "#ec4561",
            confirmButtonText: "{{trans('labels.yes_delete')}}"
        }).then(function (result) {
            if (result.value) {
                console.log(20);
                Swal.fire({
                    title: "{{trans('labels.deleted')}}",
                    text: "",
                    type: "success",
                    confirmButtonText: "{{trans('labels.ok')}}"
                });
                $('<form action="'+url+'" method="post"> @csrf @method('delete')</form>').appendTo('body').submit();
            }
        });
    });

    $('.refuse-confirm').click(function (event) {
        event.preventDefault();
        const url = $(this).attr('href');
        console.log(10);
        Swal.fire({
            title: "{{trans('labels.are_you_sure_deleting')}}",
            text: "{{trans('labels.you_wont_be_able_to_revert_this')}}",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "{{trans('labels.cancel')}}",
            confirmButtonColor: "#02a499",
            cancelButtonColor: "#ec4561",
            confirmButtonText: "{{trans('labels.yes_delete')}}"
        }).then(function (result) {
            if (result.value) {
                console.log(20);
                Swal.fire({
                    title: "{{trans('labels.deleted')}}",
                    text: "",
                    type: "success",
                    confirmButtonText: "{{trans('labels.ok')}}"
                });
                $('<form action="'+url+'" method="post"> @csrf @method('patch')</form>').appendTo('body').submit();
            }
        });
    });
    
    $('#recordingslist').on('click', '.remove-audio', function(e){
        
        e.preventDefault();
        $(this).parent().remove(); 
    });
    
    $("#aFile_upload").on("change", function (e) {

        var count=1;
        var files = e.currentTarget.files; // puts all files into an array
        var approvedHTML = "";
    
        // call them as such; files[0].size will get you the file size of the 0th file
        for (var x in files) {
    
            var filesize = ((files[x].size/1024)/1024).toFixed(4); // MB
    
            if (files[x].name != "item" && typeof files[x].name != "undefined") { 
    
                // if (filesize > 5) {
                    
                //     $(this).val('');
    
                //     approvedHTML =  'الملف المرفوع اكبر من المساحة المسموحة 5 ميجابيت';
                
                // }
    
                count++;
            }
        }
        $("#approvedFiles").text(approvedHTML);
    
    });
</script>
@endsection