@extends('layouts.frontend')

@section('title')
    عرض ملف Dicom
@endsection
 
 @section('vendor_css') 
@endsection
 
@section('custom_css')
    <link href="{{ URL('/dicom_viewer/cornerstone.min.css') }}" rel="stylesheet">
@endsection
 
@section('content')  
<div class="row mt-5 small_width page_header">
	<div class="col-12 col-md-12 col-lg-12">
		<h2 class="title mr-2"> عرض ملف Dicom</h2>  
        <a href="#" onclick="window.history.back();" class="float-right">رجوع
        <svg id='arrow-left'><use xlink:href="{{ URL('/temp_frontend/assets/fonts/icons.svg#arrow-left') }}"></use></svg></a> 
    </div>
</div> 

<div class="row mt-3 small_width ">
	<div class="col-12 col-md-12 col-lg-12">
 		<div class="card pl-5 pr-5  "> 
	        <div class="card-body">   
        		<form class="form-horizontal" method="POST" action="{{ route('frontend-store-patient') }}">
                <div class="card-block">      
				            <div style="width:100%;height: 400px;position:relative;color: white;display:inline-block;border-style:solid;border-color:black;"
				                 oncontextmenu="return false"
				                 class='disable-selection noIbar'
				                 unselectable='on'
				                 onselectstart='return false;'
				                 onmousedown='return false;'>
				                <div id="dicomImage"
				                     style="width:100%;height: 100%;top:0px;left:0px; position:absolute">
				                </div>
				            </div> 
							</div>
                </div>   
                {{ csrf_field() }}
            </form> 
					</div>  
	    </div>
    </div>
</div>
 
@endsection

 
 
 @section('page_vendor_js') 
	<!-- include the cornerstone library -->
	<script src="{{ URL('/dicom_viewer/cornerstone.min.js') }}"></script>
	<SCRIPT src="{{ URL('/dicom_viewer/cornerstoneMath.min.js') }}"></SCRIPT>
	<SCRIPT src="{{ URL('/dicom_viewer/cornerstoneTools.min.js') }}"></SCRIPT>

	<!-- include the dicomParser library as the WADO image loader depends on it -->
	<script src="{{ URL('/dicom_viewer/dicomParser.min.js') }}"></script> 

	<!-- uids -->
	<script src="{{ URL('/dicom_viewer/dicomfile/uids.js') }}"></script>

@endsection



@section('page_level_js')  
<!-- Lines ONLY required for this example to run without building the project -->
<script>window.cornerstoneWADOImageLoader || document.write('<script src="{{ URL('/dicom_viewer/cornerstoneWADOImageLoader.min.js') }}">\x3C/script>')</script>
<script src="{{ URL('/utils/initializeWebWorkers.js') }}"></script>

<script type="text/javascript">
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;

