@extends('admin.masterv2')
@section('styleSheet')

        <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/cropper/cropper.min.css') }}"/> 
    <!-- END PAGE LEVEL STYLES -->
@endsection
@section('content')
<div class="page-content-wrapper">
        <div class="page-content">
            @include('admin.includesV2.adminHeader', 
            [
                'pageRoute' => route('studentList'), 
                'pageName' => 'Student List',
                'pageHeader'=> 'Student Info',
            ])


            <div class="row" class="adminContent">
                <div class="col-md-12">
                    <div class="titleContainer mb-5">
                        <div class="header p-2">
                            <div class="row">
                                <div class="col">
                                    <i class="fa fa-thumb-tack"></i> Student Info
                                </div>
                                <div class="col">
                                    <a href="{{ route('downloadStudentProfile', $studentInfo->id) }}" target="_blank" class="btn btn-info rounded-0 pull-right">
                                        Download PDF
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="body p-3">
                            @include('frontend.include.studentProfileBlockEdit', [
                                'form_type' => 'admin',
                                'action' => route('studentUpdate'),
                                'studnetInfo'=> $studentInfo,
                            ])

                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="titleContainer my-5">
                        <div class="header p-2">
                            <div class="row">
                                <div class="col">
                                    <i class="fa fa-thumb-tack"></i> Change Password
                                </div>
                            </div>
                        </div>
                        <div class="body p-3">
                            <div class="row adminContent">
                                <div class="col-md-12">
                                    <form id="changePassword" class="form needs-validation" method="POST" action="{{ route('changePasswordStudent') }}" novalidate>
                                        @csrf
                                        <div class="row ">
                                            <div class="col">
                                                <div class="form-group">
                                                    <label class="form-label" for="password">Password</label>
                                                    <input type="password" class="form-control" id="password" name="password" required>
                                                    <input type="text" hidden  name="id" value="{{$studentInfo?->id}}" />
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="form-group">
                                                    <label class="form-label" for="password_confirmation">Confirm Password</label>
                                                    <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required>
                                                </div>
                                            </div>
                                            <div class="col d-flex flex-column justify-content-end align-items-end">
                                                <button type="submit" class="btn btn-success btn-lg">Update Password</button>
                                            </div>                              
                                        </div> 
                                    </form>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</div>


@endsection

@section('customJs')

<script src="{{ asset('assets/plugins/jqueryvalidate/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/plugins/cropper/cropper.min.js') }}"></script>

<script type="text/javascript" src="{{ asset('assets/plugins/jspdf/jspdf.umd.min.js') }}"></script>
@include('frontend.include.studentFormValidationScript'); 



<script>
$(document).ready(function () {


    $("#changePassword").validate({
        rules: {
            password: {
                required: true,
                minlength: 6
            },
            password_confirmation: {
                required: true,
                minlength: 6,
                equalTo: "#password"
            }
        },
        messages: {
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long"
            },
            password_confirmation: {
                required: "Please provide same password",
                minlength: "Your password must be at least 6 characters long",
                equalTo: "Please enter the same password as above"
            }
        },
        errorElement: "div",
        errorPlacement: function (error, element) {
            var feedbackElement = element.siblings('.invalid-feedback');
            if (feedbackElement.length) {
                feedbackElement.html(error.html());
            } else {
                error.addClass("invalid-feedback");
                element.closest(".form-group").append(error);
            }
        },
        // errorPlacement: function (error, element) {
        //     error.addClass("invalid-feedback"); // Bootstrap's error class
        //     element.closest(".form-group").append(error);
        // },
        highlight: function (element) {
            $(element).addClass("is-invalid").removeClass("is-valid");
        },
        unhighlight: function (element) {
            $(element).addClass("is-valid").removeClass("is-invalid");
        },
        submitHandler: function (form) {
            // Add 'was-validated' class to trigger Bootstrap validation
            form.classList.add('was-validated');
            form.submit(); // Perform the default form submission
        }
    });
});



</script>    
    <script>
$(document).ready(function() {
    var cropper;
    var $img = $('#cropImage');
    var maxSizeInKB = 512;

    $('#uploadImage').on('change', function(event) {
        var file = event.target.files[0];
        if (!file) return;

        var reader = new FileReader();
        reader.onload = function(e) {
            $img.attr('src', e.target.result).show();

            // Initialize Cropper.js
            cropper = new Cropper($img[0], {
                aspectRatio: 1 / 1,
                viewMode: 1,
                autoCropArea: 1,
                scalable: true,
                zoomable: true,
            });

            $('#cropButton').show();
        };
        reader.readAsDataURL(file);
    });

    $('#cropButton').on('click', function() {
        var croppedCanvas = cropper.getCroppedCanvas({
            fillColor: '#fff',
        });

        // Resize the image to limit its size to 512KB
        function resizeImage(canvas, maxSizeInKB) {
            var quality = 0.9;
            var resizedDataUrl;

            do {
                resizedDataUrl = canvas.toDataURL('image/jpeg', quality);
                var fileSizeInKB = dataURLToBlob(resizedDataUrl).size / 1024;
                quality -= 0.05;
            } while (fileSizeInKB > maxSizeInKB && quality > 0.1);

            return resizedDataUrl;
        }

        var resizedDataUrl = resizeImage(croppedCanvas, maxSizeInKB);
        // Display the resized image inside the div
        $('#resizedImageContainer').html('<img src="' + resizedDataUrl + '" alt="Resized Image" style="max-width: 100%;">');

        // Store the resized image data in the hidden input
        $('#croppedImageData').val(resizedDataUrl);

        // Show the Upload/Save button
        $('#uploadButton').show();
    });

    $('#uploadButton').on('click', function(e) {
        var croppedImageData = $('#croppedImageData').val();
        
        // Check if cropped image data is present
        if (!croppedImageData) {
            alert('Please crop the image before submitting.');
            e.preventDefault(); // Prevent form submission
        }

        // Submit the form
        $('#student_profile_block_form').submit();
    });

    $('#student_profile_block_form').on('submit', function(e) {
        var croppedImageData = $('#croppedImageData').val();
        
        // Prevent submission if no cropped image data
        // if (!croppedImageData) {
        //     alert('Please crop the image before submitting.');
        //     e.preventDefault(); // Prevent form submission
        // }

        // Additional form validation can go here
    });

    // Utility function to convert dataURL to Blob
    function dataURLToBlob(dataUrl) {
        var arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
    }
});



    </script>
@endsection

@section('documentJquery')

@endsection