@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('organizationList'), 
                'pageName' => 'Organization List',
                'pageHeader'=> 'Organization 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> Organization 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('storeOrganization') }}" enctype="multipart/form-data" name="organizationInfo" id="organizationForm" 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($organizationInfo?->profile_pic!==null)
                                                <img src="{{ asset('storage/uploads/students/thumbnail') }}/{{$organizationInfo->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">Organization ID</label>
                                                        <input type="text"
                                                            disabled
                                                            class="form-control"
                                                            placeholder="ID"
                                                            value="{{ filled($organizationInfo?->id) ? $organizationInfo->id : 'new' }}" />

                                                        <input type="hidden"
                                                            name="id"
                                                            value="{{ filled($organizationInfo?->id) ? $organizationInfo->id : 'new' }}" />

                                                    </div>
                                                    <div class="col">
                                                        <label class="form-label">Email</label>
                                                        <input type="email" required class="form-control" placeholder="E-mail" name="email" value="{{$organizationInfo?->email}}" />
                                                    </div>
                                                </div>
                                                <div class="row form-group mb-3">
                                                    <div class="col">
                                                        <label class="form-label">Name</label>
                                                        <input type="text" required class="form-control" placeholder="Organization Name" name="first_name" value="{{$organizationInfo?->first_name}}" />
                                                    </div>
                                                </div>
                                                <div class="row form-group mb-3">
                                                    <div class="col 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" value="{{$organizationInfo?->contact_number}}">
                                                    </div>
                                                </div>
                                            </div>    
                                        </div> 
                                        
                                        <div class="row form-group">
                                            <div class="col">
                                                <label class="form-label">Bengali Name</label>
                                                <input type="text" class="form-control" placeholder="বাংলায় নাম" name="bn_name" value="{{$organizationInfo?->bn_name}}" />
                                            </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="{{$organizationInfo?->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="{{$organizationInfo?->post_code}}" />
                                            </div>
                                            <div class="col">
                                                <label class="form-label">City</label>
                                                <input type="text" required class="form-control" placeholder="City (শহর)" name="city" value="{{$organizationInfo?->city}}" />
                                            </div>
                                            {{-- <div class="col">
                                                <label class="form-label">Country</label>
                                                <input type="text" required class="form-control" placeholder="Country (দেশ)" name="country" value="{{$organizationInfo?->country}}" />
                                            </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 === $organizationInfo?->country ? 'selected' : '' }}>
                                                            {{ $name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </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($organizationInfo?->status == 'Y')>Active</option>
                                                    <option value="N" @selected($organizationInfo?->status == 'N' || $organizationInfo?->status == null)>Deactive</option>
                                                </select>
                                            </div>
                                            @if(!filled($organizationInfo?->id))
                                            <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="{{$organizationInfo?->id}}" />
                                                </div>
                                            </div>
                                            @endif
                                        </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">
                                            @if(filled($organizationInfo?->id))
                                            Update Organization Info
                                            @else
                                            Add Organization
                                            @endif
                                        </button>
                                            </div>
                                        </div>
                                        
                                    </form>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if(filled($organizationInfo?->id))
                <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="{{$organizationInfo?->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>

                @endif


            </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 = '{{ $organizationInfo?->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 () {
    $("#organizationForm").validate({
        rules: {
            email: {
                required: true,
                email: true,
            },
            contact_number: {
                required: true,
                bdMobile: 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
        }
    });
    $.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");
    $("#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
        $('#organizationForm').submit();
    });

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