@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',
                'htmlElement' => '<div class="col-md-2"><button class="btn btn-info rounded-0 pull-right" id="downloadPdf">Download as PDF</button></div>',
            ])

            <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">
                            <div class="row adminContent">
                                <div class="col-md-12" id="printContent">
                                    <form method="POST" action="{{ route('storeStudent') }}" enctype="multipart/form-data" name="studentInfo" id="studentForm" class="custom form needs-validation" novalidate>
                                        @csrf
                                        <div class="row hide-in-pdf">
                                            <p>
                                            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#imageUploadContainer" aria-expanded="false" aria-controls="collapseExample">
                                              Upload Image
                                            </button>
                                            </p>
                                          <div class="collapse" id="imageUploadContainer">
                                            <div class="card card-body">
                                                <div class="row justify-content-between">
                                                    <div class="col-md-4">
                                                        <div class="input-group mb-3">
                                                            <input type="file" name="profile_pic" class="form-control" id="uploadImage" accept="image/*" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
                                                            <input type="hidden" id="croppedImageData" name="cropped_image_data">
                                                          </div>
                                                          <div class="alert alert-primary" role="alert">1. Choose file, 2. Crop and resize and 3.Upload/Save</div>
                            
                                                            <img id="cropImage" style="max-width: 100%; display: none;">
                                                            
                                                    </div> 
                                                    <div class="col-md-5 d-flex flex-column justify-content-center align-items-center">
                                                        
                                                        <div class="inline-block">
                                                        <button class="btn btn-primary" id="cropButton" style="display: none;" type="button">Crop & Resize</button>
                                                        <button class="btn btn-primary" id="uploadButton" style="display: none;" type="button">Upload/Save</button>
                                                        </div>
                                                        <div id="resizedImageContainer" style="margin-top: 20px;"></div>
                                                    </div>
                                                          
                                                </div> 
                                            </div>
                                          </div>
                                        </div>
                                        <div class="row form-group">
                                            <div class="col-md-3">
                                              
                                                @if($studentInfo?->profile_pic!==null)
                                                <img src="{{ asset('storage/uploads/students/thumbnail') }}/{{$studentInfo->profile_pic}}" style="width: 200px;background:#fff" />
                                                @else
                                                <img src="{{ asset('assets/frontend/images/avatar.png') }}" style="width: 200px;background:#fff" />
                                                @endif
                                            </div>
                                            <div class="col-md-9">
                                                <div class="row form-group mb-3">
                                                        
                                                    <div class="col">
                                                        <label class="form-label">Student ID - {{$studentInfo?->id}}</label>
                                                        <input type="hidden" disabled required class="form-control" placeholder="Last name" name="id" value="{{$studentInfo?->id}}" />
                                                        <input type="text" disabled required class="form-control" placeholder="Last name" name="id_number" value="{{$studentInfo?->id_number}}" />
                                                        <input type="text" hidden class="form-control" placeholder="First name" name="id" value="{{$studentInfo?->id}}" />
                                                    </div>
                                                    <div class="col">
                                                        <label class="form-label">Email</label>
                                                        <input type="email" required class="form-control" placeholder="E-mail" name="email" value="{{$studentInfo?->email}}" />
                                                    </div>
                                                </div>
                                                <div class="row form-group mb-3">
                                                    <div class="col">
                                                        <label class="form-label">First Name</label>
                                                        <input type="text" required class="form-control" placeholder="First name" name="first_name" value="{{$studentInfo?->first_name}}" />
                                                    </div>
                                                    <div class="col">
                                                        <label class="form-label">Last Name</label>
                                                        <input type="text" required class="form-control" placeholder="Last name" name="last_name" value="{{$studentInfo?->last_name}}" />
                                                    </div>
                                                </div>
                                                <div class="row form-group mb-3">
                                                    <div class="col">
                                                        <label class="form-label">NID</label>
                                                        <input type="text" required class="form-control" placeholder="NID Number" name="nid_birth" value="{{$studentInfo?->nid_birth}}" />
                                                    </div>
                                                    <div class="col">
                                                        <label class="form-label">Mobile</label>
                                                        <input type="text" required class="form-control" placeholder="Mobile Number" name="contact_number" value="{{$studentInfo?->contact_number}}" />
                                                    </div>
                                                </div>
                                            </div>    
                                        </div> 
                                        
                                        <div class="row form-group">
                                            <div class="col">
                                                <label class="form-label">Bengali Name</label>
                                                <input type="text" required class="form-control" placeholder="বাংলায় নাম" name="bn_name" value="{{$studentInfo?->bn_name}}" />
                                            </div>
                                        </div>
                                        <div class="row form-group">
                                            <div class="col">
                                                <label class="form-label">Father's Name</label>
                                                <input type="text" required class="form-control" placeholder="Father's Name (পিতার নাম)" name="father_name" value="{{$studentInfo?->father_name}}" />
                                            </div>
                                        </div>
                                        <div class="row form-group">
                                            <div class="col">
                                                <label class="form-label">Mother's Name</label>
                                                <input type="text" required class="form-control" placeholder="Mother's Name (মাতার নাম)" name="mother_name" value="{{$studentInfo?->mother_name}}" />
                                            </div>
                                        </div>
                                        <div class="row form-group">
                                            <div class="col">
                                                <label class="form-label">Date of Birth</label>
                                                <input type="date" required class="form-control" placeholder="dd/mm/yyyy" name="dob" value="{{ $studentInfo?->dob }}">
                                            </div>
                                            <div class="col">
                                                <label class="form-label">Nationality</label>
                                                <input type="text" required class="form-control" placeholder="Nationality" name="nationality" value="{{$studentInfo?->nationality}}" />
                                            </div>
                                            <div class="col">
                                                <label class="form-label">Gender</label>
                                                <select class="form-control" id="gender" name="gender">
                                                    <Option>Select Gender</Option>
                                                    <option value="1" @selected($studentInfo?->gender == 1)>Male (পুরুষ)</option>
                                                    <option value="2" @selected($studentInfo?->gender == 2)>Female (মহিলা)</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row form-group">
                                            <div class="col">
                                                <label class="form-label">Present Address</label>
                                                <input type="text" required class="form-control" placeholder="Present Address (বর্তমান ঠিকানা)" name="present_address" value="{{$studentInfo?->present_address}}" />
                                            </div>
                                        </div>
                                        <div class="row form-group">
                                            <div class="col">
                                                <label class="form-label">Post Code</label>
                                                <input type="text" required class="form-control" placeholder="Postcode (পোস্টকোড )" name="post_code" value="{{$studentInfo?->post_code}}" />
                                            </div>
                                            <div class="col">
                                                <label class="form-label">City</label>
                                                <input type="text" required class="form-control" placeholder="City (শহর)" name="city" value="{{$studentInfo?->city}}" />
                                            </div>
                                            <div class="col">
                                                <label class="form-label">Country</label>
                                                <input type="text" required class="form-control" placeholder="Country (দেশ)" name="country" value="{{$studentInfo?->country}}" />
                                            </div>
                                        </div>
                                        <div class="row form-group">
                                            <div class="col">
                                                <label class="form-label">Permanent Address</label>
                                                <input type="text" required class="form-control" placeholder="Permanent Address (স্থায়ী ঠিকানা)" name="permanent_address" value="{{$studentInfo?->permanent_address}}" />
                                            </div>
                                        </div>

                                        <div class="row form-group">
                                            <div class="col">
                                                
                                                <label class="form-label">Status</label>
                                                <select class="form-control" id="status" name="status">
                                                    <Option>Select Status</Option>
                                                    <option value="Y" @selected($studentInfo?->status == 'Y')>Active</option>
                                                    <option value="N" @selected($studentInfo?->status == 'N' || $studentInfo?->status == null)>Deactive</option>
                                                </select>
                                            </div>
                                        </div>
                                        
                                        <div class="row mt-3 hide-in-pdf">
                                            <div class="col d-flex justify-content-end ">
                                         <button type="submit" class="btn btn-success btn-lg">Update Student Info</button>
                                            </div>
                                        </div>
                                        
                                    </form>
                                    
                                </div>
                            </div>
                        </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/cropper/cropper.min.js') }}"></script>

