@extends('dashboard.layouts.master')

@section('css')
    <!-- DataTables -->
    <link href="{{ URL::asset('dashboard/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('dashboard/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Responsive datatable examples -->
    <link href="{{ URL::asset('dashboard/plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Sweet Alert -->
    <link href="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css">
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">{{$data['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['title']}}</li>
        </ol>
    </div>
    <div class="col-sm-6">
        <div class="float-right d-md-block">
             @if(request()->status == 'mine' && $data['questions']->count() <= 3)
                <a class="btn btn-success" href="{{route('admin.lecture-questions.get-my-questions')}}">
                    اسحب اسئلة جديدة
                </a>
            @endif
        </div>
    </div>
@endsection

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

{{--                    <h4 class="mt-0 header-title">Buttons example</h4>--}}
{{--                    <p class="text-muted m-b-30">The Buttons extension for DataTables--}}
{{--                        provides a common set of options, API methods and styling to display--}}
{{--                        buttons on a page that will interact with a DataTable. The core library--}}
{{--                        provides the based framework upon which plug-ins can built.--}}
{{--                    </p>--}}

                    <div>عدد الاسئلة : {{$data['questions']->total()}}</div>

                     @if($data['questions']->count() > 0)

                        <div id="accordion">
                            @foreach($data['questions'] as $i => $question)
                            <div class="card mb-1">
                                <div class="card-header p-3" id="headingOne-{{$question->id}}">
                                    <h6 class="m-0 font-14" style="display: flex;justify-content: space-between;">
                                        <a href="#collapse-{{$question->id}}" class="text-dark" data-toggle="collapse"
                                                aria-expanded="true"
                                                aria-controls="collapse-{{$question->id}}">
                                           {{$question->id}} ({{$question->lecture->title}})
                                           
                                        </a>
                                        <span>{{$question->statusText()}} ({{$question->admin_id ? $question->admin->name : 'لا يوجد'}})</span>
                                    </h6>
                                </div>

                                <div id="collapse-{{$question->id}}" class="collapse @if($i == -1) show @endif"
                                        aria-labelledby="headingOne-{{$question->id}}" data-parent="#accordion">
                                    <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="{{$question->student->profile_image_full_path}}"> <a target="_blank" href="{{route('admin.student-management.show', ['student_management' => $question->student->id])}}">{{ $question->student->name }}</a> <span style="float: left;">{{$question->created_from}}</span></p>
                                                         <img width="100%" style="max-height:300px" src="{{$question->image_full_path}}" class="ques-img img" alt="">
                                                        <div class="review-des" style="margin-bottom: 20px;">
                                                            <p>{{$question->question}}</p>
                                                        </div>
                                                        <footer class="blockquote-footer font-12 text-black">
                                                            <cite title="Source Title" >{{$question->statusText()}} <span class="degree" style="float: left;">
                                                                <!-- <a href="#" class="btn btn-danger"> رفض</a> -->
                                                            </span></cite>
                                                        </footer>
                                                    </blockquote>
                                                </div>
                                            </div>
                                        </div>
                    
                                        @foreach($question->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="{{$question->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', ['id' => $question->id, 'type' => 'samepage'])}}" 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 class="recordingslist"></ul>
                    <!--                               <h2>Log</h2>
                     -->                                <pre class="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 type="file" class="aFile_upload form-control" name="image"/>
                                                    <div class="approvedFiles" style="color:red"></div>
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <label>اكتب الرد</label>
                                                    <textarea class="form-control" name="reply"></textarea>
                    
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <label>متاح لباقي الطلبة</label>
                                                    <input type="checkbox" @if($question->is_public) checked @endif value="1"name="is_public" />

                                                </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', $question->id). '?page='.request('page')}}" aria-haspopup="true" aria-expanded="false">
                                                        {{trans('labels.refuse')}}
                                                    </a>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div style="width: 100%;overflow-x: auto;display: block;">
                        {!!$data['questions']->withQueryString()->links('pagination::bootstrap-4')!!}
                        </div>
                    @else
                        <div style="text-align:center">There is no Questions to reply</div>
                    @endif
                </div>
            </div>
        </div> <!-- end col -->
    </div> <!-- end row -->
@endsection

@section('script')
    @if(!request()->testnew)
    <!-- Required datatable js -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <!-- Buttons examples -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.buttons.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/pdfmake.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/vfs_fonts.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.html5.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.print.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.colVis.min.js') }}"></script>
    <!-- Responsive examples -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.responsive.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>

    <!-- Datatable init js -->
    <script src="{{ URL::asset('dashboard/assets/pages/datatables.init.js') }}"></script>


    <!-- Sweet-Alert  -->
    <script src="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.js') }}"></script>
    @endif

    <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;
              window.URL = window.URL || window.webkitURL;
        
              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);
            });

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($(button).parent());
        
            recorder.clear();
          }
        
          function createDownloadLink(element) {
            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);
                console.log( element.find('.recordingslist'));
                element.find('.recordingslist:first').append(li);
                // 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;
            //   __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++;
                }
            }
            $(this).parent().find('.approvedFiles').text(approvedHTML);
        
        });
    </script>
@endsection