@extends('layouts.app')
@section('style')

@endsection

@section('modal')
@endsection

@section('content')
    {{-- <input id="file-input" type="file" accept="video/*">

    //ไม่เหมือนกัน --}}
    {{-- <video id="video" width="300" height="300" controls></video> --}}
<div class="row m-0">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-body p-4">
                @if(webconfig('comname')=="endocapture")
                    <video id="video" src="{{$vdo_url}}" controls autoplay loop style="width:100%"></video>
                @else
                    @php
                        $exp = explode('vdo',$vdo_url);
                        $vdo_url = hostname('vdo'.$exp[1]);
                    @endphp
                    <video id="video" src="{{$vdo_url}}" controls autoplay loop style="width:100%"></video>
                @endif
            </div>
        </div>
        <div class="row m-0 mt-4">
            <div class="col-lg-12 p-0">
                <div class="card">
                    <div class="card-body">
                        <div class="row m-0">
                            <div class="col-lg-9">
                                <div class="row m-0">
                                    <div class="col-lg-12 h1">
                                        <b>Patient Detail</b>
                                    </div>
                                </div>
                                <div class="row m-0">

                                    <div class="col-lg-auto h3"><b>HN : </b>{{$case->case_hn}}</div>
                                    <div class="col-lg-auto h3"><b>Name : </b>{{$json->patientname}}</div>
                                    <div class="col-lg-auto h3"><b>Age : </b>{{$json->age}}</div>
                                    <div class="col-lg-auto h3"><b>Gender : </b>{{$gender}}</div>
                                </div>
                                <div class="row m-0">
                                    <div class="col-lg-6 h3">
                                        <b>Endoscopist : </b> {{$json->doctorname}}
                                    </div>
                                    <div class="col-lg-6 h3">
                                        <b>Procedure : </b> {{$json->procedurename}}
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <button id="button" class="btn btn-info w-100 h-100"><i class="fas fa-camera icon-4x"></i></button>
                            </div>
                        </div>

                        <div class="col-lg-12 mt-3">
                            <a href="{{url("loadpic/$id")}}" class="btn btn-primary w-100">submit</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-body p-4" data-spy="scroll">
                <div id="pic_list"></div>
            </div>
        </div>
    </div>
</div>
<div style="display: none">
    <canvas id="canvas"></canvas>
</div>

<input type="hidden" name="" id="path_img" value="{{url('../ScreenRecord')}}">

    @endsection
    @section('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>



    <script>
        const input         = document.getElementById('file-input')
        const video         = document.getElementById('video')
        const videoSource   = document.createElement('source')
        const button        = document.getElementById('button')
        const canvas        = document.getElementById('canvas')
        const txtInp        = document.getElementById('imageData')

        // input.addEventListener('change', function() {
        //     const files = this.files || []

        //     if (!files.length) return

        //     const reader = new FileReader()
        //     reader.onload = function (e) {
        //         videoSource.setAttribute('src', e.target.result)
        //         video.appendChild(videoSource)
        //         video.load()
        //         video.play()
        //     };
        //     reader.onprogress = function (e) {
        //         console.log('progress: ', Math.round((e.loaded * 100) / e.total))
        //     };
        //     reader.readAsDataURL(files[0])
        // });
        var path_img    = $("#path_img").val();
        $('#button').click(function(){
            canvas.width = 1570;
            canvas.height = 883;
            var ctx = canvas.getContext('2d');


            // ctx.beginPath();
            // ctx.rect(0, 0, 1570, 883);
            // ctx.fillStyle = "black";
            // ctx.fill();


            // ctx.drawImage(video, 0, 0, $('#video').width(), $('#video').height())

            console.log(video);
            ctx.drawImage(video,0, 0,1570,883);
            var dataURL = canvas.toDataURL('image/png')
            $.post('{{ url('camera') }}', {
                event   : 'takephoto',
                datapic : dataURL,
                scope   : "vdo",
                hn      : '{{$case->case_hn}}',
                case_id : "{{ $id }}"
                }, function(data, status) {
                    console.log(dataURL);
                    var json_name = JSON.parse(data)
                var numtext = $("#num_img").text();
                $("#num_img").text(parseInt(numtext) + 1);
                var number =  $("#num_img").text();
                console.log(path_img+"\\"+json_name.picname);
                $("#pic_list").prepend("<img src='" + path_img+"/"+json_name.picname +"' class='imgnew w-100'><br><br><div class='count_img'>"+number+"</div>");
            });
        });
    </script>
@endsection