<script type="text/javascript" src="{{ asset('assets/plugins/jspdf/jspdf.umd.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/html2canvas/html2canvas.min.js') }}"></script>


<script>
    var fileName = '{{ $studentInfo?->id }}' + '-student-profile.pdf';
  // PDF functionality with jsPDF and html2canvas (with orientation option)
  document.getElementById('downloadPdf').addEventListener('click', function() {
    document.querySelectorAll('.hide-in-pdf').forEach(function(el) {
            el.style.display = 'none';
        });
    const { jsPDF } = window.jspdf;

    html2canvas(document.getElementById('printContent')).then(function(canvas) {
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF({
        orientation: 'portrait', // Change to 'landscape' if needed
        unit: 'mm',
        format: 'a4'
      });

      const imgWidth = pdf.internal.pageSize.getWidth();
      const imgHeight = (canvas.height * imgWidth) / canvas.width; // Maintain image aspect ratio

      pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
      pdf.save(fileName);
      document.querySelectorAll('.hide-in-pdf').forEach(function(el) {
                el.style.display = '';
            });
    });
  });
</script>

<script>
$(document).ready(function () {
    $("#studentForm").validate({
        rules: {
            email: {
                required: true,
                email: true,
            },
            contact_number: {
                required: true,
            }
        },
        messages: {
            email: {
                required: "Email is required",
                email: "Enter valid email addrss"
            },
            contact_number: {
                required: "Phone number required",
            }
        },
        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
        }
    });
    $("#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
        $('#studentForm').submit();
    });

    $('#studentForm').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