@php
    $js_name = $bodytag = str_replace(['[',']'], ['',''], $name);
@endphp
<div id="image_{{ $formId }}_{{ $js_name }}" class="image_input">
    <img class="img-thumbnail img-fluid" id="photo_{{ $formId }}_{{ $js_name }}" src="{{ $value == '' ? '/img/default.png' : $value }}"><br/>
    <button type="button" class="btn btn-primary" id="showCamera_{{ $formId }}_{{ $js_name }}">Új kép</button><br/>
    <input type="hidden" name="{{ $name }}" form="{{ $formId }}" value="{{ $value }}" />
    <input class="form-control" type="file" id="imageLoader_{{ $formId }}_{{ $js_name }}" lang="hu"/><br/>
</div>

<div id="camera_{{ $formId }}_{{ $js_name }}" class="image_input" style="display: none;">
    <video autoplay playsinline class="hidden w-100" id="video__{{ $formId }}_{{ $js_name }}"></video><br/>
    <button type="button" class="btn btn-primary" id="takePhoto_{{ $formId }}_{{ $js_name }}">Elkészít</button>
		<canvas id="canvas_{{ $formId }}_{{ $js_name }}" class="d-none"></canvas>
</div>

@push('scripts')
<script>
var imageCapture_{{ $formId }}_{{ $js_name }};
var mediaStream_{{ $formId }}_{{ $js_name }};
var canvas_{{ $formId }}_{{ $js_name }} = document.querySelector("#canvas_{{ $formId }}_{{ $js_name }}");
var video_{{ $formId }}_{{ $js_name }} = document.querySelector('video#video__{{ $formId }}_{{ $js_name }}');

navigator.mediaDevices.getUserMedia({
    video: { width: 1024, height: 768, facingMode: { exact: "environment" } },
    audio: false
})
.then(stream => {
    video_{{ $formId }}_{{ $js_name }}.srcObject = stream;
    video_{{ $formId }}_{{ $js_name }}.classList.remove('hidden');
})
.catch(error => {
    console.log('getUserMedia error: ', error);
});

$('button#takePhoto_{{ $formId }}_{{ $js_name }}').on('click', function(){
    canvas_{{ $formId }}_{{ $js_name }}.width = video_{{ $formId }}_{{ $js_name }}.videoWidth;
    canvas_{{ $formId }}_{{ $js_name }}.height = video_{{ $formId }}_{{ $js_name }}.videoHeight;
    canvas_{{ $formId }}_{{ $js_name }}.getContext("2d").drawImage(video_{{ $formId }}_{{ $js_name }}, 0, 0, canvas_{{ $formId }}_{{ $js_name }}.width, canvas_{{ $formId }}_{{ $js_name }}.height);

    var dataURL = canvas_{{ $formId }}_{{ $js_name }}.toDataURL();

    $('#image_{{ $formId }}_{{ $js_name }}').show();
    $('#camera_{{ $formId }}_{{ $js_name }}').hide();
    $('#photo_{{ $formId }}_{{ $js_name }}').attr('src', dataURL);
    $('input[name="{{ $name }}"][form="{{ $formId }}"]').val(dataURL).trigger("change");
});

$('#showCamera_{{ $formId }}_{{ $js_name }}').on('click', function(){
    $('#image_{{ $formId }}_{{ $js_name }}').hide();
    $('#camera_{{ $formId }}_{{ $js_name }}').show();
});

$('#imageLoader_{{ $formId }}_{{ $js_name }}').change(function(e){
    resize_{{ $formId }}_{{ $js_name }}(e.target.files[0]).then(function (blob) {
        $('#photo_{{ $formId }}_{{ $js_name }}').attr('src', URL.createObjectURL(blob));
        toDataURL(URL.createObjectURL(blob), function(dataUrl) {
            $('input[name="{{ $name }}"][form="{{ $formId }}"]').val(dataUrl).trigger("change");
        })
    });
});

</script>
@endpush