@extends('frontend.master')
@section('stylesheet')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/cropper/cropper.min.css') }}"/> 
@endsection
@section('content')
    <section id="UserInfoPage">
        <div class="container my-5">

            <style>
                .splash-image {
                  max-width: 100%;
                  max-height: 100%;
                  border-radius: 10px;
                  position: relative;
                }
                .modal-backdrop {
                  background-color: rgba(0, 0, 0, 0.7) !important;  /*Transparent black background */
                }
                .modal-content {
                  border: none;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  position: relative;
                  padding:20px;
                }
                .btn-close {
                  position: absolute;
                  top: 10px;
                  right: 10px;
                  z-index: 1055; /* Ensure it is above the image */
                  color: white;
                  background-color: #fff; /* Add a semi-transparent background for better visibility */
                  border-radius: 50%;
                  padding: 5px;
                  opacity: 0.8;
                }
                .btn-close:hover {
                  background-color: rgba(0, 0, 0, 0.8);
                }
              </style>


<div class="modal fade" id="employeeModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <form class="custom form needs-validation" id="employeeForm" method="POST">
          @csrf
          <input type="hidden" name="_method" id="formMethod">
          <input type="hidden" name="id" id="student_id">
          
        

          <div class="modal-header">
            <h5 class="modal-title" id="modalTitle">Add Employee</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
  
          <div class="modal-body">
            <div class="row">
                <div class="col form-group">
                    <label class="form-label">First Name</label>
                    <input type="text" class="form-control" placeholder="First name" name="first_name" id="first_name" required />
                </div>
                <div class="col  form-group">
                    <label class="form-label">Last Name</label>
                    <input type="text" class="form-control" placeholder="Last name" name="last_name" id="last_name" required />
                </div>
                {{-- <div class="col-md-6 form-group">
                    <label class="form-label">বাংলায় নাম</label>
                    <input type="text" class="form-control" placeholder="বাংলায় নাম" name="bn_name" id="bn_name" />
                </div> --}}
            </div>

            <div class="row">
                <div class="col form-group">
                    <label class="form-label">Email</label>
                    <input type="email" class="form-control" placeholder="E-mail" name="email" id="email">
                </div>
                <div class="col form-group" id="emailConfirmationField">
                    <label class="form-label">Confirm Email</label>
                    <input type="email" class="form-control" placeholder="E-mail" name="email_confirmation" id="email_confirmation">
                </div>
                <div class="col form-group">
                    <label class="form-label">Country <span class="importantText">*</span></label>
                    <select class="form-control" name="country" id="country" required>
                        <option value="">Select Country</option>
                        @foreach(config('countries') as $code => $name)
                            <option value="{{ $code }}" {{ $code === 'BD' ? 'selected' : '' }}>
                                {{ $name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col form-group">
                    <label class="form-label" for="nationality">Nationality <span class="importantText">*</span></label>
                    <input type="text" name="nationality" id="nationality" required class="form-control" placeholder="Nationality *">
                </div>
                
            </div>
            <div class="row">
                <div class="col form-group">
                    <label class="form-label" for="contact_number">Mobile <span class="importantText">*</span></label>
                    <input type="text"  name="contact_number" id="contact_number" required class="form-control" placeholder="Mobile Number *">
                </div>
                <div class="col form-group">
                    <label class="form-label" for="nid_birth">NID <span class="importantText">*</span></label>
                    <input type="text" name="nid_birth" id="nid_birth" required class="form-control" placeholder="NID Number *">
                </div>
            </div>

            <div class="row">              
                <div class="col form-group">
                    <label class="form-label">Date of Birth</label>
                    <input type="date" class="form-control" placeholder="dd/mm/yyyy" name="dob" id="dob" required />
                </div>
                
                <div class="col form-group">
                    <label class="form-label">Gender</label>
                    <select class="form-control" id="gender" name="gender">
                        <option value="">Select Gender</option>
                        <option value="1">Male (পুরুষ)</option>
                        <option value="2">Female (মহিলা)</option>
                    </select>
                </div>
            </div>


            {{-- <div class="row mb-3">
                <div class="col form-group">
                    <label class="form-label">Permanet Address</label>
                    <input type="text" class="form-control" placeholder="Permanent Address" name="permanent_address" id="permanent_address" />
                </div>
            </div> --}}
            <div class="row">
                <div class="col orm-group">
                    <label class="form-label">Present Address</label>
                    <input type="text" class="form-control" placeholder="Present Address" name="present_address" id="present_address" required />
                </div>
            </div>
            <div class="row">
                <div class="col form-group">
                    <label class="form-label">Post Code</label>
                    <input type="text" class="form-control" placeholder="Post Code" name="post_code" id="post_code" required />
                </div>
                <div class="col form-group">
                    <label class="form-label">City</label>
                    <input type="text" class="form-control" placeholder="city" name="city" id="city" required />
                </div>
                {{-- <div class="col form-group">
                    <label class="form-label">Country</label>
                    <select class="form-control" name="country" id="country" required>
                        <option value="">Select Country</option>
                        @foreach(config('countries') as $code => $name)
                            <option value="{{ $code }}">{{ $name }}</option>
                        @endforeach
                    </select>
                </div> --}}
                
            </div>
            <div class="row" id="passwordFields">
                <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>
                    </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> 
          </div>
  

          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" id="submitBtn">
              Save
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  

  <div class="row">
    <div class="col-md-3">
        @include('frontend.organization.organizationSidebar')
    </div>
    <div class="col-md-9">
        @if(request('courseId'))
            <div class="row">
                <div class="col">
                    <strong>{{ $course->title }}</strong> - <strong><a href="{{ route('courseDetails', ['course_id' => $course->id]) }}" target="_blank">See course details</a></strong>
                </div>
            </div>
            <div class="row light-text">
                <div class="col">
                    <strong>Start Date:</strong> {{ $course->startDate->format('d M, Y') }}
                </div>
                <div class="col text-center">
                    <strong>End Date:</strong> {{ $course->endDate->format('d M, Y') }}
                </div>
                @if(request('paymentDetailsId'))
                <div class="col text-end">
                    <strong>Reg Date:</strong> {{ $paymentDetails->created_at }}
                </div>
                @endif
            </div>
            <div class="row light-text">
                <div class="col">
                    <strong>Course Fee/student:</strong> {{ $course->amount }} BDT
                </div>
            </div>
        @endif
        @include('frontend.include.backendAlert')

        
        @if(request('courseId'))
            @if($orders->isEmpty())
                <p class="infoBlockText text-center mt-5">Select employee/student and click the "Register/ Update" button to register for the course</p>
            @else
                <p class="infoBlockText text-center mt-5">You can not update the list after the payment</p>
            @endif
        @endif

        @if(!request('courseId'))
            <button class="btn btn-success mb-5" id="addEmployeeBtn">
                Add Employee
            </button>
        @else

            <form method="POST" action="{{ route('submitSelectedStudentForCourse') }}">
                @csrf
                <input type="hidden" name="courseId" value="{{ request('courseId') }}"> 
                <input type="hidden" name="paymentDetailsId" value="{{ request('paymentDetailsId') }}"> 
        @endif
                

                <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        @if(request('courseId'))
                            <th scope="col"></th>
                        @endif
                        <th scope="col">Id</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Mobile Number</th>
                        @if(!request('courseId'))
                            <th scope="col">Action</th>
                        @endif
                    </tr>
                    </thead>
                    <tbody>
                        @forEach($allStudent as $student)
                            {{-- if payment maded only registerd student will show --}}
                            @if(request('courseId') && request('paymentDetailsId') && !$orders->isEmpty())
                                @if(in_array($student->id, $registeredStudentId ?? []) )

                                @else
                                    @continue
                                @endif
                            @endif
                            {{-- if payment maded only registerd student will show --}}
                        <tr>
                            @if(request('courseId') || request('paymentDetailsId'))
                            <td>
                                <input
                                    type="checkbox"
                                    name="selectedStudentId[]"
                                    value="{{ $student->id }}"
                                    @if(
                                        request('paymentDetailsId') &&
                                        in_array($student->id, $registeredStudentId ?? [])
                                    )
                                        checked
                                    @endif
                                    @if(request('courseId') && !$orders->isEmpty())
                                        disabled
                                    @endif
                                >
                            </td>
                            @endif
                            <td>{{$student->id}}</td>
                            <td>{{$student->first_name}} {{$student->last_name}}</td>
                            <td>{{$student->email}}</td>
                            <td>{{$student->contact_number}}</td>
                            @if(!request('courseId'))
                            <td>
                                <button
                                    class="btn btn-primary edit-btn"
                                    data-id="{{ $student->id }}"
                                    data-first_name="{{ $student->first_name }}"
                                    data-last_name="{{ $student->last_name }}"
                                    data-bn_name="{{ $student->bn_name }}"
                                    data-nid_birth="{{ $student->nid_birth }}"
                                    data-email="{{ $student->email }}"
                                    data-contact_number="{{ $student->contact_number }}"
                                    data-gender="{{ $student->gender }}"
                                    data-dob="{{ $student->dob }}"
                                    data-nationality="{{ $student->nationality }}"
                                    data-permanent_address="{{ $student->permanent_address }}"
                                    data-present_address="{{ $student->present_address }}"
                                    data-post_code="{{ $student->post_code }}"
                                    data-city="{{ $student->city }}"
                                    data-country="{{ $student->country }}"
                                >
                                    Edit
                                </button>

                            </td>
                            @endif
                        </tr>
                        
                        @endforeach
                    </tbody>
                </table>
                @if(request('courseId') && $orders->isEmpty())
                <button type="submit" class="btn btn-primary mt-3">
                    Register / Update
                </button>
                </form>
                @endif
            </div>
        </div>
            
        </div>
    </section>

@endsection
@section('customScript')
<script src="{{ asset('assets/plugins/jqueryvalidate/jquery.validate.min.js') }}"></script>
@if(request('courseId'))
<script>
    const submitBtn = document.querySelector('button[type="submit"]');
    const checkboxes = document.querySelectorAll('input[name="selectedStudentId[]"]');

    checkboxes.forEach(cb => {
        cb.addEventListener('change', () => {
            submitBtn.disabled = ![...checkboxes].some(c => c.checked);
        });
    });

</script>
@endif
<script>
    function setNationality() {
        if ($('#country').val() === 'BD') {
            $('#nationality').val('Bangladeshi');
            $('label[for="nid_birth"]').html('NID <span class="importantText">*</span>');
            $('#nid_birth').attr('placeholder', 'NID number');
        } else {
            $('#nationality').val('');
            $('label[for="nid_birth"]').html('Passport <span class="importantText">*</span>');
            $('#nid_birth').attr('placeholder', 'Passport number');
        }
    };
    $.validator.addMethod("nidPassport", function(value, element) {
    var country = $('#country').val();

        if (country === 'BD') {
            // NID must be 10, 13, or 17 digits
            return this.optional(element) || /^\d{10}$|^\d{13}$|^\d{17}$/.test(value);
        } else {
            // Passport: just require non-empty string
            return this.optional(element) || value.trim().length > 0;
        }
    }, "Please enter a valid NID/Passport");

    // Custom validator for mobile number
    $.validator.addMethod("bdMobile", function(value, element) {
        var country = $('#country').val();
        value = value.trim();

        if (country === 'BD') {
            // Valid formats:
            // +8801715195499  (starts with +880, 13 digits total)
            // 01715195499     (starts with 0, 11 digits total)
            return this.optional(element) || /^\+880\d{10}$/.test(value) || /^0\d{10}$/.test(value);
        } else {
            // Other countries: digits, +, - allowed, at least 5 characters
            return this.optional(element) || /^[\d+\-]{5,}$/.test(value);
        }
    }, "Please enter a valid mobile number");

    $(document).ready(function () {
        // $('#employeeModal').on('shown.bs.modal', function () {
        //     setNationality();
        // });
        // On page load
        // On country change
        $('#country').on('change', function () {
            setNationality();
        });



        function initEmployeeFormValidation(isAdd = true) {
    const $form = $('#employeeForm');

    // Destroy any previous validator instance
    if (isAdd && $form.data('validator')) {
        $form.removeData('validator');
        $form.off('.validate');
    }

    // Initialize validator
    $form.validate({
        rules: {
            email: { required: true, email: true },
            email_confirmation: {
                required: function () {
                    return $("#emailConfirmationField").is(":visible");
                },
                email: true,
                equalTo: "#email"
            },
            contact_number: {
                required: true,
                bdMobile: true
            },
            nid_birth: {
                required: true,
                nidPassport: true
            },
            password: {
                required: function () { return $("#passwordFields").is(":visible"); },
                minlength: 6
            },
            password_confirmation: {
                required: function () { return $("#passwordFields").is(":visible"); },
                equalTo: "#password"
            },
        },
        messages: {
            email: { required: "Email is required", email: "Enter valid email address" },
            contact_number: { required: "Phone number required" },
            password: { required: "Password is required", minlength: "Password must be at least 6 characters" },
            password_confirmation: { required: "Confirm Password is required", equalTo: "Passwords do not match" },
        },
        ignore: [], // validate hidden fields in modal
        errorClass: "is-invalid",
        validClass: "is-valid",
        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);
            }
        },
        highlight: function (element) { $(element).addClass("is-invalid").removeClass("is-valid"); },
        unhighlight: function (element) { $(element).addClass("is-valid").removeClass("is-invalid"); },
        submitHandler: function (form) { form.submit(); }
    });

    // Reset form validation and field states
    if (isAdd) {
        $form[0].reset();
        $form.validate().resetForm();
        $form.find('.form-control').removeClass("is-valid is-invalid");
    }
}


    const modal = new bootstrap.Modal($('#employeeModal')[0]);
    
        const passwordFields = $('#passwordFields');
        const password = $('#password');
        const passwordConfirmation = $('#password_confirmation');
        const form = $('#employeeForm');
    
        const modalTitle = $('#modalTitle');
        const submitBtn = $('#submitBtn');
        const formMethod = $('#formMethod');
    
        // INPUTS
        const idInput = $('#student_id');
        const first_name = $('#first_name');
        const last_name = $('#last_name');
        // const bn_name = $('#bn_name');
        const nid_birth = $('#nid_birth');
        const email = $('#email');
        const contact_number = $('#contact_number');
        const gender = $('#gender');
        const dob = $('#dob');
        const nationality = $('#nationality');
        // const permanent_address = $('#permanent_address');
        const present_address = $('#present_address');
        const post_code = $('#post_code');
        const city = $('#city');
        const country = $('#country');
    
        // ---------- ADD ----------
        $('#addEmployeeBtn').on('click', function () {
            form.attr('action', "{{ route('studentNew') }}");
            formMethod.val('POST');
    
            modalTitle.text('Add Employee');
            submitBtn.text('Create');
    
            //form[0].reset();
            idInput.val('');
    
            email.prop('readonly', false).prop('required', true);
            $("#emailConfirmationField").show();
            $('#email_confirmation').prop('required', true);

            //email_confirmation.prop('required', true);
    
            passwordFields.css('display', 'flex');
            password.prop('required', true);
            passwordConfirmation.prop('required', true);
    
            $("#employeeForm").validate().resetForm();
            $("#employeeForm .form-control").removeClass("is-valid is-invalid");
            
            initEmployeeFormValidation(true);   // ✅ initialize validator
            form[0].reset();               // reset values
            setNationality();              // ✅ update nationality & NID/Passport
            $('#employeeModal').modal('show');
           // modal.show();
        });
    
        // ---------- EDIT ----------
        $('.edit-btn').on('click', function () {
            //initEmployeeFormValidation();
            const btn = $(this);
    
            form.attr(
                'action',
                "{{ route('studentUpdate', ':id') }}".replace(':id', btn.data('id'))
            );
    
            formMethod.val('POST');
    
            modalTitle.text('Edit Employee');
            submitBtn.text('Update');
    
            idInput.val(btn.data('id'));
            first_name.val(btn.data('first_name'));
            last_name.val(btn.data('last_name'));
            nid_birth.val(btn.data('nid_birth'));
            // bn_name.val(btn.data('bn_name'));
            email.val(btn.data('email'));
            contact_number.val(btn.data('contact_number'));
            dob.val(btn.data('dob'));
            nationality.val(btn.data('nationality'));
            gender.val(btn.data('gender') || '');
            // permanent_address.val(btn.data('permanent_address'));
            present_address.val(btn.data('present_address'));
            post_code.val(btn.data('post_code'));
            city.val(btn.data('city'));
            country.val(btn.data('country'));
    
            email.prop('readonly', true).prop('required', false);
    
            //emailConfirmationField.hide();
            $("#emailConfirmationField").hide();
            $('#email_confirmation').prop('required', false);

            //email_confirmation.prop('required', false);
    
            passwordFields.hide();
            password.prop('required', false);
            passwordConfirmation.prop('required', false);
    
            $("#employeeForm").validate().resetForm();
            $("#employeeForm .form-control").removeClass("is-valid is-invalid");
            initEmployeeFormValidation(false); // ✅ reinitialize validator after populating form
            //setNationality();             // ✅ update NID/Passport labels
            $('#employeeModal').modal('show');
            //modal.show();
        });

        

        

    });
    </script>

       
{{-- <script>
    document.addEventListener("DOMContentLoaded", function () {

        const modal = new bootstrap.Modal(document.getElementById('employeeModal'));
        
    
        const passwordFields = document.getElementById('passwordFields');
        const password = document.getElementById('password');
        const passwordConfirmation = document.getElementById('password_confirmation');
        const form = document.getElementById('employeeForm');
    
        const modalTitle = document.getElementById('modalTitle');
        const submitBtn = document.getElementById('submitBtn');
        const formMethod = document.getElementById('formMethod');
    
        // INPUTS
        const idInput = document.getElementById('student_id');
        const first_name = document.getElementById('first_name');
        const last_name = document.getElementById('last_name');
        //const bn_name = document.getElementById('bn_name');
        const nid_birth = document.getElementById('nid_birth');
        const email = document.getElementById('email');
        const contact_number = document.getElementById('contact_number');
        const gender = document.getElementById('gender');
        const dob = document.getElementById('dob');
        const nationality = document.getElementById('nationality');
        //const permanent_address = document.getElementById('permanent_address');
        const present_address = document.getElementById('present_address');
        const post_code = document.getElementById('post_code');
        const city = document.getElementById('city');
        const country = document.getElementById('country');
    
        // ---------- ADD ----------
        document.getElementById('addEmployeeBtn').addEventListener('click', function () {
            //setNationality();
            form.action = "{{ route('studentNew') }}";
            formMethod.value = "POST";
    
            modalTitle.textContent = "Add Employee";
            submitBtn.textContent = "Create";
            email.readOnly = false;
            email.required = true;
    
            form.reset();
            idInput.value = "";
            // IMPORTANT: Email editable and required for Add
            email.readOnly = false; // must be false
            email.required = true;  // must be true
            emailConfirmationField.style.display = 'block';
            email_confirmation.required = true;
            passwordFields.style.display = 'flex';
            password.required = true;
            passwordConfirmation.required = true;

            $("#employeeForm").validate().resetForm();
            $("#employeeForm .form-control").removeClass("is-valid is-invalid");
            modal.show();
        });
    
        // ---------- EDIT ----------
        document.querySelectorAll('.edit-btn').forEach(button => {
            button.addEventListener('click', function () {
                form.action = "{{ route('studentUpdate', ':id') }}".replace(':id', this.dataset.id);

                formMethod.value = "POST";
    
                modalTitle.textContent = "Edit Employee";
                submitBtn.textContent = "Update";
    
                idInput.value = this.dataset.id;
                first_name.value = this.dataset.first_name;
                last_name.value = this.dataset.last_name;
                nid_birth.value = this.dataset.nid_birth;
                bn_name.value = this.dataset.bn_name;
                email.value = this.dataset.email;
                contact_number.value = this.dataset.contact_number;
                dob.value = this.dataset.dob;
                nationality.value = this.dataset.nationality;
                gender.value = this.dataset.gender || "";
                permanent_address.value = this.dataset.permanent_address;
                present_address.value = this.dataset.present_address;
                post_code.value = this.dataset.post_code;
                city.value = this.dataset.city;
                country.value = this.dataset.country;

                email.readOnly = true;
                email.required = false;
                // Hide password fields for Edit
                emailConfirmationField.style.display = 'none';
                email_confirmation.required = false;
                passwordFields.style.display = 'none';
                password.required = false;
                passwordConfirmation.required = false;
                $("#employeeForm").validate().resetForm();
                $("#employeeForm .form-control").removeClass("is-valid is-invalid");
                modal.show();
            });
        });
    });
    </script> --}}
    
    
{{-- <script src="{{ asset('assets/plugins/cropper/cropper.min.js') }}"></script> --}}
<script type="text/javascript">
$(document).ready(function() {
    // // Check if there's a saved tab in localStorage
    // var savedTab = localStorage.getItem('activeTab');

    // if (savedTab) {
    //     // Remove 'active' class from all tabs and tab panes
    //     $('#nav-tab .nav-link').removeClass('active');
    //     $('.tab-pane').removeClass('show active');

    //     // Add 'active' class to the saved tab and its corresponding tab pane
    //     $('#' + savedTab).addClass('active');
    //     $($('#' + savedTab).data('bs-target')).addClass('show active');
    // }

    // // Add click event listener to each tab button
    // $('#nav-tab .nav-link').on('click', function() {
    //     // Save the active tab ID in localStorage
    //     localStorage.setItem('activeTab', $(this).attr('id'));
    // });
});


$(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
    //     $('#studentProfileUpdate').submit();
    // });

    // $('#studentProfileUpdate').on('submit', function(e) {
    //     var croppedImageData = $('#croppedImageData').val();

    // });

    // 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