run_dicom();
    // this function gets called once the user drops the file onto the div
    function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();

        // Get the FileList object that contains the list of files that were dropped
        const files = evt.dataTransfer.files;

        // this UI is only built for a single file so just dump the first one
        file = files[0];
        const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);
        loadAndViewImage(imageId);
    }

    function handleDragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
    }

    // Setup the dnd listeners.
    const dropZone = document.getElementById('dicomImage');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('drop', handleFileSelect, false);


    cornerstoneWADOImageLoader.configure({
        beforeSend: function(xhr) {
            // Add custom headers here (e.g. auth tokens)
            //xhr.setRequestHeader('x-auth-token', 'my auth token');
        },
        useWebWorkers: true,
    });

    let loaded = false;

    function loadAndViewImage(imageId) {
        const element = document.getElementById('dicomImage');
        const start = new Date().getTime();
        cornerstone.loadImage(imageId).then(function(image) { 
            const viewport = cornerstone.getDefaultViewportForImage(element, image); 
            cornerstone.displayImage(element, image, viewport);
            if(loaded === false) {
                cornerstoneTools.mouseInput.enable(element);
                cornerstoneTools.mouseWheelInput.enable(element);
                cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button
                cornerstoneTools.pan.activate(element, 2); // pan is the default tool for middle mouse button
                cornerstoneTools.zoom.activate(element, 4); // zoom is the default tool for right mouse button
                cornerstoneTools.zoomWheel.activate(element); // zoom is the default tool for middle mouse wheel

                cornerstoneTools.imageStats.enable(element);
                loaded = true;
            }

            function getTransferSyntax() {
                const value = image.data.string('x00020010');
                return value + ' [' + uids[value] + ']';
            }

            function getSopClass() {
                const value = image.data.string('x00080016');
                return value + ' [' + uids[value] + ']';
            }

            function getPixelRepresentation() {
                const value = image.data.uint16('x00280103');
                if(value === undefined) {
                    return;
                }
                return value + (value === 0 ? ' (unsigned)' : ' (signed)');
            }

            function getPlanarConfiguration() {
                const value = image.data.uint16('x00280006');
                if(value === undefined) {
                    return;
                }
                return value + (value === 0 ? ' (pixel)' : ' (plane)');
            }

            document.getElementById('transferSyntax').textContent = getTransferSyntax();
            document.getElementById('sopClass').textContent = getSopClass();
            document.getElementById('samplesPerPixel').textContent = image.data.uint16('x00280002');
            document.getElementById('photometricInterpretation').textContent = image.data.string('x00280004');
            document.getElementById('numberOfFrames').textContent = image.data.string('x00280008');
            document.getElementById('planarConfiguration').textContent = getPlanarConfiguration();
            document.getElementById('rows').textContent = image.data.uint16('x00280010');
            document.getElementById('columns').textContent = image.data.uint16('x00280011');
            document.getElementById('pixelSpacing').textContent = image.data.string('x00280030');
            document.getElementById('bitsAllocated').textContent = image.data.uint16('x00280100');
            document.getElementById('bitsStored').textContent = image.data.uint16('x00280101');
            document.getElementById('highBit').textContent = image.data.uint16('x00280102');
            document.getElementById('pixelRepresentation').textContent = getPixelRepresentation();
            document.getElementById('windowCenter').textContent = image.data.string('x00281050');
            document.getElementById('windowWidth').textContent = image.data.string('x00281051');
            document.getElementById('rescaleIntercept').textContent = image.data.string('x00281052');
            document.getElementById('rescaleSlope').textContent = image.data.string('x00281053');
            document.getElementById('basicOffsetTable').textContent = image.data.elements.x7fe00010 && image.data.elements.x7fe00010.basicOffsetTable ? image.data.elements.x7fe00010.basicOffsetTable.length : '';
            document.getElementById('fragments').textContent = image.data.elements.x7fe00010 && image.data.elements.x7fe00010.fragments ? image.data.elements.x7fe00010.fragments.length : '';
            document.getElementById('minStoredPixelValue').textContent = image.minPixelValue;
            document.getElementById('maxStoredPixelValue').textContent = image.maxPixelValue;
            const end = new Date().getTime();
            const time = end - start;
            document.getElementById('totalTime').textContent = time + "ms";
            document.getElementById('loadTime').textContent = image.loadTimeInMS + "ms";
            document.getElementById('decodeTime').textContent = image.decodeTimeInMS + "ms";

        }, function(err) {
            alert(err);
        });
    }

    cornerstone.events.addEventListener('cornerstoneimageloadprogress', function(event) {
        const eventData = event.detail;
        const loadProgress = document.getElementById('loadProgress');
        loadProgress.textContent = `Image Load Progress: ${eventData.percentComplete}%`;
    });

    const element = document.getElementById('dicomImage');
    cornerstone.enable(element);

    document.getElementById('selectFile').addEventListener('change', function(e) {
        // Add the file to the cornerstoneFileImageLoader and get unique
        // number for that file
        
        
    });

    document.getElementById('toggleModalityLUT').addEventListener('click', function() {
        const applyModalityLUT = document.getElementById('toggleModalityLUT').checked;
        console.log('applyModalityLUT=', applyModalityLUT);
        const image = cornerstone.getImage(element);
        const viewport = cornerstone.getViewport(element);
        if(applyModalityLUT) {
            viewport.modalityLUT = image.modalityLUT;
        } else {
            viewport.modalityLUT = undefined;
        }
        cornerstone.setViewport(element, viewport);
    });

    document.getElementById('toggleVOILUT').addEventListener('click', function() {
        const applyVOILUT = document.getElementById('toggleVOILUT').checked;
        console.log('applyVOILUT=', applyVOILUT);
        const image = cornerstone.getImage(element);
        const viewport = cornerstone.getViewport(element);
        if(applyVOILUT) {
            viewport.voiLUT = image.voiLUT;
        } else {
            viewport.voiLUT = undefined;
        }
        cornerstone.setViewport(element, viewport);
    });

    document.getElementById('toggleCollapseInfo').addEventListener('click', function() {
        if (document.getElementById('collapseInfo').style.display === 'none') {
            document.getElementById('collapseInfo').style.display = 'block';
        } else {
            document.getElementById('collapseInfo').style.display = 'none';
        }
    });

	function run_dicom() { 
	    var blob = null;
			var xhr = new XMLHttpRequest();
			xhr.open("GET", "{{url($file)}}");
			xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
			xhr.onload = function()
			{
		    blob = xhr.response;//xhr.response is now a blob object
				const file = new File([blob], "file");  
				console.log(file);
	      const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);
	      loadAndViewImage(imageId);
			}
			xhr.send();
	}
</script>
@endsection