@extends('layouts.master')

@section('title', 'Express54')

@section('content')
{{-- 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">


    <!-- Cropper.js CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" rel="stylesheet">
    <!-- Cropper.js JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script> --}}


    {{-- <form id="msform" method="POST" action="{{ route('applicationSubmit') }}" enctype="multipart/form-data"> --}}
    {{-- @csrf --}}

    <div class="form-group row">
        <label for="photopassportformat" class="col-sm-4 col-form-label text-end">@lang('messages.passportformatphoto')<span aria-hidden="true"
                class="required">*</span> :</label>
        <div class="col-sm-6">
            <input type="file" class="form-control" required id="photopassportformat" name="photopassportformat"
                accept=".jpeg,.jpg .png, .PNG,.JPEG,.JPG">
            <small class="text-danger" id="6photoValidationMessage6" style="display: none;">Please upload a valid
                file.</small>
            <input type="hidden" id="aspectRatio" name="aspectRatio">
            <canvas id="cropperCanvas" style="display: none;"></canvas>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="cropImageModal" tabindex="-1" role="dialog" aria-labelledby="cropImageModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="cropImageModalLabel">Crop Image</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="img-container">
                        <img id="imageToCrop" src="" alt="Image for cropping">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="cropButton">Crop</button>
                </div>
            </div>
        </div>
    </div>
    <div id="imageContainer"></div>


    <script>
        let cropper;
        const input = document.getElementById('photopassportformat');
        const image = document.getElementById('imageToCrop');
        const cropButton = document.getElementById('cropButton');

        const closeButton = document.querySelector('#cropImageModal .close');
        const cancelButton = document.querySelector('#cropImageModal .btn-secondary');

        function isImage2x2(image) {
            const inchesToPixels = 300; // 1 inch = 300 pixels at 300 DPI
            return image.width === 2 * inchesToPixels && image.height === 2 * inchesToPixels;
        }

        // input.addEventListener('change', function(event) {
        //     const file = event.target.files[0];
        //     if (file) {
        //         const reader = new FileReader();

        //         reader.onload = function(e) {
        //             image.src = e.target.result;
        //             checkAspectRatio();
        //         };
        //         reader.readAsDataURL(file);
        //     }
        // });

        input.addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = new Image();
                    img.onload = function() {
                        if (isImage2x2(img)) {
                            image.src = e.target.result;
                            $('#cropImageModal').modal('show');
                        }
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        $('#cropImageModal').on('shown.bs.modal', function() {
            cropper = new Cropper(image, {
                aspectRatio: 1,
                viewMode: 2,
                autoCropArea: 1,
                movable: false,
                // cropBoxResizable: false
            });
        }).on('hidden.bs.modal', function() {
            // if (cropper) {
            cropper.destroy();
            cropper = null;
            // input.value = '';
            // }
        });

        cropButton.addEventListener('click', function() {
            const canvas = cropper.getCroppedCanvas({
                width: 600, // 2 inches * 300 DPI
                height: 600, // 2 inches * 300 DPI
            });
            uploadImage(canvas);
        });

        function uploadImage(canvas) {
            canvas.toBlob(function(blob) {
                const url = URL.createObjectURL(blob);
                const reader = new FileReader();
                reader.readAsDataURL(blob);

                reader.onloadend = function() {
                    const base64data = reader.result;
                    $('#cropImageModal').modal('hide');
                    console.log(base64data);

                    const img = new Image();
                    img.src = base64data;
                    img.onload = function() {
                        const imageContainer = document.getElementById('imageContainer');
                        imageContainer.appendChild(img);
                    };
                    console.log(img);

                };
            });
        }

        // function checkAspectRatio() {
        //     if (image.naturalWidth === 600 && image.naturalHeight === 600) {
        //         // Upload the image directly
        //         uploadImage(image);
        //     } else {
        //         // Show the crop modal
        //         $('#cropImageModal').modal('show');
        //     }
        // }

        // Close the modal without uploading the image
        closeButton.addEventListener('click', function() {
            input.value = '';
            $('#cropImageModal').modal('hide');
        });

        // Close the modal without uploading the image
        cancelButton.addEventListener('click', function() {
            input.value = '';
            $('#cropImageModal').modal('hide');

        });
    </script>







@endsection