@extends('layouts.app')
@include('includes.csslinks_common')
@section('content')
<div class="mainsectionbg col-12"></div>
<div class="container">
    <!-- Modal -->
    <div class="modal fade photocapturesec" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-body">
                    <form method="POST" action="{{ route('photo.store') }}" enctype="multipart/form-data" class="mb-0">
                        @csrf
                        <div class="videosec col-lg-12 col-md-12 col-sm-12 col-xs-12 px-0">
                            <video id="video" width="300" autoplay></video>
                            <div class="capturebtnsec col-lg-12 col-md-12 col-sm-12 col-xs-12 px-0">
                                <button type="button" onclick="takePhoto()" class="photocapbtn">Capture</button>
                                <button type="submit" class="photosubbtn" id="photosubmit" style="display:none;">Submit</button>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 px-0">
                            <canvas id="canvas" style="display:none;"></canvas>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 px-0">
                            <input type="file" name="photo" id="photoFile" style="display: none;" />
                        </div>
                    </form>

                    @if ($errors->any())
                        <div class="capturephotoerrmsg">
                            @foreach ($errors->all() as $error)
                                <p>{{ $error }}</p>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const photoFile = document.getElementById('photoFile');

    navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
        video.srcObject = stream;
    });

    function takePhoto() {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        const context = canvas.getContext('2d');
        context.drawImage(video, 0, 0);

        canvas.toBlob(blob => {
            const file = new File([blob], "photo.jpg", { type: "image/jpeg" });

            // Add file to input
            const container = new DataTransfer();
            container.items.add(file);
            photoFile.files = container.files;

            // alert("Photo captured. Click Submit to continue.");
            $('#photosubmit').click();
        });
    }
</script>
@include('includes.jslinks_common')
@endsection