@extends("access.visa-success.theme")
@section("content")
<div class="card">
    <div class="card-header">
        Visa Success Post Image
    </div>
    <div class="card-body" style="height: 1400px;">
        <div class="image-cropper">
            @if(isset($_POST['student_name'])) <h3 class="student-name">{{$_POST['student_name']}}</h3> @endif
            @if(isset($_POST['program'])) <h3 class="program-name">{{$_POST['program']}}</h3> @endif
            @if(isset($tempImagePath))
            <div class="resizable-wrapper">
                <img src="{{ asset('storage/access/' . $tempImagePath) }}" alt="Uploaded Image" class="student_image resizable-image">
            </div>
            @endif
            <div class="background-image">
                <img src="{{asset('access/visa-success-new/assets/nz-bg.png')}}" width="100%" class="bg" />
            </div>
        </div>
        <button id="captureButton" class="btn btn-success form-control py-3">Capture and Save Image</button>
        <input type="file" id="generatedImageInput" style="display: none;" />
        <a id="downloadLink" style="display: none;" download>Download File</a>
    </div>
</div>
@endsection
@push("js")
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <script>
        $.file = "";

        function captureAndUploadImage() {
            const imageCropper = document.querySelector('.image-cropper');
            html2canvas(imageCropper).then(function(canvas) {
                const imageData = canvas.toDataURL('image/png');
                const blobData = dataURItoBlob(imageData);
                const formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('branch_name', '{{ isset($_POST["branch_name"])?$_POST["branch_name"]:"" }}');
                formData.append('student_name', '{{ isset($_POST["student_name"])?$_POST["student_name"]:"" }}');
                formData.append('generated_image', blobData, 'captured_image.png');
                fetch('{{route("generated.upload")}}', {
                        method: 'POST',
                        body: formData,
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log(data);
                        showSuccessModal(data.file);
                        // alert('Image captured, saved, and uploaded successfully!');
                        // downloadFile(data.file);
                        $.file = data.file;
                    })
                    .catch(error => console.error('Error:', error));
            });
        }
        document.getElementById('captureButton').addEventListener('click', captureAndUploadImage);

        function downloadFile() {
            const downloadLink = document.getElementById('downloadLink');
            downloadLink.href = '{{base_url()}}/storage/access/' + $.file;
            downloadLink.click();
        }

        function dataURItoBlob(dataURI) {
            const byteString = atob(dataURI.split(',')[1]);
            const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
            const ab = new ArrayBuffer(byteString.length);
            const ia = new Uint8Array(ab);
            for (let i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }
            return new Blob([ab], {
                type: mimeString
            });
        }

        function showSuccessModal(filePath) {
            $('#successModalImage').attr('src', '{{ base_url() }}/storage/access/' + filePath);
            $('#successModal').modal('show');
        }

        function refreshPage() {
            location.reload(true);
        }


        $(function() {
            $(".resizable-image").resizable({
                aspectRatio: true, // Maintain aspect ratio
                handles: "se", // Resize from bottom-right corner
            });
            $(".resizable-wrapper").draggable();
        });
    </script>
@endpush