@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('userIndex'), 
                'pageName' => 'User List',
                'pageHeader'=> 'User 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>
                        </div>
                        <div class="body p-3">
                            <form  class="row custom form needs-validation" method="POST" action="{{ route('userUpdate') }}" enctype="multipart/form-data" name="UserInfo">
                                @csrf
                            <div class="row form-group mb-3">
                                <input type="text" hidden class="form-control" name="id" value="{{$userInfo?->id}}" />
                                <div class="col display-inline">
                                    <label class="form-label">Name</label>
                                    <input type="text" required class="form-control" placeholder="Name" name="name" value="{{$userInfo?->name}}" />
                                </div>
                                <div class="col">
                                    <label class="form-label">Email</label>
                                    <input type="email" required class="form-control" placeholder="E-mail" name="email" value="{{$userInfo?->email}}" />
                                </div>
                                <div class="col form-group">
                                    <label class="form-label">User Type <span class="required">*</span></label>
                                    <select class="form-control input-medium select2me"
                                                data-placeholder="Page Type..." name="user_type" required>
                                            <option value="">Select User Type</option>
                                            @foreach($userType as $key => $type)
                                                <option value="{{$key}}" {{!empty($userInfo->user_type) && $userInfo->user_type == $key ? 'selected' : ''}}>
                                                    {{$type}}</option>
                                            @endforeach
                                        </select>
                                </div>

                                <div class="col form-group">
                                    <label class="form-label">Status: <span class="required"> * </span></label>

                                        <select class="form-control input-medium select2me"
                                                data-placeholder="Status..." name="status" required>
                                            <option value="">Select Status</option>
                                            <option value="Y" {{!empty($userInfo->status) && $userInfo->status == 'Y' ? 'selected' : ''}}>Active</option>
                                            <option value="N" {{!empty($userInfo->status) && $userInfo->status == 'N' ? 'selected' : ''}}>Inactive</option>
                                        </select>

                                </div>
                            </div>

                            <div class="row form-group">
                                    <label class="form-label">Permissions: <span class="required"> * </span></label>
                                    <div class="col-md-12">
                                        <ul class="list-inline">
                                            @foreach($userPrivileges as $idx=>$item)
                                            <li class="list-inline-item">
                                            <input type="checkbox"  name="privileges[]" value="{{ $idx }}" {{!empty($userInfo->privileges) && ($userInfo->privileges != "null") && array_search($idx, json_decode($userInfo->privileges,true)) !== false ? 'checked' : ''}}>
                                            <label class="pe-3" for="{{$item}}">{{$item}}</label>
                                            </li>
                                                
                                            @endforeach
                                        </ul>
                                    </div>
                            </div>

                            <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">
                                        <input type="text" hidden  name="id" value="{{$userInfo?->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">
                                    </div>
                                </div>
                                <div class="col d-flex flex-column justify-content-end align-items-end">
                                    <button type="submit" class="btn btn-success btn-lg">Save</button>
                                </div>                              
                            </div> 
                        </form>
                        </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