@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>

                    <form id="reply" action="{{route('admin.lecture-questions.reply.update', $reply->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>
                            
                            <ul id="recordingslist"></ul>
                            <pre id="log" style="display:none"></pre>
                            @if($reply->audio)
                                <audio controls >
                                  <source src="{{$reply->audio_full_path}}" type="audio/wav">
                                </audio>
                                <a class="fa fa-times deleteRecord" href="#" data-action="{{route('admin.lecture-questions.reply.delete-record', $reply->id)}}"></a>
                            @endif
                            <div class="form-group col-md-12">
                                <label>اضف صورة</label>
                                <input type="file" class="form-control" name="image"/>
                                @if($reply->image)
                                 <img width="100%" src="{{$reply->image_full_path}}" class="ques-img img" alt="">
                                 <a class="fa fa-times deleteImage" href="#"  data-action="{{route('admin.lecture-questions.reply.delete-image', $reply->id)}}"></a>
                                @endif
                            </div>
                            <div class="form-group col-md-12">
                                <label>اكتب الرد</label>
                                <textarea class="form-control" name="reply">{{$reply->answer}}</textarea>

                            </div>
                            <div class="form-group col-md-12 ">
                                <button type="submit" class="btn btn-primary"> @lang('labels.update')</button>
                            </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) {
    recorder && recorder.record();
    button.disabled = true;
    button.nextElementSibling.disabled = false;
    __log('Recording...');
  }

  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();
  }

  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 {
        console.log(1);
      // webkit shim
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      window.URL = window.URL || window.webkitURL;
    console.log(2);
      audio_context = new AudioContext;
      __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();
            }
        });
    });
    
    $('.deleteRecord').on('click', function(event){
        
        event.preventDefault();
        const url = $(this).data('action');
        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();
            }
        });
    });
    
    $('.deleteImage').on('click', function(event){
        
        event.preventDefault();
        const url = $(this).data('action');
        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(); 
    });
</script>
@endsection